이번 글에서는 온라인 쇼핑몰의 필수 요소인 상세페이지에서도 디자인에 관련한 팁을 다룹니다. 화려한 심미성보다는 독자가 한눈에 정보를 스캔할 수 있도록 돕고, 피로도를 낮춰 이탈을 방지하는 방법을 소개하겠습니다. 아래에서 알려드릴 4가지 실용적 시각화 기법을 사용하여 디자인의 완성도를 높여보세요.
01. 가독성을 높이는 레이아웃과 여백 설계하기
상세페이지 디자인이란 무엇일까요? 내 상품을 판매하기 위해 고객을 설득하는 글을 시각적으로 풀어내는 것입니다. 빽빽한 텍스트 배치는 독자의 피로도를 높여 이탈을 유발하기 때문에 철저하게 분리해서 디자인해야 합니다.
01-1. 문단 공백 분리하기
문단 사이에는 최소 50~100px 이상의 넉넉한 공백을 두어 시각적으로 숨통이 트이게 해주어야 합니다. 이건 경우에 따라 다르지만 대체로 양쪽 정렬을 사용하는 것이 가독성적인 측면에서 유리합니다.
01-2. 텍스트 연속 배치 제한하기
텍스트의 연속 배치는 300자~800자 이내로 제한해야 합니다. 한계를 넘기게 되면 읽기 전부터 부담으로 다가올 수 있기 때문입니다. 글이 길어진다면, 한계를 넘기기 전에 이미지나 소제목 등을 배치해 시각적으로 전환을 주는 것이 좋습니다. 또한 동일 그룹요소는 가깝게, 다른 그룹은 멀리 배치하는 여백을 활용하는 것이 중요합니다.
02. 상품의 집중도를 높이는 색상과 폰트
다채로운 색의 조합은 오히려 상품에 대한 집중을 방해하게 됩니다. 색상과 폰트는 제품의 가치를 결정하게 되는 요소이기 때문에 신중하게 선택해야 합니다.
02-1. 색상 최소화하기
무채색 배경을 기본으로 사용하되, 강조할 부분에 한두 가지 색을 사용하는 것을 추천드립니다. 색상이 너무 다양할 경우 자칫하면 제품 자체가 저품질로 보일 수 있습니다. 제품에 사용된 색상을 추출해 비슷한 계열의 색을 메인으로 사용하는 것이 많이 사용하는 방법입니다.
02-2. 폰트의 강약 조절하기
온라인 쇼핑에서 대부분의 접속이 모바일로 일어난다는 사실 알고 계셨나요? 때문에 상세페이지에서 폰트는 모바일 환경에 중점을 두어 사용해야 합니다. PC보다 화면이 작은 모바일 특성상 폰트를 선택할 때 중요한 것은 가독성과 크기입니다.
또한 모든 텍스트를 굵게 하기보다는, 핵심 문구에만 시각적으로 변화를 주어 차이점을 두어야 합니다.
03. 텍스트를 깨우는 시각자료 활용
소비자는 내 상품을 실제로 만져보고 구매할 수 가없습니다. 때문에 감각을 시각적으로 재현하는 동적 요소가 있다면 훨씬 설득되기 쉽습니다.
03-1. GIF 배치
상세페이지에 동영상을 첨부하여 게시할 경우 재생률이 매우 낮습니다. 소비자들은 재생 버튼을 누르는 것조차 귀찮아하기 때문입니다. 하지만 GIF는 강제적으로 움직이는 영상을 보게 만들 수 있습니다. 정지된 이미지에 지친 소비자들의 시각반응을 유도하기에 매우 효과적입니다. 하지만 용량조절을 잘하지 못하면, 로딩 시간에 영향을 미칠 수 있습니다. 너무 큰 용량의 고화질 GIF를 첨부하지 말도록 주의합니다.
03-2. 도표 및 실사진 활용
텍스트로 길게 풀어낸 복잡한 정보보다는 직관적인 도표나 실제 촬영 사진을 첨부하는 것이 정보 전달력이 상승합니다. 본문 내에서 이미지나 도표를 먼저 배치하고 뒤이어 설명을 붙이는 방식을 사용하여, 설명을 매끄럽고 직관적으로 만듭니다.
04. 무의식적인 시선을 유도하는 텍스트
대부분의 독자는 본문을 정독하지 않고 빠르게 스캔합니다. 열심히 읽어도 기억에 남지 않는 글이 있는 반면, 대충 스캔만 했는데도 내용이 어느 정도 파악되는 글이 있습니다. 무슨 차이일까요?
04-1. 시각적인 단서를 제공하기
중요 문구아래에 밑줄 긋기, 크고 굵기 하기, 대비되는 색상 적용하기 등의 다양한 방법으로 시선을 유도해 줍니다. 독자의 시선은 강조된 요소들을 목적지 삼아 따라가기 때문에 지루함 없이 빠르게 읽어 내려갈 수 있습니다.