🧭 "그래서 몇 px인데요?" 3초 요약

디자이너 단톡방에서 가장 자주 올라오는 질문 1위.
"상세페이지 가로 몇으로 잡아요?"

결론부터 던지면 이렇습니다.

그런데 이 숫자들이 왜 나왔는지를 모르면,
플랫폼이 바뀔 때마다 또 검색창을 열게 됩니다.

이 글은 그 "왜"를 물리적으로 파헤칩니다.
CSS px과 물리 픽셀의 차이, DPR, 플랫폼 리사이징 엔진, 용량 압축까지.
읽고 나면 어떤 채널이든 스스로 정답 폭을 계산할 수 있게 됩니다. 🔍

📐 1. 먼저 알아야 할 것 : px은 두 종류다

상세페이지 폭 논쟁이 끝나지 않는 이유는 단 하나.
사람들이 서로 다른 px을 말하고 있기 때문입니다.

CSS 픽셀 (논리 픽셀)

브라우저가 인식하는 가상의 단위입니다.
아이폰 15의 화면을 CSS로 측정하면 가로 393px.
갤럭시 S24는 360px.
즉 대부분의 스마트폰은 CSS 기준 360~430px 사이에 몰려 있습니다.

물리 픽셀 (디바이스 픽셀)

실제 패널에 박혀 있는 발광 점의 개수입니다.
아이폰 15의 실제 해상도는 1179 × 2556.
갤럭시 S24는 1080 × 2340.

여기서 핵심 공식이 나옵니다.

모바일 콘텐츠 영역이 CSS 400px이고 DPR이 2라면,
이미지 원본은 최소 800px이어야 흐려지지 않습니다.
DPR 3까지 챙기려면 1200px.

자, 이제 860px이라는 숫자가 어디서 튀어나왔는지 감이 오시죠?

🏛️ 2. 860px은 어쩌다 국룰이 되었나

860px은 하늘에서 떨어진 숫자가 아닙니다.
네이버 스마트스토어의 상세설명 영역 폭에서 출발했습니다.

스마트스토어 PC 상품 상세 영역은 860px 기준으로 렌더링됩니다.
그보다 큰 이미지를 올리면 시스템이 860px에 맞춰 자동으로 축소합니다.
반대로 작은 이미지를 올리면 강제로 늘리진 않지만, 좌우 여백이 뜨죠.

모바일에서는 어떻게 보이나

스마트스토어 모바일 앱/웹은 860px 이미지를 화면 폭에 맞춰 100%로 늘려 보여줍니다.
CSS 400px 화면에 860px 이미지를 넣으면 실효 배율은 약 2.15배.
DPR 2 기기에서는 충분히 선명하고, DPR 3 기기에서는 살짝 아쉬운 수준입니다.

대부분의 사용자가 "글자 안 보인다"고 느끼지 않는 이유는
860px이라는 폭이 DPR 2를 완벽히 커버하기 때문입니다.

📊 3. 플랫폼별 권장 가로 폭 정리표

채널마다 렌더링 규칙이 다릅니다.
아래 표는 현업에서 가장 안전하게 통용되는 기준입니다.

📏 4. 세로 길이와 분할 전략

가로만큼 중요한 게 세로입니다.
한 장짜리 초장문 이미지는 세 가지 문제를 일으킵니다.

자르는 위치가 진짜 중요하다

이미지를 자를 때는 반드시 여백 구간에서 자르세요.
글자 중간이나 인물 얼굴 위에서 자르면,
이미지 사이에 1px 흰 선이 생겼을 때 티가 확 납니다.

일부 브라우저는 소수점 렌더링 때문에 이미지 사이에
미세한 틈(hairline gap)을 만듭니다.
여백에서 자르면 이 틈이 보이지 않습니다. 😌

🔤 5. 폰트 크기 : 폭보다 중요한 진짜 변수

여기가 초보와 실무자를 가르는 지점입니다.

860px 캔버스에서 24pt로 쓴 글자가
모바일 CSS 400px 화면에서는 몇 px로 보일까요?

모바일에서 편하게 읽히는 본문은 CSS 기준 15~17px.
역산하면 860px 캔버스에서는 32~37px이 필요합니다.

즉, "가로 폭이 얼마냐"보다 "그 폭에서 글자가 몇 px이냐"가 훨씬 결정적입니다.
1500px 캔버스로 만들면 같은 체감 크기를 내기 위해
본문을 56~66px로 잡아야 합니다.

💾 6. 용량과 포맷 : 폭을 키울 때 지불하는 대가

"그냥 다 1500px로 만들면 되는 거 아냐?"
안타깝게도 폭은 제곱으로 용량에 반영됩니다.

포맷 선택 기준

JPG — 사진 중심 상세페이지의 기본값. 품질 75~85 구간이 용량 대비 최적.
PNG-24 — 투명 배경이나 미세한 그라디언트 텍스트가 많을 때. 용량 큼.
WebP — 같은 화질에서 JPG 대비 25~35% 가볍습니다. 자사몰이라면 강력 추천.
AVIF — 더 가볍지만 일부 구형 환경 호환성 확인 필요.

단, 오픈마켓 에디터는 WebP 업로드를 제한하는 경우가 많습니다.
플랫폼 업로드용은 JPG, 자사몰용은 WebP로 이원화하는 게 실무 정석입니다.

[내보내기 권장 프리셋]
스마트스토어  : 860px  / JPG 품질 80 / sRGB / 1장 1MB 이하
쿠팡          : 780px  / JPG 품질 80 / 1장 500KB 이하
자사몰(반응형): 1200px / WebP 품질 80 / lazy-load 적용
SNS 광고소재  : 1080px / JPG 품질 90

🧩 7. 안전 영역(Safe Area) 설계

860px 캔버스를 만들었다고 860px 전부를 쓰면 안 됩니다.

모바일 화면은 좌우에 시스템 패딩이 들어가거나,
플로팅 구매 버튼·앱 하단바가 콘텐츠를 가립니다.
또 사람 엄지는 화면 가장자리를 자주 덮습니다.

핵심 카피나 가격 같은 절대 잘리면 안 되는 정보는
가운데 80% 영역 안쪽에 배치하는 습관을 들이세요.

특히 첫 화면(어보브 더 폴드)에 들어갈 후킹 카피는
세로 기준 상단 1,000px 이내에 배치해야
스크롤 없이 노출됩니다.

🛠️ 8. 작업 워크플로 실전 세팅

포토샵 / 피그마 문서 설정

포토샵 : 새 문서 → 폭 860px, 높이 3000px(작업 단위), 해상도 72ppi, 색상모드 RGB 8bit.
※ 웹 이미지에서 ppi 수치는 렌더링에 영향을 주지 않습니다. 72든 300이든 픽셀 수가 전부입니다.

피그마 : 프레임 폭 860 또는 430(모바일 프리뷰) 중 선택.
430으로 디자인하고 2x / 3x 익스포트하면 각각 860px, 1290px가 나옵니다.
이 방식이 폰트 크기 감각을 잡기에 훨씬 직관적입니다. 👍

검수 체크리스트

✅ 실제 폰에서 확대 없이 본문이 읽히는가
✅ 이미지 분할 경계가 여백에 있는가
✅ 총 용량이 5MB를 넘지 않는가
✅ sRGB로 저장되었는가
✅ 좌우 60px 이상 여백이 확보되었는가
✅ 첫 스크롤 안에 핵심 메시지가 있는가

이 6가지만 통과해도 상세페이지 품질 상위 20%에 듭니다.
재능넷 같은 재능 공유 플랫폼에서 상세페이지 외주를 맡길 때도,
이 체크리스트를 요구사항으로 전달하면 커뮤니케이션 비용이 극적으로 줄어듭니다.

🚀 9. 이미지 대신 HTML을 쓰는 선택지

최근 자사몰 트렌드는 이미지 + 텍스트 하이브리드입니다.

이미지 상세페이지의 치명적 약점은 세 가지.

① 검색엔진이 글자를 못 읽습니다. SEO 손실.
② 시각장애인 스크린리더가 접근할 수 없습니다. 접근성 문제.
③ 문구 하나 수정에도 디자이너가 필요합니다. 운영 비용.

그래서 감성 비주얼은 이미지로, 스펙·배송·환불 정보는 HTML 텍스트로
분리하는 구조가 늘고 있습니다.

이렇게 하면 어떤 기기에서도 글자가 깨지지 않고,
이미지 용량도 절반 가까이 줄어듭니다.

❓ 10. 자주 나오는 질문 모음

Q. 1000px으로 만들면 안 되나요?

가능합니다. 다만 스마트스토어에 올리면 860px로 축소되며,
축소 과정에서 얇은 폰트의 획이 약간 흐려질 수 있습니다.
축소 배율이 정수배가 아닐 때(1000→860, 0.86배) 리샘플링 품질이 가장 애매합니다.
그래서 차라리 860 정확히 맞추거나, 1720px(정확히 2배)로 가는 편이 깔끔합니다.

Q. 세로가 30,000px인데 괜찮나요?

권장하지 않습니다. 앞서 말한 메모리 문제와 더불어,
일부 플랫폼은 업로드 시 자동으로 잘라내거나 거부합니다.
3,000px 단위로 쪼개세요.

Q. PC와 모바일 상세페이지를 따로 만들어야 하나요?

예산이 되면 분리가 최선입니다.
PC는 가로가 넓어 2단 레이아웃이 가능하지만,
그 레이아웃을 모바일에서 축소하면 글자가 절반으로 줄어듭니다.

예산이 한정적이라면 모바일 우선(860px 1단 세로 구성)으로 만들고
PC에서도 그대로 노출하는 게 전환율 측면에서 유리합니다.
국내 커머스 트래픽의 약 70~80%가 모바일이기 때문입니다.

Q. 가로 스크롤이 생겨요.

이미지에 고정 px 폭을 준 경우입니다.
img{max-width:100%;height:auto;}를 적용하면 해결됩니다.
에디터를 쓴다면 이미지 폭을 100%로 지정하세요.

Q. 인스타 광고 소재도 860px로 되나요?

안 됩니다. SNS는 별도 규격입니다.
피드 1080×1080 또는 1080×1350, 스토리·릴스 1080×1920.
상세페이지와 광고 소재는 목적이 다른 별개의 산출물로 관리하세요.

🎁 마무리 : 숫자보다 원리를 기억하세요

정리하면 이렇습니다.

디자인은 감각의 영역 같지만,
상세페이지만큼은 계산이 8할입니다.

폭 하나를 제대로 정하는 것만으로
이미지 흐림, 로딩 지연, 글자 잘림 같은
클레임의 대부분이 사라집니다.

오늘부터 새 문서를 열 때,
습관처럼 860을 치기 전에
"이 채널의 CSS 폭 × DPR은 얼마지?"를 한 번만 떠올려 보세요.

그 한 번의 계산이 당신의 상세페이지를 선명하게 만듭니다. ✨