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

프로젝트

NHN NTS —

VCM 웹/모바일 사이트

Project Summary

디파이 포트폴리오 VCM KV 입니다.

Launch Date

12월
2012년

Categories

  • 웹사이트 구축

Tages

  • Uaaaaa

Project Number

34N.

사용 편의성과 쌍방향 커뮤니케이션을 고려한 UX 개선 프로젝트. 아시아-유럽 주요 박물관의 유물 정보를 제공하는 가상 박물관 VCM-Virtual Collection of Asian Masterpiece-웹/ 모바일 사이트가 개편되었습니다. VCM 사이트는 아시아-유럽 ASEM 회원국 내 120여 개 박물관이 소장하고 있는 유물 2300여 점에 대한 정보를 제공하는 가상 박물관입니다. 유물을 쉽게 감상하고 스토리를 깊이 이해할 수 있도록 하며, 아시아와 유럽의 문화를 이해하고 새로운 문화적 유대관계를 가질 수 있는 공간을 만들고자 하였습니다.

  • UX 전면 개편을 통한 사용 편의성 향상

    사용자 경험에 익숙한 인터렉션과 UI 구성 등 UX 전면 개편을 통해 사용자 편의성을 높인 VCM 사이트로 리뉴얼하였습니다.

  • 쉽고 간편하게 찾는 유물, 사용자 맞춤형 검색 서비스 제공

    방대한 유물 중 원하는 유물을 쉽고 빠르게 찾을 수 있도록 검색 기능을 개선하였습니다. 다양한 검색 조건들을 펼쳐놓아 쉽게 선택할 수 있도록 하고, 세분화된 검색 결과를 얻을 수 있도록 검색어 복수 선택, 결과 내 검색을 제공합니다.

  • 가상 박물관에 최적화된 서비스, 최상의 사용자 만족도

    작품 메타 및 해설 정보 영역을 넓게 확보하고 타이틀과 내용의 명확한 구분을 통해 이미지와 해설 정보 가독성을 향상하였습니다. 이미지 축소/확대, 전체보기를 편리하게 개선한 이미지 뷰어는 유물 감상에 최적화하여 사용자 만족도를 높였습니다.

  • 브랜드 이미지와 메시지를 담은 디자인, 효과적인 브랜드 아이덴티티 전달

    새롭게 변경된 BI 콘셉트인 ‘동서양의 대비와 융합’을 사이트 전반에 녹여 명확하고 차별화된 브랜드 경험을 제공합니다. 타이포그래픽을 적극 활용하여 Serif 폰트를 사용하되 레귤러/이탤릭체를 혼용하여 리듬감을 살리고 대비의 느낌을 전달하였습니다. 유물이 중점이 되는 사이트인 만큼 유물에 집중할 수 있도록 최대한 심플하게 구성하였고, 감상에 방해가 될 수 있는 그래픽 요소는 가능한 자제하여 디자인되었습니다.

  • 120여 개의 박물관을 한눈에, 지도 API 커스텀을 통한 UI 시각화

    세계 각국의 박물관 정보를 한눈에 확인할 수 있게 화면을 구성하였습니다. 박물관 정보 보기와 박물관의 유물 모두 보기 기능을 지도에서 바로 제공하여, 사용자가 필요로 하는 정보의 접근성을 높였습니다. 지도 API를 활용하면서 위치 표시 UI를 VCM 콘셉트에 맞게 커스텀 하여 브랜드 이미지를 시각적으로 전달하였습니다.

  • 사용성과 접근성을 높인, 최상의 모바일 웹사이트

    터치 기반의 스마트폰으로 접속하는 사용자에게 인터랙티브한 경험을 제공하기 위해 플리킹, 핀치 등의 제스처를 적용하였습니다. 불안정한 모바일 환경을 고려하여 무거운 비주얼 요소를 간소화하고 직관적인 인터페이스로 사용성과 접근성을 높인 모바일 웹사이트를 구축하였습니다.

  • 모바일 환경에 최적화된 콘텐츠 구성으로, 모바일 사용성 향상

    제한된 화면에서 제공되는 정보의 접근성을 높이기 위해 콘텐츠 구성을 모바일 사이트에 최적화하였습니다. 좁은 화면에서 가독성을 높이기 위해 배경과 텍스트 색의 명암 대비를 적절히 적용하였습니다. 메뉴 간 이동을 단순화하여 언제 어디서나 빠르고 간편하게 이용할 수 있는 사이트를 구축하였습니다.

  • 전 세계 어디서나, 웹 표준 준수로 동일한 서비스 제공

    VCM은 전 세계인들이 방문하는 사이트로 인터넷 환경이 좋지 못한 나라도 웹과 모바일로 간편하게 접속할 수 있어야 했습니다. 기존 플래시로 제공되던 이미지 보기 기능을 Ajax/Java Script 기술을 적용하여 N-SCREEN은 물론, 어디서나 누구든 동일한 서비스를 제공받을 수 있도록 웹 표준을 준수하여 구축되었습니다.

VCM 사이트 PC 버전과 검색 기능 이미지입니다.
VCM 사이트 제작 가이드 및 콘텐츠 예시 이미지입니다.
VCM 사이트 지도 위치 및 모바일 버전 이미지입니다.
VCM 사이트 모바일 버전 제작 가이드 및 콘텐츠 예시입니다.