스마트스토어 상세페이지 사이즈, 가로 폭·세로 길이·용량 기준
상세공방 · · 읽는 데 11분 · 조회 6
스마트스토어 상세페이지 사이즈를 검색하셨다면 가로 몇 px로 만들지, 얼마나 길게 이어도 되는지가 궁금하실 겁니다. 숫자 하나보다 중요한 건 휴대폰에서 어떻게 보이느냐입니다. 손님 대부분이 상세페이지를 휴대폰으로 넘겨 보기 때문입니다.
결론부터 말씀드립니다. 가로 폭은 860px 정도로 하나 정해 끝까지 지키세요. 세로는 통이미지 한 장으로 붙이지 말고 섹션마다 나눠 올립니다. 글자는 휴대폰 화면에서 몇 px로 보일지 계산해서 크기를 정합니다.
이 글에서는 이 세 가지를 순서대로 풀고, 올린 뒤 휴대폰에서 확인할 것까지 정리합니다. 업로드 한도처럼 플랫폼이 정하는 수치는 바뀔 수 있으니, 그 부분은 스마트스토어 센터의 최신 공지를 함께 보세요.
스마트스토어 상세페이지 가로 사이즈는 몇 px로 만들까요
스마트스토어 상세페이지는 스마트에디터에서 이미지와 글을 올려 만듭니다. PC 화면에서는 본문 영역 폭이 정해져 있고, 휴대폰에서는 이미지가 화면 폭에 맞춰 줄어듭니다.
그래서 가로 폭을 몇 px로 만들든 휴대폰에서는 결국 화면 폭만큼으로 보입니다. 가로 폭은 "몇이 정답"이라기보다 "어떤 기준으로 통일하느냐"의 문제입니다.
860px을 많이 쓰는 이유
셀러들 사이에서는 860px이 흔한 작업 기준입니다. PC 본문 폭과 비슷해서 PC에서 늘어나거나 흐려지지 않고, 휴대폰에서도 충분히 선명하게 보입니다.
더 넓게 만들어도 됩니다. 다만 폭이 넓을수록 같은 디자인이라도 파일이 무거워지고, 글자도 더 크게 써야 휴대폰에서 같은 크기로 보입니다.
| 비교 항목 | 작게(600px대) | 860px 안팎 | 크게(1000px 이상) |
|---|---|---|---|
| PC에서 보이는 모습 | 늘어나 흐려질 수 있음 | 본문 폭에 잘 맞음 | 줄어들어 맞춰짐 |
| 휴대폰 선명도 | 흐릿해 보이기 쉬움 | 대체로 충분함 | 가장 선명함 |
| 파일 용량 | 가벼움 | 적당함 | 무거워지기 쉬움 |
| 작업 글자 크기 | 작게 써도 됨 | 본문 30px 이상 | 본문 36px 이상 |
어느 쪽을 고르든, 한 상세페이지 안에서는 폭을 하나로 통일하세요.
폭을 섞으면 생기는 일
어떤 이미지는 860px, 어떤 이미지는 1200px로 올리면 휴대폰에서는 둘 다 화면 폭으로 줄어듭니다. 이때 같은 30px 글자라도 1200px 이미지 쪽이 더 작게 보입니다.
예를 들어 텀블러를 판다면 제품 사진은 촬영 원본 폭으로, 설명 이미지는 860px로 올리는 일이 많습니다. 그러면 섹션마다 글자 크기가 들쭉날쭉해 보입니다. 사진도 설명 이미지도 같은 폭으로 잘라 올리세요.
상세페이지 세로 길이는 얼마나 길어도 되나요
세로 길이에는 손님이 보기에 정해진 한계가 없습니다. 길게 써도 끝까지 읽게 만들 수 있습니다. 문제는 그 길이를 이미지 한 장에 다 담을 때 생깁니다.
통이미지 한 장이 불리한 이유
세로로 아주 긴 이미지 한 장은 파일이 무겁습니다. 휴대폰 데이터로 열면 위에서부터 늦게 뜨고, 첫 화면이 비어 있는 시간이 길어집니다.
업로드 과정에서 크기가 줄거나 압축되면 글자가 뭉개질 수도 있습니다. 문장 하나를 고칠 때도 긴 파일 전체를 다시 내보내야 합니다.
가로 860px × 세로 15,000px 한 장. 첫 화면이 늦게 뜨고, 향 설명 한 줄만 바꿔도 전체를 다시 내보내야 함.
첫 화면·향 소개·연소 시간·사용법·포장·주의사항으로 나눠 6장. 위쪽부터 빠르게 뜨고, 바뀐 장만 교체.
나누는 기준은 '한 장에 메시지 하나'입니다.
몇 px씩 나누면 될까요
한 장의 세로는 대략 1,000~2,500px 안쪽을 권합니다. 휴대폰으로 두세 번 넘기면 다 보이는 길이라, 한 장이 한 섹션의 역할을 하기 좋습니다.
섹션을 어떻게 나눌지는 상세페이지 구성 순서, 후킹부터 구매 유도까지 섹션별 역할 정리를 참고하세요. 섹션 하나를 이미지 한 장으로 만들면 자르는 위치도 저절로 정해집니다.
상세페이지 이미지 용량은 어느 정도로 맞추나요
용량은 손님이 기다리는 시간과 바로 이어집니다. 매장 문을 열었는데 진열대가 천천히 나타나는 상황이라고 생각하면 됩니다.
작업 목표는 한 장에 1MB 안팎, 넉넉히 잡아도 2~3MB 이하로 잡으세요. 공식 한도가 아니라 휴대폰 데이터 환경에서 답답하지 않게 보기 위한 기준입니다.
JPG와 PNG, 무엇으로 저장할까요
사진이 들어간 이미지는 JPG가 가볍습니다. 품질은 80~90% 정도로 내보내면 눈으로 보기에 차이가 거의 없으면서 용량이 많이 줄어듭니다.
PNG는 글자와 단색 면이 많은 이미지에서 또렷합니다. 대신 사진이 섞이면 용량이 크게 늘어납니다.
- 사진이 많은 섹션에 적합
- 같은 크기에서 용량이 가벼움
- 품질 80~90%로 내보내기
- 저장을 반복하면 화질이 떨어짐
- 글자·도표·단색 배경에 적합
- 글자 가장자리가 또렷함
- 사진이 섞이면 용량이 급증
- 원본 보관용으로도 좋음
헷갈리면 JPG로 내보내고, 글자가 뭉개질 때만 PNG를 쓰세요.
움직이는 이미지(GIF)는 짧게
GIF는 짧은 영상처럼 움직이는 이미지입니다. 강아지 간식을 반으로 쪼개는 장면처럼 한 동작만 보여 줄 때 쓰기 좋습니다.
다만 몇 초만 넘어가도 용량이 금방 커집니다. 2~3초 동작 하나만 담고, 상세페이지 전체에 한두 개로 제한하세요.
모바일에서 상세페이지 글자가 안 보이는 이유
상세페이지가 모바일에서 "깨진다"는 말은 대부분 글자가 너무 작아 읽히지 않는다는 뜻입니다. 이미지가 화면 폭에 맞춰 줄어들면 그 안의 글자도 같은 비율로 줄어듭니다.
PC 모니터에서는 적당해 보이던 24px 글자가 휴대폰에서는 깨알처럼 보이는 이유입니다.
글자 크기는 계산해서 정하세요
계산은 간단합니다. 휴대폰 화면 폭을 작업 폭으로 나누고, 그 비율을 글자 크기에 곱하면 됩니다.
화면 폭 390, 작업 폭 860으로 가정하면 비율은 약 0.45
24px로 쓴 글자 → 약 11px로 보임
30px로 쓴 글자 → 약 14px로 보임
40px로 쓴 글자 → 약 18px로 보임
휴대폰 화면 폭은 기종마다 다르니 예시 값으로만 보세요.
휴대폰 앱에서 편하게 읽히는 본문 글자는 대체로 14px 이상입니다. 그러니 860px로 작업한다면 본문은 30px 이상, 제목은 50px 이상으로 잡으면 안전합니다.
작업 폭 860px, 휴대폰 화면 폭 390으로 가정한 예시 계산입니다.
이해를 돕기 위한 예시 수치예요(실제 통계 아님).
표와 성분표가 가장 먼저 무너집니다
예를 들어 반찬을 판다면 원재료와 영양 정보를 표로 넣게 됩니다. 칸이 많은 표를 860px 안에 욱여넣으면 글자가 20px 아래로 내려가기 쉽습니다.
이럴 때는 표를 두 개로 나누거나, 칸을 줄이고 세로로 길게 바꾸세요. 양말 사이즈표도 마찬가지입니다. 휴대폰에서 확대해야 읽히는 정보는 없는 정보와 같습니다.
여백과 글자 크기를 더 자세히 정하고 싶다면 상세페이지 디자인 기본, 여백·글자 크기·색 3가지만 지키세요를 함께 보세요.
모바일에서 깨지지 않게 만드는 작업 순서
사이즈 문제는 거의 만드는 단계에서 정해집니다. 다 만들고 나서 고치려면 처음부터 다시 해야 하는 경우가 많습니다. 아래 순서대로 작업하세요.
- 1폭 정하기
작업 화면 가로를 860px 하나로 고정
- 2섹션 나누기
한 장에 메시지 하나, 세로 1,000~2,500px
- 3글자 크기 잡기
본문 30px, 제목 50px 이상으로 시작
- 4내보내기
사진은 JPG 80~90%, 글자 위주는 PNG
- 5올리고 확인
올린 순서대로 휴대폰 미리보기 점검
자르는 위치가 이음매를 만듭니다
여러 장으로 나눠 올리면 이미지 사이에 아주 얇은 틈이 보일 때가 있습니다. 문장이나 사진 한가운데를 자르면 이 틈이 그대로 드러납니다.
- 섹션이 바뀌는 여백에서 자르기
- 장마다 위아래 여백을 조금씩 두기
- 배경색이 이어지면 같은 색 코드 쓰기
- 파일 이름에 01, 02처럼 순서 붙이기
- 문장이나 제품 사진 한가운데서 자르기
- 장마다 다른 가로 폭으로 내보내기
- 잘린 위아래를 글자로 이어 붙이기
- 배경 그라데이션을 장 사이에 걸치기
선명도가 걱정된다면
요즘 휴대폰은 화면이 촘촘해서, 860px 이미지가 아주 조금 부드럽게 보일 수 있습니다. 텀블러 로고나 원단 짜임처럼 디테일이 중요한 사진은 확대 컷을 따로 한 장 넣는 편이 낫습니다.
전체 폭을 크게 키우는 것보다 이렇게 보여 줄 부분을 확대하는 쪽이 용량도 덜 들고 효과도 분명합니다.
손이 가장 많이 가는 단계
여기까지 보면 폭 고정, 섹션 나누기, 글자 크기 계산을 매번 손으로 맞춰야 합니다. 상세페이지를 처음 만든다면 이 기준이 잡힌 틀에서 시작하는 편이 빠릅니다. 상세공방은 상품 정보를 넣으면 섹션 구성과 카피, 디자인 초안을 먼저 만들어 주고, 편집한 결과를 이미지로 내보낼 수 있습니다.
올린 뒤 휴대폰에서 꼭 확인할 것
PC 미리보기만 보고 끝내면 안 됩니다. 손님이 보는 화면은 휴대폰이니, 내 휴대폰으로 실제 상품 페이지를 열어 처음부터 끝까지 넘겨 보세요.
가능하면 화면이 작은 휴대폰 한 대로도 확인하세요. 작은 화면에서 읽히면 큰 화면에서는 문제가 없습니다.
- 첫 화면이 2~3초 안에 뜨는가
- 본문 글자를 확대하지 않고 읽을 수 있는가
- 표·사이즈표의 숫자가 또렷한가
- 이미지 순서가 뒤바뀐 곳은 없는가
- 장 사이 이음매가 문장을 가르지 않는가
- 사진 색이 실제 상품과 크게 다르지 않은가
와이파이를 끄고 데이터로도 한 번 열어 보세요.
첫 화면은 따로 한 번 더
손님이 가장 먼저 보는 첫 장은 용량을 특히 가볍게 하세요. 첫 장이 늦게 뜨면 아래 섹션이 아무리 좋아도 볼 기회가 줄어듭니다.
첫 화면에 무엇을 담을지는 상세페이지 첫 화면, 3초 안에 보여 줘야 할 문구와 이미지에 따로 정리해 두었습니다.
사이즈를 맞췄는데도 반응이 없다면
사이즈와 로딩은 손님이 상세페이지를 끝까지 볼 수 있게 하는 기본 조건입니다. 그 뒤로는 유입, 가격, 문구가 함께 작용합니다. 무엇부터 볼지는 상세페이지 전환율 낮을 때, 유입부터 가격까지 점검 순서를 참고하세요.
정리
스마트스토어 상세페이지 사이즈는 숫자 하나를 외우는 문제가 아닙니다. 가로 폭을 하나로 통일하고, 그 폭에 맞춰 글자와 용량을 정하는 일입니다.
가로는 860px 안팎으로 정하고 모든 이미지를 같은 폭으로 내보내세요. 세로는 섹션마다 1,000~2,500px 정도로 나눠 올리고, 한 장은 1MB 안팎을 목표로 합니다.
모바일에서 깨지지 않게 하려면 글자 크기를 휴대폰 기준으로 계산하세요. 860px 작업이라면 본문 30px, 제목 50px 이상이 출발점입니다. 표와 성분표는 칸을 줄이거나 나눠서 읽히게 만듭니다.
마지막으로, 올린 뒤에는 반드시 내 휴대폰으로 처음부터 끝까지 넘겨 보세요. 업로드 한도와 지원 형식은 바뀔 수 있으니 스마트스토어의 최신 공지도 함께 확인하시면 됩니다.
- 지금 상세페이지 이미지들의 가로 폭이 모두 같은지 확인하기
- 통이미지가 있다면 섹션 단위로 잘라 다시 올리기
- 본문 글자가 작업 폭 860px 기준 30px 이상인지 보기
- 칸이 많은 표는 둘로 나누거나 세로형으로 바꾸기
- 한 장 용량이 2~3MB를 넘는 이미지 다시 내보내기
- 휴대폰 데이터로 상품 페이지를 끝까지 넘겨 보기
자주 묻는 질문
Q스마트스토어 상세페이지는 꼭 860px로 만들어야 하나요?
꼭 그렇지는 않습니다. 860px은 PC 본문 폭과 비슷하고 휴대폰에서도 충분히 선명해서 많이 쓰는 작업 기준일 뿐입니다. 더 넓게 만들어도 되지만, 한 상세페이지 안에서는 폭을 하나로 통일하고 그 폭에 맞춰 글자 크기를 키워야 합니다.
Q상세페이지를 통이미지 한 장으로 올려도 되나요?
올릴 수는 있지만 권하지 않습니다. 세로로 아주 긴 한 장은 무거워서 휴대폰에서 늦게 뜨고, 압축되면 글자가 뭉개질 수 있습니다. 섹션 단위로 나눠 여러 장으로 올리면 로딩도 빠르고 수정할 때 바뀐 장만 바꾸면 됩니다.
Q휴대폰에서 상세페이지 글자가 너무 작아 보여요.
이미지가 휴대폰 화면 폭에 맞춰 줄어들면서 글자도 같이 줄어들기 때문입니다. 860px로 작업했다면 본문은 30px 이상, 제목은 50px 이상으로 키워 보세요. 칸이 많은 표는 둘로 나누는 것이 좋습니다.
Q상세페이지 이미지 용량은 몇 MB까지 괜찮나요?
플랫폼의 업로드 한도는 바뀔 수 있으니 스마트스토어 최신 공지를 확인하세요. 한도와 별개로, 휴대폰에서 답답하지 않게 보려면 한 장에 1MB 안팎, 크더라도 2~3MB 이하를 목표로 잡는 것을 권합니다.
Q상세페이지 이미지가 올리고 나니 흐려 보여요.
작업 폭보다 작은 이미지를 늘려 쓰거나, JPG를 여러 번 다시 저장했을 때 흔히 생깁니다. 원본에서 정한 폭으로 한 번만 내보내고, 글자가 많은 이미지는 PNG로 저장해 보세요. 디테일이 중요한 부분은 확대 컷을 따로 넣으면 좋습니다.
Q스마트스토어용 상세페이지를 쿠팡에 그대로 써도 되나요?
이미지 자체는 다시 쓸 수 있는 경우가 많지만, 채널마다 권장 폭과 업로드 한도가 다를 수 있습니다. 올리기 전에 해당 채널의 최신 공지를 확인하고, 휴대폰에서 글자 크기와 이음매를 다시 점검하세요.