컴퓨터 도입 이후의 design의 발달과 변화

소개글

컴퓨터 도입 이후의 design의 발달과 변화에 대한 보고서 자료입니다.

목차

1. 영화

2. 애니메이션

3. 컴퓨터게임

4. 웹

본문내용

한다. 재클린은 특정한 개성을 지닌, 크레이이티브한 스타일리스트였다. 그녀의 화려하고 다양한 포트폴리오들을 특색 있게 보여주기 위해 사이트 자체의 복잡한 디자인은 피하고 최소한의 간단한 컨텐츠를 통해 미니멀한 느낌의 사이트를 진행하기로 했다. 대신 사이트가 단조롭게 보이지 않도록 하는 개성적인 요소가 필요했는데 거기서 나온 아이디어가 키보드 네비게이션이었다.
Jacziemer.com 작업에는 전반적으로 플래시 MX가 사용되었다. 앤디는 마야를 이용해 키보드 이미지를 디자인했고, 프로그래밍 언어로는 파이손을 사용해 액션스크립트의 반복되는 몇몇 섹션들을 생성했으며, 리눅스 기반의 조 텍스트 에디터(Joe text editor)를 사용해 스크립트를 작성했다.
잭자이스머의 백미
-키보드 네비게이션
사이트에 들어가게 되면 타 사이트에서 흔히 마주치는 메뉴바 대신 키보드 이미지의 몇 개의 키에 ‘contact', 'mail to' 등의 안내 문구를 표시한 것이 눈에 띈다. 키보드가 바로 사이트의 네비게이션 버튼이라는 것. 마우스 액션을 할 수 있는 것은 오직 Enter 버튼이다. 다음 페이지로 이동하면 잭 자이스머의 포트폴리오들이 썸네일로 된 페이지를 접할 수 있는데 마우스를 아무리 클릭해도 썸네일은 확대되지 않는다. 하단의 ’마우스 대신 키보드의 A-Z의 키를 누르거나 홀드하십시오(Don't Use the Mouse! Please Press & Hold Keys A-Z On your Keyboard)'라는 경고가 눈에 띄는데 자세히 보면 이러한 썸네일들은 키보드의 A부터 Z까지의 키 위치와 동일한 배열로 놓여있다. 또한 기본적으로 있어야 할 듯한 재클린의 장황한 소개 페이지와 같은 별도의 페이지는 별도로 존재하지 않는다. 숫자 키 중 1을 누르면 사이트의 네비게이션 키를 설명하는 인트로의 키보드 이미지가, 2를 누르면 재클린의 메일 주소가, 3을 누르면 재클린의 클라이언트 목록이 나타난다. 이들은 웹 페이지가 아닌 단순한 플래시 액션으로만 구현될 뿐이다. 그 외 7,8,9 숫자 키가 배경음악을 담당하는 것이 전부다.
마우스 액션에 익숙한 방문자들이 대부분이라 사이트의 인터페이스에 쉽게 적응하지 못했다는 말들도 있었다. 하지만 키보드 네비게이션을 도입한 후 방문자수가 점점 증가했고, “네비게이션 다음으로 좋았던 것이 잭 자이스머의 작업”이라는 말이 있을 만큼 이 새로운 네비게이션에 대한 호응이 대단했다고 한다.
잭자이스머 사이트의 메뉴는 현재 포트폴리오 페이지 외에 ‘contact/ help/mail/song/img'의 네가지가 전부지만 앞으로 새로운 메뉴가 추가됨에 따라 키보드의 새로운 네비게이션 키들도 추가될 예정이다. 현재 메뉴를 단순하게 둔 것이 바로 그 이유다. Zeppzepp 에이전시의 기발한 네비게이션 아이디어가 돋보이는 잭자이스머의 다음 리뉴얼이 기대된다.
4) 취화선 (http://www.chihwaseon.com)
‘세계적인 어워드를 휩쓰는 한국의 웹’
지난 달, 선도적인 국내 웹 에이전시 중 하나인 포스트비주얼이 제작한 영화 ‘4인용 식탁’ (영문명 ‘the Uninvited')과 영화 ’스캔들‘ 웹 사이트가 2004년 8월에 발표된 2004 뉴욕 광고제 디자인, 프린트 앤 외부광고 경쟁부문(Design, Print & Outdoor Advertising Competiton)에서 웹 사이트 부문 금상과 파이널리스트를 수상하였다. 또한 이 두 작품은 2004년 9월에 발간된 커뮤니케이션 아트 인터랙티브 애뉴얼 10에서도 나란히 인터랙티브 부문 위너로 선정되는 영광을 차지하였다.
위 이미지는 2002년 칸 국제광고제 필름이벤트 프로모션 부문에서 은사자상을 수상한 All-M에서 제작한 ‘취화선’ 웹 사이트의 인트로 페이지다. 조선의 화가 장승업의 생을 재조명한 영화의 홍보 사이트인 만큼 그러한 영화 내용의 특징을 살리기 위해 인트로 페이지에서는 화선지 위에 먹물을 떨어뜨리듯한 효과를 주고, 그 안에서 마우스 포인터를 따라 물고기가 움직이는 플래시 액션을 주었다.
두 번째 이미지는 메인에서 이루어지는 플래시 액션의 캡쳐이다. 첫 번째 인트로와 마찬가지로 붓으로 전체적인 그림을 그리는 듯한 화면에 장승업에 대사같은 글씨들이 써지면 그 위에 다시 붓으로 그림을 그리듯이 액션이 진행된다. 그리고 그 위에 메뉴들이 구성된다. 붓과 먹이라는 소재를 통해 플래시 액션을 구성하므로써 영화의 특징을 더 잘 표현하고 있다.
세 번째 사진이 메뉴에서의 액션이 끝나가는 장면이다. 이 장면은 붓으로 그림을 그리는 듯한 플래시 액션이 끝나면서 학이 허공을 향해 날아가고 장승업이 소리치면서 메뉴에서의 두 번째 플래시 액션이 끝이난다. 뒤에는 다시 장승업의 그림으로 보이는 이미지가 배경의 한 부분을 이루고 있어 역시 영화의 특징이나 주제를 소개하는 듯함을 볼 수 있다.
네 번째 사진은 여러개의 링크중에서 스텝을 소개하는 링크인데, 캡쳐한 이미지는 에 대한 세부링크의 모습이다. 역시 지금까지와 마찬가지로 화선지 위에 붓으로 먹을 칠한듯한 바탕위에 제작자에 대한 소개나 멘트등이 이어지는 것을 볼 수 있다.
또한 ‘취화선’의 웹 사이트 뿐만 아니라 ‘2004 뉴욕광고제’에서 금상을 수상하고 ‘2004 칸 국제광고제 사이버 부문’에서도 황금사자상을 수상한 영화 ‘4인용 식탁’의 홈페이지와 독특한 구성으로 많은 네티즌의 눈길을 끄는 영화 ‘주홍글씨’와 ‘내 머릿속의 지우개’의 웹 사이트도 주목받는 사이트이다.
기존의 단순히 ‘보여주기’를 위주로하던 웹 사이트들과는 달리 사용자, 방문자가 직접 체험하고 느끼는 사이트들이 많이 생겨난 것을 볼 수 있다. 영화에 촬영장 세트를 웹상으로 옮겨 놓은듯한 ‘주홍글씨’의 홈페이지는 방문자가 직접 웹상의 집을 이리저리 돌아다니며 영화에 대한 단서를 볼 수 있는 독특한 홍보방식을 이용했으며 ‘내 머릿속의 지우개’의 웹 사이트에서는 영화의 일부분을 마치 동영상처럼 구성해 방문자가 직접 스토리와 영상을 보도록 유도하는 형식을 취하고 있다.
이 같은 추세는 국내 뿐 아니라 국제적으로도 나타나는 추세이며, 앞으로도 더욱 다양한 형식, 기법 등이 웹상에 나타날 것이다.

키워드

컴퓨터,   웹,   디자인,   design,   history,   web,   역사,   design history