본 글은 온라인 쇼핑몰 판매자와 직접 상세페이지를 디자인하시는 분들을 위해, 매출을 높이는 상세페이지 디자인 팁을 공유하고자 작성하였습니다. 단순히 보기 좋은 디자인을 넘어서 고객의 시선을 사로잡아 구매 전환으로 연결될 수 있는 디자인 팁을 담아보았습니다. 실전에 적용해 이탈률을 낮추고 전환율을 올려보세요!
"기획이 매출을 결정하는 뼈대라면, 디자인은 상품을 돋보이게 만드는 포장지 역할이라고 할 수 있습니다. 아무리 기획이 좋아도 시각적으로 읽기가 힘들다면 효율이 떨어지게 됩니다."
01. 모바일 가독성을 최적화하자.
온라인 쇼핑은 모바일을 통한 구매가 압도적입니다. 따라서 모든 폰트는 모바일 화면을 고려해서 사용해야 합니다.
01-1) 강조의 완급 조절
모든 글씨를 크고 굵게 사용하면 시선이 분산되고 가독성이 떨어집니다. 중요한 카피만 강조할 수 있도록 크기와 굵기에 변화를 주어 사용합니다.
01-2) 폰트는 생각보다 크게 써도 좋다
PC와 다르게 모바일은 화면이 작다는 사실을 인지해야 합니다. 폰트 크기는 PC화면 기준으로 조금 큰 것 같은데 싶은 사이즈로 제작하는 것이 좋습니다.
02. 집중도를 높이는 컬러 계획
한 상세페이지에서 너무 많은 색상을 사용하면 집중력이 흐트러집니다. 또한 고급스러움이 떨어져 상품의 가치가 낮아 보일 수 있습니다.
02-1) 무채색 활용
제품을 설명하는 본문 영역은 무채색을 활용하여 상품 자체에 대한 집중도를 높이는 것을 추천합니다.
02-2) 컬러추출하기
색상 조합이 힘들다면, 제품 사진에서 추출한 컬러와 주변색으로 작업하면 조화로운 느낌을 줍니다. 색상을 적게 쓸 수 록 눈을 편안하게 만들 수 있어 가독성이 올라갑니다.
03. 시선을 멈추게 하는 움짤 활용
정적인 이미지 사이에 움직이는 요소가 있다면, 매우 효과적으로 시선을 사로잡을 수 있습니다.
03-1) 동영상 첨부보다 GIF
고객이 직접 재생버튼을 눌러야 하는 동영상은 클릭률이 낮습니다. GIF는 자동으로 재생되고, 무의식적으로 시선을 멈추게 하는 효과가 있어 많이 사용합니다. 너무 고화질로 넣기보다는 로딩시간을 줄이고 빠른 재생을 위해 적당한 화질과 용량을 맞추는 것이 중요합니다.
04. 명확도를 높이는 여백의 미
여백은 단순한 빈 공간이 아닙니다. 명확도와 집중도를 높이는 매우 중요한 요소입니다.
04-1) 그룹화
동일한 그룹 안에 있는 요소들을 가깝게 배치하고, 그룹과 그룹 사이의 여백을 넉넉히 두면 시각적 혼란을 방지할 수 있습니다.
04-2) 여백의 효과
글자만 잔뜩 채운 것보다 요소마다 여백을 넉넉하게 남겨두는 것이 가독성을 높이는 데 유리합니다.
05. 혜택을 직관적으로 시각화하기
중요한 정보는 디자인을 통해 실감 나게 전달하는 것이 중요합니다.
05-1) 이벤트 이미지
1+1 이벤트를 한다고 가정해 보겠습니다. 제품 사진 1개를 넣는 것보다는 제공받는 개수만큼 제품 2개를 나열하는 것이 좋습니다. 내가 받을 혜택을 직접 시각적으로 느낄 수 있기 때문입니다.
05-2) 리뷰 디자인
좋은 리뷰를 캡처해서 올리는 게 끝이 아닙니다. 중요한 부분에 밑줄을 긋거나, 글씨를 키워 디자인합니다. 해당 부분에 가독성을 높여 고객이 필요한 정보를 한눈에 접하도록 합니다.