모바일 상세페이지, 글자 크기·한 화면 정보량 기준
상세공방 · · 읽는 데 11분 · 조회 7
모바일 상세페이지가 안 읽히는 원인은 디자인 감각보다 '크기 계산'인 경우가 많습니다. PC 모니터에서 보기 좋게 만든 이미지가 휴대폰 화면 폭에 맞춰 절반 가까이 줄어들어 보이기 때문입니다.
결론부터 말씀드립니다. 가로 860px 이미지라면 본문 글자는 32px 안팎(최소 28px)으로 쓰세요. 한 화면에는 메시지를 하나만 담고, 이미지 속 글자는 한 줄 15자 안팎으로 끊어 배경과 확실히 구분되게 넣으세요.
이 글에서는 이 숫자가 어디서 나오는지, 이미지 폭이 다르면 어떻게 계산하는지, 다 만든 뒤 휴대폰으로 어떻게 점검하는지까지 순서대로 설명합니다.
모바일 상세페이지는 왜 PC에서 볼 때와 다르게 보이나요
상세페이지 이미지는 보통 가로 800~1000px 정도로 만듭니다. 그런데 휴대폰 화면이 쓰는 기준 폭(논리 픽셀, 화면 크기를 계산할 때 쓰는 단위)은 기종마다 다르지만 대략 360~430 정도입니다.
그래서 휴대폰은 이미지를 화면 폭에 맞춰 줄여서 보여 줍니다. 가로 860px 이미지를 390 폭 화면에 넣으면 약 0.45배, 절반 이하로 작아집니다.
PC 모니터에서는 이미지가 거의 원래 크기로 보입니다. 만드는 사람은 큰 화면에서 작업하니 글자가 충분히 커 보입니다. 하지만 손님은 그 절반 크기로 봅니다. 만드는 화면과 보는 화면이 다르다는 점이 모바일 상세페이지에서 생기는 문제 대부분의 출발점입니다.
손님이 휴대폰으로 많이 들어오는지는 내 스토어 통계에서 기기별 유입을 보면 확인할 수 있습니다. 모바일 비중이 높다면 처음부터 휴대폰 기준으로 만드는 편이 맞습니다.
- 모니터에서 보기 좋은 글자 크기로 작업
- 한 장에 설명을 여러 줄 길게 배치
- 얇은 글꼴, 연한 회색 글자도 잘 보임
- 표와 스펙을 작게 모아서 넣음
- 절반으로 줄어든 크기를 기준으로 작업
- 한 화면에 메시지 하나만 배치
- 굵은 글꼴, 진한 대비 위주
- 핵심 정보만 크게, 나머지는 나눠 넣음
같은 이미지라도 휴대폰에서는 약 절반 크기로 보인다고 생각하고 만드세요.
모바일 상세페이지 글자 크기, 이미지 속 몇 px로 써야 하나요
계산은 간단합니다. 이미지 속 글자 크기에 '화면 폭 ÷ 이미지 폭'을 곱하면 손님 눈에 보이는 크기가 나옵니다.
휴대폰 앱의 일반 본문 글자는 보통 14~16 정도 크기로 보입니다. 상세페이지 본문도 화면에서 최소 13~14 정도로는 보여야 확대하지 않고 읽을 수 있습니다. 이 크기를 거꾸로 계산하면 이미지 속 글자 크기가 나옵니다.
예시로 가로 860px, 화면 폭 390 가정 → 배율 약 0.45
본문 32px × 0.45 ≈ 14 (편하게 읽힘)
주석 20px × 0.45 ≈ 9 (확대해야 읽힘)
가로 1000px로 만들면 같은 32px도 약 12로 작아짐
이미지 가로 폭이 넓을수록 같은 글자도 더 작게 보입니다.
이미지 가로 폭을 얼마로 잡을지는 판매 채널마다 권장 기준이 조금씩 다릅니다. 폭부터 정해야 한다면 스마트스토어 상세페이지 사이즈 기준을 먼저 확인하세요.
아래 표는 가로 860px을 기준으로 잡은 출발점입니다. 폭이 1000px이라면 각 숫자에 약 1.15를 곱해 키우세요.
| 역할 | 이미지 속 크기 | 휴대폰에서 보이는 크기(약) |
|---|---|---|
| 헤드카피 | 60~72px | 27~32 |
| 소제목 | 40~48px | 18~22 |
| 본문 설명 | 30~34px (최소 28px) | 13~15 |
| 주석·보조 문구 | 24px 이상 | 11 이상 |
화면 폭 390을 가정한 계산값입니다. 정답이 아니라 시작점이니, 휴대폰에서 직접 보고 조정하세요.
주석 글자가 가장 자주 작아집니다
헤드카피는 대부분 크게 씁니다. 문제는 "※ 모니터에 따라 색상이 다를 수 있습니다" 같은 주석입니다.
예를 들어 양말을 판다면 사이즈 안내나 세탁 주의 문구가 주석으로 들어가기 쉽습니다. 이런 문구는 반품을 줄이는 정보라서 오히려 읽혀야 합니다. 주석도 24px 아래로는 내리지 마세요.
여백과 색까지 함께 정리하고 싶다면 상세페이지 디자인 기본 3가지에서 기본 원칙을 보실 수 있습니다.
모바일 상세페이지 한 화면에는 정보를 얼마나 넣어야 하나요
여기서 '한 화면'은 손님이 엄지로 한 번 넘겼을 때 보이는 영역입니다. 휴대폰 화면에서 앱 메뉴와 상단바를 빼면, 가로 860px 이미지 기준으로 세로 약 1,400px 안팎이 한 번에 보인다고 가정할 수 있습니다.
이 영역 안에 담을 것은 메시지 하나입니다. 제목 한 줄, 그 말을 보여 주는 이미지 한 장, 설명 두세 줄이면 충분합니다.
정보가 많다고 한 화면에 몰아넣으면 손님은 어디부터 읽을지 고르다가 그냥 넘깁니다. 넘기는 동작은 쉽기 때문에, 화면을 여러 장으로 나누는 것이 손님에게는 오히려 편합니다.
보온·보냉 / 스테인리스 이중 진공 / 식기세척기 가능 / 500ml / 4가지 색상 / 미끄럼 방지 바닥 — 아이콘 6개와 설명을 한 장에 배치
1화면: "아침에 담은 커피, 점심까지 따뜻하게" + 커피 따르는 사진 2화면: "뚜껑까지 식세기에 넣으세요" + 분리한 사진 3화면: 색상 4가지를 크게 한 줄로
같은 정보라도 한 화면에 하나씩 놓으면 각각이 기억에 남습니다.
화면 단위로 구성을 짜는 방법
상세페이지를 짤 때 섹션 목록을 먼저 쓰고, 그다음 각 섹션이 몇 화면이 될지 적어 보세요. 한 섹션이 세 화면을 넘어가면 메시지가 두 개 이상 섞였을 가능성이 큽니다.
어떤 섹션을 어떤 순서로 둘지는 상세페이지 구성 순서 글에서 다뤘습니다. 여기서는 그 섹션 하나하나를 화면 단위로 쪼갠다고 생각하시면 됩니다.
큰 카피 한 줄과 사진 한 장. 소구점 하나를 강하게 전할 때
소제목, 사진, 설명 2~3줄. 기능이나 사용법을 풀 때
왼쪽·오른쪽 두 칸. 전후, 다른 제품과의 차이를 보일 때
짧은 표 하나. 사이즈, 구성품, 보관법을 정리할 때
한 화면에 유형을 섞지 말고 하나만 고르세요.
이미지 속 글자, 어떤 기준으로 넣어야 읽히나요
크기를 키워도 안 읽히는 글자가 있습니다. 배경과 섞이거나, 너무 가늘거나, 한 줄이 너무 길 때입니다.
한 줄은 15자 안팎으로, 뜻 단위로 끊으세요
가로 860px에 32px 글자를 쓰고 양옆 여백을 두면, 한 줄에 20자 넘게 들어갑니다. 들어간다고 꽉 채우면 휴대폰에서는 눈이 줄을 따라가기 힘듭니다.
한 줄 15자 안팎에서 뜻이 끊기는 자리에 줄을 바꾸세요. 한 덩어리는 세 줄을 넘기지 않는 것이 좋습니다.
콩에서 얻은 소이왁스로 만들어 그을음이 적고 은은하게 타 오르며 작은 방에서도 향이 과하지 않게 퍼집니다
소이왁스로 만들어 그을음이 적습니다. 작은 방에서도 향이 은은하게 퍼집니다.
단어 중간이나 조사 앞에서 줄이 끊기지 않게 직접 줄을 바꾸세요.
배경과 확실히 대비시키세요
사진 위에 글자를 올릴 때가 가장 위험합니다. 예를 들어 반찬 사진처럼 색과 무늬가 많은 사진 위에 흰 글자를 올리면, 휴대폰에서는 글자가 사진에 묻힙니다.
사진에서 비어 있는 부분(하늘, 벽, 테이블 빈 곳)에 글자를 놓거나, 글자 뒤에 반투명한 단색 바탕을 까세요. 그것도 어렵다면 사진과 글자를 위아래로 분리하는 것이 가장 확실합니다.
가는 글꼴과 가장자리를 피하세요
얇은 글꼴은 절반으로 줄어들면 선이 흐려집니다. 본문은 보통 굵기 이상, 제목은 굵게 쓰세요.
글자를 이미지 양쪽 끝에 붙이는 것도 피하세요. 화면 가장자리는 눈이 잘 가지 않고, 일부 화면에서는 잘려 보일 수 있습니다. 좌우에 최소 40~60px 정도 여백을 두세요.
- 진한 글자 + 밝은 단색 배경
- 사진의 빈 공간에 글자 배치
- 제목은 굵게, 본문은 보통 굵기 이상
- 좌우 여백 40~60px 이상 확보
- 무늬 많은 사진 위에 흰 글자
- 연한 회색 글자를 흰 배경에
- 가는 글꼴로 긴 문장 쓰기
- 색만 바꿔서 강조 표시하기
강조는 색만 바꾸지 말고 굵기나 크기도 함께 바꿔야 휴대폰에서 눈에 띕니다.
표·성분·원재료 정보는 모바일에서 어떻게 보여 주나요
상세페이지 아래쪽의 스펙 표와 성분표가 휴대폰에서 가장 많이 망가집니다. 칸이 많은 표를 그대로 넣으면 글자가 10 아래로 줄어들기 쉽습니다.
방법은 두 가지입니다. 손님이 고를 때 꼭 보는 정보는 크게 따로 빼고, 전체 표는 칸 수를 줄여 다시 만드세요.
원재료, 성분 비율, 열량, 보관법, 유통기한, 제조원이 8칸짜리 표 한 장에 작은 글씨로 들어감
1화면: "닭가슴살 하나로 만들었어요" 크게 2화면: 원재료·급여량·보관법 3줄 요약 3화면: 나머지 정보는 2칸 표로 크게
표는 '항목 | 내용' 2칸으로 만들면 휴대폰에서도 글자를 키울 수 있습니다.
칸이 3개 이상인 표가 꼭 필요하다면 표를 두 장으로 나누세요. 예를 들어 양말 사이즈표라면 남성용과 여성용을 각각 한 화면씩 두는 식입니다.
여기까지 보면 할 일이 꽤 많습니다. 섹션을 화면 단위로 쪼개고, 역할별로 글자 크기를 맞추고, 줄바꿈과 배경까지 하나씩 손봐야 하니까요.
모바일 상세페이지, 다 만든 뒤 어떻게 점검하나요
가장 확실한 점검 방법은 실제 휴대폰으로 보는 것입니다. 모니터에서 이미지를 축소해 보는 것과 손에 들고 보는 것은 느낌이 다릅니다.
상세공방에서 편집을 마쳤다면 이미지로 내보낸 뒤 휴대폰으로 보내 보세요. 메신저의 '나에게 보내기'를 쓰면 간단합니다. 가능하면 스토어에 올린 뒤 실제 상품 화면에서도 한 번 더 확인하세요.
- 1휴대폰으로 보내기
완성 이미지를 휴대폰에서 열고, 가능하면 스토어 앱 화면에서도 확인
- 2확대 없이 읽기
팔을 편하게 둔 거리에서 손가락으로 확대하지 않고 끝까지 읽어 보기
- 3화면마다 한 문장 요약
한 번 넘길 때마다 '이 화면은 무슨 말인가'를 한 문장으로 말해 보기
- 4밝기 낮춰 보기
화면 밝기를 낮추고 다시 보며 묻히는 글자 찾기
- 5다른 사람에게 보여 주기
상품을 모르는 사람에게 보여 주고 무엇을 파는지 물어보기
2단계에서 확대하고 싶어진 곳이 바로 고칠 곳입니다.
화면마다 한 문장으로 요약이 안 된다면 그 화면에 메시지가 두 개 이상 들어 있다는 뜻입니다. 둘로 나누세요.
첫 화면은 특히 꼼꼼히 보세요. 손님이 계속 내릴지 말지를 정하는 곳이라, 첫 화면 글자가 작거나 묻히면 나머지를 아무리 잘 만들어도 보이지 않습니다. 첫 화면에 무엇을 넣을지는 상세페이지 첫 화면 글을 참고하세요.
정리
모바일 상세페이지는 휴대폰이 이미지를 절반 가까이 줄여서 보여 준다는 점에서 출발합니다. 그래서 글자 크기는 만드는 화면이 아니라 손님 화면에서 보이는 크기로 판단해야 합니다.
가로 860px 기준으로 본문 32px 안팎, 소제목 40~48px, 헤드카피 60~72px, 주석 24px 이상을 출발점으로 잡으세요. 폭이 다르면 '이미지 속 크기 × 화면 폭 ÷ 이미지 폭'으로 다시 계산하면 됩니다.
한 화면에는 메시지 하나만 넣고, 이미지 속 글자는 한 줄 15자 안팎으로 뜻에 맞게 끊으세요. 배경과의 대비, 굵기, 좌우 여백까지 챙기면 확대하지 않아도 읽히는 페이지가 됩니다.
마지막으로 반드시 휴대폰으로 직접 보세요. 손님과 같은 화면에서 보는 것이 가장 빠르고 확실한 점검입니다.
- 내 상세 이미지의 가로 폭을 확인하고 배율 계산하기
- 본문 글자가 28px 아래인 곳 찾아서 키우기
- 주석·사이즈 안내 글자가 24px 이상인지 확인하기
- 한 화면에 메시지가 두 개 이상인 곳 나누기
- 사진 위에 묻히는 글자에 바탕 깔거나 위치 옮기기
- 휴대폰으로 보내서 확대 없이 끝까지 읽어 보기
전부 다시 만들 필요 없이, 휴대폰에서 확대하고 싶었던 곳부터 고치세요.
자주 묻는 질문
Q모바일 상세페이지 본문 글자 크기는 몇 px이 적당한가요?
가로 860px 이미지 기준으로 본문은 32px 안팎, 최소 28px을 권합니다. 휴대폰에서 약 0.45배로 줄어들어 13~14 정도로 보이기 때문입니다. 이미지 폭이 더 넓다면 그만큼 비례해서 키우세요.
Q상세페이지 이미지 가로 폭이 1000px이면 글자 크기는 어떻게 바꾸나요?
860px 기준 크기에 약 1.15를 곱하면 됩니다. 예를 들어 본문 32px은 약 37px, 주석 24px은 약 28px로 키우세요. 이미지가 넓을수록 휴대폰에서 더 많이 줄어들기 때문입니다.
Q상세페이지 한 화면에 정보를 몇 개까지 넣어도 되나요?
엄지로 한 번 넘겼을 때 보이는 영역에 메시지 하나를 기준으로 하세요. 제목 한 줄, 이미지 한 장, 설명 두세 줄이면 충분합니다. 정보가 많으면 화면을 여러 장으로 나누는 편이 손님에게 더 편합니다.
Q사진 위에 글자를 넣으면 잘 안 보이는데 어떻게 하나요?
사진의 빈 공간에 글자를 놓거나, 글자 뒤에 반투명한 단색 바탕을 까세요. 무늬나 색이 많은 사진이라면 사진과 글자를 위아래로 분리하는 것이 가장 확실합니다.
Q상세페이지 성분표나 스펙 표가 휴대폰에서 너무 작아요.
손님이 꼭 보는 핵심 정보는 크게 따로 빼고, 전체 표는 '항목 | 내용' 2칸으로 다시 만드세요. 칸이 많은 표는 두 장으로 나누면 글자를 키울 수 있습니다. 법으로 정해진 표시 정보는 채널의 최신 공지도 확인하세요.
Q모바일 상세페이지는 어떻게 점검하는 게 좋나요?
완성 이미지를 휴대폰으로 보내 확대하지 않고 끝까지 읽어 보세요. 확대하고 싶어진 곳, 한 문장으로 요약이 안 되는 화면이 고칠 곳입니다. 화면 밝기를 낮추고 다시 보면 배경에 묻히는 글자도 찾을 수 있습니다.