상세페이지 디자인, 잘 만든 페이지들은 색을 하나만 썼습니다

13쪽을 나란히 놓고 본 것

10월 초, 저희가 상세페이지 품질의 기준으로 삼는 페이지 18쪽 가운데 13쪽을 한 쪽씩 다시 읽었습니다. 식품, 뷰티, 생활용품, 가전이 섞여 있고, 실제 판매 페이지에서 고른 것들입니다. 업종도 디자이너도 다른데 13쪽 모두, 또는 거의 모두에서 겹치는 문법이 있었습니다.

길이도 비슷했습니다. 18쪽 전체를 가로 860px로 맞춰 재 보면 세로가 2만 2천~5만 4천 px, 가운데가 3만 px쯤입니다. 길이보다 눈에 띈 건 정보의 개수였습니다. 예를 들어 수건 상세페이지 한 쪽에는 비교표, 시험 성적서, 크기 도해, 색상별 격자, 세탁 가이드처럼 짧은 정보 단위가 30개 넘게 들어 있었습니다. 길다고 어수선하지 않은 이유가 위 표의 규칙에 있습니다.

색: 하나를 정하면 나머지가 쉬워집니다

색을 여러 개 쓰면 구간마다 "여기가 중요하다"고 외치는 셈이라, 결국 아무것도 눈에 띄지 않습니다. 브랜드 색 하나를 정하고 강조할 곳에만 쓰면, 그 색이 나온 자리가 곧 읽을 자리가 됩니다.

정할 때는 상품 사진에서 가져오는 게 가장 빠릅니다. 포장의 대표색, 내용물의 색, 로고 색 중 하나입니다. 바탕은 흰색이나 아주 옅은 회색으로 두고, 제목은 진한 회색이나 검정으로 씁니다.

제목: 가는 줄 하나, 굵은 줄 하나

13쪽 대부분의 구간 제목은 두 줄이었습니다. 위 줄은 가늘고 작게 상황을 깔고, 아래 줄은 굵고 크게 결론을 말합니다. 예를 들면 위에 "매번 배달은 부담스럽고"를, 아래에 "냉동실에 하나 두면 저녁이 해결"을 두는 식입니다. 굵기 차이만으로 시선 순서가 생기니, 색이나 장식을 더할 필요가 줄어듭니다.

글자 크기: 표지는 생각보다 크게

9월에 같은 상품으로 만든 판 여러 개를 나란히 놓고 구간별로 골랐습니다. 표지 제목이 84px인 판과 58px인 판을 나란히 놓고 고르면, 뽑힌 쪽은 84px 판이었습니다. 작은 설명 글자는 21px인 판이 13~16px인 판보다 확실히 나았습니다.

가로 860px 페이지는 휴대폰에서 절반 가까이 줄어듭니다. 20px로 쓴 글자가 폰에서는 9px 안팎이 되는 셈이라, 가장 작은 글자를 20px 아래로 내리면 읽히지 않습니다.

AI 티가 나는 것 세 가지

같은 비교에서 "만든 티"가 난다고 지적받은 것은 늘 비슷했습니다.

• 설명 카드마다 붙은 굵은 원색 왼쪽 테두리
• 상품과 상관없는 삼각형·물결 같은 기하 장식
• 구간마다 바뀌는 강조색

셋 다 "뭔가 디자인한 것처럼" 보이려고 넣은 요소입니다. 빼고 나면 사진과 제목이 앞으로 나옵니다.

올리기 전에 확인할 다섯 가지

1. 강조색이 하나인가. 둘째 색이 있다면 정말 필요한가.
2. 구간 제목이 가는 줄과 굵은 줄로 나뉘어 있는가.
3. 표지 제목이 화면 폭에 비해 충분히 큰가(860px 기준 80px 안팎).
4. 가장 작은 글자가 20px 이상인가.
5. 장식 도형이 뜻을 가지고 있는가(가리키거나, 묶거나, 강조하거나).

폰에서 실제로 얼마나 줄어드는지 계산은 모바일 상세페이지 가독성 가이드에, 구간 순서는 상세페이지 만들기 — 구성 순서와 스토리 설계에 정리했습니다.