<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1387208918241112&ev=PageView&noscript=1"/>

뉴스센터 목록으로 돌아가기

구매를 폭증시키는, 상품페이지 제작 방법 7가지

위시켓 | 2020.06.18.

여러분의 온라인 비즈니스를 성공시키기 위해서는 품질이 뛰어난 제품을 만드는 것에서부터, 이를 잘 표현해낸 상품페이지 제작에 이르기까지, 거쳐야 하는 많은 단계들이 있습니다. 온라인 스토어 방문자들 중에서 실제로 구매를 하는 사람들은 겨우 3%에 불과하며, 장바구니의 69%는 결국 버려지게 됩니다.

우리는 고객들이 쇼핑을 하고 결제하기까지에 이르는 모든 여정을 가능한 매끄럽게 만들 필요가 있습니다. 그리고 그 과정에서 가장 중요한 것이 바로'상품페이지 제작'이죠. 이번 시간, 위시켓은 구매를 폭증시킬 수 있는 상품페이지 제작 팁에 대해 소개드리고자 합니다.

*위시켓은 2019년 시밀러 웹 방문자 수 기준, 국내 1위 IT아웃소싱 플랫폼입니다. 상세페이지 디자인부터 웹디자인에 이르기까지 7만 8천개의 디자인 업체와 프리랜서 디자이너들이 활동하고 있으며, 디자인 프로젝트를 무료로 등록할 수 있습니다. 프로젝트 등록 한 번으로, 견적/ 예상기간/ 포트폴리오/ 경력 등을 한 번에 알아보세요!

01. 퀄리티가 좋은 상품 이미지를 사용한다.

너무 뻔한 이야기처럼 들리시나요? 그만큼 가장 기본적으로 알아야 할 사항인데요. 상품의 이미지는 언제나 'above the fold'에 있어야 합니다. 왜냐하면, 대부분의 고객들이 구매를 결정하는 과정에서 가장 먼저 살펴보는 것이 바로 상품의 이미지이기 때문인데요. 실제로 소비자의 93%는 구매를 결정할 때, 이미지를 가장 중요하게 생각한다고 합니다.
-above the fold: 웹 페이지에서 스크롤을 내리지 않고도 볼 수 있는 부분


모드클로스의 상품페이지를 보면, 서로 다른 체형의 모델들을 여러 각도에서 보여줍니다. 좋은 제품 이미지는 단순히 상품이 잘 나온 것을 의미하지 않습니다. 여러분의 고객들이 찾고 있던 바로 그 제품이라는 설득의 메시지가 잘 녹아들어 있어야 합니다.


02. 가격을 분명하게 보여준다.

보통은 제품의 이름이나 '장바구니 담기' 버튼 근처에 가격을 표시하는 것이 좋습니다. 제품이 아무리 비싸더라도, 가장 눈에 잘 띄는 곳에 가격을 표시해야 합니다. 소비자의 입장에서 제목이나 장바구니에 추가하기 기능이 있는 부분에 자연스럽게 눈길이 가기 때문에, 그 부분에서 가격을 쉽게 파악할 수 있게 해주세요.

가격을 잘 보이기 하는 방법!
- 폰트 사이즈를 크게 한다.
- 대비되는 색상을 사용해서 가격을 '튀어 보이게' 만든다.
- 할인 혜택이 있다면 강조한다.



메이드닷컴의 사례를 보면, 페이지의 맨 위에서 커다란 폰트로 가격이 표시되어 있으며, 정가와 할인된 가격을 같이 적어주어 고객이 혜택을 받는 것처럼 느끼게 만들어놓았습니다. 이처럼 고객이 가격을 쉽게 인지하고, 할인을 표시하는 것은 고객의 구매 결정을 쉽게 도와줍니다.


03. 설득력 있는 콜 투 액션(calls to action)을 만든다.

콜 투 액션(Calls to action, CTA)은 사용자들에게 어떤 행동을 하게끔 만드는 버튼이나 링크를 말합니다. 그 예로는 '장바구니에 추가하기' 버튼, '지금 가입하기' 메뉴, '유사 상품 구매하기' 버튼 등이 있습니다.

CTA 또한 언제나 'above the fold'에 있어야 합니다. 어떻게 보면 상세페이지 디자인의 가장 중요한 목적은 잠재 고객으로 하여금 CTA 버튼을 클릭하게 하는 것이기 때문에 가장 신경 써야 하는 부분입니다. CTA는 3초 안에 찾을 수 있게 만드세요.

콜 투 액션에 사용할 수 있는 유용한 팁들!
- 페이지의 맨 위쪽, above the fold에 놓는다.
- 밝은 색상이나 대비되는 색을 사용해서 눈에 띄게 만든다.
- 버튼을 클릭하기에 충분히 크게 만든다.
- 버튼을 눌러 취할 수 있는 액션을, 정확하게 적어준다.


넷플릭스 CTA를 보면, 버튼이 두드러져 보일 수 있도록 완벽한 색채 조합을 사용했습니다. 여러분의 상품페이지에서도 크고 눈에 띄는 CTA 버튼을 통해 원하는 액션을 얻으시길 바랍니다.


04. 상품 설명이 있는 부분을 잘 활용한다.

상품 설명은 이미지만으로는 전달할 수 없는 보다 자세한 정보들을 제공하는 것입니다. above the fold에는 빨리 읽을 수 있게 짧고 매력적인 제품 설명을 두고, 페이지의 아래쪽에는 보다 자세한 정보를 원하는 고객들을 위해 조금 더 길고 상세한 설명을 해주는 것이 좋습니다.


러쉬는 자신들의 고객이 누구인지 잘 알고 있으며, 고객들이 이 상품을 상상하고 사용하고 싶게 만들기 위해서 창의적인 제품 설명 방법을 사용하고 있습니다.


05. 사회적 검증(social proof)을 활용한다.

상품의 별점은 대부분의 쇼핑객들이 가장 보고 싶어 하는 중요한 부분이기 때문에 상세페이지 디자인 상단에서 보여줘야 합니다. 그런 다음에는 다른 소비자들은 어떤 평가를 남겼는지, 페이지의 아래쪽에 리뷰를 모아 볼 수 있게 만드세요.

사회적 검증이 있으면 사람들이 제품이나 서비스를 구입할 가능성이 더 높아집니다. 고객들의 97%가 온라인으로 구매를 할 때, 리뷰를 보고 구매를 결정하는데, 영향을 받는다는 사실을 알고 계시나요? 사회적 검증을 보여주는 가장 대중적인 방식은 제품의 이름 옆에서 별점을 보여주는 것입니다.

상품페이지의 아래쪽에는 고객들의 리뷰를 추가해서, 그 제품이 얼마나 인기 있는지, 그리고 다른 사람들은 그것을 만족스럽게 사용하고 있는지를 쉽게 확인할 수 있도록 해야 합니다. 사회적 검증이 중요한 이유는, 고객들이 판매자가 직접 써놓은 제품 설명보다도 고객의 리뷰를 12배나 더 신뢰하기 때문입니다.


상품페이지에서 활용할 수 있는 다른 사회적 검증의 사례


- 낮은 재고량 표시
: 구매의 기회를 놓칠 수도 있다는 두려움을 들게 만들어 구매를 촉진시킵니다.


- 최근 한 시간 동안 구매 고객 수
: 이 방식은 유명한 가게 앞에 줄이 길게 늘어서 있는 것과 같은 원리로 다른 사람들도 이 제품에 관심을 많이 보이고 있다는 느낌을 들게 해줍니다.


- 해당 상품을 구매한 사람들이 살펴보거나 구매한 상품 추천
: 사회적 검증의 교차 판매를 결합한 것으로 써 잠재 고객들은 여러분의 스토어 안에 묶어 두기에 좋은 방법입니다.


아마존의 경우, 상품페이지의 가장 중요한 부분에서 고객의 별점과 리뷰를 보여줍니다. 여러분의 비즈니스에 맞게 상품페이지에 사회적 검증을 추가할 수 있는 다른 방법도 생각해보세요!


06. 고객의 마음을 흔드는 제품을 추천한다.

제품을 추천하는 것은 고객을 사이트에 더 머물게 하고, 1회 주문량을 늘리며, 개인에게 보다 맞춤화된 쇼핑 경험을 만드는데 유용합니다.

정확하면서도 유용한 제품을 추천할 수 있다면 그것은 또 다른 구매로 연결할 수 있는 좋은 방법입니다. 또한, 고객이 처음에 본 제품이 마음에 들지 않는다고 하더라도 여러분의 사이트에 계속 머무르면서 둘러볼 수 있게 할 수 있습니다.

계정을 만들면 보다 맞춤화된 추천을 해줄 수 있다고 소개해보세요. 여러분의 스토어에 보다 많은 사용자들을 끌어들일 수 있을 겁니다. 이렇게 하면 보다 개인화된 쇼핑 경험을 만들어 낼 수 있고, 참여도 역시 자연스럽게 높일 수 있습니다.


ASOS는 고객이 본 상품을 모두 모아 다시 한번 재구매를 유도합니다. 이처럼 고객에게 맞춤화된 추천을 통해 더 많은 구매를 증폭시키는 것은 물론, 페이지에서 체류시간까지 늘릴 수 있습니다.


07. 일관성을 유지한다.

이 부분은 제품페이지 디자인에 포함시켜야 하는 기능은 아니지만 그래도 중요한 디자인 원칙입니다. 위에서 살펴본 기능들을 제품 페이지에 모두 구현하든지 또는 추가로 더 구현하든지 아니면 몇 개만 골라서 구현하는지에 관계없이 제품 상세페이지는 언제나 일관성이 있어야 합니다.

일관성을 지켜야 하는 요소.
색상
폰트
이미지 사이즈
페이지 구조(배치되는 방식)
제품 설명 등에서 목소리 톤


지금 바로, 구매를 폭증시키는 제품페이지를 만들어보세요!

여러분이 고민하고 있는 그 디자인 프로젝트,
위시켓에서는 견적과 예상기간 등에 대한 컨설팅을 받아, 빠르게 시작해볼 수 있습니다.

여러 개의 업체를 번거롭게 찾아볼 필요없이, 무료 프로젝트 등록 한번으로,
7만 8천개의 디자인 업체와 디자이너들의 견적/ 제안내용/ 관련 경험/ 포트폴리오를 담은 지원서를 확인하세요:)

> 이 글은 'How to Design a Product Page'를 각색하여 작성되었습니다.

위시켓 | 2020.06.18.

'뉴스센터'의 다른 글 보기

'HTML'에 대한 모든 것, 한 번에 빠르게 알아보기

첫 앱개발 외주, 어떻게 진행해야 할까? 실패 없는 가이드라인

구매를 폭증시키는, 상품페이지 제작 방법 7가지

앵귤러 vs 리액트 vs 뷰, 어떤 게 최고의 선택일까?

재구매를 늘리는, 2020년 최고의 소프트웨어 모음

뉴스센터 더 보기 >