메뉴로 건너 뛰기 내용으로 건너 뛰기

프로젝트

현대자동차 —

현대자동차 쇼룸 PIP 디자인 가이드

Project Summary

디파이 포트폴리오 현대자동차 KV 입니다.

Launch Date

10월
2011년

Categories

  • 디지털 콘텐츠

Tages

  • Caaaaa

Project Number

34N.

2011년 월드와이드 현대자동차 공식 웹사이트를 리뉴얼을 하기 위해 많은 인력이 투입되었으며 그중 디파이에서는 가장 비중이 큰 제품의 특장점 페이지의 전체 디자인 가이드에 진행하였다. 이미 이전에 협력사 쪽에서 글로벌 가이드가 선행되어 있었지만 제품 페이지의 콘텐츠 구성과 방식에 있어서는 기존에 있던 것을 활용하는 것이 아닌 전혀 새로운 접근 방식과 새로운 콘텐츠 디자인으로 처음부터 시작하여야만 했다.

  • Wireframes to the Design.

    Hyundai Motor Showroom Pages 디자인은 명확한 스타일과 시각적인 구조를 위해 가장 잘 계획된 화면 설계서(Wireframes)를 통해 진행되었다. 이를 위해 UX 및 그래픽 디자이너들은 긴밀한 협력을 유지하면서 가장 이상적인 방향으로 매우 유연하게 프로젝트에 임하였다. 물론 프로젝트를 진행함에 있어 변수도 발생하기도 했지만 우리는 매우 정확히 계획대로 진행할 수 있었다.

  • Sketch

    화면 설계는 협력사에서 진행이 이루어졌으며 각각의 제품 페이지들은 Highlights, Exterior, Interior, Performance, Safety, Convenience, Specification, Review의 큰 섹션으로 나누어져 있으며, 각 섹션마다 메인 콘텐츠와 서브 콘텐츠 그리고 공통 콘텐츠로 정보구조의 볼륨을 결정하였다. 그렇게 이루어진 정보들은 한 페이지에 모든 내용을 담아내어 브라우저의 스크롤바, 또는 상단에 고정으로 따라붙게 되는 유틸 바를 통해 모든 콘텐츠를 살펴볼 수 있게 설계가 이루 졌다.

  • Design

    가장 이상적으로 설계된 화면 설계서를 바탕으로 각 콘텐츠의 메시지를 시각적으로 표현하기 위해 사전에 UX 디자이너와 함께 여러 가지 방향을 찾아내어 그중 가장 적합한 스타일로 보다 효과적으로 콘텐츠를 디자인할 수 있었다. 그래픽 디자인, 인포그래픽, 아이콘 디자인 등 모든 것을 새롭게 제작되어야 했으며, 차량별로 따로 3D 모델링을 하여 조금 더 다이내믹한 구도의 차량 이미지를 제작하였다. 그리고 제품 페이지의 스타일 가이드 또한 함께 제작했었기 때문에 더욱 정밀하고 세심하게 디자인을 진행하였다.

  • 차량 비주얼(메인 비주얼, 각 차량만의 라이프스타일)

    각 특장점별로 전달하려는 메시지와 함께 보여 줄 비주얼의 주가 차량 이미지이기 때문에 우선적으로 고객사에서 전달받은 차량 모델의 포토 라이브러리와 관련 자료들 중 가장 적합한 사진을 선별하였고, 그 외 필요한 구도에 대해서는 3D 모델링을 통해 확보하였다. 그렇게 선별된 차량 이미지는 한 번도 후보정을 통해서 더 아름답고, 더 세련되고 더욱 럭셔리한 차량으로 리터칭 하였다. 그중 가장 큰 볼륨을 차지하고 있는 차량의 외관과 내부의 메인 비주얼은 해당 차량만의 콘셉과 라이프스타일을 보여주어야 하기 때문에 배경을 기존에 없던 전혀 다른 테마로 제작하였다.

  • 차량 모델: i40 (후방이미지)

    메인 비주얼의 이미지 리터칭 과정은 크게 3단계로 이루어진다. 첫째로 차량의 보디 부분에서 크게 윈도와 라이트, 휠, 타이어 등 각 요소들을 레이어로 분리하여 컬러 변경 및 상황에 맞는 보정을 하게 된다. 둘째로 프런트/사이드/리어뷰에 따라 라이프스타일에 맞는 백그라운드를 실사 이미지를 통해 연출해준다. 이 과정에서 2~3가지 이미지만으로 충분한 경우가 있지만 경우에 따라서 요소별로 합성작업을 통해 원하는 테마를 완성해야 하는 경우도 있다. 셋째로 그렇게 완성된 비주얼의 외각을 부드러운 브러시를 통해 페이지의 배경과 경계가 없도록 마스킹 작업을 하였다. 이때 주요 오브젝트에는 별도로 레이어 또는 폴더로 유지하고 배경요소만 따로 분류해서 최대한 자연스럽게 투명도가 20~50%를 병행하면서 브러시로 지워주는 것이 중요하다.

  • 인터렉션

    서브 콘텐츠 중에서는 간단한 인터렉션 장치를 적용하여 스타일을 살리면서도 특장점을 더 명확하게 전달할 수가 있었다. 그중에서도 차량 외괸의 특장점 중 헤드라이트, 사이드미러, 리어 라이트 비주얼에 라이트 온/오프 버튼을 두어서 차량의 스타일을 한 번 더 강조할 수 있는 심플하면서 유니크한 장치를 마련하였다. 1. 그래픽 요소: 차량의 특장점을 설명에 필요한 비쥬얼에 대해서는 해당 차량의 3D 모델링 컷과 보조 그래픽 등을 적극 활용하여 전달하고자 하는 기능에 대해 사실적이지만 쉽고 명확하게 표현하였다. 2. 다이내믹 그래픽스: 실제 차량이나 부품의 이미지를 클로즈업하여 더욱 정밀하게 보여주되 기계의 차가운 이미지가 아닌 세련되고 프리미엄 한 뭘로 티만을 추구하였다. 정확한 수치의 정보 전달이 목적이 아니라면 그래프의 방식 또한 평명에서 벗어나 입체적인 구도로 디자인하여 구성하였다. 그리고 실사와 유사하게 환경을 만들고 도로의 라인과 차량의 움직임을 보조 그래픽으로 표현하여 그 기능에 대해 기능 설명 문구와 함께 이해를 돕고 있다. 3. Language of visualization : 각 차량 페이지의 하이라이트 부분에 해당 차량의 가장 핵심적인 메시지를 전달하기 위해 시각적인 언어로 간결하고 효과적인 스타일로 아이콘을 새로이 디자인하였다.

현대자동차 제품 상세 페이지입니다.
현대자동차 제품 상세 페이지입니다.
현대자동차 3D모델링 이미지입니다.
현대자동차와 다양한 배경 이미지
현대자동차 합성 과정입니다.
현대자동차 메인 비주얼입니다.
현대자동차 인터랙션 콘텐츠 페이지입니다.
현대자동차 3D 모델링과 그래픽
현대자동차 페이지에 사용한 아이콘과 SNS 소통
현대자동차 쇼룸 페이지입니다.

Credits.

현대자동차 쇼룸

D.FY

-

권순규 - 총괄디렉터

권순규 - 디자인

장재현 - 디자인

백재영 - 디자인

디파이 포트폴리오 현대자동차 섬네일 이미지입니다.