상세페이지, 글자만 키우면 가독성이 좋아질까요?

상세페이지, 모바일에서는 왜 안 읽힐까요?

온라인 셀러 대부분은 PC 모니터로 상세페이지를 만들고 확인합니다. 넓은 화면에서는 글자도, 사진도, 여백도 넉넉해 보입니다.

하지만 실제 구매자의 80~90%는 휴대폰으로 상세페이지를 봅니다. PC에서 맞춘 기준을 그대로 축소하면 글자는 작아지고, 줄은 길어지고, 이미지는 화면 폭을 벗어나 좌우가 잘리거나 강제로 눌려 보입니다.

• 본문 글자 크기 — 화면이 작을수록 커야 하는 기준
• 줄 길이와 행간 — 한 줄에 담을 글자 수
• 이미지 폭 — 상세설명 영역에 맞는 가로 크기

이 세 가지를 모바일 기준으로 다시 잡으면 같은 내용도 훨씬 편하게 읽힙니다. 하나씩 살펴보겠습니다.

본문 글자 크기 — 화면이 작을수록 커야 하는 이유

모바일 운영체제가 기본으로 쓰는 본문 글자 크기는 iOS가 17pt, Android가 16px입니다. 두 기준 모두 작은 화면에서 눈의 피로 없이 읽을 수 있도록 정해진 값입니다.

모바일 타이포그래피 연구에 따르면 본문 글자 크기는 16~19px 범위에서 가독성이 가장 안정적이고, 20px를 넘어서면 오히려 읽기 불편해진다는 결과도 있습니다.

• 본문: 16~19px
• 소제목: 본문보다 1.3~1.5배
• 강조·헤드라인: 필요할 때만 더 크게

글자를 크게 키우기보다 본문·소제목·헤드라인의 크기 차이를 분명하게 두는 편이 정보를 구분하기 쉽습니다.

줄 길이와 행간 — 한 줄에 담을 글자 수 기준

글자 크기를 맞췄다고 끝이 아닙니다. 한 줄에 너무 많은 글자가 들어가면 다음 줄을 찾는 데 시간이 걸리고, 너무 적게 들어가면 시선이 자주 끊깁니다.

모바일 화면에서는 한 줄에 30~50자 정도가 적당하고, 행간(줄 간격)은 본문 글자 크기의 150~160% 수준을 권장합니다.

• 한 줄 글자 수: 30~50자
• 행간: 150~160%(한글 기준)
• 문단 간격: 본문 글자 크기의 75% 정도

문장이 화면 끝에서 어색하게 잘린다면 줄바꿈 위치를 조정하거나 문장 자체를 짧게 나누는 편이 낫습니다.

특히 상품명이나 규격처럼 숫자와 단위가 섞인 문장은 줄바꿈 위치에 따라 읽는 속도가 크게 달라지므로, 숫자와 단위는 가능한 한 같은 줄에 붙여 씁니다.

이미지 폭 860px — 스마트스토어 상세설명 기준

스마트스토어 고객센터는 상세설명 영역의 권장 이미지 가로 크기를 860px로 안내합니다. 대표이미지(1000×1000px)와는 별도 기준이라 헷갈리기 쉽습니다.

상세설명용 이미지를 860px보다 훨씬 크게 올리면 모바일 화면에서 강제로 축소되면서 글자나 아이콘이 뭉개져 보일 수 있습니다.

• 대표이미지: 1000×1000px (정사각형)
• 상세설명 이미지: 가로 860px 권장
• 세로 길이 4000px 초과 시 '펼쳐보기'로 잘려서 노출

상세설명 이미지는 대표이미지와 다른 규격이라는 점을 먼저 구분해두어야 나중에 다시 만드는 일이 줄어듭니다.

여백과 문단 간격 — 텍스트와 이미지 사이 숨 쉴 공간

글자 크기와 이미지 폭을 맞춰도 여백이 부족하면 화면이 빽빽해 보입니다. 여백은 읽는 속도와 무관해 보이지만 실제로는 시선이 다음 내용을 찾는 속도에 영향을 줍니다.

모바일 화면에서는 좌우 여백을 16~24px 정도 확보하고, 문단과 문단 사이 간격은 본문 글자 크기의 75% 안팎으로 두는 편이 안정적입니다.

• 좌우 여백: 16~24px
• 문단 간격: 본문 글자 크기의 약 75%
• 이미지와 다음 텍스트 사이: 최소 한 줄 간격 이상

이미지 바로 아래에 다음 문단이 붙어 있으면 어디서 새 내용이 시작되는지 구분하기 어려우므로, 이미지와 다음 텍스트 사이에는 최소한 한 줄 이상의 간격을 남겨둡니다.

모바일 가독성 기준 한눈에 보기

지금까지 살펴본 기준을 정리하면 다음과 같습니다.

상세페이지 발행 전 10초 체크리스트

발행 전에 휴대폰 화면에서 아래 다섯 가지를 확인합니다.

• 본문 글자 크기가 16px보다 작지 않나요?
• 한 줄이 50자를 넘어가지 않나요?
• 상세설명 이미지 가로 폭이 860px 기준에 맞나요?
• 좌우 여백 없이 이미지가 화면에 꽉 차 있지 않나요?
• 문단 사이 간격 없이 글이 이어 붙어 있지 않나요?

글자 크기부터 이미지 폭까지 — 상세페이지 한 번에 맞추기

다섯 가지 기준을 상품마다 새로 맞추려면 매번 같은 수치를 다시 확인해야 합니다.

상품 URL과 사진을 등록해두면 헤드라인, 설명, 구매 유도 카피가 블록 단위로 만들어지고, 모바일 화면 기준에 맞춘 형태로 구성됩니다.

원산지 정보나 교환·반품 정책처럼 상품마다 달라지는 내용만 채워 넣으면, 글자 크기와 이미지 폭 기준은 매번 다시 맞추지 않아도 됩니다.