상세페이지 디자인 기본, 여백·글자 크기·색 3가지만 지키세요

상세페이지 디자인을 처음 하면 무엇부터 손대야 할지 막막합니다. 폰트를 바꿔 보고 색을 넣어 봐도 어딘가 어수선해 보입니다.

결론부터 말씀드리면, 디자인을 몰라도 세 가지만 지키면 상세페이지는 충분히 정돈돼 보입니다. 여백은 넉넉하고 일정하게, 글자 크기는 휴대폰 기준으로 3단계만, 색은 세 가지 역할로만 나눠 쓰는 것입니다.

이 글에서는 세 기준을 수제 캔들, 반찬, 양말 같은 상품 예시로 하나씩 보여 드립니다. 다 읽고 나면 지금 올려 둔 상세페이지를 열어 바로 고칠 수 있습니다.

상세페이지 디자인, 왜 이 3가지부터 보면 되나요

손님은 대부분 휴대폰으로 상세페이지를 봅니다. 엄지로 빠르게 넘기면서, 읽을 만한 곳에서만 잠깐 멈춥니다.

이때 손님이 먼저 느끼는 것은 "예쁘다"보다 "읽기 편하다" 혹은 "복잡하다"입니다. 복잡해 보이면 내용을 읽기도 전에 넘겨 버립니다.

복잡해 보이는 이유를 따져 보면 대개 셋 중 하나입니다. 글과 사진이 붙어 있거나(여백), 글자 크기가 제각각이거나(글자 크기), 색이 너무 많아 어디를 봐야 할지 모르는 경우(색)입니다.

반대로 이 셋만 정리해도 특별한 그래픽 없이 깔끔해 보입니다. 화려한 효과는 나중 문제입니다.

01여백

정보를 묶고 나눠서 덩어리로 읽히게 합니다

02글자 크기

무엇이 중요한지 순서를 정해 줍니다

03색

분위기를 만들고 시선이 멈출 곳을 정합니다

세 가지가 각자 다른 일을 하므로 하나씩 점검하면 됩니다

어떤 섹션을 어떤 순서로 넣을지가 아직 정해지지 않았다면 상세페이지 구성 순서 글을 먼저 보시는 것도 좋습니다. 이 글은 그 구성을 보기 좋게 다듬는 단계입니다.

상세페이지 여백은 얼마나 두어야 하나요

여백(아무것도 없는 빈 공간)은 낭비처럼 느껴집니다. 그래서 초보 셀러일수록 화면을 꽉 채우려 합니다.

하지만 여백은 정보를 정리하는 도구입니다. 가까이 붙은 것은 한 묶음으로, 멀리 떨어진 것은 다른 이야기로 읽힙니다. 여백만 잘 써도 손님이 "여기서부터 다른 내용이구나" 하고 알아챕니다.

좌우 여백은 처음부터 끝까지 같게

가장 먼저 할 일은 좌우 여백을 하나로 정하는 것입니다. 어떤 섹션은 글자가 끝에 붙고 어떤 섹션은 안쪽으로 들어가 있으면, 내용과 상관없이 정돈되지 않아 보입니다.

가로 폭의 5~8% 정도를 좌우 여백으로 정하고, 모든 섹션의 글자와 아이콘을 그 안쪽에 맞춰 보세요. 꽉 차게 쓰는 상품 사진만 예외로 둡니다.

섹션 사이는 섹션 안보다 넓게

여백에는 순서가 있습니다. 섹션과 섹션 사이가 가장 넓고, 섹션 안에서 제목과 본문 사이는 그보다 좁고, 줄과 줄 사이가 가장 좁아야 합니다.

여백의 크기가 곧 관계의 거리입니다. 이 순서가 뒤집히면 손님은 어떤 문장이 어떤 사진의 설명인지 헷갈립니다.

한 화면에는 메시지 하나

휴대폰 한 화면에 보이는 영역 안에는 하나의 이야기만 담는다고 생각하세요. 반찬을 판다면 "국내산 재료" 이야기와 "당일 조리" 이야기는 한 화면에 몰아넣지 말고 나눠서 보여 주는 편이 읽기 쉽습니다.

고치기 전

사진 바로 아래 글 5줄이 붙어 있고, 다음 섹션 제목이 한 줄 띄우고 바로 시작됨

→

고친 후

사진과 제목 사이를 띄우고, 글은 2줄로 줄임. 다음 섹션 전에는 그보다 두세 배 넓은 빈 공간

내용은 거의 그대로인데 '어디까지가 한 이야기인지'가 보이게 됩니다

이렇게 하세요

• 좌우 여백을 한 값으로 정해 끝까지 지키기
• 섹션 사이 > 제목-본문 사이 > 줄 사이 순서 지키기
• 한 화면에 메시지 하나만 두기

이건 피하세요

• 빈 곳이 아까워 글이나 아이콘으로 채우기
• 섹션마다 여백을 눈대중으로 다르게 두기
• 사진 가장자리에 글자를 바짝 붙이기

모바일 상세페이지 글자 크기, 몇 px이 적당한가요

상세페이지 글자가 작아지는 이유는 간단합니다. 컴퓨터 모니터에서 크게 놓고 만들기 때문입니다.

휴대폰에서는 전체가 줄어든다는 걸 기억하세요

상세페이지는 대부분 한 장의 긴 이미지로 올라갑니다. 넓게 만든 이미지가 휴대폰의 좁은 화면에 맞춰지면 글자도 같은 비율로 작아집니다.

예를 들어 가로 860px로 만든 이미지를 폭이 그 절반쯤 되는 휴대폰 화면에서 보면, 글자도 절반 가까이 줄어듭니다. 모니터에서 "적당하다" 싶은 크기는 휴대폰에서 대개 작습니다.

그래서 글자 크기는 모니터가 아니라 휴대폰 화면에서 보고 정하세요. 만든 이미지를 휴대폰으로 보내 직접 확인하는 것이 가장 정확합니다.

크기는 3단계만 쓰세요

헤드라인(가장 큰 문장), 소제목, 본문. 이 세 단계면 대부분의 상세페이지를 만들 수 있습니다. 여기에 원산지나 주의 문구처럼 작은 글씨가 필요하면 주석 한 단계를 더하는 정도입니다.

단계가 많아지면 손님은 무엇이 더 중요한지 구분하지 못합니다. 크기 차이도 애매하게 두지 말고 확실하게 벌리세요. 본문과 소제목이 비슷한 크기면 소제목이 제 역할을 못 합니다.

역할	크기 예시	굵기	쓰는 곳
헤드라인	64~80px	굵게	섹션마다 한 문장
소제목	40~48px	굵게 또는 중간	항목 이름, 짧은 설명 제목
본문	28~32px	보통	설명 문장
주석	22~24px	보통	원산지, 주의사항

출발점일 뿐입니다. 폰트마다 크기가 달라 보이니 휴대폰에서 직접 확인하세요

줄 간격과 한 줄 길이도 함께 보세요

글자 크기를 키웠는데도 읽기 힘들다면 줄 간격(줄과 줄 사이 거리)이 좁은 경우가 많습니다. 본문은 글자 크기의 1.5~1.7배 정도 줄 간격을 주면 숨이 트입니다.

한 줄이 너무 길어도 눈이 다음 줄을 놓칩니다. 양말의 소재 설명을 쓴다면 한 줄을 한 호흡에 읽히는 길이로 끊고, 세 줄을 넘으면 문장을 줄일 방법을 먼저 찾아보세요.

폰트는 한두 종류면 충분합니다. 헤드라인용 하나, 본문용 하나로 정하거나, 한 폰트의 굵기만 바꿔 써도 됩니다.

상세페이지 색은 몇 가지까지 써도 되나요

색은 개수로 생각하면 늘 부족하게 느껴집니다. 대신 역할로 나누면 세 가지면 충분합니다.

색은 기본색·주색·강조색으로 나누세요

기본색은 배경과 본문 글자색입니다. 흰색이나 아주 밝은 색 배경에 진한 회색이나 검정 글자가 가장 무난합니다.

주색은 상품이나 브랜드의 분위기를 만드는 색입니다. 소제목, 구분선, 아이콘에 씁니다. 강조색은 가격, 혜택, 꼭 봐야 할 한 문장에만 씁니다.

예시로 면적을 나눠 보면 아래와 같습니다. 정확한 비율보다 "기본색이 대부분이고 강조색은 아주 조금"이라는 감각을 기억하시면 됩니다.

70%

• 기본색 (배경·본문)70%
• 주색 (소제목·아이콘)20%
• 강조색 (가격·핵심)10%

이해를 돕기 위한 가정 비율입니다

이해를 돕기 위한 예시 수치예요(실제 통계 아님).

주색은 상품 사진에서 고르세요

주색을 어디서 정할지 모르겠다면 상품 사진을 보세요. 수제 캔들이라면 왁스의 크림색이나 라벨 색, 텀블러라면 제품 본체 색에서 한 가지를 고르면 됩니다.

사진과 같은 계열의 색을 쓰면 상세페이지 전체가 한 상품 이야기처럼 이어져 보입니다. 사진과 상관없는 유행 색을 넣으면 사진만 따로 노는 느낌이 듭니다.

강조색은 아껴야 강조가 됩니다

모든 것을 빨갛게 칠하면 아무것도 강조되지 않습니다. 강조색은 한 화면에 한두 곳이라고 정해 두세요.

글자와 배경의 대비도 확인하세요. 연한 베이지 배경에 연한 회색 글자는 분위기는 있어도 휴대폰에서 잘 안 읽힙니다. 사진 위에 글자를 올릴 때는 글자 뒤에 반투명한 어두운 띠를 깔면 읽기 쉬워집니다.

고치기 전

노란 배경에 소제목은 빨강·초록·파랑이 섞이고, 가격과 원재료 문구도 모두 빨간색

→

고친 후

흰 배경과 진회색 본문, 소제목은 간식 색에서 뽑은 갈색 하나, 빨강은 가격에만

색 수를 줄였더니 손님 눈이 가격에서 자연스럽게 멈춥니다

세 기준을 한 섹션에 적용하면 이렇게 달라집니다

이제 세 기준을 한 섹션에 차례로 적용해 보겠습니다. 텀블러의 "보온·보냉" 섹션을 고친다고 가정해 보세요.

순서가 중요합니다. 색부터 만지면 끝이 없습니다. 여백과 글자 크기로 뼈대를 잡고, 색은 마지막에 얹으세요.

1. 1
   내용 줄이기

   헤드라인 1문장, 본문 2~3줄로 줄이기

2. 2
   여백 맞추기

   좌우 여백 통일, 위아래 섹션과 넉넉히 띄우기

3. 3
   크기 정하기

   헤드라인·소제목·본문 3단계로만 나누기

4. 4
   색 얹기

   주색은 소제목에, 강조색은 '12시간 보온' 한 곳에

5. 5
   휴대폰 확인

   폰으로 보내 실제 크기에서 읽어 보기

이 순서를 섹션마다 반복하면 페이지 전체가 같은 규칙으로 맞춰집니다

첫 화면이라면 같은 순서를 쓰되, 헤드라인과 대표 이미지에 더 큰 비중을 둡니다. 첫 화면에 무엇을 담을지는 상세페이지 첫 화면 글에서 따로 다뤘습니다.

다만 이 작업을 빈 화면에서 섹션마다 하나씩 하려면 손이 꽤 많이 갑니다. 간격과 글자 크기를 매번 재다 보면 정작 상품 이야기를 다듬을 시간이 줄어듭니다. 상세공방에서는 템플릿에서 시작해 이 기준대로 고쳐 나가는 방식으로 그 수고를 덜 수 있습니다.

상세페이지 디자인, 다 만든 뒤 어떻게 점검하나요

만든 사람 눈에는 늘 괜찮아 보입니다. 그래서 점검은 손님의 환경에 최대한 가깝게 해야 합니다.

휴대폰으로, 빠르게 넘기며 보세요

완성한 이미지를 휴대폰으로 보내 손님처럼 엄지로 빠르게 넘겨 보세요. 멈칫하는 곳, 글자를 확대하고 싶은 곳이 고칠 곳입니다.

색을 빼고 보세요

화면을 흑백으로 바꾸거나 흑백 캡처를 해 보세요. 색이 없어도 헤드라인·소제목·본문이 구분된다면 글자 크기 단계가 잘 잡힌 것입니다. 색이 없으면 구분이 안 된다면 크기 차이를 더 벌리세요.

실눈을 뜨고 보세요

눈을 가늘게 뜨면 글자는 흐려지고 덩어리만 보입니다. 이때 섹션들이 뚜렷하게 나뉘어 보이면 여백이 제 역할을 하고 있는 것입니다. 한 덩어리로 뭉쳐 보이면 섹션 사이 여백부터 늘리세요.

모니터에서 크게 보기

• 글자가 충분히 커 보임
• 여백이 넓어 보여 줄이고 싶어짐
• 강조색이 덜 튀어 보임

VS

휴대폰에서 넘기며 보기

• 본문이 작아 확대하고 싶어짐
• 여백이 있어야 섹션이 구분됨
• 색이 많으면 어지러움

최종 판단은 항상 오른쪽 기준으로 하세요

정리

상세페이지 디자인은 감각보다 규칙에 가깝습니다. 여백, 글자 크기, 색이라는 세 가지 규칙을 정하고 끝까지 지키는 것만으로도 페이지가 훨씬 정돈돼 보입니다.

여백은 좌우를 같게, 섹션 사이를 가장 넓게 두세요. 글자는 휴대폰에서 줄어든다는 걸 전제로 크게 잡고, 3단계로만 나누세요. 색은 기본색·주색·강조색 역할로 나누고, 강조색은 꼭 봐야 할 곳에만 쓰세요.

한 번에 전부 고치지 않아도 됩니다. 가장 많이 보이는 첫 화면과 가격 근처 섹션부터 세 기준을 적용해 보세요.

더 많은 상세페이지 이야기는 칼럼 목록에서 이어서 보실 수 있습니다.

• 지금 상세페이지를 휴대폰으로 열어 빠르게 넘겨 보기
• 좌우 여백이 섹션마다 같은지 확인하고 하나로 맞추기
• 섹션 사이 여백이 섹션 안 여백보다 넓은지 보기
• 글자 크기를 헤드라인·소제목·본문 3단계로 정리하기
• 사진 위 작은 글씨를 본문으로 빼거나 키우기
• 쓰인 색을 기본색·주색·강조색으로 나누고 나머지 지우기
• 강조색이 가격이나 핵심 문장에만 있는지 확인하기