Evaluation 평가 - 평가내역

WEB AWARD KOREA evaluation

등록정보

타이틀 올 뉴 닛산 무라노
ALL NEW NISSAN MURANO
서브타이틀 올 뉴 닛산 무라노
ALL NEW NISSAN MURANO
URL http://webhtml.newturn.co.kr/doonam/work/nissan/murano/index.html#/main 사이트보기
소개 올 뉴 무라노(ALL NEW MURANO)의 마이크로사이트
키워드 닛산,NISSAN,자동차,웹표준,웹접근성,SUV
사이트보기
제작년월 2016.6
등록구분 데스크탑웹
후보등록분야 제품브랜드 부문 > 자동차
등록분야 목록보기
세부분류 제조 > 자동차
소속사 닛산
제작사

TBWA 정보보기

(주)뉴턴그룹 정보보기

제작진
PMTBWA
기획조원희,최재민대리
디자인김동겸
개발최수민
퍼블리싱이두남
3D박성원
웹사이트 설명 제작목적
올 뉴 무라노는 SUV가 가진 역동성과 프리미엄 인테리어를 갖춘 프리미엄 모델이다. 올 뉴 무라노는 3세대 풀체인지 모델이며 고급 소재와 사양을 갖췄다. 따라서 마이크로사이트도 올 뉴 무라노의 고급스러움을 최대한 부각하는 방향으로 기획 방향성으로 잡았다.

기획의도
닛산 올 뉴 무라노의 주요 타깃은 40대 남성이다. 하지만 30대와 50대까지 모두 매력적인 제품이다. 이처럼 포괄적인 타깃층을 대상으로 하는 마이크로사이트를 제작했다.

특징(조형, 기능, 사용성 등 구체기술)
심플한 이미지와 카피로 젊은 층 뿐만 아니라 50대 이상도 이용할수 있게끔 레이아웃을 반영했다. 폰트는 블랙 바탕화면에서는 화이트로, 화이트 바탕화면에서는 블랙으로 보여지며, 핵심 문구를 가장 크고 굵게 표현했다. 모바일 웹의 경우에는 사용자의 편의성을 위해 각 카테고리 페이지 하단마다 네비게이션 바를 삽입해 다른 카테고리로 쉽게 이동할 수 있게 했다.
거의 모든 페이지는 풀 스크린 이미지를 적용했으며, 배경화면에 블랙 및 화이트 색상을 중심으로 한 사선 그래픽을 사용했다. 또한, 올 뉴 무라노의 색상을 사용자가 직접 선택한 다음, 마우스 드래그로 차량 외·내부를 360도로 꼼꼼하게 확인 가능하도록 만들었다. 이뿐만 아니라, 버튼마다 CSS3 모션을 주고, 마우스로 사이트를 긁었을 때의 색상까지도 무라노의 키 컬러로 맞추는 등 세심한 부분에도 신경을 썼다.
특히, 최근 웹 환경에 맞춰 HTML로 제작해 웹표준과 접근성을 충족시키는 한편, 영상을 추가해 모션 크리에이티브까지 구현했다. 기술적인 측면에서는 카테고리별 키 비주얼 영역의 제품 이미지 및 백그라운드 이미지에 스프라이트 애니메이션을 사용했다. 많은 애니메이션으로 무거운 마이크로사이트를 원활하게 사용할 수 있도록 HTML5 Video 태그를 이용해 웹사이트 로딩 및 반응 속도를 향상시켰다. 더불어, 콘텐츠 각 영역에 도달했을 때만 영상이 재생되고, 나머지 영상들은 일시 정지 상태가 되도록 적용했다.

ui&ux
원페이지 구조와 패럴랙스 스크롤링을 활용했다. 이는 오브젝트들 간에 유기적인 연결 해서 사용자가 각 정보들을 쉽게 받아들이고, 다음 단계로도 자연스럽게 넘어가도록 도왔다.
특히, 부드러운 모션감을 위해 제이쿼리와 트윈 맥스라는 플러그인을 사용했다. 트윈 맥스는 제이쿼리에 비해 훨씬 부드러운 느낌의 모션을 만들 수 있고, 좌푯값을 x, y로 움직이거나 모션을 재생, 일시 정지 등이 가능하다.

layout
기본적으로 원페이지 구조를 채택했지만, 콘텐츠 간의 그룹핑을 실패해 정보 간의 연결성이 떨어지는 단점을 보완해야 했다. 해당 그리드를 통해 메뉴나 콘텐츠 간의 그룹을 명확하게 만들 수 있었고, 사용자들이 정보를 더욱 쉽게 이해할 수 있게 하는 역할을 했다. 그뿐만 아니라, 햄버거 메뉴는 모바일 웹에서만 사용하고 PC 웹에서는 일반적인 메뉴 구조를 활용했다. 메뉴 네이밍도 직관적으로 만들었다.

월간웹, 아이엠, 디아이 진행 기사 : http://mkple.com/f1mfd
추가이미지
제작/구축 관련 자료




평가의견