디자인스튜디오 졸업작품계획서

2013.12.01

학번 2010300174

이름 권준성

1. 졸업 작품 개요

2. 사례조사

3. 졸업작품 소개

4. 졸업작품을 마치며

목차

1. 졸업 작품 개요

3 / 18

이름(학번) : 권준성(2010300174)

작품 제목 : 온라인 전시사이트 구축

작품 내용 요약

지금 1년은 예전 10년과 같다.

2050년도 37년 후….

타고, 달리고, 내리는 곳의 그 때의모습은 어떠할까?

“미래형 운송수단(Future Transportation)”.

20여명의 디자이너들이 그 때를 미리 가본다.

2013 SDU 디지털디자인학과 졸업작품 웹사이트.

졸업작품

전시사이트

컨셉

요구

사항

트랜드

적용

기술

정보

구조

제약

사항

작품의 개념도

주제설명

세부주제

Station

Vehicle, Vessel

Gas station, Car center

Traffic sign

Road

사례조사

2008~2012 졸전사이트 확인

타학교 온라인 졸전사이트 분석

예술/IT관련 해외 전시사이트

고찰

요구사항

미래지향적이고, 운송수단과 관

련된 스타일의 분위기

인트로, 교수님 및 학생들 인터

뷰, 졸전작품 갤러리, 맺음말

컨셉 Simple

Responsive Web

“미래의 운송수단(Future Transportation)” 졸업작품 전시 웹사이트

키워드 : Future, Station, Vehicle(Vessel), Gas station, Car center, Traffic sign, Road

4 / 18

1. 졸업작품의 개요

현황(사례조사) 2008~2012년도 졸업작품 전시사이트 정보구조 및 제작 기술 파악

5 / 18

2. 사례조사

년도 정보구조 적용기술

2008 INTRODUCTION / GALLERY / PROCESSOR / ACTIVITY 전공소개 학생작품/졸업전시회 축사/지도교수 전공활동/학습활동

FLASH, HTML

2009 INTRODUCTION / GALLERY / PROCESSOR / ACTIVITY 학부소개/전공소개 졸업작품/과제작품 지도교수/축사 현장스케치/참여학생후기/자유게시판

FLASH, HTML

2010 INTRODUCTION / GALLERY / PROCESSOR / ACTIVITY 전공소개 축사/지도교수 참여학생후기/현장스케치

FLASH, HTML

2011

2012 What’s SDDG / Introduction / Gallery / Professor / Episode Javascript, HTML

현황(사례조사) 타학교 온라인 졸업작품 전시 사이트 장단점 분석

홍익대학교 디지털미디어디자인 졸업작품전 2012 (http://hongikdmd.com/meme/)

6 / 18

2. 사례조사

장점

• 반응형 웹(구축성)

• 작품 표출 및 설명(사용성)

• 심미성

단점

• 접근성(사용성) 미비

• 자바스크립트에러(구축성)

현황(사례조사) 타학교 온라인 졸업작품 전시 사이트 장단점 분석

국민대학교 시각디자인학과 2012 졸업작품전(http://www.kmuvcd.com)

7 / 18

2. 사례조사

분석

• 정보구조가 너무 단순하다

• 작품에 대한 설명이 너무 간단하다.

• 인터랙션에 대한 고려가 없다

현황(사례조사) 갤러리 작품 리스트 및 인터랙션 벤치마킹

8 / 18

2. 사례조사

마우스롤오버시 인터랙션

현황(사례조사) 갤러리 작품 리스트 및 인터랙션 벤치마킹

9 / 18

2. 사례조사

마우스롤오버시 인터랙션

내용 및 범위 정보구조(Information Architecture)

10 / 18

3. 졸업작품 소개

Gallery Episode Introduction

• 지난졸업작품 • 학과홈페이지 • 학교홈페이지

•졸업작품전 소개 •인사말 •학과소개

•작품소개 •Episode 사진 •Episode 동영상

2013 SDU 디지털디자인학과 졸업작품 전시 웹사이트

11 / 18

3. 졸업작품소개 - 시안 #1

12 / 18

3. 졸업작품소개 - 시안 #2(채택)

13 / 18

3. 졸업작품소개 - 시안 • 작품리스트를 정형적으로 표현

• 작품배열순서는 랜덤하게 표출

• 마우스롤오버 인터랙션 – 선택된 작품은 높이 혹은 너비가 넓어지면서 작가정보 혹은 작품설명 추가 표출

• 작품리스트를 비정형적으로 표현

• 작품배열순서는 랜덤하게 표출

• 마우스롤오버 인터랙션 – ①선택된 오브젝트만 color 유지하고 나머지는 작품은 흑백으로

• ② 작품리스트가 마우스를 움직일 떄 동적인 움직임 표현

14 / 18

3. 졸업작품소개 - 메인

• 자유로움을 표현하기 위해 비정형 레이아웃을 선택

• Simple한 정보 구조 설계

• Interactive Animation 기법 채용

15 / 18

3. 졸업작품소개 - Episode • 메뉴 접기 기능

16 / 18

3. 졸업작품소개 - Introduction

17 / 18

3. 졸업작품소개 – 졸업작품전 로고 제작

• 학교로고와 아이덴티티 통일시키고

• 학과 색인 오렌지 색 채택하여

• 로고와 어플리케이션 제작

18 / 18

4. 졸업작품을 마치며

극도로 양극화되고 있는 사회 프레임 한편으론 통섭과 융합의 세상 그 한가운데 Core로서 Digital Design이 있다. 우리는 그 전쟁터의 핵심 전사이다. 그러한 자부심과 함께 우리 스스로 각자가 생산 완결 구조를 갖추었으면 좋겠다는 바람이 있다. 열정으로 독려하고 지도해 주신 김미연교수님과 졸업전시회에 함께 참여한 고생한 학우님들께 감사를 드립니다.

감사합니다