💡 불편함이 낳은 UX : 리스트 편

• 💡 불나유 : 원하는 상품이 품절되었을 때 겪을 수 있는 문제와 해결방법

📌 안내

이미지를 더 자세히 확인하실 수 있도록, 각 이미지에 링크를 적용했어요. 뉴스레터에 포함된 이미지를 클릭해보세요! 뉴스레터 마지막, 이번 내용에 포함된 문제와 해결방법을 한눈에 보실 수 있는 표를 첨부했어요. 동일한 상황을 마주하거나, 기능을 기획해야 할 때 하나의 체크리스트로 활용하실 수 있을거에요!

🤹‍♀️ 팁스터 신규 에디터 소개

불나유 - 불편함이 낳은 UX는 켈리폴리님과 함께 제작하고 있어요! 아웃스탠딩과 요즘IT 등에 서비스 관련 다양한 글을 기고/발행하고 있으며, 현재 PO로 일하고 있습니다.

🤹‍♀️ 켈리폴리 : 야생에서 자라나는 스타트업인입니다! 스타트업 초기멤버로 UX/UI 디자이너로 업계에 발을 들였고, 현재는PO(Product Owner)로 일하고 있습니다:) 비즈니스 모델과 서비스의 UX가 어떻게 연결되어 시너지를 내는지 분석하는 일을 좋아합니다. 이런 경험을 통해 발굴해내는 인사이트를 많은 사람들에게 공유하고 함께 알아가고 싶어요!

• 켈리폴리님의 브런치 바로가기

주제 소개 : 리스트에서 옵션을 알 수 없을 때의 문제와 해결 방법

우리가 특정 ‘상품'을 구매하고자 할 때, 가장 많이 보게 되는 화면은 특정 조건에 따른 ‘리스트' 화면이라고 생각해요. 카테고리에 따라 보거나, 입력한 검색어에 따라 리스트를 보는 행동은 탐색의 출발점이 되기 때문입니다. 리스트를 통해 원하는 상품을 발견할 경우 상세 화면으로 이동해 자세한 정보를 보고 마음에 들 경우 바로 구매를 하거나, 저장하기 등을 통해 탐색을 계속 이어가게 됩니다.

그런데, 리스트 - 상세, 리스트 - 상세를 반복하다 보면, 상세 화면에서 볼 수 있는 상품 관련 주요 정보를 리스트에서 볼 순 없을까?라는 생각을 자주 하게 되는데요. 동일한 구조의 화면을 계속 오가야 하고, 상세 화면에서만 상품 상세 정보가 제공되어 비교가 어려운 등의 불편이 존재하기 때문입니다. 내가 원하는 컬러가 있을까?, 내가 구매하고 싶은 사이즈가 있을까? 등에 대한 답 역시 상세화면에서 주로 확인할 수 있어요. 이런 불편을 화면 간 이동을 줄이면서 해결할 수 있는 방법에는 어떤 것들이 있을까요? 오늘은 리스트에서 원하는 정보를 더 빠르게 확인할 수 있는 방법을 제공하는 4가지 문제 해결 방법을 자세히 들여다보고자 합니다.

• 리스트 내 컬러 별 이미지 정보 제공
• 리스트 내 이미지 스와이프로 상세 정보 제공
• 리스트 내 상품 옵션 관련 정보 제공
• 리스트 내 상품 관련 추가 정보 제공

유형 별 사례 소개

쇼핑을 할 때, 특히 패션의 경우 ‘같은 디자인이라도 다른 색상을 제공하고 있나?’ 궁금한 적이 많을 텐데요. 하나의 디자인이라도 다양한 컬러가 제공되어 선택의 폭이 넓은 경우가 많습니다. 하지만, 이런 상황에서 서비스 내 다양한 색상 옵션이 어떻게 상품에 적용되는지 확인할 수 없다면 구매를 망설이게 됩니다. 이럴때 상세페이지에 들어가기 전 리스트 내 이 색상의 경우 어떤 모습인지 빠르게 인지할 수 있다면 상품을 구매하는 과정에서 고민의 과정을 줄여줄 수 있다고 생각합니다.

이번에는 색상 옵션이 많은 패션 상품들을 구경할 때, 리스트 내에서 컬러칩 UI를 노출하여 상세페이지까지 들어가지 않고도 색상 별 상품 이미지를 볼 수 있도록 UX를 설계해 둔 사례를 살펴보도록 하겠습니다.

 1.문제 해결 방법 : 리스트 내 컬러 별 이미지 정보 제공

(1)Belk, Nordstrom, Forever21, Cider : 상품에 다양한 색상 옵션을 입혀 확인 가능한 정보 제공

Belk라는 미국 쇼핑몰에서는 썸네일 밑, 해당 상품의 컬러 옵션을 동그란 컬러칩으로 표시해주고 있습니다. 이 컬러칩을 탭 하면, 썸네일 상에서 해당 상품에 선택한 칩의 색상이 입혀진 모습을 볼 수 있습니다. 사실 이렇게 색상 칩이 없이 ‘핑크’라고만 명시되어 있다면 우리들 머릿속에 수많은 핑크색들이 떠오를 겁니다. 베이비 핑크? 핫핑크? 매트한 색감의 핑크?처럼 떠오르는 색상의 스펙트럼이 다양할 텐데요. Belk와 유사한 방식으로 리스트에서 컬러별 옵션을 컬러칩으로 눌러서 볼 수 있도록 제공하는 서비스는 Nordstrom, Forever21, Cider 등이 있습니다. 이렇게 컬러별 이미지를 리스트에서 확인할 수 있게 해주는 UX는 막연함을 없애주고, 구매를 고민할 때 빠르게 팁을 주는 요소 중 하나라고 생각합니다.

(2) UNIQLO, 크록스, Belk : 컬러 옵션이 많을 경우 + 처리하여 정보 제공

하지만, 색상 옵션이 너무 많을 경우에는 어떻게 할까요? 아무래도 2열로 리스트를 표현하다 보면 한 상품당 width가 제한이 있어, 컬러칩을 사용하는 데에도 한계가 있을 텐데요. UNIQLO, 크록스, Belk와 같은 서비스는 색상 칩 옆에 + 표시 혹은 + 숫자 표시를 하여 컬러칩을 눌러 상품별 컬러를 확인할 수 있으며, 다양한 옵션이 있다는 정보까지 빠르게 확인할 수 있습니다.

2.문제 해결 방법 : 리스트 내 이미지 스와이프로 상세 정보 제공

리스트에서 상품의 정보를 볼 때, 썸네일, 제품명, 가격이라는 기본 정보 외에 다양한 액션을 이용하여 세부 정보를 확인할 수도 있는데요. 아무래도 좁은 모바일 공간에서 우리에게 익숙한 제스처는 “스와이프, 롱프레스”정도일 듯합니다. 썸네일에서 스와이프를 통해 다양한 상품의 이미지들을 확인하는 액션을 다들 한번 즈음 접해보셨을 것 같은데요.

이번에는 썸네일 위에 인디케이터와 함께 스와이프 할 수 있음을 안내하고, 스와이프 하여 상품을 다양한 각도에서 볼 수 있도록 제공하고 혹은 다양한 색상의 디자인을 볼 수 있도록 하는 서비스에 대해 소개해드리겠습니다.

(1)멜리즈, Romwe : 썸네일 스와이프를 통한 상세 정보 제공

멜리즈는 스와이프를 통해 썸네일에서 각도별 상품 모습을 확인할 수 있도록 제공하는데요. 특히 명품의 경우, 디테일한 상품 디자인 확인이 중요한데, 소비자들의 니즈에 맞춰 썸네일에 반영해둔 점이 인상 깊었습니다. 그리고 인디케이터를 두어 뒤에 몇 개의 이미지까지 스와이프 하여 볼 수 있는지 친절하게 안내하고 있습니다.

해외 서비스인 Romwe 역시 상품의 디테일한 부분을 리스트 내 썸네일을 스와이프 하여 확인할 수 있도록 제공합니다. Romwe는 인디케이터는 없어서 처음에 스와이프 가능한 것인지 헷갈리긴 했지만, 상세페이지에 들어가지 않고도 구매에 영향을 주는 디테일한 모습들을 리스트에서 확인할 수 있도록 제공한 점은 편리했습니다.

(2) 호텔스컴바인 : 썸네일 스와이프를 통한 객실 이미지 제공

패션 상품 쇼핑과 호텔을 선택하는 과정은 조금 다른데요. 특히 호텔의 경우, 겉에서 어떻게 보이는지, 실내는 어떤 인테리어로 되어 있는지, 방마다 분위기는 얼마나 다른지 등 이미지로 확인하는 정보가 결정적인 역할을 하기도 합니다. 이런 수많은 이미지 정보를 상세페이지에 들어가야만 확인할 수 있는 경우가 많은데요. 호텔스컴바인에서는 리스트에서 스와이프를 하여 객실 이미지 정보를 확인할 수 있어 호텔의 전반적인 분위기를 파악하는데 많은 도움을 주고 있습니다.

(3)Warby Parker : 썸네일 스와이프하여 색상 옵션별 이미지 정보 제공

Warby parker는 오프라인 중심에서 일어나던 기존 안경 구매 시장을 사용자 편의성에 집중하여 온라인으로 시장을 옮겨가게 한 혁신 기업인데요. Warby parker에서는 최대 5개까지 안경을 구매하여, 5일 동안 사용 후 구매할 수 있도록 서비스를 제공하고 있습니다. 특히, 안경의 경우 색상과 모양이 나의 얼굴의 인상을 결정하기 때문에 디자인에 색상 옵션들이 입혀진 모습을 확인하는 것이 구매에 결정적인 영향을 끼치게 될 텐데요.

Warby parker 앱에서는 리스트에서 스와이프만으로 안경 디자인에 어떻게 색상 옵션들이 입혀지는지 빠르게 확인할 수 있습니다. 그리고 안경이라는 상품 특성에 맞춰, 리스트를 1열로 배열하여 눌러서 크게 보지 않아도 리스트 상에서 명확하게 한눈에 볼 수 있는 점이 스와이프 액션과 더해져 사용자들이 상세페이지까지 가지 않고도 고민해볼 수 있도록 제공해주고 있습니다.

• 참고 내용 : 온라인 안경시장 뒤흔든 와비파커 오프라인에 사활 걸었다

(4) Nordstrom : 썸네일 스와이프하여 색상 옵션 및 각도별 이미지 정보 제공

Nordstrom은 위에서 잠깐 설명했듯이, 컬러칩도 썸네일 밑에 보여주고 있는데요. 그 외에도 스와이프 하여 앞 뒷면의 디자인도 동시에 확인할 수 있도록 UX를 설계해두었습니다. 그래서 Nordstrom은 다양한 UX 요소를 이용하여 유저들이 리스트에서 컬러와 디자인 앞 뒷면을 모두 확인할 수 있게 하여, 상세페이지로 들어가서 길게 디자인별, 색상별 스크롤해야 하는 불편함을 막아주고 있습니다.

(5) Hollister : 롱프레스 & 스와이프하여 색상 옵션별 이미지 정보 제공 

Hollister는 위에서 설명한 다른 서비스들과는 조금 다른 액션을 사용하여 세부 정보를 제공하고 있는데요. 리스트에서 썸네일 쪽을 길게 꾸욱 누르면 위의 가운데 있는 화면처럼 카드가 확대되어 보입니다. 여기에서 스와이프를 하여 다양한 각도에서 상품의 디자인을 확인할 수도 있고, 하단의 컬러칩들을 눌러보면서 상품에 해당 컬러가 입혀진 디자인을 확인할 수도 있게 되어 있습니다. 아무래도, 리스트 내에서 모든 정보를 다 표현하는 것이 오히려 복잡하다고 느끼면, 이런 식으로 롱 프레스 & 스와이프 방식을 둘 다 적용하여 표현할 수도 있을 것 같아요. 롱 프레스로 화면이 확대되어 보이는 것은 그래도 상세페이지로 진입하는 것보다는 depth가 적게 느껴져 유저들의 불편함을 덜어주는 듯합니다.

3.문제 해결 방법 : 리스트 내 상품 옵션 관련 정보 제공

최근의 상품들은 저마다 다양한 ‘옵션'을 갖고 있어요. 패션이라면 컬러와 사이즈가 있고, 디지털 제품이라면 사양 등으로 상세 옵션이 나뉘게 됩니다. 한 가지 상품만 제공되고, 그 조건에 만족하는 경우라면 큰 문제가 없지만 한 가지 상품이 여러 옵션을 갖고 있다면 탐색 과정에서 사용자는 자신에게 적합한 대상을 찾아야 하는 과제를 갖게 될 수밖에 없어요. 문제는, 리스트에는 대부분 ‘대표' 정보만 제공되어 상세 화면으로 접근하지 않는 이상 내게 맞는 정보를 확인하거나 찾기 어렵다는 점입니다. 셔츠를 구매한다고 하면, 리스트를 통해 썸네일과 브랜드, 가격 정보 등은 금방 알 수 있어도, 내게 맞는 사이즈가 있는지 컬러는 무엇이 있는지 등을 바로 알기 어려운 환경이 많습니다. 이런 구조는 리스트와 상세 화면을 계속 오가야 하는 불편을 만들고, 이는 탐색 과정을 더 길게 만드는 상황을 만들 수 있어요.

이번에는 서비스가 리스트라는 공간을 통해 컬러, 사양 등 상품의 ‘옵션'과 관련된 일부 정보를 제공하는 사례를 살펴보고자 합니다. 이를 통해 사용자가 상세화면을 전체를 읽지 않고도 구매에 적합한 정보를 미리 확인, 꼭 필요한 경우에만 상세화면으로 이동할 수 있는 환경을 고민해볼 수 있다고 생각합니다.

(1) 29CM, 서울스토어, 오늘의집 : 썸네일을 통한 컬러 정보 추가 제공

29CM/서울스토어/오늘의집은 썸네일 이미지를 적극적으로 활용하고 있는데요. 이미지에 해당 상품의 컬러 종류를 함께 표기하는 방법입니다. 이 방법은 이미지만 별도로 준비되면 바로 활용 가능하면서, 사용자에게 컬러 범위 정보를 제공해줄 수 있는 효율적인 방법이기도 합니다. 다만, 판매자가 별도로 이미지를 제작하지 않는 이상 모든 리스트에 적용되는 것이 아니라 일관성이 없는 정보로 비칠 수 있다는 단점이 있습니다. 실제 위 이미지를 자세히 보면 같은 리스트에 포함된 상품이라도 컬러 정보가 있는 경우, 없는 경우가 있으며 같은 정보라 하더라도 이미지 아래, 오른쪽 등 제공 위치가 다르다는 점을 알 수 있어요.

(2) SSF SHOP, H&M, LF MALL : 리스트를 통한 상세 컬러 정보 제공

SSF SHOP/H&M/LF MALL 역시 리스트 내 ‘컬러 정보’를 제공해줍니다. 다만, 앞서 살펴본 29CM/서울스토어/오늘의집과 달리 서비스 내 노출되는 다양한 상품을, 동일한 방법에 따라 정보를 제공해준다는 차이가 있습니다. 또 썸네일이 아닌, 리스트 내 상품 별 정보 하단에 컬러 정보를 제공하고 있어요. 이렇게 제공되면 이 서비스에서 제공하는 ‘공통 정보'로 인식될 수 있어 더 편리한 탐색을 도와줄 수 있습니다. 물론 여전히 아쉬운 점도 있어요. 앞에서 우린 이미 컬러 별 이미지를 리스트에서 바로 확인할 수 있는 사례를 살펴봤는데요. 지금 보는 사례는 컬러 개수와 종류는 알 수 있지만, 컬러 별 이미지는 여전히 상세 화면으로 진입해야 확인할 수 있습니다.

우리가 함께 생각해볼 내용은 바로 ‘경험'이에요. 만약 무신사를 자주 쓰는 사용자가 썸네일에 컬러 정보가 제공되는 서비스를 사용한다면 어떨까요? 무신사의 경험을 바탕으로 다른 서비스의 경험을 생각할 수밖에 없어요. 우리의 사용 경험은 보통 앞선, 더 좋은 경험을 제공한 서비스를 바탕으로 기준이 형성되기 때문입니다. 물론, 이 자체가 서비스 사용 여부를 결정짓는 요소로 깊게 자리 잡은 것은 아니지만, 더 나은 경험이라고 판단할 수 있는 기준에는 충분하다고 생각해요. 우리가 동일한 문제를, 서비스가 어떻게 해결하고 있는지 살펴보는 이유이기도 합니다.

(3) Birch Lane, 아디다스, PLT : 리스트를 통한 컬러 수 정보 제공

Birch Lane/아디다스/PLT는 SSF SHOP/H&M/LF MALL과 또 다른 방법으로 컬러 및 옵션 정보를 제공합니다. 먼저, 아디다스와 PLT는 컬러가 몇 개 있는 상품인지에 대한 정보를 제공해요. 실제 컬러를 보여주는 방식이 아니라, 다양한 컬러가 있어!라는 정보만 제공합니다. 상세 컬러를 확인하기 위해서는 상세 화면으로 진입해야 하는 구조입니다. Birch Lane은 ‘더 많은 옵션’이 있어!라는 정보를 제공합니다. 썸네일 하단에 ‘More Options’ 텍스트를 배치하는 방법이에요. 처음엔 버튼이라 생각하고 눌렀는데, 상세 화면으로 이동하는 구조였습니다. 이들은 썸네일 내 이미지 스와이프가 적용되지 않으며, 컬러 별 이미지를 확인할 수 없기에 사용자가 보는 썸네일 이미지 1개가 전체를 대표할 수밖에 없는데요. 때문에 더 많은 컬러와 옵션이 있다는 정보를 리스트에 제공하고 있습니다.

기존 대비 리스트를 통해 컬러를 포함한 옵션에 대한 정보를 확인할 수 있지만, 여전히 상세 화면의 의존도가 높다고 생각해요. 그럼, 리스트를 통해 구매에 대한 더 적극적인 판단을 사용자가 할 수 있는 방법은 없는 걸까요? 이번에는 앞서 살펴본 사례보다 더 적극적인 방법으로 리스트와 옵션 정보를 제공할 수 있는 방법을 살펴보겠습니다. 

(4) 무신사 : 상품 별 옵션 정보의 제공

무신사는 상품 별 사이즈와 컬러 옵션을 리스트에서 제공합니다. 각 제품 카드 하단에 ‘옵션’ 버튼과 그 오른쪽으로 M, W 등의 정보가 담긴 것을 볼 수 있는데요. 옵션은 해당 제품의 사이즈 별 재고를 통해 구매 가능한지 안내하는 역할을 하고 있으며, M, W 등은 남성/여성 등 성별에 따라 구매 가능한 상품인지 구분해주는 역할을 하고 있습니다.

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

상품의 종류도 많지만, 다양한 세부 옵션을 하나씩 확인하는 과정이 탐색에 반영될 경우 사용자가 목적을 달성하기까지 많은 시간을 투자해야 합니다. 무신사는 이런 불편을 줄이기 위해 리스트 내 원하는 사이즈와 컬러가 있는지 확인하며 화면을 벗어나지 않고도 탐색할 수 있는 환경을 제공해줍니다. 리스트를 통해 원하는 상품을 찾고, 관련 정보 확인은 물론, 구매 가능 여부까지 확인할 수 있으니 더없이 좋은 환경이 아닐까 싶네요.

(5) 다나와 : 제품 스펙과 사양 별 옵션 제공

다나와에서는 다양한 전자 제품을 만나볼 수 있어요. 그리고 전자 제품은 소위 ‘스펙'에 따라 동일 제품도 다양한 세부 종류로 나뉘게 됩니다. 예를 들어 같은 노트북 모델이라 하더라도 메모리 등의 용량에 따라 가격이나 세부 사양이 달라질 수 있는데요. 전자 제품을 잘 모르는 사람이라면 벌써 머리가 아프기 시작합니다. 무엇이 어떻게 다른지 리스트를 통해 쉽게 확인하기 어렵기 때문인데요. 그래서 다나와는 기본 모델을 리스트를 통해 보여주되 달라지는 세부 사양에 따른 가격을 화면 전환없이 볼 수 있도록 도와줍니다. 예를 들어 A라는 노트북을 리스트에서 본 경우, 이 모델에 대한 스펙을 펼쳐 확인할 수 있으며 그 아래로 A-1, A-2, A-3에 해당하는 세부 모델의 특징(메모리 용량 등)과 가격을 볼 수 있게 구성되어 있습니다.

덕분에, 기본 구성을 가진 기준 모델을 중심으로 조금씩 다른 사양에 따른 가격정보를 쉽게 확인할 수 있으며, 전체 스펙 역시 어렵지 않게 볼 수 있어요. 상세 화면으로 이동하지 않고도, 무엇이/어떻게 다른지 리스트를 통해 확인할 수 있기 때문입니다. 특정 모델을 선택해 상세화면을 본 뒤 리스트로 돌아오면 탐색 시간을 줄여주는 또 하나의 기능을 확인할 수 있는데요. 상세화면에서 본 상품과 유사한 상품을 리스트에 띄워주는 기능입니다. 추천 리스트에는 제품 썸네일은 물론, 제품명과 가격, 리뷰까지 포함되어 있어 추가 확인이 어렵지 않았어요. 정리하면, 하나의 모델에 대한 스펙과 세부 모델 정보를 리스트에서 볼 수 있으며 상세 화면을 통해 추가 정보를 확인하면 추천 리스트까지 볼 수 있는 구성입니다.

(6) 미트박스 : 옵션 별 가격과 재고 현황 제공

축산물 직거래 서비스 미트박스 역시 비슷한 방법을 활용하고 있어요. 보통 이런 서비스를 사용할 때 가장 많이 접하게 되는 옵션은 중량입니다. 돈가스를 구매한다고 하면, 몇 개가 들어있는지를 기준으로 구매를 하기 때문입니다. 미트박스는 사용자가 상세화면으로 이동하지 않고, 리스트를 통해 구매에 필요한 핵심 정보를 제공하고 있어요. 먼저, 리스트 내 포함된 상품 정보 하단에 5점 척도에 해당하는 평균 리뷰와 배송/결제 방법 등에 대한 정보를 제공합니다. 그리고 오른쪽 끝에 ‘더보기' 버튼을 제공하는데, 제게 가장 유용하게 느껴진 정보였습니다.

미트박스는 각 상품별 ‘더보기' 버튼을 통해 중량에 따른 가격 정보는 물론, 재고 현황을 한눈에 볼 수 있도록 제공합니다. 앞서 우리가 첫 번째 주제로 살펴본 ‘품절 상태'의 가장 큰 문제는 여러 화면을 거쳐야 상태를 알 수 있다는 점이었는데, 미트박스는 세부 옵션에 대한 정보는 물론 재고 상태와 유통기한 등의 정보를 리스트에서 제공하고 바로 구매할 수 있는 버튼을 함께 제공해 편의를 높인 모습입니다.

(7) 쿠팡 : 리스트는 아니지만, 상세 화면을 영리하게 활용하는 사례

상세화면 내, 구매하기 버튼을 선택한 뒤 컬러나 사이즈를 확인해본 경험 한 번쯤 있을 것 같아요. 특정 컬러, 사이즈에 해당하는 상품이 품절되었다는 것 역시 이때 확인할 수 있습니다. 게다가 컬러/사이즈를 각각 선택해 정보를 확인 후 다음 단계로 이동하는 등 불편하게 느껴질 때가 있습니다. 이때, 컬러와 사이즈에 따른 구매 가능 여부나 관련 정보를 조금 더 명확하게 볼 수 있으면 좋겠다는 생각을 하게 됩니다.

쿠팡은 이런 불편을 보기 좋게 해결하고 있어요. 쿠팡에서 특정 의류를 검색한 뒤 상세화면으로 진입, ‘구매하기’ 버튼을 탭 하면 제품의 색상과 색상 별 사이즈, 그리고 재고 현황과 가격을 한 번에 확인할 수 있습니다. 컬러를 선택한 뒤, 사이즈를 확인한 다음 정보를 제공하는 방식이 아니라 원하는 조건을 하나씩 선택하면 그에 다른 가격이나 재고를 바로 확인할 수 있어 제가 원하는 조건이 현재 구매 가능한지 빠르게 판단할 수 있어요. (색상을 썸네일 그대로 활용한 것도 인상적!)

품절된 사이즈는 구매 가능한 사이즈와 달른 컬러로 구분해 제공하며, 품절된 사이즈를 선택할 경우 화면을 벗어나지 않고 ‘재입고 알림 신청’ 등 상황과 맥락에 맞는 행동을 바로 할 수 있어 더 편리하게 느껴집니다. 재고가 있는 경우, 장바구니 담기나 바로 구매를 선택해 다음 단계로 이동할 수 있습니다. 이 자체는 우리가 커머스에서 자주 보던 기능이지만, 다음 단계로 넘어가기 전 사용자가 원하는 조건에 따라 정보를 더 편리하고 쉽게 볼 수 있게 제공한다는 점이 가장 큰 특징이 아닐까 싶네요!

(8) 추가사례 - 제주지니 : 리스트 내 접근성 정보 제공

제주지니는 (제가 아는 한 유일하게) 장애인 접근성에 대한 정보를 리스트에서 제공합니다. 이 장소에 장애인이 직접 방문할 수 있는지, 누군가의 도움을 받아 둘러볼 수 있는지 등에 대한 정보를 '아이콘'으로 구분해 보여주고 있어요. 리스트에 휠체어 아이콘이 보이시나요? 장애인이 단독으로 돌아다닐 수 있다는 것을 의미합니다. 상세페이지로 진입하면 더 자세한 정보를 볼 수 있어요. 사용자의 상황에 따라 방문이 가능한지 리스트를 통해 쉽게 확인할 수 있는 사례이기도 합니다. 

4.문제 해결 방법 : 리스트 내 상품 관련 추가 정보 제공

리스트에서 원하는 상품을 발견했을 때, 비슷한 상품은 또 없을까?라는 생각을 자주 하게 되는데요. 아무래도 리스트에는 많은 상품이 포함되어 있어, 필터 등의 조건을 추가해도 원하는 상품을 한 번에 찾기가 어렵기 때문입니다. 이런 경우 보통은 상세 화면에서 상품 정보를 확인한 뒤 연관 상품을 이어 보는 방법이 있지만, 상세 화면 마지막에 포함된 경우가 많아 아쉬울 때가 있어요. 그래서 앞서 살펴본 다나와는 상세 화면에서 리스트로 돌아왔을 때 함께 보면 좋은 상품을 보여주기도 했는데요. 이번에는 탐색 과정 속 리스트에서 유사 상품을 볼 수 있는 기회를 제공하거나, 탐색에 도움이 되는 추가 정보를 제공해주는 방법을 살펴볼까 합니다.

(1) 11번가 : 상품이 포함된 카테고리 베스트 상품 확인

11번가는 리스트에 포함된 개별 상품 하단, 해당 상품이 속한 카테고리 베스트 아이템 10개를 보여주는 방법을 활용하고 있어요. (전체 리스트에 적용된 것은 아니며, 베스트 리스트에 적용) 제가 본 날을 기준으로 여성 티셔츠와 잠옷이 1,2위를 차지하고 있었는데, 각 상품 정보 하단에 ‘티셔츠'와 ‘잠옷/홈웨어'라는 드롭다운이 적용되어 있었습니다. 평소에 잘 보지 못했던 내용이라, 탭 해보니 티셔츠 BEST, 잠옷/홈웨어 BEST 바텀 시트로 연결되었어요. 총 10개의 상품을 스와이프해 확인할 수 있습니다. 마지막에는 ‘BEST 더보기’ 버튼이 있어 해당 카테고리 베스트 상품 전체보기 화면으로 이동할 수 있는 기회가 주어졌습니다.

베스트 탭에 포함된 상품에는 모두 동일한 버튼이 적용되어 있어요. 카테고리만 다를 뿐입니다. 베스트는 어떤 상품이 잘 팔리고 있는지 대략적인 확인을 위한 공간인데요. 그중 마음에 드는, 관심이 가는 상품이 있다는 가정하에 함께, 많이 판매된 상품을 확인하고 싶을 때가 있어요. 그럴 땐 카테고리 베스트를 확인하는 것이 가장 빠른 방법이고요.

11번가와 같은 플랫폼은 의류 등 한 가지 카테고리만 취급하는 것이 아니기에 종합 베스트 탭을 운영하고 있으며, 이 화면이 관심 카테고리를 인지하거나 찾는 출발점이 될 수 있어요. 카테고리 별 리스트나 기획전 등에서는 베스트 탭 상품 리스트에 적용된 버튼이 없다는 것을 알 수 있었는데요. 카테고리를 찾아가 인기순 등의 정렬 조건을 활용할 수도 있지만, 홈 화면 기준 가장 빠르게 접근할 수 있는 화면이 ‘베스트’ 탭이기에 상품이 포함된 다른 카테고리의 인기 상품을 함께 보여주는 방법을 활용한 것 같아요.

베스트 상품이 많이 팔리거나 좋은 평가를 받는 등 서비스가 정의한 일정 기준에 따라 갱신되는 것은 맞지만, 이 기준이 모든 사용자에게 받아들여지지 않을 가능성도 있기에 같은 카테고리의 다른 인기 상품을 빠르게 보여주는 방법을 활용하는 모습입니다. 어떤 카테고리에 관심이 있는지, 그리고 그 카테고리에서 인기가 있는 몇 개의 상품은 무엇인지를 베스트 탭 안에서 해결할 수 있도록 도와주는 것이 가장 큰 목적이 아닐까 싶네요.

(2) Macy’s : 유사한 상품을 리스트 내 바로 확인

Macy’s 역시 11번가와 유사한 기능을 제공합니다. 차이가 있다면, Macy’s는 베스트 등 일부 상품이 아닌, 모든 리스트에 포함된 상품에 ‘More Like This’ 버튼을 제공한다는 점입니다. 버튼을 선택하면 바로 아래로 유사한 상품 리스트를 확인할 수 있어요. 이 리스트에서도 다시 ‘More Like This’ 버튼을 활용할 수 있어 최초 선택한 상품으로 시작해 ‘유사하다는' 기준에 따라 탐색 과정을 계속 이어갈 수 있습니다.

동일 카테고리에 포함된 상품이라 하더라도, 각자가 원하는 ‘스타일’은 다를 수밖에 없기에 이런 흐름은 좋아하는 스타일을 기준으로 구매 가능 상품을 좁혀주는 역할을 할 수 있다고 생각해요. 물론 최근에는 사용자 개개인이 본 상품 데이터를 기준으로 맞춤형 제안도 많이 제공되지만, 선택한 한 가지 상품을 기준으로 탐색을 계속한다는 기준이라면 이 방법이 가장 좋은 방법이 되지 않을까 생각합니다. 평소 즐겨 입는 스타일이 아닌데도, 가끔 리스트를 통해 끌리는 상품을 발견할 때도 있으니 말이죠.

(3) 네이버페이 : 주문 가능 매장 별 대표 메뉴 노출

네이버페이가 별도 앱을 출시했어요. 자산관리는 물론 송금과 결제, 주문까지 다양한 기능을 담고 있습니다. 그중 가장 눈에 띄는 건(개인적으로) 주문 탭인데요. 아직 배달로 이어지는 건 아니지만 포장 주문이 별도 앱으로 가능해졌기 때문입니다. ‘네이버 플러스 멤버십’을 통해 추가 적립 등 혜택이 가능하다는 점은 네이버가 지닌 가장 큰 장점이기에 주문하기에도 충분히 반영될 수 있지 않을까 싶어요. 무엇보다 네이버는 스마트 어라운드 등 사용자 취향에 맞는 장소를 끊임없이 추천해주고 있는데요. 취향에 맞는 맛집이나 카페를 추천해줌과 동시에 혜택을 받으며 결제, 주문할 수 있는 환경을 누구보다 잘 만들어줄 수 있을 거란 생각도 듭니다.

‘주문’이라는 행동을 기준으로 기존 배달 서비스 화면과 네이버페이 주문 탭도 함께 살펴봤는데요. 눈에 띄는 점은, 네이버페이가 매장명과 해당 매장의 대표 메뉴를 함께 보여 준다는 점이었습니다. 메뉴를 확인하기 위해 1-2단계를 더 진입해야 하는 기존 방법과 다른 구성이었어요. 자주 주문하는 매장이라면 크게 상관없지만, 새로운 매장에서 주문을 하게 될 경우 어떤 메뉴가 있는지 리스트에서 바로 확인할 수 있다는 점은 탐색 시간을 줄여주는 방법이란 생각이 들었습니다.

물론 리스트에 전체 메뉴가 포함된 건 아니지만, 특정 메뉴를 선택하면 바로 상세 화면으로 이동할 수 있다는 점도 눈에 띕니다. 그럼 화면 이동 한 번으로 음료 등 메뉴에 대한 옵션을 바로 선택, 결제까지 이어질 수 있기 때문입니다. 추후 내가 자주 주문하는 메뉴를 바탕으로 새로운 매장이나 메뉴를 추천해줄 때 리스트에서 메뉴를 미리 확인할 수 있는 지금의 방법은 더 큰 도움이 되지 않을까 싶어요. 이 매장에서 이 메뉴가 잘 어울릴 거라는 점을 한 화면에서 보여줄 수 있기 때문입니다. (아래의 배달앱 3개 리스트를 함께 보시면 더 좋아요!)

(4) 네이버쇼핑 : 리스트 내 주요 정보를 요약해 보여주는 방법

네이버페이에 이어 이번에는 쇼핑입니다. 상품을 찾아보다 눈에 띄는 안내를 확인하게 되었는데요. 원하는 검색어를 입력, 리스트로 진입하면 ‘버튼을 눌러서 상품 사진, 동영상을 확인하세요!’라는 내용입니다. 리스트 내 썸네일 왼쪽 아래 영상 재생, 이미지 아이콘이 적용되어 있는데, 이 부분을 탭 하면 화면을 이동하지 않고(상세 화면으로 진입하지 않고) 해당 상품의 자세한 이미지나 영상을 볼 수 있는 구성이었어요.

이미지, 영상을 바로 볼 수 있는 방법 외 리스트 오른쪽 하단 ‘화살표’를 탭 하면 구매정보, 리뷰, 상품 정보 등을 탭으로 구분해 확인하는 것도 가능합니다. 각 정보 아래에는 ‘상품 상세보기’ 버튼을 배치해 상세 화면으로 이동할 수 있도록 구성되어 있어요. 주목할만한 점은 리스트 내 제공되는 정보 영역이 얼추 비슷한 사이즈로 구성되어 있다는 점입니다. 사이즈가 다르다면 정보를 확인하는 과정에서 탭을 이동할 때마다 (구매정보에서 리뷰, 리뷰에서 이미지 등) 집중이 잘 되지 않을 수 있다는 점을 고려한 것 같아요. 덕분에 같은 상품의 다른 정보지만 집중해서 리스트 내 정보를 확인할 수 있습니다.

이 제품을 사야지! 하고 최저가를 검색하는 것과, 이 상품군을 살펴보고 싶은데? 뭐가 있지?라는 마음으로 탐색을 하는 것에는 차이가 있을 수밖에 없는데요. 후자라면 다양한 종류의 상품을 원하는 조건에 따라 빠르게 확인할 수 있는 게 중요합니다. 네이버는 이미 압도적인 제품군, 종류를 갖고 있고 이를 바탕으로 적절한 필터와 정렬 기능을 제공하고 있어요. 이를 바탕으로 원하는 리스트가 제공되면 정보를 어떻게 확인하게 할 것인지에 대한 고민 역시 필요하다고 생각합니다. 그 결과가 리스트에서 정보를 구분에 따라 확인하는 방법이며, 이는 리스트 – 상세, 리스트 – 상세 등으로 반복되는 과정을 거치지 않아도 대략적인 구매 대상을 추리는 데 있어 많은 도움을 줄 수 있어요.

중요한 건, 상세화면에도 모두 포함되어 있는 정보지만 이를 리스트에서 확인하기 좋은 정보로 요약, 가공해 제공한다는 점입니다. 지금 구성을 기준으로 한다면 상세 이미지와 영상, 배송비와 할인 등에 대한 정보, 리뷰(있는 경우) 등이 제공, 구매 결정에 기준이 되는 대부분의 내용이 포함되어 있고요. 거기에 ‘찜하기’ 버튼이 리스트에 기본 적용되어 있어 리스트에서 상세 정보 확인과 추후 자세히 살펴볼 상품을 추려낼 수 있는 환경을 충분히 제공한다는 생각이 듭니다.

리스트를 통해 겪을 수 있는 문제와 해결 방법 정리

에디터 코멘트

🤹🏻‍♀️

이용자들이 쇼핑할 때 어떤 점에서 불편함을 느끼는지 면밀하게 관찰하고 경험한 후에 작은 리스트라는 공간에서도 불편함을 해결해 볼 수 있는 UX를 고민해볼 수 있겠구나 생각이 들었습니다. 우리들이 커머스를 이용하면서 사실 상품을 구경하는 것 자체에 시간을 쓰는 게 불편한 것이 아니라 한 번 해도 될 일을 두 번 반복할 때 불편함을 느끼게 되는데요. 리스트에서 대략적으로 확인할 수 있는 정보가 부족할 경우, 상세페이지에서 길게 디자인별로, 색상별로 스크롤하여 확인하여 확인한 후에 다시 리스트 화면으로 나가야 하는 일들이 발생하게 됩니다. 리스트는 우리의 ‘첫인상’을 결정하는 큰 역할을 담당하고 있는 만큼, 얼마나 구매에 영향이 가는 정보들을 핵심 부분만 압축해서 보여주고 있는지가 중요하다고 생각합니다.

리스트에서 상세 정보를 미리 안내해주는 UX를 분석하며, 왜 ‘사이즈’에 대한 정보는 미리 안내해주는 사례가 많지 않을까?’라는 생각이 많이 들었습니다. ‘색상’과 ‘각도’에 따른 이미지나 정보를 리스트에서 알 수 있도록 설계해 둔 서비스는 많았는데요. 아무래도 사이즈보다 ‘색상’이나 ‘각도’ 별 모습이 유저들의 구매에 더 큰 영향을 준다고 판단하여 사이즈 정보는 상세페이지에 포함해둔 것 같습니다. 그럼, 사이즈 정보까지 리스트에서 편리하게 보여줄 수 있는 방법은 없을까요? 리서치를 통해 3가지 아이디어를 떠올려봤습니다.

우선, 필터를 더 적극적으로 활용하는 방법입니다. 필터로 색상은 물론 사이즈 등을 각각 설정해 상품을 리스트에서 볼 수 있는 것이 핵심입니다. 일단 상품 등록할 때 색상과 사이즈 정보 모두 입력하는 구조일 테니, 필터에서 index를 하나 더 추가해두는 것은 크게 어렵지 않을 것 같습니다. 실제로 퀸잇의 경우 ‘내 사이즈 추천’이란 이름으로, 사용자가 상, 하의 사이즈 및 신발 사이즈 등을 입력하며 해당 데이터에 맞는, 구매 가능한 상품만 리스트 내 보여주는 방법을 활용하고 있어요. (퀸잇은 왜 품절과 사이즈 입력을 연결했을까? : http://icunow.co.kr/mobileapps78/)

그리고 색상 정보는 리스트에서 29cm, 서울스토어, 오늘의집 UX처럼 썸네일에서 보여주고, 옵션 더보기 등 버튼을 활용해 사이즈 정보를 볼 수 있도록 설계하는 방식을 고민해봤는데요. 이렇게 하면 리스트를 복잡하게 정보들로 나열하지 않고도 색상과 사이즈 정보 모두 다 확인할 수 있을 것이라고 생각합니다.

마지막으로는 리스트에서 보고 싶은 배열을 조정할 수 있도록 하는 방법입니다. 예를 들어, 1열로 보기, 2열로 보기와 같은 옵션이 있어서 1열로 보기를 선택하면 한 열에 하나의 상품만 보이는 구조로 보면 색상 정보와 사이즈 정보가 모두 보이고, 2열로 보기를 선택하면 압축된 정보만 보이도록 설계하는 것입니다. 1열로 보이게 하면 아무래도 한 카드 당 가로 공간이 확보되기 때문에 더 많은 정보를 넣어도 크게 어지러운 느낌이 들지 않을까 생각합니다.

🐳 

무신사나 쿠팡 같은 사례를 접하고, 실제 구매 과정에 경험하고 나니 서비스 입장에서는 이런 ‘편의’를 제공할 수 있겠다는 생각과 사용자 입장에서는 리스트만으로 이런 경험을 할 수 있겠다는 생각이 함께 들었습니다. 우리가 커머스를 통해 느꼈던 ‘일반적인’ 경험에 ‘특별한’ 경험을 얹는 과정으로 우리가 꼭 기억해야 할 내용이 아닐까 싶어요. 일반적인 경험을 비틀어 새로운 경험을 만드는데 치중했다면 기본적인 탐색 자체가 어렵게 느껴졌을 가능성이 높기 때문입니다.

리스트를 통해 느낀 불편과 문제를 정리한 뒤, 서비스는 어떤 방법으로 해결하고 있을까-의 관점에서 정리하며 몇 가지 나름의 기준을 갖게 되었는데요. 우선 상세화면은 여전히 리스트의 든든한 연결고리가 되어야 한다는 점입니다. 리스트를 통해 추가 정보가 제공된다 하더라도, 우린 상세화면을 통해 제품에 담긴 이야기나 이 제품을 만든 사람들의 이야기 그리고 실제 구매한 사람들의 이야기를 모두 확인할 수 있기 때문이에요.

만약, 리스트에서 추가 정보를 제공할 수 없는 환경이라면 아디다스나 Anthropologie와 같이 상세화면 진입과 동시에 구매에 직, 간접적 영향을 주는 정보를 강조해 보여주는 방법을 먼저 고려할 수 있다는 생각이 들었습니다. 실제로 상세화면을 계속해서 개선하는 사례는 아주 쉽게 만나볼 수 있어요. 구조상 리스트 대비 상세화면을 조금씩 개선하는 것이 더 쉽게 느껴지기 때문입니다.

• 아디다스와 Anthropologie가 상세화면을 활용하는 방법 : http://icunow.co.kr/mobileapps84/

또 하나는 리스트에 필요한 정보가 무엇인지 우선순위를 설정해야 한다는 내용입니다. 옷이라면, 무엇보다 중요한 건 어떤 컬러를, 어떤 사이즈로 구매하냐가 중요할 수밖에 없는데요. 여기에 한 가지를 더 추가한다면 특정 컬러와 사이즈라는 조건에 따라 구매를 할 수 있는지에 대한 ‘상태’입니다. 그럼, 사용자는 리스트를 통해 A컬러 - B사이즈의 제품을 구매할 수 있다는 것까지 확인할 수 있고, 이는 기존에 구매한, 좋아하는 스타일에 따라 쇼핑을 하는 과정에 많은 도움을 줄 수 있어요.

가격이 상대적으로 비싸 구매 결정에 더 많은 고려가 필요한 전자제품이라면 기본 스펙과 더불어 이미 나와 같은 ‘고민’을 거쳐 실제 구매한 사람들의 이야기가 더 중요하게 다가오는데요. 이런 경우라면 리뷰와 상세 정보를 빠르게 스캔할 수 있도록 도와주는 역할이 중요합니다. 컬러는 그다음이라고 생각해요. 이렇듯 취급하는 제품의 성격에 따라 리스트에 추가적으로 제공해줘야 하는 정보가 무엇인지에 대한 논의가 있어야 리스트와 상세화면을 끝없이 오가야 하는 불편을 해결하는데 더 가까워질 수 있다고 생각합니다.

마지막으로 구성 방법입니다. 리스트는 그 자체로 이미 ‘다양한’ 정보를 포함하고 있어요. 카드 형태로 구분이 되어 있는 경우가 많지만, 하나의 단위 간 구분하는 것이 점점 어려워지고 있습니다. 배송은 어떻게 되는지, 기준 가격과 세일 가격은 어떤지, 제품명과 모습은 어떤지 등 많은 내용이 담겨있기 때문입니다.

그런데 여기에 사용자의 ‘편의’를 위해 정보를 있는 그대로 추가하면 어떻게 될까요? 더 많은 정보를 사용자가 ‘알아서’ 구분해야 하는 상황이 발생할 수 있습니다. 아코디언 UI, 별도 배경 컬러 지정 등 기존 리스트의 구성에 크게 영향을 주지 않으면서, 상세 화면을 통해 봐야 했던 정보를 제공해주는 편의를 포함한 구성 방법에 많은 시간을 투자해야 하는 이유라고 생각합니다.

다음 주제 안내

다음 뉴스레터에서는 사용자가 앱을 처음 접했을 때, 무엇을 먼저 해야하는지 막막한 상황을 해결하는 방법에 대해 정리하고자 합니다. 온보딩, 튜토리얼 등 사용자가 앱을 설치하며 기대한 바를 충족시켜주는 방법은 무엇인지, 이런 기능이 제공되지 않을 때 느낄 수 있는 불편과 문제는 무엇인지 자세히 살펴보고자 합니다. 다음 뉴스레터는 3월 10일 목요일 오전 8시 발행될 예정입니다. 

다음 뉴스레터부터 불나유는 유료로 발행될 예정입니다. 이번 뉴스레터를 통해 유료 버전에 포함되었으면 하는 내용이나 의견이 있다면 아래 피드백 링크를 통해 전달주세요! 앞으로도 서비스가 문제를 해결하는 상황 별 내용을 더 가치있게 전달할 수 있도록 노력하겠습니다.

😮 이번 뉴스레터 어땠나요?

구독자님, 아래 링크를 통해 불편함이 낳은 UX 뉴스레터에 대한 의견을 남겨주세요!