가 . 애니콜 스타일폰 (http://www.anycall.com/event/style_w570/event_main.jsp )
스토리텔링 유형 : 감성자극형, 멀티미디어형
[그림 4-1] 애니콜 스타일폰 웹사이트의 메인화면
스타일 보고서라는 잡지형식을 본떠 디자인 되었다. 스타일을 입었다. 매너는 기본이다. 능력까지 갖췄다. 3가지 테마로 구성되어 있으며, 제품의 특성을 각 테마의 스토리를 통해 전달하는 형식이다. 2008년 베이징 올림픽 배드민턴 금 메달리스트인 이용대 선수를 모델로 발탁하여 제품을 모델에게 의인화 시켜, 스타일 좋고, 핸드폰의 디자인이 스타일을 멋지게 꾸며주면서, 다양한 기능이 우수하다는 이미지를 각인시키려는 의도를 담고 있다. 블랙의 배경을 사용하여 세련되고 모던한 느낌과 플래시 효과의 모션으로 시선을 끌며 사용자의 흥미 를 유발한다.
(1) 레이아웃과 구성
애니콜 스타일폰의 하단에 내비게이션이 배치되어 있는 2단 수평구조이며, 메 인 및 서브에서 동일하게 고정영역을 사용하여 모든 콘텐츠를 보여준다. 하단 의 메뉴 뿐 아니라 중앙의 콘텐츠 영역에서도 플래시로 3가지 메인메뉴가 랜
덤 하게 변하면서 동적인 효과로 시선을 끄는 효과와 함께 메뉴를 바로 이동 할 수 있는 내비게이션 역할도 수반된다.
이미지영역
메뉴영역
[그림 4-2] 애니콜 스타일폰 웹사이트의 레이아웃
(2) 컬러
명도가 낮은 블랙에 가까운 브라운컬러의 배경을 통해 도시적이고 세련된 느 낌을 표현하면서 타이포의 정돈된 느낌의 일정한 서체와 포인트를 주는 서체 에 컬러링을 통해 잡지의 표지를 장식하였다. 3가지 메뉴의 각기 다른 컬러를 통해 메뉴가 담고 있는 정보, 또한 다른 스토리가 담겨 있다는 것을 상징하며, 상징컬러를 사용하는 그 서브가 유사 색상으로 배색되어 차분하면서 가볍지 않은 자연스러운 흐름과 통일감을 높여주었다. 포인트 컬러역시 동일 색조의 채도가 높은 컬러로 너무 튀지 않게 무난한 강조를 통해 전체적인 조화도 높 은 컬러의 배색을 하였다.
[표 4-4] 애니콜 스타일폰 웹사이트의 컬러 시스템
(3) 타이포그래피
타이포에 비중이 높은 잡지책 의 느낌을 전달하기 위해 고딕 체로 가독성을 높여주었으며 단조로움을 덜어 고딕체의 강 약을 통해 재미와 리듬을 심어 주었다. 캘리그래피로 포인트 를 주었으며, 전체적으로 타이 포를 통해 그래픽적 인상을 심 어 이미지 못지않게 사용자에게 시각적인 즐거움을 주었다.
(4)동적효과
세 가지 대 메뉴의 내비게이션을 메인의 중앙에 3차원 세계를 연상케 하는 이 미지를 플래시 효과로 분열과 조합의 모션을 통해 흥미를 유발하여 시선을 집 중하게 한다. 각 메뉴를 잡지책처럼 디자인 하여 마치 잡지책을 넘겨 보는듯한 모션을 주어 생생함을 전달한다. 멀티미디어형 스토리텔링에서 동적효과는 정 보전달에 큰 역할을 한다.
나 . 모토로라 z6m핸드폰 (http://z6m.mymotorola.co.kr/main.htm )
스토리텔링 유형 : 참여유도형
[그림 4-4] 모토로라 z6m 웹사이트의 메인화면 [그림 4-3] 애니콜 스타일폰 웹사이트에
사용된 타이포
블랙의 시크(chic)한 바디에 오렌지 빛의 포인트가 매력적인 모토로라 z6m의 광고 사이트이다. z6m의 광고 사이트는 참여유도형의 스토리텔링이 잘 표현된 사이트 이다. 제품의 새로운 기능 등의 스펙(spec)이 주가 아니라 인터랙티브 한 요소를 통해 사용자의 경험을 일으켜 흥미를 유발시키며, 제품의 인지도와 경험으로 얻어진 참신한 이미지를 각인시키기 위한 광고 사이트이다. 패턴을 만들어 띄워서 다른 사용자들과 공유하여 커뮤니티를 형성할 수 있고 본인이 만든 오렌지의 유사색상으로 만들어진 이미지를 다운받아 핸드폰 배경화면으 로 사용할 수 도 있으며, 내가 만든 음악을 저장하여 스크랩하여 소장할 수 있 는 즐길거리를 제공하여 참여를 유도한다. 참여유도형의 스토리텔링 광고 사이 트는 제품의 인지도 상승에 목적을 두기 때문에 제품에 관한 상세정보는 정보 전달형 사이트에 비교하여 다소 미흡한 부분을 하단의 글로벌 메뉴에 상세 정 보를 따로 볼 수 있게끔 상세하게 제작하여 배려하였다.
(1) 레이아웃과 구성
메인메뉴를 PATTERN , COLOR, MUSIC의 3가지 스토리로 구성되어 있는 스토 리텔링 구조이다. 하지만 따로 실험적인 형태(Experimental Shape)의 레이아웃 으로 메인메뉴의 내비게이션을 따로 디자인 하지 않았다. 이 때문에 정보의 접 근이 용이하다. 하지만 각각의 메뉴 안 에서 메인메뉴로의 점프버튼을 양옆에 작은 아이콘으로 배치하여 주목성이 떨어져 고 연령층의 사용자들에게는 다소 사용성이 떨어져 다른 메뉴로의 이동이 원활하지 않다는 단점이 있다. 하단에 글로벌 내비게이션이 배치되어 있다.
이미지영역 메뉴영역
[그림 4-5] 모토로라 z6m 웹사이트의 레이아웃
(2) 컬러
무겁고 어두운 블랙을 배경컬러에 채도가 높은 주황색을 메인컬러로 사용하여 더욱더 선명한 느낌으로 다양한 색을 사용하지 않아도 세련된 느낌과 심플하 면서도 독특한 개성을 연출한다. 모토로라 z6m 핸드폰에 쓰인 주황색을 통해 이미지를 전달하려는 컨셉 이다. 어두운 배경 속에서 채도가 높은 주황색은 더 욱더 선명한 느낌을 전달하며, 발랄하고 적극적이며 창조적인 화려함을 강조하 며 사이트의 전체적인 분위기를 연출한다. 자칫 단조로운 배색으로 줄 수 있는 지루함을 메인컬러와의 유사색상으로 안정된 느낌으로 포인트를 주면서 재미 를 더 했다.
[표 4-5] 모토로라 z6m 웹사이트의 컬러 시스템
(3) 타이포그래피
전체적으로 고딕을 사용하여 통 일감을 주어 가독성을 높여 주 었다. 한 종류의 폰트 사용으로 주목성을 떨어뜨릴 수 있으나, 주목성이 높은 컬러의 사용으로 단점을 보완하였다.
[그림 4-6] 모토로라 z6m 웹사이트에 사용된 타이포
(4) 동적효과
각각의 메뉴는 게임형식으로 구성되어 있다. 다이나믹(dynamic)한 플래시 이펙 트를 감상하며 사용자의 참여로 새로운 창작물을 만들어 낼 수 있는 재미있는 요소로 작용한다. 메뉴이동에 인터랙티브(Interactive)한 방식으로 사용자의 마 우스의 활용으로 다이나믹한 이펙트를 연출하였지만, 고 연령층의 사용자에게 는 사용성이 떨어져 혼란스러움을 줄 수 있는 단점을 고려해야한다.
다 . 싸이언 뷰티폰 (http://www.cyon.co.kr/lgcyon/micro_site/viewty_phone)
스토리텔링 유형 : 멀티미디어형
[그림 4-7] 싸이언 뷰티폰 웹사이트 메인화면
who, what, when, how, where, why 육하원칙의 스토리로 멀티미디어 영상을 통한 정보전달의 목적을 둔 광고 사이트이다. 각각의 메뉴는 제품의 기능을 누 구에게, 필요한지, 기능을 어떻게 사용하는지, 제품의 새로운 기능이 언제 사용 되는지, 그리고 어떻게 사용하는지, 왜 싸이언 뷰티폰이 사용자에게 필요한지 의 내용으로 구성되어 제품의 특징을 사운드와 영상을 통해 TV광고를 보듯이 감상하며 자연스럽게 정보를 습득할 수 있게 도와준다.
(1) 레이아웃과 구성
싸이언 뷰티폰의 하단에 내비게이션이 배치되어 있는 2단 수평구조이며, 메인 및 서브에서 동일하게 고정영역을 사용하여 모든 콘텐츠를 보여준다. 하단의 내비게이션을 통해 제품의 정보에 대해 접근한다.
이미지영역
메뉴영역
[그림 4-8] 싸이언 뷰티폰 웹사이트의 레이아웃
(2) 컬러
하이테크한 사이버공간을 연출하기 위해 배경을 검정색으로 주조색 으로 사용 하여, 메인콘텐츠의 내용을 돋보이게 해주는 역할을 한다. 가독성과 주목성을 높여주기 위해 검정과 반대되는 흰색으로 메뉴의 색을 선정하였고 포인트 컬 러는 하단의 명도가 낮은 파랑을 사용하여 게이지 바를 배색하였다. 멀티미디 어를 돋보이게 하기 위한 목적으로 심플하게 정보전달에 집중하도록 배색컬러 의 색상의 사용을 다소 제한하였다.
[표 4-6] 싸이언 뷰티폰 웹사이트의 컬러시스템
(3) 타이포그래피
멀티미디어의 특성상 동영상을 통해 사운드와 영상으로 정보를 전달하는 특성 을 지닌 본 사이트 에서는 타이포의 활용이 낮다. 동영상속의 설명문구는 빠르 게 지나가는 영상 속에서 가독성을 높이기 위해 윤고딕 서체를 사용하였다.
메뉴에서의 픽셀폰트의 사용으로 사이버느낌의 효과를 더했다.
(4)동적효과
제품의 특징을 who, what, when, now, where, why 메뉴로 구성하여, 메뉴별로 텍스트와 이미지로 디자인된 평면적인 페이지 구성이 아닌 제작된 영상을 통 해 제품의 정보를 전달한다. 기계적인 효과음향과 사람의 음성으로 설명을 이 어나가며 모델의 실체감을 주는 표현과 함께 흥미를 유발하며, 광고를 보듯 더 빠르게 사용자의 이해를 돕는다.
라 . 싸이언 시크릿폰 (http://www.cyon.co.kr/event/secret/index.html )
스토리텔링 유형: 감성자극형, 멀티미디어형
[그림 4-9] 싸이언 시크릿폰 웹사이트의 메인화면
오드리햅번 처럼 영원한 그녀의 스타일을 기억하는 현 시대에, 특별한 블랙라 벨을 컨셉으로, 변치않는 비밀스럽고 아름다운 그녀의 스타일을 떠올리며 핸드 폰의 이미지를 연상시키게 하는 의도를 지닌 광고 사이트이다.
(1) 레이아웃과 구성
싸이언 뷰티폰의 하단에 내비게이션이 배치되어 있는 2단 수평구조이며, 메인 및 서브에서 동일하게 고정영역을 사용하여 모든 콘텐츠를 보여준다. 하단의 내비게이션을 통해 제품의 정보에 대해 접근한다.
이미지영역
메뉴영역 [그림 4-10] 싸이언 시크릿폰 웹사이트의 레이아웃
(2) 컬러
본 제품은 신비스러운 바이올렛과 고급스러운 골드의 두 종류의 컬러를 내세 워 블랙라벨이라는 고급화된 이미지를 어필하기 위해 블랙을 메인컬러와 배경 컬러로 사용하였다. 블랙은 낮은 명도로 무겁고 어두운 느낌을 전달하지만, 보 이지 않는 베일에 가린 듯한 신비한 느낌과 비밀스러운 느낌을 전달하기도 한 다. 그리고 깨끗한 이미지를 강조하기 위해 화이트를 첨가하여 함께 메인컬러 로 사용 되었다.
[표 4-7] 싸이언 시크릿폰 웹사이트의 컬러시스템