마법 같은 가전, 더 마법 같은 웹사이트
더즈인터랙티브, SK매직 웹사이트
언택트 시대, 직접 가지 않고도 방문한 듯한 체험을 할 수 있는 온라인 쇼룸이 인기다. 이러한 온라인 쇼룸에서 최대한의 경험을 제공하기 위해서는 어떤 것이 필요할까. 더즈인터랙티브가 구축한 SK매직 웹사이트에는 쇼룸 한가운데에 직접 서서 한 바퀴 둘러보는 듯한 경험을 할 수 있고, 원하는 제품이 있으면 바로 클릭해 제품페이지로 이동 가능하다. 해당 기사에서는 SK매직의 아이덴티티를 살린 웹사이트 세부 요소와 3D 인터랙션, 체계적인 UI·UX 설계 이야기를 담았다.
글. 김수진 기자 soo@ditoday.com
사진. 더즈인터랙티브 제공
발전과 변화의 중심, SK매직
SK매직은 국내 대표 주방·생활 가전회사로 올해 매출 1조 원을 넘어섰고, 글로벌 비즈니스를 확대하는 등 큰 발전과 변화의 중심에 있어왔다. 이러한 흐름을 위해 온라인 상품 판매의 핵심이 되는 SK매직몰과 함께 SK매직의 새로운 브랜드 플랫폼을 제작하게 됐다. 기존 SK매직 웹사이트는 회사의 기본적인 정보만 담겨있었고, 구축 이후 시간이 꽤 흘러 모바일과 UX 개선이 시급한 상태였다. 게다가 제품을 직접적으로 판매하려는 목적인 SK매직몰과는 차별화된 커뮤니케이션이 필요한 시점이었다. SK매직이 이야기하고자 하는 브랜드 메시지와 남다른 가치를 지닌 제품군을 방문자에게 효과적으로 전달할 수 있는 방안에 대해 고민하며 프로젝트를 시작했다.
3D 인터랙션으로 차별화한 제품소개 페이지
SK매직 웹사이트의 제품소개 페이지는 SK매직몰 제품소개 페이지와 차별화해서 보여주는 것이 중요했다. 특정 제품의 스펙 위주를 소개하는 것이 아닌 정수기, 식기세척기, 인덕션 등 제품군별 SK매직만의 철학과 히스토리로 소비자가 SK매직의 진심과 신뢰를 느낄 수 있도록 하는 것이 우선이었다. 기획 단계부터 카피 및 구성에 많은 고민이 필요했고, 유저에게 주는 메시지의 중요성을 인지하고 제품별 담당자들과 여러 차례에 걸친 미팅을 통해 내용을 다듬었다.
특히, 생활가전제품의 특장점을 명확히 전달하기 위해 3D 콘텐츠를 제작하기로 결정했다. 이를 위해 제품 데이터를 캐드로 전달받아 Autodesk Maya에서 모델링과 렌더링을 진행했다. 섹션별로 보여주고자 하는 카피와 매칭되는 3D 시퀀스는 스크롤 인터랙션과 연동해 글을 읽는 속도에 맞게 보이도록 유저에 맞는 타이밍을 계산해 배치했다. 유저는 제품페이지를 통해 콘텐츠를 따라가며 자연스레 SK매직 제품에 대한 기대를 높일 수 있었고, 페이지 하단에는 SK매직몰 구매로 직접 이어지도록 해 유저의 편의와 매출 상승으로 연결할 수 있는 장치를 만들었다.
서비스페이지의 경우 SK매직의 강점인 안심 OK서비스 및 렌털 서비스에 대한 정보를 전반적으로 소개했다. 제품을 판매하는 것을 넘어 품목별로 방문 AS케어를 다각도로 소개하기 때문에 해당 페이지를 읽는 소비자에게 SK매직 방문서비스에 대한 신뢰를 높일 수 있었다.
360도 Magical Walk 전시공간
현재는 전시가 종료돼 볼 순 없지만, 과거에 SK매직의 다양한 제품을 직접 만져보고 경험할 수 있는 Magical Walk의 오프라인 브랜드 쇼룸이 있었다. SK매직의 가전제품 철학을 볼 수 있는 공간이었지만, 이 존재를 아는 고객은 많지 않았고 위치 특성상 접근성이 낮아 SK매직 브랜드 쇼룸을 적극적으로 활용하지 못하는 부분이 아쉬웠다.
그래서 최근 글로벌 트렌드를 반영했다. 최근 오프라인에서 온라인으로 옮겨가는 언택트 방식으로 전시공간과 쇼룸을 체험하는 케이스가 늘고 있다. 더즈인터랙티브의 360도 VR콘텐츠 제작 기술을 활용해 Magical Walk 쇼룸을 360도 온라인 체험존으로 구현했고, 언제 어디서나 시간과 장소의 제약을 받지 않고 가상으로 체험할 수 있도록 했다. 이에 VR콘텐츠 내 제품들은 매직몰로 이어져 구매까지 바로 연동된다.
브랜드 아이덴티티와 감각적인 트렌드를 살린 UI·UX
① SK매직 CI를 모티브로 한 매직 플로우 디자인(Magical Flow Design)
SK매직 CI의 곡선 메타포, 컬러 아이덴티티를 활용·변주해 흐름, 바람, 유기적, 부드러움을 나타냈다. 나비 모양에서 형상화해 사이트 전반에 다양하게 적용했다. 배경 디자인 등 감성적인 브랜드 경험 요소를 더해 SK매직의 브랜드 아이덴티티를 표현했다.
② 화면 전체를 적극적으로 활용하는 풀 스크린 비주얼(Full Screen Visual)
Full로 채운 이미지와 영상은 시원한 느낌과 함께 브랜드가 보여주고자 하는 아이덴티티를 효과적으로 전달했다. 과하지 않은 와이드한 이미지 노출을 통해 시원시원한 사이트 구성 및 제품과 연관된 라이프스타일을 자연스레 떠올릴 수 있도록 도와준다.
③ 디자인의 최소화, 트렌디한 레이아웃(Minimal Layout)
중요도가 낮은 요소를 제외하고 핵심적인 가치와 정보에 집중해 기능적인 미니멀리즘을 구현했다. 강조하고 싶은 부분과 브랜딩 요소에 집중할 수 있다.
④ 사용자를 위한 세심한 마이크로 인터랙션(Micro Interaction)
마우스 이동과 스크롤, 그리고 화면 전환에 따라 적용되는 세심한 인터랙션과 모션을 통해 사이트를 경험하는 유저의 만족도를 높이고, 사이트 전반에 반영된 감각적인 트렌드를 느낄 수 있도록 구성했다.
빠른 의사결정이 돋보였던 협업 과정
SK매직 웹사이트 구축 프로젝트는 물리적으로 여유로운 스케줄은 아니었다. 사이트 내 페이지별 관련 부서 담당자들이 달라 각 부서 담당자와 논의 및 딜레이 없는 컨펌 과정이 필요했다. 더즈인터랙티브 강주연 매니저는 “당시 SK매직 웹사이트를 메인으로 담당했던 매니저가 기획 스토리보드부터 디자인 컨펌까지 각 부서 담당자들과 빠른 의사결정을 할 수 있도록 중간 역할을 해 수월하게 진행할 수 있었다”고 소감을 밝혔다. 또한, 3D 연출이 들어간 제품소개 페이지 및 Magical Walk 360도 콘텐츠의 경우 “우리가 상상하는 방향대로 사이트를 연출할 수 있도록 많이 배려해줬다”고 언급했다.
트렌드를 반영한 회사소개 웹사이트
회사소개 웹사이트는 사업영역 및 주요 경영활동·성과 등을 보여주는 기업 PR 플랫폼 역할뿐 아니라 다양한 소셜 미디어 채널의 정보를 통합적으로 보여주는 커뮤니케이션 역할을 한다. 이번 리뉴얼 프로젝트를 통해 콘텐츠 소통에 익숙한 세대 트렌드를 반영하는 것은 물론 360도 콘텐츠와 사이트 트렌드를 반영한 마이크로 인터랙션 및 3D 작업으로 온라인에서 보여줄 수 있는 SK매직의 브랜드 아이덴티티를 효과적으로 보여줬다.
MINI INTERVIEW
7개월간의 SK매직 프로젝트를 진행하며 기획팀, 디자인팀, 모션팀, 개발팀 모두 각자의 분야에서 퀄리티 있는 결과물을 위해 노력했습니다. 서로가 함께했을 때 시너지를 발휘할 수 있다는 것을 느낄 수 있던 프로젝트였습니다. 결론적으로 클라이언트(SK매직)의 만족을 얻어냄과 동시에 모두의 만족을 얻은 작업이었습니다.
프로젝트 기본정보
프로젝트명: SK매직 웹사이트
클라이언트사: SK매직
대행사(제작사): 더즈인터랙티브
오픈일: 2월 4일
URL: company.skmagic.com
