컴포넌트 클로닝(6) - 쿠팡 제품 리스트

www.coupang.com/

COUPANG

약 2년 전부터 정착해서 쭉 사용 중인 쿠팡입니다. 쿠팡을 처음 봤을 땐 뭔가 국내 쇼핑몰보다는 아마존스럽다는 느낌을 많이 받았는데요. 리드 디자이너분이 구글 출신이었다는 이야기를 들었는데 정확하게 맞는지 모르겠네요😅

 

여튼 여러 가지 쇼핑몰을 쓰다 보면 가격 표시라던지 이미지 활용이라던지 판매하는 제품의 특성마다 다르겠지만, 시각적 위계가 가장 정석같이 정리된 게 쿠팡이라고 생각합니다. 쇼핑몰의 기본적인 레이아웃은 굉장히 오래전부터 연구 및 발전돼서 어느 정도 정석적인 부분이 있기 때문에 예술적(?)으로 변형을 주는 경우를 많이 보았는데요. 제 생각엔 시각적 위계의 기본은 갖추는 게 우선이라고 생각합니다😁

 

 

쿠팡에 가장 많이 있는 제품 리스트입니다. 컴포넌트의 정보구조는 상단부터 정리하자면

• 이미지 - 1:1비율이며, 다양한 제품을 팔고, 제품을 강조하기 위한 비율이라고 생각합니다.
• 제품 뱃지 - 사전예약이나 추천 제품에 붙는 뱃지인데, 특이점은 상대적 위치가 아니라 절대적 위치에 있어서, 뱃지가 있으나 없으나 레이아웃에 영향을 주지 않습니다.
• 제품 이름 - 다른 정보들에 비해 비교적 가변적 인대요. 한 줄부터 2줄 이상까지 가며, 제품 이름의 글줄이 많아질수록 제품들이 있는 row목록에 있는 모든 제품의 높이가 맞춰지는 거 같습니다.
• 가격 정보 - 가격 정보가 쇼핑몰마다 차이점이 많은데요. 크게 분류하면 할인율을 표기하냐 안하냐의 차이같습니다. 제 생각엔 구매를 유도하기 위해서는 할인률을 표기하는 게 좋지 않을까 생각합니다. 다만 쿠팡에서는 와우할인가, 즉시할인가를 표시하는데 아무래도 시각적 위계를 고려하면 할인률이 우측으로 가기때문에 사용자가 놓치지않을까 생각하네요. 그리고 사용자 입장에서 와우할인가, 즉시할인가가 뭔지 정확하게 모르겠네요
• 배송 정보 - 로켓 배송 최고
• 별점 및 리뷰 - 간결하게 표기되어 있습니다
• 적립금 - 제가 적립금에 신경을 많이 안 써서 이번에 클로닝 하면서 처음 인지했네요

제가 클로닝하면서 하나의 경우에 대해서만 했지만 컴포넌트에 다양한 상태가 있습니다. 사전예약 제품의 경우 별점이 없다던지, 할인 유무, 배송 형태, 중고 제품 판매 시의 경우 등등입니다. 아무래도 다양한 제품을 다양한 형태로 판매하는 쿠팡의 경우 심미적으로 아름답기보다는 탄탄한 시각적 위계를 유지하며 확장성 있게 컴포넌트가 설계되어 있다고 생각합니다. 아무래도 쿠팡이 잘 나가는데 로켓 배송도 중요하겠지만 로켓 배송에 걸맞은 디자인도 한몫하지 않았나 생각하네요.