[커머스] 국내vs해외 쇼핑몰 상품 상세페이지 비교 (1)

상세 페이지의 첫인상!

상품 정보 구성

---

우리가 상품을 구매하기 위해 반드시 거쳐야 하는 이곳! 바로 "상품 상세 페이지"입니다.

다 비슷비슷해 보이지만 기획자들의 정말 많은 고민과 유관부서들의 요구사항들이 들어가 있는 곳이기도 합니다.  

 

사용자는 이곳에서 상품의 디테일한 스펙을 확인할 수 있고, 구매전환에 가장 큰 영향을 준다는 이미 구매한 사용자의 리뷰도 확인할 수 있기에 중요한 페이지라고 할 수 있겠습니다. 상품을 마지막으로 점검(?)해보는 중요한 페이지죠. 

 

저는 국내 커머스 쇼핑몰을 많이 이용하기도 하지만 일부로 해외직구, 해외 쇼핑몰을 살펴보고 구매하려고 합니다. 

그러다 보면 낯선 UI와 UX를 보고 자극을 받기도 하고 우리나라 커머스 사이트와 비교해보면서 적용할 기능들은 없는지 생각해보게 되더라고요. 

 

그래서 오늘은 국내 커머스와 해외 커머스의 상세페이지를 비교해보고자 합니다.

해외 커머스 앱은 아마존(미국), 알리바바(중국), 타오바오(중국) 그리고 국내 커머스는 네이버(스마트 스토어), SSG, 쿠팡 이렇게 각 3곳씩 선선 정하였습니다. 

---

상세페이지 첫 랜딩 화면 

상품을 누르게 되면 바로 마주하게 되는 화면입니다. 아이폰 11 Pro Max (6.5') 기준

 

1. 상품 이미지와 상품 정보(상품명, 가격)

국내 쇼핑몰 화면을 먼저 볼까요?

<왼쪽부터 SSG, 네이버(스마트스토어), 쿠팡 순>

상품명을 상단에 가격은 하단에 정렬이 되어있습니다. 그리고 할인율이 있는 경우 정가 대비를 얼마나 할인이 되는지 강조하기 위해 볼드 처리를 하거나 다른 색상으로 표기해주었습니다. SSG를 제외한 2개 쇼핑몰에는 리뷰를 바로 볼 수 있도록 상품명 아래에 표기해두었습니다. (SSG는 첫 랜딩에 바로 보이진 않네요!)

---

해외의 경우 아마존과 알리바바, 타오바오가 조금씩 다르게 보였는데요, 레이아웃 형식은 알리바바, 타오바오가 국내 페이지와 가장 비슷합니다.

< 왼쪽부터 알리, 타오바오, 아마존 순 >

단, 알리바바와 타오바오의 경우 가격을 상단에 위치하고 그 아래에 상품명을 보여주고 있습니다.

상품명(정보) < 가격을 좀 더 강조하려고 했던 것 아닌가 생각됩니다. 실제로 타임세일 상품의 경우 위의 이미지와 같이 띠배너를 두른 듯 빨간색으로 강조하여 보여주고 있습니다.

< 줄어드는 시간을 보면서 빨리 사야 할 것 같은 기분이 들었어요!! >

 

아마존의 경우 상품 이미지와 옵션 값(이미지)이 바로 보입니다. 상품 이미지 아래에 있는 동그란 옵션 이미지를 선택하게 되면 각 옵션에 맞는 금액이 바로 보이고요, 옵션 선택 따라 상품 이미지의 코트 색상이 바뀌어서 보여줍니다.

그래서 페이지를 이동하지 않고 한 화면에서 옵션(색상, 사이즈)을 선택할 수 있었고, 옵션에 따라 달라지는 금액도 바로 확인할 수 있어서 좋았습니다. 

 

국내에서는 쿠팡의 경우 동일 상품의 옵션(색상, 사이즈)를 선택할 수 있었는데요, 

다른 페이지 이동 없이 바로 색상과 사이즈를 선택하고 옵션 옵션 이미지를 볼 수 있어서 경험이 굉장히 좋았습니다.  

< 쿠팡에서 옵션 선택하는 플로우 >

---

각 쇼핑몰별 상세페이지의 첫인상은 어떠셨나요? 

쇼핑몰마다 중요하게 생각하는 요소(할인율, 가격, 상품 이미지 등)가 모두 다르고, 표현하는 방법도 다르다는 것을 알 수 있었습니다. 별 것 아닌 것 같지만 사용자를 배려하는 기능도 볼 수 있었습니다. 

 

소개팅을 할 때 첫인상을 무시 못하는 것처럼, 

사용자에게 어떻게 하면 첫인상을 잘 보여서 화면 스크롤을 유도 할 수 있을지 고민되는 스터디였습니다. 

 

다음 편에서는 2. 상품 상세 페이지의 하단 탭 비교를 해보려고 합니다. 

< 5개 쇼핑몰들의 하단탭 >

상세 페이지를 뚫어지게 보는데 왜 이렇게 했을지? 다른 쇼핑몰들은 어떤지? 궁금증이 생겼습니다. 🤔

쇼핑몰의 하단 탭의 버튼 구성요소와 크기들이 모두 다르더라고요! 

 

관련하여 의견, 부족한 부분이 있다면 언제든 피드백 주세요.

 

 

---