상세페이지는 모바일에서 먼저 읽힙니다 — 폭·글자 크기·이미지 분할 기준

상세페이지 시안을 PC 모니터로 받아보면 대개 문제가 없어 보입니다. 글자도 충분히 크고, 설명도 시원시원하게 들어가 있습니다. 그런데 업로드 후 휴대폰으로 열어보면 이야기가 달라집니다. 본문이 잿빛 선처럼 뭉개져 보이고, 성분표는 손가락으로 확대해야 읽히고, 스크롤을 한참 내려도 제품이 무엇인지 파악되지 않습니다.

이건 디자인 감각의 문제가 아니라 계산의 문제입니다. 상세페이지는 만들 때의 폭과 보일 때의 폭이 다르고, 그 차이만큼 모든 요소가 일괄 축소됩니다. 축소율을 모르는 채로 만들면 '모니터에서 예쁜 페이지'와 '휴대폰에서 읽히는 페이지'가 따로 놉니다.

읽히지 않는 상세페이지는 설명이 아니라 벽입니다

상세페이지는 브랜드의 마지막 설명 창구입니다. 광고를 보고 들어온 사람, 검색으로 찾아온 사람 모두 이 화면에서 살지 말지를 결정합니다. 그런데 그 결정의 대부분이 휴대폰에서 이루어집니다. 사무실 모니터 앞에서 상품을 고르는 사람보다, 이동 중이나 잠들기 전에 한 손으로 스크롤하는 사람이 훨씬 많습니다.

글자가 작으면 구매자는 확대하지 않습니다. 그냥 넘깁니다. 설명이 아무리 정성스러워도 읽히지 않으면 없는 것과 같고, 읽히지 않는 정보는 문의로 돌아옵니다. '이거 몇 그램이에요?', '유통기한 얼마나 돼요?' 같은 문의가 반복된다면 상세페이지에 그 정보가 없어서가 아니라, 있는데 안 보여서일 가능성이 큽니다.

반대로 모바일 기준이 잡힌 페이지는 수정 요청이 줄어듭니다. 이미지 한 장을 고치기 위해 원본 파일을 다시 열고, 텍스트를 다시 굽고, 다시 업로드하는 작업이 덜 생깁니다. 기준을 먼저 정하는 일이 결국 제작비와 운영 시간을 아낍니다.

제작 폭과 표시 폭의 차이 — 축소율부터 구합니다

상세페이지 이미지는 보통 가로 860px 또는 1000px 안팎으로 제작합니다. 판매 채널마다 권장 폭이 다르므로 실제 입점한 플랫폼의 가이드 문서를 먼저 확인하는 것이 순서입니다. 다만 어떤 폭을 쓰든, 그 이미지는 사용자의 화면 폭에 맞춰 축소되어 표시됩니다.

요즘 스마트폰의 논리적 화면 폭은 대략 360~430px 범위에 분포합니다. 좌우 여백을 감안하면 이미지가 실제로 차지하는 폭은 그보다 조금 좁습니다. 계산은 간단합니다. 표시 폭 ÷ 제작 폭 = 축소율입니다.

제작 폭 860px, 표시 폭 390px이면 축소율은 약 0.45입니다. 제작 폭 1000px, 표시 폭 390px이면 약 0.39입니다. 이 숫자 하나가 글자 크기, 선 두께, 아이콘 크기, 여백까지 전부 결정합니다. 화면이 더 좁은 기기까지 감안하려면 360px을 기준으로 잡는 편이 안전합니다.

축소율을 구했다면 반대로 계산합니다. 모바일에서 확보하고 싶은 실효 글자 크기를 축소율로 나누면 제작 파일에서 써야 할 크기가 나옵니다. 본문 실효 크기를 14~16px로 잡을 때, 제작 폭 860px에서는 약 31~36px, 1000px에서는 약 36~41px이 필요합니다. PC 화면만 보고 '24px이면 충분하지'라고 판단하면 실제로는 10px 근처로 떨어집니다.

한 장에 얼마나 담을 것인가 — 분할과 위계의 기준

첫째, 이미지 한 장의 세로 길이입니다. 세로로 지나치게 긴 한 장짜리 이미지는 로딩이 끝날 때까지 화면이 비어 보이고, 일부만 수정하려 해도 전체를 다시 내보내야 합니다. 작업 단위와 표시 단위를 맞추는 편이 낫습니다. 한 장이 하나의 메시지를 담도록 끊으면 세로 길이는 자연스럽게 정리됩니다. 목적 없이 5,000px씩 이어붙이는 것보다, 의미 단위로 나누는 쪽이 수정과 교체에 훨씬 유리합니다.

둘째, 한 장에 담는 정보량입니다. 모바일에서는 한 화면에 이미지의 일부만 보입니다. 화면 하나가 하나의 문장을 전달한다고 생각하면 편합니다. 제품 사진, 헤드 카피, 보조 설명 한두 줄이면 충분하고, 표·비교·스펙처럼 정보 밀도가 높은 요소는 별도 장으로 분리합니다. 한 장에 정보를 몰아넣을수록 글자를 줄이게 되고, 글자를 줄이면 앞서 계산한 최소 크기를 지킬 수 없습니다.

셋째, 글자 위계입니다. 크기를 세 단계 정도로 고정합니다. 헤드 카피, 소제목, 본문. 같은 페이지 안에서 단계가 다섯 개 여섯 개로 늘어나면 위계가 아니라 잡음이 됩니다. 본문은 최소 기준 아래로 절대 내려가지 않게 하고, 주석이나 단위 표기처럼 작게 쓸 수밖에 없는 요소는 '읽지 않아도 구매 판단에 지장 없는 정보'만 넣습니다.

넷째, 텍스트를 이미지에 굽는 것의 대가입니다. 이미지 안의 글자는 검색엔진이 읽지 못하고, 사용자가 복사하거나 확대해도 선명해지지 않으며, 화면 낭독 기능에서도 건너뜁니다. 오탈자 하나를 고치려면 원본 파일이 필요하고, 원본이 없으면 처음부터 다시 만들어야 합니다. 그래서 핵심 정보 — 상품명, 용량, 소재, 원산지, 주의사항, 교환·반품 조건 — 는 이미지 바깥의 텍스트 영역에도 반드시 중복해서 적어두는 편이 안전합니다.

다섯째, 대비와 배경입니다. 실외에서 밝기를 낮춘 화면으로 보는 상황을 가정합니다. 사진 위에 흰 글자를 얹을 때는 어두운 그라데이션이나 반투명 박스로 바탕을 정리하고, 연회색 배경에 중간 회색 글자 같은 조합은 피합니다. 흑백으로 변환했을 때도 글자가 읽히는지 한 번 확인해 보면 판단이 빠릅니다.

COMMIN이 상세페이지 작업을 시작하는 순서

COMMIN은 상세페이지 작업을 시각 시안부터 시작하지 않습니다. 먼저 어느 채널에 올라가는지, 그 채널의 권장 제작 폭과 업로드 제한이 무엇인지 확인합니다. 조건이 확정되어야 축소율이 나오고, 축소율이 나와야 본문 최소 크기라는 숫자를 문서에 적을 수 있기 때문입니다.

그다음 정보 순서를 텍스트로 먼저 정리합니다. 무엇을 첫 화면에서 말할지, 어떤 근거를 뒤에 둘지, 표시사항과 배송·교환 정보는 어디에 놓을지를 글로 확정한 뒤 화면을 나눕니다. 순서가 정해지지 않은 상태에서 이미지를 만들면, 나중에 순서를 바꿀 때마다 이미지를 다시 굽는 일이 반복됩니다.

시안 확인도 PC 미리보기로 끝내지 않습니다. 작업 중에 실제 휴대폰으로 열어 보고, 밝기를 낮춘 상태와 한 손으로 스크롤하는 속도로 확인합니다. 손가락으로 확대해야 읽히는 요소가 남아 있으면 그 단은 다시 작업합니다.

텍스트를 이미지에 구울 때는 원본 편집 파일과 폰트 사용 조건을 함께 정리해 둡니다. 나중에 문구 하나를 바꿔야 할 때 다시 만들지 않아도 되도록 하는 것이 목적입니다. 이런 준비는 눈에 보이지 않지만, 운영 단계에서 가장 크게 체감되는 부분입니다.

이 기준이 맞는지 스스로 검증하는 방법

기준은 남이 말해서가 아니라 직접 확인해서 신뢰하는 것이 맞습니다. 검증은 어렵지 않습니다. 완성된 상세페이지를 휴대폰으로 열고, 화면을 확대하지 않은 상태로 처음부터 끝까지 한 번 내려봅니다. 이때 손가락으로 확대한 횟수를 세어 보면 됩니다. 한 번이라도 확대해야 읽히는 정보가 있다면 그 부분은 기준 미달입니다.

두 번째 방법은 팔 길이 테스트입니다. 휴대폰을 평소보다 조금 멀리 들고 본문이 읽히는지 봅니다. 읽히지 않으면 실효 크기가 부족한 것입니다. 세 번째는 밝기 테스트입니다. 화면 밝기를 30% 이하로 낮추고 같은 페이지를 봅니다. 대비가 부족한 조합은 이 단계에서 걸러집니다.

네 번째는 복사 테스트입니다. 상품명과 용량, 주의사항을 휴대폰에서 길게 눌러 선택해 봅니다. 선택되지 않는다면 그 정보는 이미지 안에만 있다는 뜻이고, 검색에도 잡히지 않는다는 뜻입니다.

마지막은 화면 하나 테스트입니다. 스크롤을 멈춘 임의의 지점에서 화면을 캡처해 봅니다. 그 한 장만 보고 '무엇을 파는 제품인지'가 전달되지 않는 구간이 길게 이어진다면, 정보가 아니라 장식이 화면을 차지하고 있는 것입니다. 이 다섯 가지는 장비도 비용도 필요 없고, 결과가 즉시 눈에 보입니다.

상세페이지 업로드 전 확인 체크리스트 12

1. 판매 채널의 권장 제작 폭과 업로드 용량·크기 제한을 공식 가이드에서 확인했습니까.

2. 제작 폭 대비 표시 폭의 축소율을 계산했습니까(좁은 기기 기준 360px 권장).

3. 본문 실효 크기 14~16px을 확보할 제작 파일 기준 크기를 정했습니까.

4. 글자 위계를 헤드·소제목·본문 세 단계 안으로 정리했습니까.

5. 이미지 한 장이 하나의 메시지만 담고 있습니까.

6. 세로로 과도하게 긴 이미지를 의미 단위로 분할했습니까.

7. 상품명·용량·소재·원산지·주의사항이 이미지 밖 텍스트 영역에도 들어가 있습니까.

8. 표·비교·스펙처럼 정보 밀도가 높은 요소를 별도 장으로 분리했습니까.

9. 사진 위 글자에 대비를 확보할 바탕 처리가 되어 있습니까.

10. 실제 휴대폰에서 확대 없이 끝까지 읽혔습니까.

11. 화면 밝기를 낮춘 상태에서도 본문이 읽혔습니까.

12. 텍스트 수정에 대비해 원본 편집 파일과 폰트 사용 조건을 정리해 두었습니까.

기준이 있으면 상세페이지는 다시 만들지 않아도 됩니다

상세페이지를 한 번에 잘 만드는 비결은 감각이 아니라 순서입니다. 채널 조건을 확인하고, 축소율을 계산하고, 본문 최소 크기를 숫자로 정하고, 정보 순서를 글로 확정한 뒤에 화면을 나눕니다. 이 순서를 지키면 시안 단계에서 판단이 빨라지고, 업로드 후에 '다시 만들어야 하나' 고민할 일이 크게 줄어듭니다.

무엇보다 상세페이지는 만든 사람의 모니터가 아니라 사는 사람의 휴대폰에서 완성됩니다. 제작을 마쳤다고 생각되는 순간, 휴대폰을 들고 처음부터 한 번 내려보시기 바랍니다. 고쳐야 할 곳은 대부분 그 한 번의 스크롤에서 드러납니다.

상세페이지 제작, 조건부터 정리하고 시작하세요

판매 채널, 제작 폭, 이미지 장수, 원고 준비 상태에 따라 상세페이지 작업 범위와 일정은 크게 달라집니다. 조건을 먼저 정리해 두면 견적 범위가 좁아지고, 착수 후의 수정도 줄어듭니다.

COMMIN 자동견적에서는 항목을 선택하는 것만으로 대략적인 범위를 먼저 확인하실 수 있습니다. 현재 준비된 자료가 어디까지인지 함께 남겨주시면 그 상태에 맞춰 안내해 드립니다. https://www.commin.biz/자동견적?utm_source=blog&utm_medium=owned_blog&utm_campaign=commin_blog_2026w39&utm_content=mobile-first-detail-page-width-font-split