구매의 시작, 장바구니 어떻게 구성할까?

11분

2021.01.08.

3.7K

장바구니 화면 어떻게 구성할까?

1. 장바구니가 비어 있는 상태 고려하기 2. 장바구니에 담겼다는 것을 인지 할 수 있게 하기 3. 장바구니에 담긴 상품 쉽게 구매 할 수 있게 하기 4. 장바구니에 상품이 담겼다는 걸 알려주기

WHY : 장바구니 기능은 왜 중요할까요?

(에디터, 재그마스터) 오프라인에서 익숙한 습관이 온라인으로 들어온 대표적인 사례가 바로 '장바구니'인데요. 장바구니는 우리가 특정 장소에서 물건을 구매 할 때 필요한 상품을 넣는 공간을 뜻하기도 합니다. 다른 점이 있다면 오프라인에 비해 온라인 장바구니는 구매로 이어질 확률이 상대적으로 낮다는 점이죠. 이는 장바구니에 담는 행동 자체가 당장의 구매를 위해서가 아닌, 일단 담아놓고 다시 확인하기 위한 용도로 사용되고 있기 때문입니다. 구매 기능이 있는 서비스에서, 구매 전환에 중요한 역할을 하는 장바구니 사례를 자세히 살펴보겠습니다. (에디터, 동동) 구독자분들의 장바구니에는 어떤 상품이 많이 담겨있나요? 저는 정기적으로 구매하는 상품들부터 자주 애용하는 의류 쇼핑 앱에서는 의류, 악세사리 등 다양한 카테고리의 상품이 제 장바구니에 담겨있는 것 같아요. 그러다 보니 장바구니 메뉴를 자주 들여다보는데, 앱 내의 많은 기능들 중 아이콘부터 시작해 가장 직관적인 메뉴라고 생각합니다. 구매로의 유도, 상품이 담긴 후 이어지는 화면들은 어떻게 구성되어 있는지 다양한 사례를 만나볼까요?

1. 에이블리

에이블리 - Android

에이블리는 최근 1,500만 다운로드를 돌파한 대표적인 셀럽 마켓입니다. 옷을 입고 사진을 찍어 올리는 것만으로 판매를 시작 할 수 있는 파트너스 기능 등 발 빠르게 성장한 서비스기도 하죠. 에이블리의 빈 장바구니에는 '베스트 상품 보러가기'라는 버튼이 자리잡고 있는데요. 이는 장바구니가 비어 있는 상태에서 무언가 채울 수 있도록 하기 위한 대표적인 장치라고 할 수 있습니다. (다른 서비스들이 상품이라는 데이터가 장바구니에 없을 때, 어떤 행동을, 어떻게 유도하고 있는지 함께 살펴보면 더 재미있게 읽으실 수 있을거에요.) 물론, 상품이 담겨 있지 않은 상태로 장바구니에 진입하는 경우가 많지 않다고 생각 할 수 있지만 (실제로 데이터가 없는 경우 현재 상태만 표기해주는 서비스도 있어요) 완전히 없다고 단정 지을 순 없기에 비어 있는 경우에 대한 고려는 꼭 필요하다고 생각합니다. '베스트 상품 보러가기'라는 문구가 주는 휴리스틱도 있고요. 또 하나 중요한 것은 장바구니에 담겼다는 것을 계속해서 '인지'하게 하는 방법입니다. 에이블리 역시 상품 상세 화면에서 구매 - 장바구니에 담기 선택 시 '선택하신 상품을 장바구니에 담았어요.'라는 문구가 노출되며 장바구니 보기라는 링크가 함께 제공됩니다. 담겼다는 것을 인지함과 동시에 장바구니로 이동, 결제로 이어지게 하는 흐름을 만들기 위해서입니다. 구매하기 버튼 배경 컬러와 장바구니 화면 내 주문하기 버튼 배경 컬러가 다른 이유도 실제 결제를 이끌어 내야 하기 때문! 에이블리의 장바구니가 좋았던 점은 옵션과 수량을 각각의 버튼을 통해 쉽게 변경 할 수 있다는 점입니다. 대부분서비스는 수량 까지만 변경 되는 경우가 많기 때문이죠. 배송비를 '무료'가 아니라 서비스가 내세우는 혜택 문구로 표기한 것도 매력적이었습니다. 전 상품 무료 배송이라는 점을 최종 결제 시점에 확인 하게 될 경우 사용자 입장에서 다음 결제에도 영향을 끼칠 수 있기 때문입니다.
(에디터, 재그마스터의 덧붙임) 모바일앱에서는 에이블리의 '장바구니 보기'와 같이 텍스트 링크를 잘 활용하지 않아요. '장바구니 보기 >' 와 같이 버튼 역할을 할 수 있도록 제공해주는 것이 더 좋습니다. 텍스트 링크는 웹에서 많이 사용되는 방식으로 모바일 앱 환경에서는 내비게이션 역할로 이해하고 적용하는 방법이 필요합니다.

2. 브랜디

브랜디 - Android

브랜디는 에이블리와 유사한 서비스로, 최근 네이버로부터 풀필먼트 연합의 목적으로 100억원을 투자 받은 곳입니다. 앞서 소개한 에이블리가 빈 장바구니에서 베스트 상품 보러 가기 버튼을 활용했다면, 브랜디는 '쇼핑 계속하기'를 활용하고 있었는데요. 계속하기가 어디로 연결되는지에 대한 정보가 없기에 더 구체적인 문구를 활용했으면 어땠을까 하는 아쉬움이 남았습니다. 쉽고 빨리 찾아갈 수 있는 내비게이션의 역할이 일부 포함되어 있기 때문! 사용자가 최근 본 상품을 장바구니 하단 '이 상품은 어때요?'라는 내용으로 적용해둔 점은 좋았습니다. 이미 사용자가 한 번 봤던 상품이기도 하고, 리스트 형태로 상품 정보를 미리 확인 할 수 있어 더 구체적인 행동으로 이어질 수 있으니까요! 장바구니에 상품을 담은 경우 토스트로 안내가 될 뿐 실제 장바구니로 이동을 유도하진 않습니다. 쇼핑을 계속 하는 것에 초점을 맞췄기 때문으로 보이네요. 상품을 담은 장바구니 화면에는 에이블리와 동일하게 배송비를 0원 또는 무료로 표기하지 않고 무료배송으로 강조하고 있는 모습! 다만 페이지 중앙 친구 초대 등 이벤트 성 띠배너가 걸쳐 있는 건 많이 어색했습니다. 오히려 결제를 완료 한 뒤 다음 구매 시 친구 초대 - 할인! 이렇게 연결지었으면 어땠을까 싶네요. 정보로서 제공되는 총 결제금액 텍스트 컬러와 실제 결제로 이어지는 버튼 컬러가 다른 점도 아쉬운 부분이었습니다. 총 결제금액이 이미 구매하기 버튼 내 포함되어 있기에 버튼 내 강조를 더 했다면 어땠을까 하는 생각이 드네요.

브랜디 - Android

장바구니에 상품을 담아놓고 결제까지 이어지지 않는 경우는 꽤 많아요. 사용자 입장에서는 더 살펴보고 구매하기 위해서지만 서비스 입장에서는 그 다음 단계로 이어져야 실제 매출이 발생하기에 결제 전환을 유도하기 위한 여러 시도를 하게 되는데요. 브랜디는 24시간 기준으로 한 번씩 푸시를, 각기 다른 메시지로 발송합니다.

3. 지그재그

지그재그 - Android

지그재그는 브랜디, 에이블리와 다르게 이미 만들어진 커머스들을 한 곳에서 확인, 구매 할 수 있는 역할을 합니다. 그래서 장바구니에 담을 수 있는 아이템이 별도로 지정되어 있는데요. 빈 화면에서 관련된 정보를 자세히 확인 할 수 있는 모습입니다. 이런 설명이 없었다면 모든 상품을 장바구니에 담을 수 있다는 생각을 할 수 있기 때문입니다. (오해는 늘 불만으로 이어지기에) 버튼 역시 장바구니에 담을 수 있는 상품이 모여 있는 곳으로 연결되어 있는 모습. (가운데 이미지) 지그재그 역시 장바구니에 상품을 담았다는 것을 상품 썸네일, 문구로 보여주고 있네요. 사소하다고 생각 할 수 있지만, 방금 담은 상품이 무엇인지 썸네일로 다시금 확인 할 수 있게 한 부분이 눈에 띕니다. 재미있었던 건, 특정 상품을 담았을 때 다른 고객이 함께 본 상품을 바텀 시트 형태로 보여준다는 점! 여성 쇼핑몰이라 직접 구매 할 수 있는 환경이 아니고, 어떤 영향이 있을지 정확히 모르지만 장바구니에 '담는'다는 것은 쇼핑을 계속 할 것을 의미하기에 연이어 살펴볼 수 있는 상품이 노출되는 점은 꽤 인상적이었습니다. 상품 상세 페이지 하단에 있는 판매자의 다른 상품 또는 해당 카테고리의 인기 상품 보다 추가로 확인 할 확률이 더 높지 않을까? 라는 생각도 들었어요. 장바구니에 상품이 담긴 상태에서는 수량 변경만 가능하며, 상품 상세페이지는 물론 해당 상품을 판매하는 쇼핑몰 페이지로 이동 가능한 버튼이 포함되어 있습니다. 한 가지 의아한 점은 구매하기 버튼이 2개 자리잡고 있다는 점인데요. 처음에는 장바구니에 담은 제품을 개별로 구매하는 경우를 고려했나 싶었는데 2개, 3개를 담아도 총액으로 계산, 일괄 구매 버튼으로 적용되었습니다. 장바구니에 상품을 담은 갯수와 실제 구매 갯수가 다른 경우가 있다는 점을 고려했을 때 하단 고정 버튼은 일괄 구매로, 상품 별 하단에는 개별 구매로 적용했으면 어땠을까 라는 생각이 들었습니다.
(에디터, 재그마스터의 덧붙임) 다시 한 번 에이블리와 비교해보면 차이를 명확하게 알 수 있는데요. 지그재그는 장바구니로의 이동을 보러가기> 로 표현한 반면, 에이블리는 장바구니 보기 로 표현했습니다.

4. 스타일쉐어

스타일쉐어 - Android

10대들의 전폭적인 지지를 받고 있는 스타일쉐어. (스타일쉐어가 29cm를 갖고 있다는 사실 알고 계셨나요?) 장바구니가 비어있을 때 버튼 내 문구를 보면 '스토어홈' 이 포함되어 있는데요. 브랜디와 달리 버튼을 탭 했을 때 어디로 이동하는지 명확하게 알 수 있는 문구입니다. 스타일쉐어는 브랜디와 마찬가지로 상품을 담았을 때 장바구니로 이동 할 수 있는 버튼을 별도로 제공하지는 않습니다. 저장되었다는 안내 메시지만 내보내고 있습니다. 재밌는 건 장바구니에 2개 이상의 상품이 담긴 경우인데요. 지그재그 사례를 보며 각각의 상품을 바로 구매 할 수 있는 기능을 적용 했으면 더 좋았을 것 같다는 의견을 남겼었는데요. 스타일쉐어가 실제 해당 기능을 사용하고 있는 모습입니다. (이미지에는 1개의 상품만 담겨 있어요) 각 상품 하단에 바로 주문이 있고, 하단 고정 버튼으로 총 N개 상품 주문하기가 자리잡고 있습니다. 장바구니에 담긴 상품을 개별 또는 일괄 주문할 수 있다는 장점이 있는 구성이네요.
(에디터, 재그마스터의 덧붙임) 에이블리의 '베스트 상품 보러가기', 브랜디의 '쇼핑 계속하기', 지그재그의 'z 상품 보러가기', 스타일쉐어의 '스토어홈 보러가기'. 이렇게 문구만 놓고 보면 어떠신가요? 특정 행동을 유도하는 버튼 내 문구는 사용자가 어디로 이동하게 되는지, 어떤 행동을 기대할 수 있는지를 미리 안내해주는 역할이 포함되어야 합니다.

5. 배달의 민족 : B마트와 요마트

배달의 민족 - iOS

B마트의 하루 주문량은 5만건에 근접하여 계속 성장 중이라고 해요.(원문기사) 폭발적인 성장을 이루고 있는 B마트 장바구니는 어떨까요? 데이터가 없는 경우 배달의 민족에 맞는 유쾌한 모습을 보여줍니다. 다른 앱들과 달리 추천 상품을 보여주지 않는 이유는 B마트 홈에서 아주 쉽게 접근할 수 있기 구조 때문입니다. B마트 장바구니를 활용하며 2가지 재밌는 점을 발견했는데요. 상세화면에서 상품을 장바구니에 담은 후 리스트로 바로 이동하는 점 장바구니에서 담긴 상품 하단에 '+더 담으러 가기' 버튼을 배치한 점 일반적인 커머스는 상세 페이지 하단에 유사 상품 혹은 추천 상품을 같이 보여주고 있는 반면, B마트는 상세 페이지 하단에 추천 상품을 보여주지 않아요. 상품을 담은 시점에 더 이상 상세 페이지에 사용자가 머무를 이유가 없기에 장바구니를 담는 순간 리스트 화면으로 다시 이동, 다음 상품을 자연스럽게 볼 수 있도록 하고 있습니다. 두 번째 '+더 담으러 가기' 버튼이 장바구니에 활성화 되는 시점은 최소 주문 금액이 부족할 때 혹은 장바구니에 담긴 상품이 품절되서 대체 상품을 골라야 할 때 입니다. 사용자 입장에서는 무조건 더 담으라는 메시지가 아니라, 편의를 주기 위한 정보로 인식하게 할 수 있는 장치이기도 합니다.

요마트 - Android

요마트 장바구니 담기는 지금까지 봐왔던 방식과 조금 달랐어요. 장바구니 아이콘을 탭 하면, 수량 입력과 삭제를 선택 할 수 있는데, 위 이미지 가운데 상태에서 일정 시간 아무 행동을 하지 않을 경우 기본 수량이 자동으로 담기게 되어 있기 때문입니다. 사용자가 선택한 행동은 아니지만, 장바구니까지 선택 후 행동을 하지 않았다면 서비스 입장에서는 유지 또는 취소 보다는 담아두는게 더 전환을 높일 수 있는 방법이지 않을까 싶네요. 눈에 띄는 방법이었습니다.

6. 카카오 프렌즈샵

카카오 프렌즈샵 - iOS

카카오 프렌즈샵은 배송 국가를 기점으로 상품을 구분하기 때문에 장바구니 화면에서도 배송 국가 선택 옵션을 확인할 수 있습니다. 그래서 상품 바로 구매를 눌러도 배송지 확인을 위해 장바구니로 넘어가게 되어 있어요. 바로 구매 버튼 우측에 장바구니 아이콘을 배치하여 이동한다는 점을 알리고 있습니다. 상품이 담겨진 순간 상단 중앙에 '장바구니에 담겼습니다.'의 멘트와 함께 토스트를 띄우고 팝업을 누르면 자연스럽게 장바구니로 이동하는 구조입니다. 카카오 프렌즈샵은 카카오 프렌즈 스토리를 기반으로 운영 되는 영역이기 때문에, 스토리가 잘 녹아들어야 하는데요. 주문하기 버튼 바로 위에 프렌즈 스토리를 보러갈 수 있는 버튼이 자리잡고 있습니다. 이렇게 장바구니는 구매를 위한 옵션 변경 뿐만 아니라, 더 지속적인 구매가 이뤄지기 위해 스토리와의 접점을 만드는 영역이 될 수도 있습니다.

7. 쿠팡 정기배송

쿠팡 - iOS

쿠팡 정기 배송은 정기적으로 장바구니에 담아서 구매할 상품을 담게 됩니다. 때문에 구매 버튼부터 '1달에 한 번, 2달에 한 번' 등 일정을 선택하여 장바구니에 담을 수 있습니다. 인상 깊었던 점은 장바구니 화면에서 쉽게 일정과 개수를 쉽게 바꿀 수 있는 점, 정기 배송 상품을 2개 더 담으면 10% 할인을 해주는 구조입니다. 일상 용품의 경우, 할인을 받으며 편하게 정기 배송을 신청 할 수 있는 서비스 특징과 할인 프로모션까지 장바구니에서 자연스럽게 연결되는 부분이라고 할 수 있습니다.

8. 위버스샵

위버스샵 - Android

위버스샵은 빅히트엔터테인먼트의 자회사 beNX에서 위버스와 함께 운영하는 서비스입니다. 소속 아티스트들의 다양한 굿즈를 판매하는 곳. 위버스샵은 브랜디와 같이 장바구니(카트)가 비어있는 경우 최근 본 상품을 보여줍니다. 최근 본 상품은 마음에 들었을 가능성도, 그 반대의 가능성도 있지만 일단 사용자가 상세 화면까지 진입했다는 것을 의미하기에 다시 한 번 확인 할 가능성이 존재하는 리스트인데요. 이런 이유로 장바구니를 벗어나지 않고 바로 상품 상세 페이지로 진입할 수 있는 장치를 마련해두지 않았을까 싶습니다. '샵으로 이동'이라는 별도 버튼을 배치해두기도 했어요. 상품을 담은 경우 팝업으로 적극적인 안내를 하고 있으며, 장바구니 화면에서는 수량 변경이 쉽게 구성 되어 있습니다. 다만, 상품 선택 아이콘 컬러와 수량 추가 아이콘 컬러가 동일해 시선이 분산된다는 점은 아쉬웠습니다. 두 개 이상의 상품을 전체 선택 했음에도 (서비스 입장에서는 불편을 감수하려 했겠지만) 전체 삭제가 불가능한 점도 아쉬웠습니다.

결론 : 장바구니 화면을 구성할 때 체크해보세요
✓ 장바구니가 비어 있는 상태에서 상품을 보여줄 수 있어야 합니다. ✓ 사용자가 상품을 담았을 때 장바구니에 담겼다는 것을 쉽게 인지할 수 있도록 해야 합니다. ✓ 담긴 상품은 쉽게 구매하고, 쉽게 옵션을 변경할 수 있어야 합니다. ✓ 장바구니에 상품이 담겨있다는 걸 알려줘야 합니다.

로그인하고 자유롭게 의견을 남겨주세요.