← 블로그 목록
이미지

스마트스토어 상세페이지 이미지 규격: 가로 860px, 글자 크기와 분할 저장까지

스마트스토어 상세페이지는 가로 860px로 만들지만 폰에서는 약 45%로 줄어듭니다. 공식 규격과 함께 글자를 몇 px로 넣어야 폰에서 읽히는지, 긴 상세페이지를 나눠 올리면 용량이 어떻게 되는지 직접 확인했습니다.

픽레버 · 2026-09-28 · 수정 2026-10-19

스마트스토어 상세페이지를 만들 때 가장 먼저 부딪히는 질문은 "가로를 몇 px로 만들어야 하나", "글자는 얼마나 크게", "긴 이미지는 한 장으로 올려도 되나"입니다. 공식 도움말의 기준을 정리하고, 가로 860px 상세페이지가 폰에서 얼마나 작아지는지, 긴 이미지를 나누면 용량이 어떻게 되는지 직접 확인했습니다.

이 예시의 결론: 상세페이지는 가로 860px로 만들고, 본문 글자는 30px 이상으로 넣으세요. 표시 폭을 390px로 가정하면 약 45%로 줄어들어 30px이 14px 정도로 보입니다. 긴 상세페이지는 1,000~2,000px 단위로 나눠 올려도 전체 용량은 거의 같았고(+1% 안팎), 한 장 용량 제한과 수정 작업에서 유리합니다.

스마트스토어 상세페이지 이미지 규격

항목 기준 비고
상세페이지 가로 크기 860px 권장 스마트스토어센터 도움말 안내 기준
이미지 한 장 용량 20MB 이하 넘으면 업로드되지 않음
파일 형식 등록 화면에서 지원 형식 확인 이 글의 정지 이미지 예시는 JPG·PNG 사용
세로 길이 4,000px 초과 시 펼쳐보기 안내 공식 도움말: 3,000px 기준으로 노출 후 나머지는 펼쳐보기에서 확인

가로 권장 크기·장당 용량 제한·상세설명 펼쳐보기는 공식 도움말 기준입니다. 글자 크기와 분할 간격은 아래 예시를 바탕으로 한 제작 제안입니다. 등록 전에 스마트스토어센터 도움말에서 한 번 더 확인하세요.

가로 860px, 폰에서는 얼마나 작아질까

이 비교에서는 가로 860px 이미지를 모바일 본문 표시 폭 390px에 맞춰 보여주는 상황을 가정했습니다. 축소 비율은 390÷860으로 약 45%입니다. 실제 표시 폭은 기종, 앱, 여백과 확대 설정에 따라 달라집니다.

가로 860px 상세페이지에서 본문 20px, 30px, 40px 글자가 폰 화면 폭 390px에서 보이는 크기 비교

상세페이지에서 만든 크기 폰에서 보이는 크기 (390px 기준) 읽기
20px 약 9px 확대해야 읽힘
30px 약 14px 편하게 읽힘
40px 약 18px 크고 시원함

폰 화면의 일반 본문 글자는 보통 14~16px입니다. 그래서 860px 상세페이지 기준으로 본문은 30~36px, 소제목은 40px 이상, 제목은 56px 이상을 권합니다. 이 수치는 제작 시작점이며 공식 글자 크기 규정은 아닙니다. 실제 모바일 화면에서 글꼴·대비·가독성을 확인하고 조정하세요.

긴 상세페이지, 나눠서 올려도 될까?

세로로 긴 상세페이지(860×3305px)를 한 장으로 저장한 것과 여러 장으로 나눠 저장한 것을 비교했습니다. 모두 JPG 품질 90입니다.

저장 방법 장수 한 장 용량 전체 용량 한 장 대비
나누지 않음 1장 338KB 338KB —
2,000px씩 2장 204·135KB 339KB +0.2%
1,500px씩 3장 124·161·56KB 342KB +1.2%
1,000px씩 4장 81·123·79·56KB 341KB +0.7%

이번 예시에서는 나눠도 전체 용량은 약 1% 안팎만 늘었습니다. 다른 이미지나 인코더에서는 차이가 달라질 수 있습니다. 대신 이런 장점이 있습니다.

  • 한 장 용량을 줄이는 데 도움이 됩니다. 분할만으로 20MB 이하가 보장되지는 않으므로 각 조각의 저장 용량을 확인하세요. 사진이 많은 긴 상세페이지는 한 장으로 합치면 제한을 넘기 쉽습니다.

  • 수정이 쉽습니다. 가격이나 사이즈 안내만 바뀌었을 때 해당 조각만 다시 만들어 교체하면 됩니다.

  • 이어지는 부분이 티 나지 않습니다. 조각을 이어 붙여 비교해 보니, 경계 부분의 오차가 한 장으로 저장했을 때와 같았습니다.

나눌 때는 글자나 제품 사진 한가운데를 자르지 말고, 섹션이 바뀌는 여백에서 자르세요. 화면이나 편집 방식에 따라 이미지 사이에 여백이 생길 수 있어서, 글자 중간이 잘리면 어색하게 보입니다.

실험 조건

  • 폰 화면 비교: 가로 860px로 만든 예시 화면을 예시 표시 폭 390px(특정 아이폰 전체 모델의 규격을 뜻하지 않음)로 줄여 비교

  • 분할 비교: 상품 사진과 안내 문구로 만든 860×3305px 예시 상세페이지를 JPG 품질 90으로 저장 — 사진: Irene Kredenets / Unsplash

  • 테스트일 2026-09-28

상세페이지 이미지 준비 순서

  1. 가로 860px로 디자인합니다. 본문 30px 이상, 소제목 40px 이상으로 글자 크기를 잡으세요.

  2. 긴 이미지는 섹션 경계에서 나눕니다. 이미지 분할의 자유 분할로 원하는 위치에서 자를 수 있습니다. 세로 최대 30,000px 이미지까지 불러올 수 있습니다.

  3. 형식을 고릅니다. 사진 위주 조각은 JPG 품질 90, 작은 글씨·표가 많은 조각은 PNG가 깔끔합니다. 형식별 차이는 JPG·PNG·WebP 비교와 JPG 품질 비교에 정리했습니다.

  4. 용량을 확인합니다. 한 장이 너무 크면 이미지 압축으로 품질을 조정하세요. 목표 용량에 맞추는 방법은 용량 초과 설정표를 참고하세요.

자주 묻는 질문

Q. 가로를 860px보다 크게 만들면 더 선명하지 않나요?
상세페이지는 화면 폭에 맞춰 줄어들어 표시되기 때문에, 크게 만들어도 용량만 커지고 체감 차이는 크지 않은 경우가 많습니다. 기준에 맞춰 860px로 만드는 것이 가장 무난합니다.

Q. 대표이미지(썸네일)도 860px로 만드나요?
아닙니다. 대표이미지는 상품 목록과 검색 결과에 쓰이는 정사각형 이미지라 규격이 따로 있습니다. 1:1 비율로 넉넉한 크기(예: 1000×1000px)로 준비하는 경우가 많습니다. 정사각형으로 자를 때는 이미지 자르기를 쓰면 됩니다.

Q. 휴대폰으로 찍은 사진을 그대로 넣어도 되나요?
휴대폰 원본은 가로 4000px 안팎이라 용량이 큽니다. 상세페이지에 넣기 전에 가로 860px로 줄이면 용량이 크게 줄고 화면에서의 선명도는 거의 같습니다. 이미지 크기 조절에서 여러 장을 한 번에 줄일 수 있습니다.

관련 글