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

프로덕트

커머스에서 ‘메인 페이지’를 구성하는 방법들

[커머스 분석] 시리즈 보러 가기 ▼

 

커머스가 감성적 보상을 제공함으로써 활성화하는 방법

커머스가 금전적 보상을 제공함으로써 활성화하는 방법

커머스에서 ‘검색’을 효과적으로 활용하는 방법들


메인 페이지(Main page)란 사용자가 서비스를 접속할 때 가장 먼저 보게 되는 화면입니다. 서비스의 첫인상을 좌지우지하기 때문에 그만큼 매우 중요한 페이지입니다. 사이트의 특성이 어떤 지, 어떤 정보를 주로 제공하는지에 따라 강조하는 표현이 다를 수 있는데요. 커머스는 다양한 범주의 고객이 들어오는 서비스로 그들의 ‘멘탈 모델(Mental model)’에 맞게 정형화된 배치와 UI를 사용하고 있습니다. 그 안에서도 많은 기업들이 소비자의 눈에 조금이라도 들기 위해 각자의 개성으로 차이점을 주려고 노력합니다. 오늘은 각 서비스마다 어떻게 메인 페이지를 구성했는지 확인해보겠습니다.

 
노트북 메인페이지
출처: pexels

 

메인 페이지를 구성할 때 고려해야 하는 것들

 

1) 웹사이트 성격/주제에 맞게 구성

웹사이트가 어떤 성격과 주제를 가지고 있는지에 따라 구성해야 합니다. 예를 들어, 펫프렌즈와 같은 펫 커머스 서비스의 경우, 펫의 반려인이 어떤 걸 주로 원하는지에 맞춰 구성하고 있습니다.

 

2) 웹사이트의 정체성과 브랜드 이미지를 보여주기

웹사이트의 정체성과 브랜드 아이덴티티(Identity)에 따라 사이트의 이미지를 구축해야 합니다. 브랜드에서 어떤 콘셉트를 추구하여 보고 싶은지, 공적인 영역인지 혹은 조금 더 사적인 영역인지, 어떤 타깃의 고객을 대상으로 하는지 등에 따라 정체성을 다르게 표현할 수 있습니다. 

 

3) 웹사이트가 목표로 하는 것, 어떤 니즈를 충족시키려 하는지

웹사이트가 목표로 하는 것과 사용자의 요구사항에 맞게 구성해야 합니다. 이것은 시기 별로, 상황 별로 달라질 수 있는데요. 예를 들어 현재 블랙프라이데이 이벤트로 소비자의 시선을 끌어야 한다면, 강력한 할인 이벤트 및 그 강조할 할인 상품을 토대로 배치를 다르게 할 수 있습니다.

 

4) 콘텐츠에 우선순위에 따른 배치

위에 1-3의 내용을 토대로 우선순위를 설정하여 그에 맞게 배치합니다. 그 배치의 기준은 각 회사의 기준, 상황마다 달라질 수 있습니다. 쇼핑몰 메인 페이지의 구성은 구매 전환율에 큰 영향을 미칠 수 있으므로 내부적인 많은 협의와 사용자의 요구사항을 잘 파악해 반영해야 합니다.

 

 

커머스 서비스에서 메인 페이지를 구성하는 방법

 

1) 쿠팡으로 살펴보는 메인 페이지를 구성하는 콘텐츠들

쿠팡 메인페이지

 

일반적으로 커머스 서비스의 메인 페이지는 이벤트 배너, 개인화/연관 상품 추천 인기 상품 순위 및 특가 상품 안내로 크게 구분됩니다. 그 안에 각기 서비스가 중요하게 생각하는 기능에 따라 배치합니다. 쿠팡의 경우, 이벤트 배너 및 카테고리 다음으로 개인화 연관 상품을 가장 상위로 구성하였고, 그다음으로 광고 상품, 인기상품, 세일 상품, 카테고리 별 인기 상품 등으로 반복됩니다. 중간에 쿠팡에서 강조하는 주요 서비스인 '로켓 프레시'를 넣어 리마인드를 해줍니다. 쿠팡은 제품군이 많은 종합 쇼핑몰이기 때문에 메인 페이지에서 보여주는 정보가 다양하고 많은 편입니다.

 

 

2) 개인화 추천

개인화 추천

 

요새 대부분의 서비스들은 상품의 개인화 맞춤 추천의 기능을 제공하고, 메인 페이지 배치 중 상위에 배치합니다. ‘개인화 추천’은 본인이 이미 보거나 구매하거나 ‘좋아요’를 선택했던 혹은 장바구니에 담았던 상품들을 기반으로 추천하는 상품을 의미합니다. 내가 이미 쇼핑몰을 로그인하거나 접속했던 기록을 바탕으로 설계되고, 상품들을 보다가 다시 메인 페이지에 왔을 경우 그에 맞춰서 구성이 바로바로 변경되는 것이 특징입니다.

 

보통 개인화 추천의 메시지는 당신에게 맞춰서 했다는 것을 강조하기 위해 접속한 사용자의 이름, ID를 칭하며 ‘이런 상품 어떠세요?’, ‘OO 님과 유사한 고객님이 많이 구매했어요’와 같이 최대한 친화적이고, ‘당신을 위해 맞췄다.’라는 이미지를 주려고 합니다. 지그재그의 경우, 맞춤 추천을 여러 가지로 나눠서 하는데 ‘같은 상품을 담은/찜한/클릭한'으로 구분하여 제공합니다.

 

 

서비스의 특징을 잘 살린 콘텐츠 구성

서비스에 맞게 적절한 콘텐츠 구성은 필수입니다. 그에 대한 예시를 소개하겠습니다.  

 

1) 쿠팡 vs 마켓컬리

쿠팡 마켓컬리 UI

 

쿠팡과 마켓컬리의 콘텐츠 구성을 살펴보겠습니다. 둘 다 새벽 배송으로 식품을 보낸다는 공통점이 있는데요. 쿠팡의 경우, ‘더 빨리 받아보는 신선상품’이란 UX writing과 신선 새벽 배송(로켓 프레시)을 강조하여 콘텐츠를 구성했습니다. 자체 MD 추천을 중요하게 하는 마켓컬리는 ‘MD의 추천’이라는 섹션을 별도로 구성했습니다. 구성의 차이가 같은 새벽 배송을 제공하는 업체가 자신들의 지향하는 바를 다르게 표현한 것이 돋보입니다.

 

2) 발란 vs 트렌비

발란 트렌비 UI

 

명품 구매의 떠오르는 서비스 두 가지입니다. 부분적으로는 닮아 있으나 각기 지향하는 방향이 다릅니다. 발란은 배송 ERP 시스템을 이용하기 때문에 최대한 빠른 배송을 해주는 장점이 있습니다. '오늘 받아보는 신상품'으로 그들의 빠른 명품 배송의 장점을 강조합니다.

 

트렌비는 AI를 도입하여 여러 쇼핑몰에서 최저가의 정보를 가져옵니다. '최저가 스캐너'로 판매처와 가격, 예상 수령일까지 보여주어 정보를 한눈에 볼 수 있게 도와줍니다.

 

3) 펫프렌즈

펫프렌즈 UI

 

펫프렌즈는 제품의 품질을 상품의 평점과 리뷰를 통해 관리하고 있습니다. 상품 중 평점이 높은 것은 추천하고, 낮은 것은 판매를 중단하는 등 지속적으로 관리하고 있습니다. 이를 내부적으로 하는 것에서 그치지 않고 마음껏 강조하고 있는 점이 중요한데요. 상품 평점이 높은 상품은 ‘평점 4.5 이상! 심쿵팸들의 선택’이라는 귀여운 Writing으로 강조하고 있습니다. 

 

또한 상품의 평점이 입고 후 30일 동안 3.0 이하로 안 좋다면 바로 판매를 중단하는 그들의 확신, ‘똥고집’을 보여주고 있죠.‘펫프 똥고집, 하나’, ‘후기 평점 3.0 이하 식품 판매 중단’으로 펫프렌즈의 귀여운 아이덴티티(Identity)를 보여주고 있으며, 커머스에 대한 소비자의 신뢰도를 높이는 효과를 줍니다. 

 

 

구매평을 이용해 콘텐츠 신뢰도 증가시키기

아이디어스 펫프렌즈 UI

 

메인 페이지를 스크롤 다운(Scroll-down)하다 보면 중간에 사용자 리뷰를 넣어 상품을 추천하는 섹션을 볼 수 있습니다. 사회적 증거(Social Proof)인 리뷰나 별점을 이용하여 사용자에게 신뢰도를 높이는 예시인데요. 아이디어스, 펫프렌즈, 오늘의집, 펀샵 등 많은 서비스들이 제품의 추천과 함께 상품 신뢰도를 높이고, 홍보를 위해 자주 활용하는 방식입니다. 

 

 

감성적이거나 독특한 워딩으로 콘텐츠 표현하기

펀샵 29cm UI

 

위에서 소개한 펫프렌즈처럼 서비스들은 고객이 지루하지 않도록 중간에 특성에 맞는 감성적인 텍스트로 상품을 추천합니다. 대표적으로 펀샵(Funshop)은 특이하고 재밌는 상품을 판매하는 사이트로 유행에 맞춘 카피나 말장난 등으로 상품을 보는 재미를 더해줍니다.

 

상품을 큐레이팅 해서 보여주는 29cm는 마치 하나의 잡지처럼 보이는데요. 특유의 감성 카피로 상품을 좀 더 멋지게 표현합니다. 봄에는 계절에 맞게 ‘봄바랑 살랑이는 치마’라는 큐레이션으로 상품을 보여줍니다. 

 

트렌비의 경우, ‘시간이 지나도 변하지 않는 가치’, ‘오묘하고 시크한 그레이시 데님’ 등 명품 쇼핑몰에 어울리는 워딩으로 큐레이션 된 자신들의 상품군을 구성해 보여줍니다. 

 

소비자의 눈길을 끌어라

지금까지 메인 페이지를 구성하는 여러 가지 사례들을 소개했습니다. 서비스의 얼굴이 될 메인 페이지를 잘 구성해야 이탈률과 방문율에 중요한 영향을 미칠 것입니다. 이렇게 살펴본 여러 가지 방법을 서비스를 구성할 때 활용해도 좋지만, 가장 중요한 건 서비스의 특징에 맞는 우선순위를 설정하는 것입니다. 긴 스크롤을 내려야 하는 고객들의 눈에 바로 들어올 수 있게, 그리고 원하는 콘텐츠에 바로 접근할 수 있도록 해야 합니다. 따라서 자체 큐레이션 된 섹션도 중요하지만, 개인화 또는 리뷰, 별점을 통한 사회적 증거를 활용하여 상품을 보여주는 것도 또한 소비자의 눈을 끌을 수 있는 방법입니다. 그럼 다음 편에서는 커머스에서 ‘장바구니’ 기능을 제공하는 방법들에 대해 살펴보겠습니다.

댓글 0

기록의 것들

기록하는 것을 좋아하는 프로덕트 디자이너입니다. 사람과 기술에 관심이 많아 기술을 자연스럽게 사람에 녹이는 방법들을 찾고 있습니다.

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

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

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

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

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

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