#무신사-마이페이지/리스트

#Hollister-기능안내

#Nordstrom-기능안내

#레진코믹스-설정

 

 

레진코믹스는 왜 취향설정을 메인화면으로 가져왔을까?

 

취향은 개인화의 기본으로 활용됩니다. 물론 실제 서비스를 사용하며 기록되는 데이터 등이 정교하게 반영되어야 하지만, 이는 사용자가 직접 설정할 수 있는 영역 외 일이라, 취향 설정이 사용자가 체감하는 가장 가까운 개인화 영역이 아닐까 싶어요. 최소한 사용자가 보고 싶어 하는 내용만 먼저 제공할 수 있기 때문입니다. 그 과정에 사용자의 ‘선택’이 개입될 수 있고요.

 

 

 

 

레진코믹스 역시 ‘다양한 장르’중 사용자가 원하는 ‘취향’만 선택할 수 있는 기능을 제공합니다. 다만, 기존에는 설정 화면 안쪽에 자리 잡고 있어 최초 설정 후 재설정이 어려웠습니다. 또 취향이 반영되는 공간은 메인 화면인데, 취향 적용은 다른 화면에서 진행되어 설정 후 메인 화면으로 돌아와서 적용이 잘 되었는지 확인하는 과정이 필요했습니다. 반영이 되는 공간과, 설정하는 공간이 달라 생기는 불편이라고 할 수 있는데요.

얼마 전, 레진코믹스가 취향 설정 기능을 메인 화면으로 이동시켰습니다. 취향 설정 하기 버튼을 메인 화면 내 확인 후 탭 하면, 팝업으로 바로 ‘보고 싶지 않은 장르를 제외해주세요.’라는 메시지와 함께 장르를 선택 또는 해제할 수 있게 되었습니다. 기존에는 ‘추천받고 싶지 않은 장르’라는 표현을 활용했는데, ‘보고 싶지 않은 장르’라고 표현을 변경한 것도 확인할 수 있습니다. 조금 더 ‘직접적인’ 문구를 활용하기 위한 목적으로 보입니다.

이제 메인 화면에서 제공되는 장르 별 웹툰을 보며, 보고 싶지 않은 내용이 있는 경우 다른 화면으로 이동하지 않고 팝업을 활용해 바로 수정할 수 있게 되었습니다. 실제 적용 화면을 보며 설정을 한 곳에서 진행할 수 있게 된 것이죠. 문구 내 ‘홈 화면’을 강조한 것도 같은 맥락이 아닐까 싶습니다. 기존 설정 화면에서는 ‘홈 화면’이 강조되지 않았기 때문입니다.

 

 

 Nordstrom이 신규 기능을 안내하는 방법

 

 

 

 

매출 기준, 미국의 3대 백화점 중 하나인 노드스트롬의 앱을 사용하다 새로운 기능 안내를 보게 되었습니다. 바로 검색 조건을 저장하는 기능입니다. 기본 제공되는 상품 리스트는 ‘전체’에 해당하기에 이 조건을 그대로 ‘탐색’에 활용하는 경우는 많지 않습니다. 그래서 다양한 필터와 정렬 조건을 사용자가 원하는 대로, 입맛대로 활용할 수 있도록 하는데요. 노드스트롬 역시 브랜드, 사이즈, 컬러, 가격 등의 필터와 신규, 가격, 세일, 평점 등의 정렬 기능을 앱 내 제공하고 있습니다.

그런데, 이런 필터를 사용할 때 적용 후 확인까지는 좋지만 앱을 다시 실행하면 같은 조건을 다시 설정하거나 조건을 처음부터 하나씩 설정해야 하는 불편이 존재합니다. 서비스는 늘 기본값을 갖고 있으며, 이 값을 앱을 실행할 때 다시 적용하기 때문입니다. 이런 불편을 해결하기 위해 노드스트롬은 필터와 정렬 기능 등 사용자가 설정한 내용을 저장하는 기능을 적용했습니다. 하나의 값을 저장하는 것이 아니라, 여러 조건을 각각 저장할 수 있도록 구성되어 있습니다.

옷은 종류나 브랜드에 따라 사이즈 등이 다를 수 있고, 구매하는 상황에 따라 원하는 조건이 다를 수 있는데요. 이런 경우 동일한, 하나의 조건만 저장이 가능하고 기존 내역에 덧씌워질 경우 각 상황 별 조건을 활용할 수 없게 됩니다. 그래서 노드스트롬은 카테고리 별 리스트에 따라 조건을 저장할 수 있게 했고, 저장된 내용은 검색 화면 내 ‘Saved searches’라는 항목에서 언제든 확인할 수 있도록 했습니다.

새로운 기능 안내 역시, 검색이나 필터로 설정한 내용을 저장할 수 있다는 툴팁으로 시작, 첫 저장을 누르면 팝업을 통해 저장한 항목을 어디에서 볼 수 있는지 구체적으로 안내해주는 역할을 충실히 하고 있습니다. 보통 이 기능을 써봐! 에서 끝나는 경우가 많은데, 저장 방법은 물론 확인 방법까지 구체적으로 안내해주는 점이 눈에 띄었습니다. 얼마 전 살펴본 지그재그의 새로운 기능 안내가 떠오른 사례이기도 합니다.

 

 

Hollister가 새로운 기능을 안내하는 방법

 

리스트와 상세페이지는 우리가 상품, 콘텐츠 중심의 서비스를 사용하며 가장 많이 접하게 되는 화면입니다. 특히 ‘구매’를 목적으로 하는 커머스에서는 탐색 과정의 기본이라고 할 수 있는데요. 검색이든, 카테고리와 같은 묶음이든 리스트를 기본으로 해 원하는 대상을 살펴보는 구조가 많기 때문입니다. 그래서 ‘리스트’에는 보통 상품을 대표하는 정보가 포함되는데요.

 

 

 

 

이와 별개로, 상세페이지로 이동을 줄이면서도 리스트 내 핵심 정보를 효율적으로 확인할 수 있는 장치를 제공하는 경우가 점점 늘어나고 있습니다. ‘Hollister’ 역시 최근 관련 기능을 업데이트 했는데, 기능을 안내하는 방법부터 눈에 띕니다. 우선 리스트 확인이 가능한 화면으로 진입하면, 팝업으로 신규 기능에 대한 안내가 제공됩니다. 탐색을 더 쉽게 할 수 있다는 내용과 함께 사용자가 기능을 사용하는 첫 단계에 해당하는 내용을 확인할 수 있습니다.

이 기능은 리스트 내 특정 상품 이미지를 ‘길게 탭’하는 것으로 시작되기에 관련 텍스트와 함께 짧은 영상을 볼 수 있습니다. 아무래도 기존에 잘 사용하지 않았던 행동일 수 있고 이미지로는 기능을 구체적으로 안내할 수 없기에 영상을 선택한 것으로 보입니다. 덕분에 텍스트를 모두 읽지 않아도 기능을 어떻게 활용할 수 있는지, 어떻게 시작할 수 있는지 쉽게 이해할 수 있습니다.

탭으로 끝나는 것이 아니라, 추가 행동이 가능한 기능이라 안내는 두 번째 단계로 이어집니다. 이번 역시 텍스트와 영상을 함께 활용해 이전 행동과 어떻게 이어지는지, 이번 단계에서는 구체적으로 행동에 따라 어떤 피드백이 제공되는지 쉽게 알 수 있습니다. 기능을 사용할 가능성이 높은 순간에, 기능이 추가된 이유(탐색을 빠르게)는 계속 보여주고 단계별 사용 방법은 한줄의 텍스트와 영상을 바꿔 보여주는 모습입니다.

기능 자체도 유용하게 느껴집니다. 리스트에서 썸네일을 길게 탭 하면 상세 페이지로 진입 전 팝업으로 상품에 대한 핵심 정보를 추가로 확인할 수 있기 때문입니다. 이미지는 스와이프 가능해 다양한 착용샷 또는 각도에 따른 모습을 구체적으로 알 수 있습니다. 이 팝업에서 사이즈를 선택하거나 상세 화면으로 이동할 수 있는 기회도 주어집니다. 컬러에 따른 다양한 이미지는 물론, 사이즈 확인까지 가능하니 이곳에서 몇 번 구매를 했거나 브랜드를 좋아하는 사용자라면 불필요한 탐색 시간을 줄여 구매로 더 빠르게 이어질 수 있는 역할을 하지 않을까 싶네요.

 

 

무신사가 리스트 내 옵션 정보를 보여주는 이유

 

디스커버리가 리스트 내 사이즈를 보여주는 이유를 살펴본 적 있습니다. 제품 썸네일 우측 하단 ‘사이즈’ 버튼을 탭 하면 해당 제품의 사이즈를 한눈에 볼 수 있는 방법입니다. 재고까지 안내는 되지 않지만, 사이즈 범위를 통해 자신의 발 사이즈와 비교, 구매 가능한지를 리스트에서 쉽게 구분할 수 있습니다. 이런 정보를 미리 제공해주지 않으면 상세 화면 – 구매하기 등 별도 과정을 거쳐야 알 수 있기에 더 유용하게 느껴졌습니다.

 

 

 

 

얼마 전, 무신사를 사용하다 같은 맥락의 경험을 할 수 있었는데요. 무신사 – 남성 아우터 리스트를 보는데, 각 제품 카드 하단에 ‘옵션’ 버튼과 그 오른쪽으로 M, W 등의 정보가 담긴 것을 볼 수 있었습니다. 옵션은 해당 제품의 사이즈 별 재고를 통해 구매 가능한지 안내하는 역할을 하고 있었고, M, W 등은 남성/여성 등 성별에 따라 구매 가능한 상품인지 구분해주는 역할을 하고 있었습니다.

실제 옵션 버튼을 탭 하면 상품 별 등록 옵션과 사이즈를 리스트로 확인할 수 있습니다. 예를 들어 일반 제품과 기모 제품이 함께 제공되는 경우라면 각각의 상품에 따라 특정 사이즈 구매가 가능한지 쉽게 확인할 수 있습니다. 여성 전용 사이즈도 별도로 확인할 수 있습니다. 이 정보가 주는 장점은 역시 효율적인 탐색을 도와준다는 점입니다. 마음에 드는 옷이 있어 상세 화면으로 이동해 내용을 확인, 보통 구매하기를 눌러 옵션을 선택하게 되는데 모든 상품이 품절되지 않은 이상 이때서야 사이즈 별 재고 현황을 알 수 있기 때문입니다.

요즘은 하나의 상품이 여러 옵션에 따라 구분되는 경우가 많아, 이런 정보를 적절한 순간에 제공하지 않으면 그만큼 탐색 시간이 길어질 수밖에 없는데요. 리스트 내 내가 원하는 사이즈가 있는지 확인하며 계속 탐색할 수 있다는 점에서 무신사의 사이즈 별 재고 현황 정보는 그만한 가치가 있다는 생각이 들었습니다.

 

 

무신사는 왜 마이페이지를 개선했을까? 두 번째

 

무신사의 마이페이지는 작년 초여름 한번 변경된 적 있어요. (무신사는 왜 마이페이지를 개선했을까?) 당시 핵심은 모든 메뉴를 풀어 보여주는 것이 아닌, 핵심 내용을 먼저 보여주는 방식으로의 개선이었습니다. 기존에는 서비스 입장에서 사용자 개개인과 연관된 전체 메뉴를 문의, 신청/결제 등의 구분에 따라 보여주는 방법을 활용했는데요. 어떤 메뉴가 있는지 한 눈에 볼 수 있다는 점은 좋지만, 원하는 메뉴를 바로 찾아가기 어렵다는 단점이 있었어요. 개선 후에는 딱 다섯 가지 메뉴로 정리가 되었습니다.

 

 

 

 

그리고 반년 뒤, 무신사가 다시 한번 마이페이지를 개선했습니다. 이번에는 ‘주문’ 현황을 먼저 볼 수 있는 화면으로의 변화에 초점이 맞춰졌습니다. 기존에는 개인정보와 적립금 현황 등을 먼저 볼 수 있도록 구성되어 있었는데, 업데이트 후 배송 현황 등 결제가 완료된 후 상품 상태를 가장 먼저 확인할 수 있게 되었습니다. 아무래도 커머스에서 사용자 입장에서 구매를 완료한 상품을 기준으로, 현재 어떤 상태에 있는지 확인하는 과정이 중요하다는 판단 때문인 것 같아요. 시간의 흐름에 맞춰 살펴보면 기존에는 적립금이나 포인트 등 과거 내역을 기반으로 한 정보가 우선이었는데, 이제는 현재의 상태에 초점이 맞춰진 정보가 우선 순위가 높아진 모습입니다.

현재 상품이 어떤 상태에 있는지 확인, 이전까지의 결제를 기준으로 (다음 결제에 영향을 주는) 적립금 등을 확인한 뒤, 기타 기능을 확인할 수 있습니다. 정보를 확인하는 순서가 조금 더 자연스럽게 다가오는 이유입니다. 또 스타일쉐어와 유사한, 스타일을 공유할 수 있는 ‘스냅’ 역시 기존에는 단순 링크만 제공 되었는데 이제 배너 형태로 서비스에 대한 기능을 더 구체적으로 안내하고 있습니다.

 

 

 

 

로그인 전, 마이페이지에도 변화가 있었습니다. 개선 후, 로그인과 회원가입 버튼이 동일한 구조로 배치, 신규 회원가입에 대한 혜택을 별도로 안내하는 모습입니다. 또 추가로 제공되는(로그인 없이 사용 가능한)기능은 동일한 맥락에 따라 기능을 묶어 상대적으로 빠르게 확인, 사용할 수 있게 되었네요. 기존에는 모든 기능을 상-하로 풀어, 스크롤을 내려야 했는데 이제는 한 화면에서 모든 기능과 정보를 확인할 수 있습니다.