posted by e비즈북스 2009.01.19 14:42

쇼핑몰 UI의 대세는 눈으로 보고 바로 확인할 수 있는 6식형 쇼핑몰

동영상 광고, 맞춤형, Full HD스크린, 3D 쇼핑몰 등의 UI는 언젠가 대중화되겠지만 당장 2~3년 이내에 대중화될 수 있는 기술은 아니다. 당장 대중화될 기술은 아무래도 2D를 이용하여 시각적인 효과를 극대화시키는 기술이라 할 수 있다. 국내에서는 아직 쇼핑몰 UI 쪽에서 변화가 거의 없지만 해외 쇼핑몰 쪽에서는 다양한 변화가 일어나고 있다. 단순한 실험으로 끝나는 것이 아니라 고객들이 좋아할 수밖에 없는 UI를 선보이고 있기 때문에 국내 쇼핑몰에서도 결국 도입할 수밖에 없는 UI들이라고 볼 수 있다. 이 중 가장 많이 보이는 것은 아무래도 눈으로 보이는 사용상의 편리성이고, 대부분은 시각적으로 즉석에서 바로 확인할 수 있는 6식형 UI를 채택하고 있다는 흐름이 보인다. 예제 쇼핑몰을 통해 요즘 해외 쇼핑몰의 UI 사례를 잠시 확인해보도록 하자.


[해외 쇼핑몰 UI의 경향]

① 학습이 필요 없을 정도로 한눈에 알 수 있는 6식형 사용법

② 가능한 한 화면에서 처리함으로써 마우스 이동을 줄여줌

③ 편리한 결제 시스템

④ 원하는 상품을 원하는 장면으로 상세하게 볼 수 있는 다각도 확대 기능

⑤ 개인화 맞춤형 서비스 제공

⑥ 상품을 쉽게 찾을 수 있도록 해주는 다양한 꼬리표 시스템 및 갈래 구분

⑦ 화려한 기능 및 관련 제품의 연결고리를 이어주는 네트워크 기능


슬라이드바로 화면 이동 없이 즉석에서 스크롤 및 선택 적용

최근 쇼핑몰에서 많이 채택하고 있는 UI라면 슬라이드바 형식이다. 사이즈를 고를 때도 슬라이드바로 조정하고, 확대·축소 등도 슬라이드바로 한다. 널리 알려진 애플의 아이튠즈 스토아를 보면 윗부분에 좌우 슬라이드바를 이용하여 주요 제품을 전시하고 있다. 사용자는 슬라이드바를 좌우로 움직여 제품을 고를 수 있다. 좌우 슬라이드바 형태로 만들면 브라우저 오른쪽에 있는 위아래 스크롤이 길어서 불편한 점을 해결하면서 쉽게 목록을 확인하도록 도와준다.

아베크롬비(http://www.abercrombie.com/)도 좌우 슬라이드바 형식을 취한 덕분에 상하좌우로 스크롤을 하지 않고도 현재 화면 크기 안에서 제품 대부분을 손쉽게 확인할 수 있다. 또한 슬라이드바로 좌우로 움직이는 목록 상태에서 바로 옷의 색을 바꾸어 볼 수 있도록 색깔 및 무늬를 옷 밑에 덧붙여둔 상태다.

*그림s1001.: 아베크롬비에서 여성을 선택하면 여성(women) 사진을 보여줌으로써 현재 내가 무엇을 선택했는지 알 수 있다. 


*그림s1002: 아베크롬비에서 여성 옷을 고르는 장면. 아래의 좌우 슬라이드바를 움직여서 옷 모델을 고르고, 옷 밑에 있는 색과 무늬를 선택하면 바로 목록 상태에서 바뀐 색으로 옷을 볼 수 있다.


줌슬라이드를 이용하여 백만 제품도 한 화면에서 모두 표시

그 외 슬라이드바 형태로 설정을 바꾸거나 목록을 움직이도록 하는 기술은 이 책에서 예를 드는 쇼핑몰에서 앞으로도 계속 보게 될 것이다. 선택이 쉽고 화면 크기 변화없이 사용할 수 있다는 점에서 슬라이드바 형식은 국내외 쇼핑몰에서 당분가 많이 사용될 UI라 할 수 있다.

이런 슬라이드바 형식이 진화된 형태의 쇼핑몰로 브라우즈굿즈(http://browsegoods.com/)를 예로 들 수 있다. 브라우즈굿즈는 아마존에서 파는 신발 정보를 모아서 제공하고 구매하도록 하는 사이트다. 첫화면을 보면 왼쪽에 구글맵스와 같은 슬라이드바만 있다. 이 슬라이드바를 이용해서 크기를 조절하거나 신발을 클릭할 때마다 단계가 깊어지면서 점점 세부적인 상품 모습이 나타난다. 수만 종류의 신발을 단 하나의 화면에서 모두 처리한다는 점에서 독특한 발상이 돋보인다. 이런 방식을 이용한다면 수백만 가지 제품도 하나의 화면에서 확대·축소 처리가 가능하다. 구글 지도가 보여준 줌슬라이드를 이용한 전 세계 지역 표시 UI를 쇼핑몰에 적용한 경우라 할 수 있다.


점점 더 자세하고 정밀하게 보여주는 추세

더 정밀한 정보를 원하는 고객의 욕구에 맞추어 시각적으로 보여주는 이미지가 점점 고해상도로 바뀌는 상황도 최근의 추세다. 엔드리스(http://www.endless.com/)는 크기, 색깔, 모양, 비슷한 제품 등 상품에 대한 다양한 옵션을 하나의 페이지에서 손쉽게 선택할 수 있게 해준다. 특히 다양한 각도에서 찍은 구두 사진을 돋보기를 이용해 고해상도로 확인할 수 있다. 마치 오프라인 매장에서 구두를 확인하는 것처럼 구두 바닥의 무늬며 천에 박힌 실밥까지도 확인할 수 있다.


옷을 입었을 때 모습을 다양한 모델 사진으로 미리 볼 수 있는 쇼핑몰

눈으로만 보는 것과 실제로 입었을 때 모양이 어떻게 달라질지 궁금해 하는 고객을 위해 지금까지는 모델이 옷을 입은 찍은 사진을 올린다. 그런데 중성적인 상품도 모델은 한 명이 다 소화하기 때문에 문제가 된다. 셔츠가 마음에 드는데 여성 모델이 입고 있으면 여성용인가 싶어서 안 사게 된다. 버스티드티즈(http://www.bustedtees.com/)는 여러 면에서 사용자를 편하게 해준다. 결제 시스템도 한 화면에서 모두 처리할 수 있으며, 여성과 남성을 선택하는 순간 바로 티셔츠를 입고 있는 모델의 남녀 성별이 바뀌기 때문에 남성고객이든 여성고객이든 누구라도 자신에게 어울리는지 확인할 수 있다. 또한 재고도 성별과 사이즈별로 구분하여 그래프로 표시하기 때문에 파악하기 쉽다.


더 정밀하고 다양한 선택사항을 제공하지만 사용법은 정말 쉬운 쇼핑몰

현재까지 선보인 맞춤형 셔츠 쇼핑몰 중에서도 스프레드셔츠(http://www.spreadshirt.net/)는 UI 면에서는 마치 그래픽 프로그램에서 작업하는 것처럼 자연스러운 방식으로 다양한 선택을 할 수 있다. 셔츠에 넣을 무늬를 넣는 과정을 보자. 이미 준비된 무늬를 삽입하는 경우 다른 쇼핑몰은 무늬를 옷에 대입하는 수준에서 그쳤지만 스프레드셔츠는 적용된 무늬의 크기를 마우스로 잡아당겨서 늘리고 줄일 수 있을 뿐만 아니라 원하는 각도로 회전도 가능하다. 이 모든 기능은 셔츠 안에서 또는 셔츠 밑에 알아보기 편하게 배치된 아이콘으로 쉽게 사용할 수 있다.

그 외 좌우 상하 반전 기능, 무늬 확대 기능 외에도 다른 쇼핑몰과 달리 옆면의 팔 부분에도 무늬를 삽입할 수 있도록 다양한 기능을 제공한다. 이 모든 기능이 조그마한 화면 안에서 다 이루어진다는 점에서 스프레드셔츠의 UI는 돋보인다.


아바타 및 다양한 모델을 이용한 가상적용 서비스
쇼핑몰에서 아바타 활용은 아직 활발하지 않다. 아직은 웹에서 3D 처리 속도가 늦기 때문이다. 그렇다면 2D 형태로라도 응용해볼 수 있을 텐데, 기본 정보도 제대로 제공하지 못하는 상황이다 보니 아바타까지 활용하는 수준을 제공하지 못하는 것 같다.

아바타 활용법은 이미 충분히 선을 보였다. 아바타에 미리 옷을 입혀 보는 서비스는 누구나 생각하고 있는 서비스지만 실제로 보급은 매우 더딘 편이다. 오히려 몇 년 전에는 3D로 된 가상 쇼핑몰을 돌아다니면서 옷을 입어 보는 서비스가 등장했는데 경제적 효용성이 낮다는 이유로 지금은 일부 쇼핑몰에서만 사용하고 있다. 하지만 아바타는 개인화의 첨병이라는 점에서 미래의 쇼핑몰이 빼놓을 수 없는 기술이다.

닉커픽커(http://www.knickerpicker.com/)는 고객의 이런 욕구를 잘 이해하고 있는 사이트다. 속옷 전문인 닉커픽커는 드레스룸(www.knickerpicker.com/dressing-room.asp)을 선택할 경우 체형과 머리칼 피부색이 다른 여러 명의 모델을 이용하여 옷을 입은 상태를 보여주고 있다. 재미있는 것은 이 과정이 사진에 옷을 덧붙이는 수준이 아니라 동영상으로 이루어진다는 점이다. 닉커픽커에서 모델과 옷을 선택하면 해당 모델이 옷을 입고 걸어나오는 동영상으로 보여준다. 뒤로 돌아보게 할 수도 있고(Trun Around), 앞으로 가까이 다가오게(Come Closer) 만들 수도 있다. 그래서 마치 바로 앞에서 모델이 직접 워킹을 하는 느낌이 든다. 더구나 이 동영상을 자신의 블로그로 퍼가거나 친구들에게 편지로 보낼 수 있다. 동영상을 플래시로 만들었기 때문에 분산형 서비스가 가능한 것이다. 취급 물품 수가 적은 사이트라면 닉커픽커와 같은 동영상 UI를 잘 활용해볼 가치가 있다.

WPF를 이용한 새로운 형식의 쇼핑몰 오토
가상 모델에게 옷을 입히는 형태로 최근 주목받는 사이트 중 하나는 오토(http://www.otto.de/) 쇼핑몰이다. 오토는 윈도우 비스타의 UI 프레임워크인 WPF(Windows Presentation Foundation)을 사용한 쇼핑몰이다. WPF를 사용하면 매우 역동적인 쇼핑몰 UI를 보여줄 수 있지만 비스타 운영체제에서 프로그램을 설치해는 과정이 필요하다는 점이 단점이다. WPF를 적용한 쇼핑몰은 부드럽게 3D 형태로 쇼핑몰을 구성할 수 있으며 웹브라우저의 기술적 한계를 뛰어넘을 수 있다. 물론 인형옷 입히기 놀이처럼 아바타에게 옷을 끌어다 놓는 방식으로 옷을 입혀볼 수도 있다.

부분 모델을 이용하여 구매욕을 향상시키는 쇼핑몰
아바타는 얼굴이 있어야 한다는 생각을 깬다면 좀 더 다양한 방법으로 쇼핑을 돕는 아바타를 구현할 수 있다. 어떤 쇼핑몰은 아바타를 사람으로만 생각하는 방식에서 벗어나 부분 모델을 사용한다. 이미 광고에서는 손 모델이나 발 모델, 치아 모델을 사용하는 것처럼 쇼핑몰에서도 부분 모델을 사용하는 것이다.

신발을 파는 에코월드(eccoworld.ecco.com.pl)에 접속해 보면 음악과 함께 모델이 계속 걷는 모습이 나온다. 위에서 신발을 선택하면 해당 신발을 신고 계속 걷는 동영상이 크게 등장한다. 어차피 신발을 사용하는 사람 입장에서는 얼굴이나 몸매는 필요 없고 신발을 신고 걷는 것이 가장 중요한 일이라는 점을 간파한 것이다. 사람들로 하여금 신발을 신고 걸을 때 어떻게 보이는지를 시각적으로 보여주는 쇼핑몰이라 할 수 있다. 이런 생각을 응용한다면 장갑 낀 손만 동영상으로 보여주거나 립스틱 바른 입술로 말하는 동영상, 커피 마시는 모습을 보여주는 동영상 등 적용할 수 있는 분야가 많을 것이다.

동영상을 상품설명에 응용하는 쇼핑몰
현재 가장 많이 도입되고 있는 시각적인 UI라면 동영상을 빼놓을 수 없다. 일반적인 사이트는 UCC 동영상을 삽입하는 수준으로 그치는 경우가 대부분이지만 외계인이 쓰는 듯한 모양의 PC를 판매하는 에일리언웨어(http://www.alienware.com/)는 제품설명 사진과 어울리는 동영상 스킨을 이용하여 동영상을 효과적으로 사용하는 쇼핑몰 중 하나다. 특히 제품의 특정 부위를 누르면 해당 부위의 동영상 설명이 시작되도록 함으로써 일방적인 제품설명 동영상이 아닌 대화형 동영상의 형태로 만든 점이 돋보인다.

관계있는 제품을 소개해 주는 추천 서비스
하나의 제품을 선택했을 때 관련 제품을 소개하는 서비스도 쇼핑몰에서 계속 도입하는 기능이다. 록시(http://www.roxy.com/) 쇼핑몰은 관련된 제품을 소개하고 나열하는 수준이 아니라 해당 제품을 조합했을 때 어떤 모습이 나오는지를 보여준다는 점에서 독특하다. 사진을 보면 관련 상품인 검은색 외투에 파란색 상의, 반바지와 모자를 입은 모습의 모델을 볼 수 있습니다. 또한 페이스북 등의 SNS로 상품정보를 북마크하거나 공유할 수 있도록 지원한다.

《인터넷 쇼핑몰, Web 2.0의 날개를 달다》(출간예정)- 김중태 저, e비즈북스

댓글을 달아 주세요

  1. freeism 2010.09.09 14:34  Addr  Edit/Del  Reply

    너무 좋은 글(사이트)이 어서 정신없이 봤네요. ^^
    일과 관련되서 이리저리 정보를 찾고 있었는데, 너무 도움이 되었습니다.
    감사합니다.

    • e비즈북스 2010.09.09 17:24  Addr  Edit/Del

      좋게 봐주셔서 감사합니다^^