[스크랩] 세계 최고 쇼핑몰 UI는?

웹사이트에서 방문자들이 느끼는 경험은 중요하다. 특히 쇼핑몰은 특성상 방문자가 구매를 하기 때문에 만약 방문자에게 좋지 않은 경험을 선사했을 경우 눈에 보이지 않는 많은 손실을 가져올 수밖에 없다.

쇼핑몰에서 최적화된 상품페이지 UI 구성은 디자이너들에게 늘 연구 대상이었다. 단순히 예쁘고 보기에 좋게만 제작된 상품페이지는 고객들의 경험적인 욕구를 채워주지 못한다.

이제 상품페이지는 가장 효과적인 사용자 인터페이스는 물론 보기에도 좋고 꼭 사야할 이유까지 만들어내야 한다. 웹 환경의 변화로 ‘플렉스‘나 ‘AJAX’ 등 다양한 웹 기술과 소셜미디어 채널을 활용한 기술적, 기능적 활용이 늘어나고 있다. 몇 가지 상품 상세페이지 유형을 소개해보고자 한다.

1. 프리피플(www.freepeople.com)
감각적인 여성의류 쇼핑몰 ‘프리피플’은 각종 웹 디자인 관련 블로그에서 “전세계 디자이너들에게 최고의 영감을 주는 웹사이트”로 매번 이름을 올리는 곳이다. 상세페이지는 사용자들이 상품이미지를 보다 쉽고 편하게 볼 수 있도록 마우스를 상품사진에 올리면 오른쪽 화면 비어 있는 곳(사용자가 상품 사진을 보고 있을 때 오른쪽은 상품 사진과 아직은 상관이 없음으로 비어있다는 생각.)에 확대된 이미지가 자연스럽게 뜨도록 설계되어 있다.

무엇보다 관련 상품을 클릭했을 때 창이 바뀌거나 새창이 떠서 본 상품의 집중도를 흩트리는 것이 아니라 레이어 팝업으로 현재 페이지에서 관련 상품을 볼 수 있도록 되어있다.

2. http://www.47club.jp/
일본 지방신문기자 연합에서 각 지역 특산물들을 소개하고 판매하는 ’47클럽’ 쇼핑몰은 상세페이지 구성이 기존 쇼핑몰들과 전혀 다른 UI 와 레이아웃으로 구성되어 있다. 유니클로(UNIQLO켈린더), 뮤인양행(playmuji) 등 다채로운 웹 디자인 제작으로 유명한 ‘THA.JP’ 에서 제작한 47클럽 상세페이지는 가격, 옵션, 결제 등 기존 쇼핑몰 오른쪽에 있어야 할 영역을 페이지 상단으로 올려놓았다.

그리고 인증서, 생산자, 생산지를 보여주는 영역이나 이 상품을 추천한 기자 혹은 MD들의 코멘트, 리뷰, 상품평 등 쇼핑에서 구매를 결정하는 중요한 요소를 상품 설명 오른쪽에 배치했다. 판매자 입장에서 상품을 설명하는 부분과 사용자들의 입장과 의견을 상하로 분리하지 않고, 좌우로 함께 배치해 가독성과 신뢰도를 동시에 높였다.

3. 화이트앤워렌(www.whiteandwarren.com)
패션 디자이너 수잔 화이트와 바바라 워렌이 공동으로 설립한 ‘whiteandwarren’은 뉴욕 패션계에서 유명한 명품 브랜드다. 특히 여성들의 권익(유방암 퇴치 운동 등)과 친환경 소재를 이용한 제품 생산은 그 가치를 더 높여주고 있다. 쇼핑몰 상세페이지는 군더더기 없이 간결하게 제작됐고 상품사진 자체에서 확대와 축소가 가능하도록 설계됐다.

4. 잭셀러(jaqkcellars.com)
2009 미국 월드시리즈 공식 와인이기도 했던 ‘잭셀러’는 유명인사들이 즐겨 찾는 와인 브랜드라고 한다. 그래서 그런지 공식 쇼핑몰 상세페이지 역시 매우 고급스럽게 디자인됐다. 특히 와인병을 360도 돌려 볼 수 있는 기능은 기술적으로 어떨지 모르겠으나 다른 곳에서 쉽게 보기 어려운 고급스러운 장면이다.

5. 알루팝(allopop.com)
국내 디자인 티셔츠 전문 브랜드 ‘알루팝’은 대형 의류 업체들이 자본과 물량으로 시장을 잠식하는 동안. 참 끈질기게 오랫동안 버티고 살아남은 국내에 몇 안 남은 온라인 토종 브랜드다. 이들의 혁신은 티셔츠 자체 디자인뿐만 아니라 쇼핑몰 상세페이지 역시 혁신적이다.

사용자 눈에 쉽게 들어오는 전체적인 페이지 구성과 상품이미지를 넘길 때 빠른 속도감은 매우 인상적이다. 다만 커뮤니티 RSS나 미투데이, 트위터 등 공유와 단문 메시지 채널을 좀 더 적극적으로 활용했으면 하는 아쉬움은 남는다.

6. 윌리암스소노마(www.williams-sonoma.com)
미국의 이케아라고 불리는 미국 최고의 홈 주방 소매 업체 윌리암스 소노마는 1956년 창업되었다. 주로 주방용품과 생활용품을 사무용품 등을 취급한다. 쇼핑몰 상세페이지는 간단한 설명과 심플한 사진 몇 장이 전부다.

그러나 오랫동안 카탈로그 영업을 해서인지 소셜네트워크 채널을 활용한 입소문 영역은 확실히 신경을 쓴 부분이다. 동영상을 하단으로 위치해 사진과 동영상을 분리 시켜 배치한 것이 인상적이다.

7. 쿠이몬야(www.qimonya.com)
‘쿠이몬야’는 일본 큐슈 지역에서 생산되고,유통되는 먹거리를 온라인으로 판매하는 지역형 오픈마켓 쇼핑몰이다. 이 곳 상세페이지를 자세히 들여다보면 현재 주문이 들어오는 현황을(주문 날짜, 주문 번호, 주문 지역, 주문 금액) 실시간으로 볼 수 있다.

그리고 또 한가지 흥미로운 점은 상세페이지 하단에 뉴스, 블로그, 웹페이지 등에서 이 상품과 관련된  키워드를 검색해 자동으로 나열해 보여주고 있다는 것.

8. http://www.digitalmesh.com/
‘디지털메쉬’라는 인도회사에서 제작된 와인 쇼핑몰이다. 플렉스를 활용해 드래그 앤 드롭의 인터페이스로 상세페이지를 구성했다. 한 페이지에서 모든  기능이 가능하기 때문에 조금 익숙해지면 플렉스만큼 쇼핑몰에서 편한 기술도 없다. 그러나 사용자들이 익숙해지는데 걸리는 시간이 너무 길다.