NEW 기획 디자인 개발 프로덕트 아웃소싱 프리랜싱

개발

동일한 제품을 각각의 커머스에서 구매한다면?

동일한 제품을 각기 다른 커머스에서 구매해보면 어떨까?

(에디터, 재그마스터) '라면이 사고 싶어요' 라는 내용으로 지난 2월 페이스북에 글을 올린 적 있어요. 재택근무 등과 맞물려 라면이랑 햇반 등을 미리 좀 사놓아야 했고, 구매하는 김에 마트 앱을 여럿 활용하며 구성이 어떻게 되어 있는지 확인할 수 있었습니다. 배달의 민족 B마트, 롯데마트, 이마트, 홈플러스 등을 쓰며 동일한 제품을 구매하는 과정에서도 앱의 성격이나 구성에 따라 결제까지의 단계나 시간이 이렇게 다를 수 있구나! 라는 생각을 했습니다. 그래서 이번엔 B마트 대신 농협 하나로마트 앱을 활용, 다시 4개의 앱으로 동일한 제품(까르보 불닭 볶음면)을 구매해보며 좋았던 점과 개선이 필요한 부분을 정리해 봤어요.

(에디터, 동동) 최근 커머스 시장이 확대되며 서비스 퀄리티가 높아지고 있습니다. 커머스 경쟁력은 상품 카테고리와 독점 상품이 아닌 서비스의 편리함에 주목되고 있는데요. 그래서 같은 상품을 각기 다른 커머스 서비스에서 구매해보는 콘텐츠를 준비해봤습니다. 이번에 처음 사용해보는 앱이라 준비 과정에서 느낀 아주 작은 카테고리 분류부터 회원가입 후 연결되는 화면의 차이들이 재밌었어요. 특히 신규 사용자가 서비스 안에 락인되려면 어떤 요소를 기획 과정에 고려해야 하는지를 더 실감할 수 있었습니다.



오늘의 커머스 사례를 만나볼까요?

(에디터, 재그마스터) '마트 앱'을 활용하는 대부분은 내가 무엇을 사야 하는지 명확하게 인지하고 있는 경우가 많다고 생각합니다. 무신사나 29cm와 같은 커머스에 접근 할 때도 구매해야 할 품목을 미리 생각하고 가지만, 이들은 '둘러보기'에 더 많은 시간을 투자하게 되는 경우가 많죠. 동일한 제품을 동일 카테고리 내 각기 다른 앱에서 구매한다고 가정 했을 때, 어떤 방법이 가장 좋을까 고민하다 2가지 방법을 활용하기로 했습니다. 첫 번째, 제품명을 검색어로 직접 입력해 상세 페이지로 접근하기. 두 번째, 라면 카테고리로 접근해 원하는 제품을 탐색하기. 4개의 서비스를 단계별로 비교 분석하는 글이기에 이번 뉴스레터는 내용이 좀 길게 느껴질 수 있는 점 미리 참고 부탁드려요!


1. 메인화면과 검색화면


롯데마트 메인 - 검색화면

검색창의 위치는 사실 어떤 서비스든 거의 고정된 형태라고 볼 수 있습니다. ① 롯데마트는 메인 화면 상단에 검색창이 자리잡고 있으며 '롯데마트에서 검색하세요!'라는 플레이스 홀더 텍스트를 활용하고 있는데요. 오프라인 매장용 바코드 검색 기능 등이 이번 롯데온 통합 과정에서 적용 된 것은 좋았지만, 한 가지 아쉬웠던 점은 적용된 문구였습니다. 플레이스 홀더 텍스트의 역할은 검색을 필요하게 만들고, 오래 생각하지 않게 해줄 수 있어야 하기 때문입니다. 이마트가 #영양간식 챙겨요 #짭짤한맛의 매력 #출출할땐 이거구마 등 검색창을 광고 보드 처럼 활용, 시선을 끌게 만드는 것과 대조되는 모습이기도 합니다. ② 검색어 입력과 동시에 인기 검색어 확인이 가능하며, 키워드 자동 완성 기능도 함께 제공되고 있습니다.


홈플러스 메인 - 검색화면

① 홈플러스 역시 검색창이 상단에 자리잡고 있습니다. 롯데마트가 최근 검색어와 인기 검색어를 검색 화면 내 통합 해 보여주는 것과 달리 홈플러스는 탭으로 구분해 보여줍니다. 디폴트는 최근 검색어네요. ② 입력 키워드에 따른 자동 완성 기능을 홈플러스 역시 제공해주고 있는데요. 눈에 띄는 점은 각 완성된 검색어의 검색 횟수를 함께 보여주는 점입니다. 전체 인기 검색어와 달리 사용자가 뚜렷한 목적을 지니고 입력하게 되니 그에 따른 선택지를 좁혀주는 좋은 방법이란 생각이 들었습니다.


농협몰 메인 - 검색화면

하나로마트에서 운영하고 있는 농협몰 메인 UI는 농협몰-e하나로마트-식자재 마트 3가지 탭으로 나눠져있어요. 그러다 보니 ①의 검색도 각각의 탭에 맞춰 이뤄지는데요. 메뉴가 나눠져 있기 때문에 다음에 보여드릴 검색결과도 탭에 따라 달라집니다. 검색어 입력 과정에서 인기 검색어와 검색 결과를 함께 보여줍니다. 또 다른 서비스와 같이 "까르보"를 입력하면 불닭볶음면 까르보와 관련된 결과를 자동 완성 형태로 보여줍니다.


이마트몰 메인 - 검색화면

이마트몰도 ① 한 서비스 내 '오반장' 등 다양한 선택지를 리스트 형태로 제공하고 있어요. 검색 화면에서는 ② 태그 형태로 상품을 피처드하고 있는 모습을 볼 수 있습니다. 이와 더불어 이미지와 함께 배치된 추천 태그를 함께 운영하는 모습이 인상적이었어요. 커머스 서비스 특성 상 많은 상품을 보여주는 것이 중요하기에, 피처드 영역을 두 곳으로 배치해 더 많은 상품을 보여질 수 있는 기회를 주는 것이죠. ③ 검색어를 입력하면 최근 검색어를 가장 상단에 배치해 재구매를 유도하는 방법도 인상적이었습니다.



2. 검색결과화면


롯데마트 검색결과 화면

① 롯데마트 검색 결과 화면은 낯선 구성으로 이뤄져 있습니다. 검색어에 해당하는 상품 리스트를 가장 먼저 볼 수 있는데, 리뷰/브랜드/기획전/토이저러스 등의 탭이 적용 되어 있어 각각의 정보를 바로 확인하거나 최초 검색 결과 내 조건을 달리해 확인 할 수 있습니다. 보통 상품 상세 페이지 내 해당 상품에 대한 리뷰를 확인하는 것이 일반적인데 리뷰 자체를 검색 결과에 적용한 것은 조금 낯설게 다가왔습니다. ② 개인적으로는 검색 결과 내 유사 상품끼리 비교가 가능한 '상품 비교' 기능이 더 유용했습니다. 가격은 물론 별점과 월간 구매량, 추가 혜택 등을 쉽게 비교 할 수 있었기 때문입니다. ③ 검색결과는 '인기순'이 기본 값으로 적용 되어 있으며 판매순, 리뷰순, 최신순, 가격순으로 정렬 가능합니다. ④ 필터기능은 아쉬움이 많았는데요. 이미 라면/면/즉석밥에 해당하는 상품군에 대한 검색을 완료 했는데, 카테고리를 필터에서 변경하는 것이 큰 의미가 없었습니다. 카테고리가 아니라 배송여부 등을 더 먼저 확인 할 수 있도록 했다면 어땠을까 하는 생각이 드네요.


홈플러스 검색결과 화면

① 홈플러스는 검색결과 화면 상단에 '까르보불닭'에 해당하는 유사 키워드를 함께 보여줍니다. (쿠팡이 잘 활용하는 방법이기도 하죠) ② 홈플러스 검색 결과 내 가장 만족스러웠던 점은 롯데마트와 달리 상품군에 직접적으로 영향을 줄 수 있는 구분이 적용되어 있다는 점이었습니다. 다른 카테고리 내 적용이 아니라, 까르보불닭이라는 상품을 라면,컵라면으로 볼 것인지, 소스로 볼 것인지 선택 가능했습니다. (까르로불닭은 라면도 있지만, 팔도 비빔 소스처럼 별도 소스 상품이 존재하기 때문) 상품 - 배송 방법 - 혜택순으로 확인이 가능하고 상세 선택지와 타이틀 간 배경 컬러가 다르게 적용 되어 있어 쉽게 구분 할 수 있다는 점도 좋았습니다. ③ 롯데마트가 '인기순'을 검색결과 기본값으로 활용했다면, 홈플러스는 '추천순'을 기본값으로 활용하고 있네요.


농협몰 검색결과 화면

① 농협몰의 검색 결과는 앞서 말씀드렸듯 3가지 구분으로 보여집니다. 배송 프로세스가 다르기 때문에 결과값을 각기 보여주는데, 가격 비교를 위해 탭을 매 번 이동해야하는 불편함이 있었습니다. 가능하다면 통합 검색 결과를 보여주고 사업자 구분을 따로 진행하면 어땠을까라는 생각이 듭니다. 상품 검색과 관련된 실용적인 필터는 없었는데요. 검색결과에 없는 카테고리 구분은 하단 탭에 배치되어있습니다. 농협몰의 카테고리에서 라면은 ②의 가공식품 카테고리에 포함되어있는데, 큰 범주에서는 맞지만 쉽게 생각되지않아서 아쉬웠어요.


이마트몰 검색결과 화면

결과 리스트에서 가장 반가웠던 버튼은 ①의 '이마트쓱배송보기' 버튼이었어요. 쇼핑의 꽃은 배송이라고 생각하는데, 쿠팡의 로켓배송 버튼처럼 빠른 배송 상품을 모아볼 수 있어서 좋았습니다. 또 ② 추천순-리뷰많은 순 등의 기본적인 필터를 제공하고 있고, ③의 구체적인 검색 결과 필터를 보면 결과 내에서 텍스트로 다시 검색할 수 있도록 제공해줍니다. 그리고 사이드 메뉴가 너무 길면 오히려 불편하게 느껴질 수 있기에 일부 메뉴는 닫힌 채 제공하고 있는 점이 좋았습니다.



3. 상품 상세화면


롯데마트 상품 상세화면

① 상품 상세 화면 구성 방법에서도 롯데마트와 홈플러스는 차이점이 여럿 존재합니다. 하단에 고정 되어 있는 '장바구니 담기', '바로 구매하기' 버튼 위치가 홈플러스와 반대로 배치되어 있습니다. 단일 품목을 많이 구매하느냐, 아니면 여러 제품을 함께 구매 하느냐의 데이터는 물론, 상세 페이지 내 추천 또는 함께 많이 구매한 제품 등의 이름으로 들어가는 연관 상품을 많이 보느냐에 따라 달라질 수 있는 내용이기도 합니다. 아쉬운 것은 두 버튼 모두 같은 배경 컬러를 사용하고 있어 혼란스럽게 느껴질 수 있다는 점입니다. ② 롯데마트는 상품 상세 정보와 리뷰를 언제든 확인 할 수 있도록 탭으로 구분해놓았습니다. 요즘 많이 사용되는 방법 중 하나! ③ 리뷰는 사진을 따로 모아볼 수 있도록 구성되어 있습니다. (얼마전 요기요도 리뷰 UI를 변경하며 위와 같은 방식을 활용 했는데요. 텍스트 중심의 리뷰 보다 내가 구매할 제품을 이미지, 영상으로 보는 것이 더 구체적인 정보로 다가오기 때문이 아닐까 싶습니다.)


홈플러스 상품 상세화면

① 홈플러스는 앞서 말씀드렸던 것처럼 바로구매와 장바구니 위치가 롯데마트와 다르게 적용되어 있습니다. 배경 컬러 역시 다르게 가져가고 있으며, 찜하기 아이콘이 하나 더 추가 되어 있네요. ② 롯데마트가 상품 소개와 리뷰 2가지를 기본 탭으로 적용했다면 홈플러스는 배송/교환/반품을 포함, 3가지 탭으로 상세 화면이 구성 되어 있습니다. 아무래도 상품 정보와 상품평(리뷰)이 구매 전 영향을 주는 정보라면 배송/교환/반품은 구매와 동시에, 또는 구매 후 민감하게 적용 될 수 밖에 없는 정보들이기에 중요도를 높인 것이 아닐까 싶습니다. ③ 상품평(리뷰)는 100점 단위로 확인 가능하며, 아쉽게도 사진 리뷰를 따로 모아볼 순 없었습니다.


농협몰 상품 상세화면

농협몰의 상세화면은 굉장히 심플합니다. 썸네일과 카드혜택 등을 포함해 상품평과 상품문의 등의 기본적인 구성으로 이뤄져 있기 때문입니다. 상품 판매자가 별도로 있는 것이 아닌, 농협에서 직접 판매하기에 텍스트로 정보를 충실히 전달하는 방법을 선택했습니다. 그래서 다른 커머스 서비스에 비해 상품 세부정보를 보는 재미는 적은 편이었어요. 구매하려는 상품이 명확하게 정해져있는 경우에는 농협몰의 구성이 편하지만, 볶음라면 종류 중 고민 하고있는 소비자라면 알 수 있는 정보가 많지 않아서 선택에 어려움을 줄 것 있겠다는 생각이 들었습니다.


이마트몰 상품 상세화면

이마트몰은 농협몰과 달리 상품 판매자가 상품을 등록할 수 있습니다. 상세페이지 내 ①영역에 판매자를 소개하는 영역이 있습니다. 하단에는 판매자의 다른 상품을 소개하고 있고요. 화면을 더 내리면 ②같은 카테고리 내 인기상품을 살펴볼 수 있죠. 라면계의 강자 '농심'이 카테고리 인기 상품을 도배하고 있는 모습이죠? 개인적으로 스크롤에 따른 배치를 ①과 ②의 순서를 바꾸면 좋지 않았을까라는 생각이 듭니다. 판매자의 다른 상품도 중요하지만, 카테고리 내 상품을 먼저 보면 장바구니에 함께 담을 확률이 높아지지 않을까요?



4. 장바구니, 결제화면


롯데마트와 홈플러스 장바구니 화면

① 헙, 4입 까르보불닭면을 3,980원 주고 구매하는데 배송비는 3,000원! 배송비는 늘 이런 상황을 가져오는데요. 롯데마트는 장바구니에 담긴 상품들의 총합과 무료 배송까지 남은 금액을 시각적으로 잘 보여주고 있습니다. ③④ 홈플러스가 주문하기 버튼을 고정하지 않은 상태에서 함께 구매하면 좋은 상품을 주문하기 하단에 배치한 것과 다르게 ② 롯데마트는 무료 배송까지 남은 가격을 보여줌과 동시에 바로 하단으로 '다른 고객이 많이 담은 상품' 영역을 배치하여 상품을 쉽게 추가 할 수 있도록 유도하고 있습니다. 장바구니 구성과 사용성 만큼은 롯데마트에 더 높은 점수를!


농협몰과 이마트몰 주문화면

각각의 배송 시간 선택 UI를 비교해볼게요. ① 농협몰은 이마트몰에 비해 선택지가 좁은 반면 ② 이마트몰은 보다 직관적으로 제공하고 있습니다. 저는 배송시간이 중요하기에, 선택지가 넓은 이마트몰이 더 편리하다고 느꼈어요. 다만, 표에 '선택'이라고 써져있어도 '뭘 선택해야하지?'하고 해맸던 것 같아요. 농협몰과 같이 라디오버튼 형태를 차용했으면 어땠을까요?


롯데마트 결제 상세화면

① 드디어 결제 상세 화면까지 왔어요! 롯데마트는 결제 화면 내 '결제하기' 버튼을 고정시켜 놨습니다. 가격 정보와 함게 말이죠. 하지만 상품 상세 화면과 달리 결제 화면에서는 입력 또는 선택해야 할 값들이 여럿 존재하기에 고정 버튼이 큰 의미는 없다고 생각합니다. 필요한 정보를 얼마나 쉽고 빠르게 입력하고 넘어갈 수 있는지가 더 중요하다는 생각이! ② 그 관점에서 좋은 점은 포인트 사용 부분에서 롯데의 통합 포인트인 L포인트가 얼마나 있는지 별다른 행동 없이 바로 확인 할 수 있다는 점이었습니다. ③ 하지만 신용카드 결제 옵션을 선택할 경우 화면 이동 후 드롭박스 내 원하는 카드를 텍스트로 확인 후 선택해야 하는 점은 불편했습니다. (아래 홈플러스 사례를 보면 그 이유를 더 명확하게 확인하실 수 있어요!)


홈플러스 결제 상세화면

① 롯데마트는 매장 픽업을 원할 경우(스마트픽) 별도 화면으로 이동 후 매장을 선택해야 하는데, 홈플러스는 매장배송과 매장픽업을 탭 형태로 구분하여 전체 화면 이동 없이 확인 가능합니다. ② 무엇보다 신용카드 결제 옵션 선택 시 카드사 로고를 함께 보여주기에 롯데마트 대비 원하는 카드를 쉽게 선택할 수 있습니다. ③ 결제 버튼은 모든 정보 입력 또는 선택 후 마지막에 확인이 가능하고요.


롯데마트 카테고리 화면

검색에 이어, 이번에는 카테고리를 통해 원하는 상품을 찾아 봤습니다. 롯데마트 앱은 하단 탭 첫 번째에 '카테고리'가 자리잡고 있는데요. ① 카테고리 내 라면/면/즉석밥이란 1차 분류를 확인할 수 있습니다. ② 이후 라면/면류로 다시 구분이 가능한데, 봉지라면, 컵라면, 국수, 스파게티 등에 따라 최종적으로 확인이 가능합니다. ③ 저는 '불닭볶음면'을 봉지라면으로 구매할 계획이었기에 봉지라면으로 들어가봤는데 롯데마트에 등록된 봉지라면의 갯수는 총 250여개로.. 아쉽게도 더 이상의 상세 필터링은 불가능했습니다. 250여개 중 원하는 상품을 찾아야 하는 구조라는 것이죠.


홈플러스 카테고리 화면

홈플러스는 어떨까요? ① 우선 대분류는 라면/면/즉석밥으로 롯데마트와 동일합니다. ② 하지만 홈플러스는 라면/컵라면을 다시 일반, 짜장/비빔, 우동, 컵라면으로 형태에 따라 구분할 수 있었습니다. 결과적으로 롯데마트는 250여개 중, 홈플러스는 38개 중 원하는 상품을 리스트 내 최종적으로 확인 할 수 있었습니다. 라면의 조리 방법에 따른 구분을 제공해주는 홈플러스가 훨씬 편리하네요!

댓글 0

팁스터

앱/웹 서비스를 구성하는 요소들에 대한 편집자의 생각과 노하우를 정리하는 뉴스레터입니다.

모바일 앱 다운로드, 어떻게 유도할까?

프로덕트

공유기능, 어떻게 활용하면 좋을까?

프로덕트

1:1 문의, 어떻게 활용하면 좋을까?

프로덕트

오디오 콘텐츠 재생 화면은 어떤 모습일까?

프로덕트

회원가입 완료 화면 구성 방법!

프로덕트

또 하나의 네비게이션, 푸터 구성 방법

프로덕트

당황스러운 상황을 해결하는 404 페이지!

프로덕트

점점 다양해지는 선물하기 기능!

프로덕트

서비스와 사용자의 밀당! 권한 요청 살펴보기

프로덕트

동일한 상황, 어울리는 문구는?

프로덕트

앱스토어 스크린샷 구성 방법!

프로덕트

모바일 앱에 적합한 정렬과 필터는?

프로덕트

봄바람 휘날리며~ 건강 관리 서비스 분석

프로덕트

손이 욱신거리지 않는 에디터 없나요?

프로덕트

아쉽지만, 회원탈퇴 프로세스 분석

기획

우리 서비스에 맞는 리스트 UI는?

디자인

아프리카에서 중고차 구매하기

기획

작심 3일 넘길 수 있는 서비스 파헤치기!

프로덕트

프로필 화면 어떻게 구성할까?

기획

검색 화면 어떻게 구성할까?

기획

팝업 화면 어떻게 구성할까?

기획

많은 정보를 담은 지도 UI는 왜 짜증날까?

기획

햄버거 메뉴는 이제 끝물 아닌가요?

기획

알림이 스팸이 되지 않게 하는 방법!

기획

리뷰 많은 서비스가 되는 방법!

기획

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

기획

통계 기능, 어떻게 구성하면 좋을까?

기획

스마트오더 서비스는 어떻게 구성할까?

기획

FAQ 화면 어떻게 구성할까?

기획

아이콘, 어떻게 활용하면 좋을까?

디자인

온보딩 화면, 어떻게 구성하면 좋을까?

디자인

회원가입과 로그인, 어떻게 구성하면 좋을까?

개발

설정 화면 어떻게 구성할까?

개발

독특한 UI, 어떤 사례가 있을까?

디자인

빈 화면 어떻게 구성할까?

기획

SaaS 가격페이지 어떻게 구성할까?

기획

같은 분야를 다룬 글들을 권해드려요.

요즘 인기있는 이야기들을 권해드려요.

일주일에 한 번!
전문가들의 IT 이야기를 전달해드려요.

[구독하기] 버튼을 누르면 개인정보 처리방침에 동의됩니다.

일주일에 한 번! 전문가들의 요즘IT 이야기를 전달해드려요.

[구독하기] 버튼을 누르면 개인정보 처리방침에 동의됩니다.