<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1387208918241112&ev=PageView&noscript=1"/>
NEW 기획 디자인 개발 프로덕트 아웃소싱 프리랜싱

기획

매거진 같은 쇼핑몰, 29CM (UX/UI편)

위시켓


*잠깐, 이 글을 소개해드리는 위시켓은 2019년 시밀러웹 방문자 수 기준, 국내 1위 IT아웃소싱 플랫폼입니다.
현재 8만 이상의 개발업체, 개발 프리랜서들이 활동하고 있으며, 무료로 프로젝트 등록이 가능합니다. 프로젝트 등록 한 번으로 여러 개발업체의 견적, 포트폴리오, 예상기간을 한 번에 비교해보세요:)



이전 편인 ‘매거진 같은 쇼핑몰, 29CM (BM편)’부터 읽으면 더 좋습니다.


VI. 29CM의 정보구조

29CM의 정보구조는 크게 쇼핑과 라이프스타일에 중점이 맞춰져 있다. 먼저 사용자는 네비게이션 하단의 홈 탭과 SHOP 탭을 통해 물건을 구매하거나 추천받은 브랜드의 상품을 둘러볼 수 있다. 사용자가 홈 피드에서 우먼-맨-라이프스타일 아이템-쇼핑릴레이 탭을 터치하면 선택된 탭에 맞는 피드가 보이는 식이다. 쇼핑릴레이에서는 현재 할인 중인 제품을 소개하고 있다.

반면, 29TV와 WELOVE 탭은 29CM만의 콘텐츠 역량이 돋보이는 탭이다. 29CM가 직접 선별한 것으로 보이는 콘텐츠들을 해당 탭을 통해 감상할 수 있는데, 이 역시도 결국 제품의 구매와 직간접적으로 연결되는 기능이라 볼 수 있다. 여기서도 WELOVE 탭과 29TV의 차이점이 발생되는데, WELOVE 탭의 게시글들은 '읽기'에 특화된 기능인 반면, 29TV는 터치하자마자 브랜드들의 제품 소개 영상으로 연결된다. 즉 '시청하기'에 더 가까우며, 이는 틱톡의 피드를 연상시키기도 한다.




VII. 29CM의 UX/UI 살펴보기

29CM의 정체성이 잘 드러나는 홈피드

29CM의 홈피드부터 살펴보자. 먼저 왼쪽 이미지는 처음 29CM 앱을 실행하면 보여지는 화면이다. 다른 커머스 앱과 유사한 구조로 화면의 상단 영역에는 현재 진행 중인 기획전에 대한 내용을 소개하고 있다. 무려 화면의 절반이 넘는 영역을 사용하고 있는 만큼, 보여주고 있는 기획전과 콘텐츠의 수도 적지 않은 것이 특징. 넘겨도 넘겨도 계속해서 새로운 기획전 소개가 나오는 것을 알 수 있다.



상품을 보여주는 태도의 차이

대부분의 쇼핑몰, 편집샵은 오른쪽 화면과 같이 현재 인기 있는 상품의 리스트를 메인에 띄워주고 있고 있다. 반면, 29CM는 자신들의 홈피드를 왼쪽 화면과 같이 활용했다, 한 화면에 최대한 많은 상품을 보여주는 방식이 아닌, 상품을 덜 보여주더라도 이미지나 영상 위주의 콘텐츠에 집중하는 방식을 택했다. 오롯이 한 화면에 담을 수 있는 상품의 수에는 차이가 발생하겠지만, 무한 스크롤 형태의 피드라는 대안을 통해 이를 극복하고 있는 모양세다. 내려도 내려도 계속 새로운 상품과 콘텐츠가 보이는 것이 29CM 홈피드만의 매력이다.

이렇게 홈피드가 긴 경우, 스크롤이 쉽지 않은 것이 사실인데 이러한 불편을 의식한 것인지 스크롤 바를 우측에 배치해둔 점도 역시 좋았다. 큼직큼직한 상품 이미지와 소개 문구는 설명하기 어려운 쾌적함을 선물한다.



살아 움직이는 것 같은 홈피드


아니, 글자가 이미지 영역을 침범했다고? 저거 버그 아니냐고? 솔직히, 29CM를 처음 사용했을 때의 느낌을 잊을 수가 없다. 심미적으로 뛰어난 인터페이스는 사용자에게 설명하기 어려운 쾌적함을 안겨주고는 하는데 내게는 29CM가 딱 그랬다. '어떻게 이런 아이디어를 냈을까?' 싶을 정도로 홈피드에 공을 들인 느낌이랄까. 개인적인 감상으로는 상품을 콘텐츠화하여 홈피드에 보여주는 것까지는 '좋음'의 영역이었다면, 움직이는 글자로 표현해낸 건 '겁나 멋짐'의 영역이었다.

29CM의 홈피드는 사용자의 스크롤에 반응하는 인터페이스를 보여준다. 사용자의 시선에 맞춰서 화면에 보이는 텍스트가 따라오는 느낌인데, 웃긴 건 전혀 어지럽거나 거슬리지 않는다는 점이었다. 도리어 어떤 상품인지 인지가 잘 되어 편했다. 모든 텍스트 영역이 흔들리는 것이 아니라 콘텐츠의 헤드(제목) 영역만 모션이 적용되기 때문에 과하다는 느낌도 없다. 이런 동적인 요소들은 29CM의 홈피드에 생동감을 불어넣는 역할을 하고 있다.



29CM의 홈피드는 참 여러 가지 면에서 해리포터에 나오는 예언자일보를 닮았다. 스크롤을 내리면 움직이는 글자, 갑자기 재생되는 영상.. 그럼에도 고정되어야 할 것은 고정되어 있고, 거기에 동적인 요소가 가미된 듯한 느낌을 주어 홈 피드에서 눈을 뗄 수 없게 한다. 그뿐만 아니라 제품을 찜하기 할 수 있는 기능을 제공해 당장 장바구니에 담지 않더라도 추후에 구매로 이어질 수 있도록 사용자를 유도하고 있다. 그뿐일까? 찜하기 기능만 제공하면 서운하니, 아이콘 하단에 찜하기 된 숫자를 표시해 이 제품이 다른 고객들에게도 인기가 많은 제품이라는 점을 간략히 알리고 있다.

홈피드의 전반적인 경험은 (매번 강조하지만) 잡지를 읽을 때와 유사하다. 몇 줄의 짧은 카피가 주는 울림이 있다. '이번 호에는 또 무슨 제품이 실렸나'하고 잡지를 넘겨보며 특정 제품에 대한 에디터의 고견을 참고하고, 좀 괜찮다 싶으면 사진을 찍어놨다가 추후에 구매하는 사용자 경험을 웹과 모바일로 옮기면 29CM가 아닐까 싶을 정도다.

고객과 브랜드를 연결하겠다는 확고한 방향성이 분명하게 묻어나는, 이러한 느낌의 홈피드는 사실 수익을 내기엔 적당한 방식이 아닐 지도 모른다. 그러나 고객에게 '29CM는 독자적인 정체성과 톤앤매너를 가진 서비스'라는 인식을 심어주기엔 충분해 보인다.



29TV

위에서 말했듯 29TV는 마치 틱톡의 피드를 연상시키는데, 기능의 목적과 사용방법의 유사도 때문인 듯하다. 29TV는 브랜드의 홍보 영상을 띄워주는 채널로 브랜드를 팔로우/언팔로우할 수 있는 기능과 함께 앱내 구매 링크로의 연결(보라색 아이콘)을 지원하고 있다. 또한, 해시태그를 통해 브랜드를 홍보할 수 있는 기능 역시 제공하고 있는데 이러한 해시태그 기능은 추천의 메타데이터로 이용될 수 있다.

사용법 역시 익숙하다. 위아래 스크롤을 통해 보고 싶은 영상을 골라보는 방식인데, 29TV를 통해 선보이고 있는 홍보 영상들은 대부분 29초 이내의 길이인 것으로 보인다. 요즘 다양한 패션커머스에서 판매자들에게 이러한 방식의 영상 홍보, 판매 채널을 지원하고 있는데 라이브 방송의 경우 홈쇼핑과 유사한 방식으로 이루어지기 때문에 재생시간(방송시간)이 길어질 수 밖에 없다.

하지만 29TV는 홈쇼핑보다는 기존의 인스타스토리 광고와 유사하다. 단순히 제품의 홍보 영상을 틀어주는 것이 아니라, 모델이 직접 나와 제품의 '착샷'을 보여주거나 또는 제품의 사용법을 짧은 영상을 통해 알려준다. 재생 방식 역시 단시간 콘텐츠 재생에 초점이 맞춰진 틱톡과 유사하다. 그렇다면 29TV 역시도 추천 알고리즘이 동작하고 있을까? 해당 기능을 오래 사용해 보았지만, 나를 위한 추천이 이루어지고 있다는 느낌은 아직 받지 못했고 관련 자료도 찾지 못했다. 그럼에도 만약 추후에 개인화된 추천이 이루어진다면, 또는 현재에도 이루어지고 있다면 29TV처럼 짧은 재생시간을 가진 콘텐츠는 재생시간보다 재생 횟수가 더 중요한 데이터로 여겨질 수 있다.



검색창의 활용법과 동의어 검색

29CM의 돋보기 버튼을 통해 검색을 해봤다. 검색과 일치하는 결과가 있으면, 그것과 연관된 상품을 오른쪽 화면처럼 보여주지만 일치하는 결과 값이 없다면 왼쪽의 화면이 발생된다. 검색어에 대한 결과가 없음을 알리는 문구와 함께 사용자가 허무해하지 않도록 <다른 사람들은 이런 상품을 보고 있어요>라는 추천 영역을 제공하여 빈 여백을 최대한 활용했다. 이는 상품의 구매율 측면에서도 도움이 될 뿐 아니라, 사용자가 헛걸음을 했다는 느낌을 주지 않는다.

여기서 <다른 사람들은 이런 상품을 보고 있어요>와 같은 추천이 어떻게 이루어지는지 확인해 봤는데, 아무래도 실시간 클릭률이 높은 상품(실시간 클릭 베스트 상품)의 리스트를 보여주는 듯 했다. 실시간 클릭률이 높은 상품은 대부분 스페셜오더 카테고리에 속한 상품이라는 점도 주목할 만한 지점.

* 스페셜오더는 오직 29CM에서만 만나볼 수 있는 브랜드의 상품을 저렴한 가격에 소개하는 협업 프로모션이다.

말이 나온 김에 29CM의 검색 시스템을 조금 더 파봤다. 관련 내용을 29CM의 기술 블로그를 통해 찾을 수 있었는데, 이들 역시 타 커머스가 그렇듯 높은 검색 품질을 위해 검색 엔진을 사용하고 있었다. 검색엔진은 1)형태소 분석 2)불용어 처리 3)어간 추출을 통해 동의어 검색을 가능케하고 있으며, 이는 구매자가 정확한 상품의 명칭과 모델 또는 색상을 입력하지 않더라도 그에 상응하는 결과치를 찾아내는 데 큰 역할을 하고 있다.

이 말은 즉, 사용자가 다이슨 DP-03 퓨어쿨 선풍기라고 검색하지 않아도 된다는 뜻이다. 그냥 ‘다이슨 선풍기’라고만 검색해도 비슷한 결과를 얻을 수 있다는 것인데 이외에도 상당한 장점이 있으니, 29CM 기술 블로그 원문(이커머스에서 검색엔진이 필요한 이유)을 참고해도 좋겠다.



비어있는 장바구니

앞서 본 내용처럼 29CM는 검색창의 빈 공간을 추천의 용도로 잘 활용하고 있었지만, 장바구니는 어떤 연유에선지 비워둔 상태였다. [장바구니에 담은 상품이 없습니다.]라는 짧은 안내 문구와 함께 계속해서 쇼핑을 할 것을 권유하고 있는 왼쪽의 화면이 29CM의 인터페이스다. 그리고 빈 장바구니의 중앙에 위시리스트를 확인할 수 있는 버튼을 배치하고, 추가 구매 제안을 하고 있는 두 화면은 무신사의 인터페이스다. 한눈에 봐도 확연한 차이가 느껴진다.

검색창에서만 상품 제안을 하고 있는 29CM와 달리, 무신사는 장바구니 뿐만 아니라 결제 화면에서까지 추가 구매 제안을 하고 있다. 어떻게든 구매전환율을 높이겠다는 확고한 의지가 느껴지는 대목이었다.



WELOVE, 우리가 좋아하는 것을 구경해봐

WELOVE 탭은 앞서 정보구조에서 살펴보았듯, 읽기에 특화된 콘텐츠를 사용자에게 제공하고 있다. 흥미로운 점은 이렇게 글을 읽으면서 연관 상품을 구매할 수 있다는 점인데, 이런 추천이라면 누구나 수백 번이고 받을 의향이 있지 않을까? 유명 에세이스트가 작성한 글을 읽으며 그 속에 등장하는 커피를 직접 만들어 마실 수 있도록 관련된 아이템을 추천해주는 방식은 얼핏 보기엔 '정말 사람들이 살까?' 하는 생각이 들지만, 이미 브랜드와 라이프스타일 아이템에 밝은 29CM 사용자들의 감성을 자극하기엔 더없이 효과적인 큐레이션일지도 모른다.



검색 기록을 열람할 수 있다면

29CM의 인터페이스를 살펴보며 한 가지 특이하다 느꼈던 지점은 검색기록을 열람할 수 있다는 것이었다. 검색창에서 최근검색어나 인기검색어를 보여주는 기능은 사실 딱히 놀랍지는 않다. 하지만 29CM는 MY탭에서도 검색기록 열람 기능을 제공하는데, 그 구조가 일반적인 검색기록 확인과는 확실히 거리가 있어 보인다. 저 플러스 버튼을 터치하면 오른쪽 이미지와 같이 이전에 살펴봤던 제품이나 콘텐츠, 검색어들이 타임라인의 형태로 노출된다. 비회원도 이런 기능을 사용할 수 있다는 점에서 꽤 이색적이었는데, 이 역시도 구매전환율을 높이기 위한 장치로 보인다.

29CM는 검색 기록을 왜 하필 타임라인의 형태로 노출시켰을까? 29CM는 눈이 닿는 곳마다 콘텐츠적인 요소로 이루어져 있다. 물론 쇼핑을 목적으로 앱을 실행시킨 사용자들이 대부분이겠지만, 시각적인 콘텐츠를 감상하다보면 본인이 무엇을 구매하려고 했는지/아까 살펴봤던 상품 중 어떤 아이템이 마음에 들었었는지 기억하기 어려울 수도 있다. 29CM는 이러한 고객들의 불편을 감안해 MY탭에서 검색기록부터 콘텐츠 열람 기록까지 한눈에 살펴볼 수 있는 세로형 타임라인을 구성했다.



29 Culture Calendar

29CM는 WELOVE 탭의 29 컬처 캘린더를 통해 새로운 방식의 문화생활을 제안하고 있다. 이를 구독한 사용자는 다양한 컬처 상품의 할인 혜택과 프로모션을 받아볼 수 있는 것이 특징이다. 의류와 라이프스타일 아이템을 넘어 '이번 달 볼 만한 것'까지 추천하고 있는 29CM. 뉴스레터 서비스처럼 구독형이라는 점도 신선한데, 언제든 쉽게 구독을 해지할 수 있으며 추가적인 비용도 발생되지 않는다. 29 컬처 캘린더는 여러 가지 삶의 형태와 취향을 추천해왔던 29CM와 찰떡 같이 어울리는 기능인 동시에 광고, 제휴 수익을 올릴 수 있는 수익원이기도 하다.




마무리

​'순간을 장편으로'

​'나의 책상들을 낯설게 보면 어느새 스며들었던 습관과 행동들을 발견케 됩니다. 작은 재미를 느끼는 것은 물론이고, 행동의 이유를 찾으며 스스로를 더 많이 알아가게 되는 것 같아요. 알아차린 스스로의 모습에서 귀여움과 짠함을 동시에 느끼기도 합니다. 스스로를 알아가다 보면 멈춰버린 책상의 순간이 장편으로 느껴지고, 사이사이에 이야기를 만들어낼 수 있습니다.'

​내용만 보면 에세이의 한 구절 같다. 놀랍게도 위의 카피는 29CM의 에디터가 입점된 브랜드의 포스트잇을 소개하는 문구다. 고작 포스트잇 하나 파는 데 너무 거창한 거 아니냐며 혀를 내두를 수도 있지만, 29CM에 입점된 제품 중 고작이란 없다. 카피 하나, 사진 한 장도 고심하여 고른 티가 역력하다. 이런 정성은 결코 무용하지 않으며 끝끝내 나 같은 사용자를 감동시키고야 만다. 평범해 보이는 물건도 사고 싶게끔 만드는 능력이 29CM에는 있다.

이 제품이 얼마나 저렴하고 좋은지에 대해 이야기하는 커머스는 많아도, 당신이 이 제품을 구매하는 것이 왜 의미가 있는지에 관해 이야기하는 커머스는 드물다. 나는 바로 이러한 차이 때문에 29CM의 충성도 높은 고객이 되었다.




국내 1위 IT아웃소싱 플랫폼,
위시켓이 궁금하신가요?

[참고한 글]

https://www.mk.co.kr/news/business/view/2018/12/811208/
https://www.mobiinside.co.kr/2019/08/20/app-ape-musinsa/
https://www.ktnews.com/news/articleView.html?idxno=115657
https://magazine.hankyung.com/business/article/2020012001261000241
https://www.newstomato.com/ReadNews.aspx?no=934724



위시켓

온라인 아웃소싱 플랫폼 위시켓