상세페이지 사이즈 기준을 정할 때 많은 운영자가 "보기 좋은 비율"을 먼저 고른다. 그러나 전환을 결정하는 것은 미감이 아니라 사용자가 정보를 소화하는 순서와 속도다. 사이즈는 그 흐름을 제어하는 구조적 변수다.
사이즈가 전환에 영향을 미치는 이유
상세페이지는 단순한 이미지 나열이 아니다. 방문자는 스크롤하면서 구매 여부를 판단한다. 이 판단 과정에서 이미지 너비, 텍스트 가독 영역, 섹션 간 여백이 인지 부하를 결정한다.
너비가 지나치게 넓으면 모바일에서 텍스트가 잘리거나 이미지가 축소되어 핵심 정보가 사라진다. 반대로 너비가 지나치게 좁으면 데스크톱 환경에서 여백이 과도하게 생겨 페이지가 빈약해 보인다. 두 극단 모두 이탈을 유도한다.
핵심은 플랫폼 렌더링 환경과 타깃 디바이스 비율을 먼저 확인하는 것이다. 사이즈 결정은 디자인 취향이 아니라 데이터 기반 선택이어야 한다.
플랫폼별 상세페이지 사이즈 기준 비교
자사몰(카페24·아임웹) 환경
카페24와 아임웹 기준으로 상세페이지 권장 너비는 860px에서 1,200px 사이다. 다만 이 범위 안에서도 선택이 갈린다.
- 860px: 모바일 우선 설계, 텍스트 밀도가 높은 제품(보충제, 기능성 식품)에 적합
- 1,000px: 이미지 중심 제품(패션, 인테리어 소품)에서 가장 범용적으로 사용
- 1,200px: 와이드 레이아웃을 지원하는 테마 전용. 일반 테마에서 적용하면 좌우 잘림 발생
이미지 파일 자체의 가로 해상도는 최소 800px 이상으로 제작하되, 실제 렌더링 너비의 2배 해상도(레티나 대응)로 준비하는 것이 표준이다. 예를 들어 렌더링 너비 1,000px이면 원본 이미지는 2,000px로 제작한다.
스마트스토어·쿠팡 입점몰 환경
입점 플랫폼은 너비를 플랫폼이 강제한다. 스마트스토어는 상세페이지 이미지 권장 너비를 860px로 명시하고 있다. 쿠팡은 최대 너비 1,000px을 기준으로 하되, 모바일 앱 트래픽 비중이 높아 860px 기준으로 제작하는 것이 안전하다.
입점몰에서 1,200px 이상 이미지를 올리면 플랫폼이 자동 리사이징하면서 텍스트 선명도가 떨어진다. 이 경우 가격 표기나 성분 정보가 흐릿하게 렌더링되어 신뢰도를 낮춘다.
비커머스 업종의 상세페이지 기준
병원 랜딩페이지, 학원 수강 안내 페이지, 부동산 분양 상세 페이지는 이커머스와 다른 기준이 적용된다.
이들 페이지는 이미지보다 텍스트와 표, 인포그래픽 비중이 높다. 너비 기준보다 섹션 높이와 스크롤 깊이가 전환에 더 직접적으로 연결된다.
예를 들어 피부과 시술 안내 페이지라면, 시술 전후 이미지 섹션은 1,000px 너비로 충분하지만 가격표와 주의사항 섹션은 760px 이하 너비에 좌우 패딩을 충분히 확보해야 모바일에서 가독성이 유지된다. 학원 커리큘럼 페이지는 표 형태 콘텐츠가 많아 모바일에서 가로 스크롤이 생기지 않도록 860px 이하 기준을 지키는 것이 우선이다.
전환 판단을 위한 사이즈 결정 프레임워크
사이즈를 고를 때 순서는 다음과 같다.
1. 디바이스 비율 확인: 구글 애널리틱스 또는 플랫폼 통계에서 모바일 트래픽 비율을 확인한다. 모바일이 60% 이상이면 860px 기준을 우선 적용한다.
2. 플랫폼 제약 확인: 입점몰이라면 플랫폼 가이드라인이 최우선이다. 자사몰이라면 테마 최대 너비를 먼저 확인한다.
3. 콘텐츠 유형 분류: 이미지 중심인지, 텍스트·표 중심인지에 따라 너비와 여백 비율이 달라진다.
4. 파일 용량 점검: 이미지 너비를 키울수록 파일 용량이 증가한다. 상세페이지 총 용량이 3MB를 초과하면 로딩 속도 저하로 이탈이 발생한다. 이미지 최적화(WebP 변환, 압축)를 사이즈 결정과 함께 진행한다.
이 네 단계를 거치지 않고 "다른 브랜드가 쓰는 사이즈"를 그대로 복사하면, 자신의 플랫폼과 트래픽 구조에 맞지 않는 설정이 된다.
업종별 사례로 보는 사이즈 선택의 차이
자사몰 뷰티 브랜드 사례
아임웹 기반으로 운영하는 스킨케어 자사몰을 가정한다. 이 몰의 모바일 트래픽 비율이 75%라면, 1,200px 와이드 이미지를 올렸을 때 모바일에서 이미지가 축소 렌더링되면서 성분 텍스트가 읽히지 않는다. 860px 기준으로 전환하면 모바일에서 텍스트 선명도가 유지되고, 성분 정보를 읽는 사용자의 스크롤 깊이가 늘어난다.
부동산 분양 상세 페이지 사례
분양 안내 페이지는 평면도, 입지 지도, 가격표가 핵심 콘텐츠다. 평면도 이미지는 디테일이 중요하므로 1,000px 이상 너비를 유지해야 하지만, 가격표 섹션은 모바일에서 표가 깨지지 않도록 반응형 처리 또는 760px 이하 너비 설계가 필요하다. 데스크톱과 모바일에 동일한 사이즈를 적용하면 어느 한쪽에서 반드시 정보 손실이 발생한다.
학원 수강 안내 페이지 사례
온라인 입시 학원의 수강 상세 페이지를 가정한다. 커리큘럼 표와 강사 소개 이미지가 혼재하는 구조에서 이미지 너비를 1,200px로 설정하면, 강사 소개 이미지는 선명하지만 커리큘럼 표가 모바일에서 가로 스크롤 영역으로 밀려난다. 이 경우 이미지 섹션과 텍스트 섹션의 너비 기준을 분리 설계하거나, 전체 기준을 860px로 통일하고 이미지 품질을 레티나 대응으로 보완하는 것이 현실적인 해결책이다.
FAQ
Q. 상세페이지 사이즈를 바꾸면 기존 이미지를 전부 다시 제작해야 하나
기존 이미지가 권장 너비보다 크게 제작되어 있다면 리사이징으로 대응 가능하다. 반대로 기존 이미지가 권장 너비보다 작으면 확대 시 화질이 저하되므로 재제작이 필요하다. 작업 전 기존 이미지의 원본 해상도를 먼저 확인한다.
Q. 모바일과 데스크톱에 다른 사이즈를 적용할 수 있나
자사몰(카페24, 아임웹)에서는 반응형 CSS를 통해 디바이스별로 다른 너비 기준을 적용할 수 있다. 다만 상세페이지 이미지 자체는 하나의 파일로 올라가므로, 이미지 내부에 텍스트를 삽입한 경우 모바일 렌더링에서 텍스트가 작아지는 문제가 생긴다. 텍스트는 이미지 외부 HTML 영역에 배치하는 것이 구조적으로 안전하다.
Q. 상세페이지 총 이미지 용량 기준은 어떻게 잡아야 하나
플랫폼별 업로드 제한과 별개로, 사용자 경험 기준에서 상세페이지 총 용량은 3MB 이하를 권장한다. 이미지가 많은 경우 WebP 형식으로 변환하면 동일 품질 대비 파일 크기를 줄일 수 있다. 이미지 최적화 없이 너비와 해상도만 높이면 로딩 지연이 발생한다.
다음 글에서는 상세페이지 사이즈 기준을 잡은 이후, 생성형 AI를 활용해 섹션별 카피와 레이아웃 구조를 설계하는 프롬프트 작성법을 다룬다.