상세 컨텐츠

본문 제목

웹디자인 신기술 트렌드 및 적용 사례

마케팅 전략/마케팅칼럼

by Marketcast 2013. 4. 10. 08:30

본문

 

사용자들에게 재미를 선사하고 적극적인 참여를 이끌어 내기 위하여 웹사이트 기술 및 디자인은 점점 더 동적인(Dynamic)효과를 적용하고 있습니다. 그리고 모바일  및 테블릿 등의 다양한 디바이스들이 등장하면서 자연스럽게 이러한 환경에 부합하도록 디자인 구성도 변화하고 있습니다.

 

현재 웹사이트에는 CSS3 , JQuery, HTML5 같은 레이아웃 과 스타일에 동적인 효과를 구현하기 위한 기술들이 많이 활용되고 있습니다. 더불어 다양한 외부 어플리케이션(API)을 결합하여 좀 더 웹사이트를 풍성하게 만들어 주고 있습니다. 그러면 이러한 기술들이 어떻게 웹사이트에 멋지게 적용되고 구현되는지를 살펴보도록 하겠습니다. 

 

1.푸조의 하이브리드4 (Hybrid4)  / graphicnovel-hybrid4.peugeot.com

 

푸조는 디젤엔진 과 전기모터가 결합된 자동차인 하이브리드4를 출시하면서 하이브리드 4의 성능을 쉽게 체험할 수 있도록 웹사이트에 영화 미션임파서블 같은 스토리로 애니메이션을 구성하였습니다. 스토리는 비밀요원이 보안문서를 확보한 후 푸조의 하이브리드4의 4가지 기능을 활용하여 안전하게 탈출한다는 내용입니다. 

 

 

사이트는 마우스 클릭 없이 간단한 스크롤동작 만으로 마치 영화스틸컷 같이 움직이는 장면같은 역동적인 효과를 제공하고 있습니다. 마우스를 스크롤하게 되면 상하좌우로 움직여 스토리에 맞는 다양한 장면효과를 전달해 주고 있습니다. 기존에는 마우스를 클릭하면서 한장면 한장면 넘기면서 보거나 플래쉬 애니메이션으로 무겁게 실행 했는데 HTML 기술만으로 가볍게 구현하였습니다.

 

여기에는 모니터상에서 화면이 상하좌우로 스크롤 될 때, 배경이미지들과  화면에 나타나는 객체이미지들간의 시차가 발생하여 스크롤 되도록 하는 기술(Parallax  Scrolling)이 활용되었습니다. 현재 jQuery, 자바스크립트, CSS3 기술을 사용하여 구현하고 있으며 기존 플래쉬 애니메이션을 대체하여 한 화면에 스토리 전달 및 브랜드의 컨셉을 자연스럽게 연결시켜는 역할에 많이 활용되고 있습니다.  

 

2. 현대자동차 엘란트라  / www.pickmyelantra.com

 

현대자동차는 북미에서 출시되는 엘란트라(Elantra)2개 신규모델(Coupe, GT)의 인지도를 높이고 구매 결정을 유도하기 위하여  ‘Driveway  Decision  Maker’라는  캠페인 사이트를 개설하였습니다. 구매결정을 위해서 자기집 입구에 실제 엘란트라가 세워져 있는 모습을 보면 구매에 관심을 가지지 않을까? 라는 생각을 구현한 것입니다.

 

캠페인 사이트에서 차량을 선택한 후 자신의 집 주소를 입력하면 엘란트라가 역동적으로 길거리를 질주하면서 서서히 실제 자신의 집 앞 길가에 세워진 모습을 보여줍니다. 실제 자신의 집 앞에 차가 주차된 것처럼 볼 수 있는 것은 실제 거리를 모습을 보여주는 구글의 스트리트뷰의 데이터를 연동하였기 때문입니다. 

 

 

그리고 차가 질주하는 역동적인 모습을 위하여 3D 프로젝트 맵핑 방식을 활용해 자동차를 촬영하여 보여주고 길거리 배경은 3D애니메이션, 구글맵 과 스트리트 뷰를 겹쳐서 구현하였습니다. 더불어 개인화된 고객경험 과 재미를 증대시키기 위하여 플래쉬 기술을 활용하여 사용자가 직접 자동차 주차 위치 및 맘에 드는 컬러를 선택할 수 있도록 하였습니다. 

 

3. 마린플러스  / www.marine-plus.co.kr

 

마린플러스는 바닷깊은 심층수를 이용한 화장품 브랜드 사이트입니다. 메인 화면은 크게 3개의 영역으로 구성되어 있습니다. 첫번째 영역은 마치 바다속에 들어온 느낌이 물씬 풍기도록 바닷속 배경이미지 와 함께 동영상을 보여줘 고객들이 브랜드를 체험할 수 있도록 하고 있습니다. 두번째 영역은 마린플러스 제품군을 소개하는 영역으로 좌우 스크롤 만으로 간편하게 제품특징 과 함께 이미지를 볼 수 있도록 하였습니다. 마지막 영역은 마린플러스의 공지, 이벤트,  제품리뷰,커뮤니티등의 내용들을 한눈에 파악할 수 있도록 이미지 중심의 격자 형태로 구성하였습니다. 

 

 

자칫 메인화면에 많은 내용을 보여줘 사이트가 복잡할 수 있는 단점을 한 화면에서 스크롤 하면서 순차적으로 각 영역을 보여주는 스크롤링 기법을 적용하여 구현하였습니다. 메인의 스크롤링 기법은 서브화면의 브랜드 스토리에서 마우스 스크롤 만으로 점점 더 바다깊은 곳으로 들어가는 느낌을 함께 제공하고 있습니다. 그리고 다양한 제품 및 리뷰에 관한 내용을 리스트 형태가 아닌 비주얼 방식으로 구현하여 보여주는 핀터레스트(Pinterest)방식의 유저 인터페이스를 적용하고 있습니다. 

 

마린플러스는 기존 브랜드 사이트가 상품소개에 중점을 둬 고객과의 커뮤니케이션에 소홀해 질 수 있는 한계를 스크롤링 방식 과 비주얼 인터페이스 구성으로 다양한 상품 정보제공 과 고객과의 소통을 한꺼번에 실현할 수 있도록 구성하였습니다.      

 

4. 오즈 그레이트 앤드 파워풀 / www.findyourwaytooz.com

 

오즈의 마법사를 새롭게 해석한 판타지 영화인 ‘오즈 그레이트 앤드 파워풀’ 사이트 입니다.

처음 사이트에 들어가면 해외사이트임에 불구하고 국가의 아이피 주소(IP Address)를 인식해 한글로 번역된 내용이 보이도록 하고 있습니다.

 

전체적인 사이트 구성은 몽환적이면서 환상적인 분위기가 연출되도록 디자인을 구성하였으며 자신이 직접 스토리를 선택해 가면서 영화속의 모험세계를 주인공이 된 것 같은 느낌을 제공하고 있습니다. 그래서 전체적인 화면구성은 마우스 클릭이나 스크롤 없이 마우스 이동만으로 전체 이미지가 보여지면서 이야기가 전개되도록 하였습니다.  

 

 

디자인 구성은 메인화면에 모든 내용을 확인할 수 있도록 전체화면을 슬라이딩 방식으로 볼 수 있는 풀스크린 슬라이드쇼 방식(Full Screen Slide Show)을 적용하여 동영상처럼 보이도록 하였습니다. 그리고 3D로 구현된 영화속의 환상적인 배경을 사이트에서도 고스란히 느낄 수 있도록 별도의 플러그인 없이 웹에서 인터렉티브한 3D그래픽을 제공하는 웹기반의 그래픽 라이러브리인 기술인‘WebGL’을 적용하였습니다. 전체적인 사이트 디자인은 플래쉬 나 동영상이 아닌 CSS3 만으로 제작하였습니다. 

 

영화가 제공하는 느낌 과 스토리를 어떻게 똑같이 웹에서 사용자들에게 전달하는냐가 중요한데 이러한 문제를 3D기술로 환상적인 모험의 세계를 연출하고 CSS로 인터렉티브한 스토리를 펼쳐나가도록 잘 구현하였습니다.

 

앞에서 보셨던 것처럼 현재 웹사이트 다양한 디자인 및 기술이 활용되고 있습니다. 이러한 특징을 살펴보면 다음과 같습니다.   

 

첫번째는 한 화면에 모든 것을 다 보여준다는 것입니다. 별도의 클릭 없이 마우스 스크롤만으로 간편하게 모든 내용을 한 화면에서 확인할 수 있도록 해주고 있습니다. 

 

두번째는 다양한 브라우저 및 디바이스 환경을 고려하여 플래쉬 나 별도 플러그인 없이 HTML5 나 CSS만으로 사이트를 구성하여  편리하게 이용할 수 있도록 하고 있습니다. 

 

세번째는 사용자와의 상호작용 과 체험을 좀 더 풍성하게 전달하기 위해 다양한 외부 어플리케이션(API)이나 차별화된 웹기술을 적용하고 있다는 것입니다.

 

출처: 디지털이니셔티브 그룹 김형택 대표 / 네이버 SEARCH N Zine 12호 기고(2013.04)

 

관련글 더보기

댓글 영역