2] Visual
<aside> 🎨 고객의 마음을 훔치고 싶다면, 고객을 먼저 편하게 만들어라
</aside>
우리가 흔히 착각하는 한 가지가 있다.
상세페이지를 예쁘고 세련되게 만들면 제품을 구매하겠지?
틀린 말은 아니다.
하지만 정답도 아니다.
예쁘고 세련되었다는 정확한 기준이 없기 때문이다.
디자이너는 자주 사용하는 컬러들을 모아 팔레트로 지정한다. 그리고 다른 디자인을 꾸준히 참고하여 컨셉을 체계화 한다. 여기에서 조금씩 개인의 컨셉을 추가하면 전혀 새로운 작업물이 탄생하게 된다. 하지만, 그런 경력직 디자이너도 가끔 어떤 기준도 없이 작업을 할 때가 많다.
초보인 당신에겐 기준이 없던 것은 당연하다. 디자인 분야를 배워볼 필요나 기회가 없었기 때문이다. VIETA원칙을 배우기로 한 당신은 필요성이 있기에 지금 이 글을 보고 있을 것이다. 지금부터 기준이 될 요소들을 모조리 알려줄 예정이다. 최대한 이해하기 쉽도록 예시들을 통해 설명할 예정이니 이미지들도 꼼꼼히 보기를 바란다.
- 너무 많은 컬러를 사용하지 마라
주위 많은 브랜드를 둘러보면 저마다 고유 컬러를 사용한다. 예를 들어, 이니스프리 ‘그린티 씨드 히알루론산 세럼’을 살펴보자. 최근 화장품 브랜드 컨설팅을 하면서 참고했던 예시라서 가져와 봤다.
쿠팡 이니스프리 ‘그린티 씨드 히알루론산 세럼’
위 이미지는 이니스프리 세럼 상세페이지 디자인이다. 여기서 명확히 알 수 있는 것은 두 가지 컬러를 중심으로 상세페이지를 구성했다는 것이다. 이니스프리 고유 컬러인 그린과 제품 컬러인 베이지를 매치했다. 이것은 브랜드와 제품을 소비자에게 인식 시키려는 의도가 담겨 있다.
실제로 이니스프리 홈페이지를 보면 시그니처인 그린 컬러가 눈에 띄게 많다.
이니스프리 로고
이니스프리 홈페이지 레이아웃
이니스프리 홈페이지 레이아웃
상세페이지에 너무 많은 컬러를 사용하게 되면 보는 소비자로 하여금 눈에 피로를 유발한다. 또한 셀러가 강조하려는 부분이 어디인지 명확하지 않게 되어 설득에 힘을 잃는다. 컬러도 각각 고유의 정보라는 것을 기억해라. 사람은 한 번에 많은 양의 정보를 받아들이지 못한다. 안타깝게도 뇌과학 분야에서는 수 많은 논문을 통해 그 사실을 증명했다. 소비자에게 피로감을 주는 상세페이지는 쓰레기다.
뒤에 Easy 챕터에서도 다루겠지만 고객이 상세페이지를 끝까지 보려면 쉽게 만들어야 한다. 따라서 상세페이지 텍스트 양 조절도 중요하다. 컬러와 텍스트를 적절히 활용하라. 이 모든 게 어울려져 좋은 디자인이 되는 것이다.
HOW TO USE
- 내 브랜드 컬러를 정한다.
- 제품 컬러를 정한다.
- 두 가지를 적절히 조합하여 상세페이지를 구성한다.
- 텍스트를 적당히 넣어 고객이 책을 읽는 게 아닌 디자인을 음미하도록 한다.
- 만약 자체 브랜드가 없다면 이참에 만들어 보는 것도 방법이다.
- 위탁 셀러일 때 브랜드를 따로 만들기 어렵다면 제품 컬러와 대비 높은 색상을 조합한다.
텍스트와 배경의 색상 대비가 높아야 텍스트가 더 눈에 띄고 읽기 쉽다. 일반적으로 검은색 텍스트에 흰색 배경이 가장 좋은 대비를 제공한다.
구글에 ‘보색대비표’ 를 검색하면 다양한 정보를 얻을 수 있다.
- 고화질 이미지를 사용하라
“김대표님 저희 제품 컨설팅을 부탁드립니다.”
컨설팅 의뢰를 받으면 나는 먼저 상세페이지가 있는지 여쭤본다.
그리고 상세페이지를 보면 왜 판매가 안 되는지 첫 번째 섹션 부터 답이 나올 때가 많다.
이해를 돕기 위한 예시입니다.
사진은 고객과 제품의 첫 만남이다.
내 제품을 고객에게 어떤 모습으로 소개하고 싶은가?
아니면, 반대로 생각해보자.
내가 고객이라면 어떤 사진을 보고 구매를 할 것 같은가?
고객이 제품을 육안으로 보지 않고 구매를 할 때는 분명 그 이유가 있다. 오프라인 매장을 방문하지 않고 구매 하기에 편리하고, 경우에 따라 가격이 더 저렴하기 때문이다. 이런 장점 뒤에는 단점도 분명 존재한다. 직접 보지 않았기 때문에 신뢰할 수 있을까 하는 의문이 든다. 고객은 지금 보고 있는 사진의 제품과 동일한 퀄리티로 잘 받을 수 있기를 바란다. 이미지 화질이 떨어져 흐리거나 촬영을 조잡하게 했다면, 내 제품을 보는 고객 마음도 흐리고 복잡하다는 것을 기억하자.
소개팅에서 상대방을 평가하는데 10초가 걸리지 않는다고 한다. 첫 인상이 한 번 자리 잡으면 그 인식을 바꾸기 위해서는 최소 3번 이상 다시 만나야 한다. 만약 나쁜 첫 인상을 주었다면 상대방을 설득하기 위해 최소 3번 이상 다시 만나 노력을 기울여도 될까 말까 한다. 고객과 제품의 첫 인상을 결정 짓는 제품의 이미지는 최고의 모습으로 다가서야 한다.
조금 더 자세한 내용은 뒤에 Imagine 챕터에서 더 다룰 예정이다.
잘 모르겠다면 잘 팔고 있는 다른 업체를 많이 참고하여 연구하라.
- 모바일 친화적으로 만들어라
고객이 구매할 때 환경은 PC보다 MOBILE 비율이 압도적으로 높다. 아래는 아이템 스카우트에서 ‘세럼’을 검색한 결과이다.
기기별 클릭 비율을 보면 모바일이 89%를 차지하고 있다. 우리는 거의 대부분 모바일에서 구매를 하고 있다. 따라서 우리가 만드는 상세페이지도 모바일 환경에 적합하도록 만들어야 한다.
당장 적용할 수 있는 방법을 알려줄테니 자신의 상세페이지를 점검하자.
- 적절한 폰트를 선택하라 (고딕 계열 : 에스코어드림, 프리텐다드, 나눔스퀘어 등)
- 글자 폰트 크기를 키워라 (모바일에선 최소 16px 이상)
- 충분한 폰트 줄 간격을 주고 일정하게 유지하라 (폰트 크기의 1.5배)
- 대비 높은 색상 조합 사용 (텍스트와 배경의 색상 대비가 높아야 눈에 띄고 읽기 쉽다)
- 상세페이지 가로 픽셀 1,000px 이내
- 세로 픽셀을 너무 길게 만들지 않는다 (3,000px 이내 권장)
일정한 폰트 크기와 줄 간격은 고객에게 편안함을 가져다 준다. 읽기에 부담이 없다는 건 길게 볼 여유가 생긴다는 것이다. 따라서 상세페이지를 보다가 중간에 이탈할 확률이 줄어든다.
상세페이지 픽셀을 제한하는 것은 이미지가 너무 커지면 로딩이 느려지기 때문이다. 고객이 한창 상세페이지를 보고 있는데 로딩이 느리면 답답해서 이탈하게 된다.
