모바일 상세페이지 글자 크기·가독성 — 작은 화면에서 읽히게 만드는 법

만드는 사람은 PC, 사는 사람은 휴대폰

이 포털 방문자의 약 87%는 데스크톱에서 글을 읽습니다(1분상세 포털 방문 집계 기준). 상세페이지를 만드는 판매자 대부분이 큰 모니터 앞에 앉아 있다는 뜻입니다. 그런데 그 상세페이지를 보는 고객은 대부분 휴대폰입니다. 쿠팡·스마트스토어 모두 모바일 트래픽이 중심이고, 이 간극이 모바일 가독성 문제의 출발점입니다.

모니터에서 또렷하던 글자가 휴대폰에서 깨알이 되는 건 디자인 실수가 아니라 축소 원리를 계산에 넣지 않았기 때문입니다. 원리를 알면 만들 때부터 피할 수 있습니다.

상세 이미지가 모바일에서 축소되는 원리

상세 이미지는 휴대폰 화면 폭에 맞춰 통째로 줄어듭니다. 요즘 휴대폰의 화면 논리 폭은 대략 360430px이고, 상세 이미지는 848860px(스마트스토어·G마켓)이나 780px(쿠팡)로 만드니 절반 가까이 축소됩니다.

이 비율은 이미지 안 글자에도 그대로 적용됩니다. 860px 이미지를 360px 화면에서 볼 때, 글자가 실제로 몇 px로 보이는지 계산하면 다음과 같습니다.

모바일 웹 본문 글자가 통용 16px, 하한선이 12~13px이라는 점과 비교하면 감이 옵니다. 이미지 안 24px 글자는 휴대폰에서 10px짜리 각주가 됩니다. PC 모니터에서는 860px 이미지가 거의 원본 크기로 보이니 24px이 충분히 커 보이지만, 그 크기로 올리면 고객은 확대해서 읽거나 그냥 넘깁니다.

이미지 안 글자, 몇 px이 안전한가

플랫폼이 정한 공식 규정은 없습니다. 아래는 위 계산에서 역산한 통용 권장값이며, "축소 후 13px 이상"을 목표로 잡은 것입니다.

본문은 860px 기준 32px, 780px 기준 30px을 하한으로 두면 360px 폭 휴대폰에서도 13px 안팎을 지킵니다. 크기보다 더 자주 놓치는 것이 글자 굵기입니다. Light·Thin 굵기는 축소되면 획이 1px 이하로 얇아져 사라지듯 보이므로, 이미지 안 본문은 Regular 이상, 사진 위에 올리는 글자는 Medium 이상이 안전합니다.

줄 길이·행간·대비

글자 크기를 맞췄다면 다음 세 가지가 가독성을 결정합니다.

1. 줄 길이 — 860px 이미지에 좌우 여백 6080px을 두고 32px 글자를 넣으면 ==한 줄에 한글 약 2225자==가 들어갑니다. 이 정도가 시선이 줄을 바꿔도 위치를 잃지 않는 범위입니다. 여백 없이 꽉 채워 한 줄 35자를 넘기면 축소 후 줄 찾기가 어려워집니다.
2. 행간 — 본문은 ==글자 크기의 1.51.7배==(32px 글자면 4854px)로 잡습니다. 1.2배 이하로 붙이면 축소 후 줄이 한 덩어리로 보입니다.
3. 대비 — 흰 배경에 연회색 글자, 사진 위에 바로 올린 흰 글자가 가장 흔한 실패입니다. 웹 접근성에서 통용되는 본문 명도 대비 4.5대1 이상을 기준으로 잡고, 사진 위에는 반투명 바를 깔거나 어두운 그라데이션을 넣은 뒤 글자를 올리세요. 대비 원칙은 클릭을 부르는 썸네일·카피 작성법의 시각 대비 부분과 같습니다.

한 섹션에 담을 정보량

축소 후 글자가 읽혀도 정보가 너무 많으면 읽지 않습니다. 기준은 휴대폰 한 화면에 메시지 하나입니다. 360px 화면 한 스크롤은 세로 약 640800px이고, 이를 860px 이미지로 환산하면 ==세로 1,5001,900px 정도가 한 화면==입니다. 이 안에 들어갈 분량은 다음 정도가 무난합니다.

• 헤드라인 1줄 + 본문 2~3줄 + 이미지 1개
• 또는 소제목 1개 + 불릿 3개 이내
• 스펙·성분·구성품처럼 항목이 많은 정보는 문장이 아니라 표로

한 장에 스펙 20줄을 넣으면 축소 후 아무도 읽지 않습니다. 구성 흐름 전체를 어떻게 나눌지는 상세페이지 만들기 — 구성 순서와 스토리 설계에 정리돼 있습니다.

표는 이미지 대신 텍스트로 넣을 수 있는 곳이 있다

스펙 표를 이미지로 만들면 축소 문제를 그대로 안고 갑니다. 스마트스토어처럼 상세설명 에디터가 텍스트·표 블록을 제공하는 플랫폼에서는 표를 이미지 대신 텍스트로 넣을 수 있고, 그러면 글자가 화면 폭에 맞춰 다시 배치되어 축소 문제가 사라집니다. 검색 엔진과 AI 검색이 내용을 읽을 수 있다는 부수 효과도 있습니다.

다만 에디터의 지원 범위는 플랫폼마다 다르고 바뀌므로 업로드 전 판매자센터에서 확인하세요. 스마트스토어 에디터와 규격은 스마트스토어 상세페이지 사이즈·규격과 구성 가이드를 참고하면 됩니다.

흔한 실수

업로드 전 3분 점검

1. 완성 이미지를 휴대폰으로 직접 열어 본문이 확대 없이 읽히는지 본다.
2. PC밖에 없다면 이미지 뷰어 배율을 42%(860px 기준) 또는 46%(780px 기준)로 맞추거나 브라우저 폭을 360px로 줄인다.
3. 이 상태에서 헤드라인 → 본문 → 가격·구성 순서로 3초 안에 눈에 들어오는지 확인한다.

이 세 단계만 거쳐도 "PC에서만 예쁜 상세페이지"는 대부분 걸러집니다.