쇼핑몰 상세페이지 디자인 가이드북: 마켓별 너비부터 저장까지
안녕하세요, 상세뚝딱팀입니다. 쇼핑몰 상세페이지 디자인을 처음 시작하면 "그래서 가로 크기는 몇으로 만들어야 하지?", "한 장으로 저장해야 하나, 나눠서 저장해야 하나?" 같은 기본적인 질문부터 막힙니다. 디자인 감각이 있어도 규격과 순서를 모르면 같은 작업을 몇 번씩 다시 하게 됩니다. 이 글은 쇼핑몰 상세페이지 디자인 가이드북이 필요한 분들을 위해 제작 전에 알아야 할 기본기를 한 번에 정리한 안내서입니다. 마켓별 가로 너비, 구성 순서, 디자인 기본기, 저장 방식, 저장 후 점검까지 차례대로 확인하세요.
1. 마켓별 가로 너비 기준
상세페이지는 올리는 마켓에 따라 권장 가로 너비가 다릅니다. 너비를 맞추지 않으면 마켓에서 이미지가 줄어들어 글자가 작게 보이거나 양옆에 여백이 생길 수 있습니다. 상세뚝딱 다운로드 화면에서 마켓을 선택하면 해당 마켓의 권장 너비로 저장됩니다. 현재 화면에서 확인되는 기준은 다음과 같습니다.
| 마켓 | 권장 너비 |
|---|---|
| 쿠팡 | 780px |
| 네이버 스마트스토어 | 860px |
| 지마켓 | 860px |
| 11번가 | 800px |
| 카카오톡딜 | 720px |
| 토스 쇼핑 | 1000px |
위 값은 상세뚝딱 다운로드 화면에 표시되는 권장 너비이며, 마켓 정책과 에디터 규격은 바뀔 수 있습니다. 등록 전에 각 마켓 판매자센터의 최신 안내를 한 번 더 확인하세요. 원하는 너비가 따로 있으면 "너비 직접 지정"에서 숫자를 입력할 수 있습니다. 여러 마켓에 동시에 판매한다면 마켓을 함께 선택해 각 마켓에 맞는 너비로 저장하는 방식이 효율적입니다.
2. 상세페이지 구성 순서
너비를 정했다면 어떤 순서로 정보를 보여줄지 정합니다. 고객이 구매를 결정하는 순서에 맞추면 읽기 편합니다.
- 대표 혜택: 첫 화면에서 고객이 얻는 것
- 문제 공감: 고객이 겪는 불편
- 해결·기능: 핵심 기능 3가지 안팎
- 사용 장면: 실제로 쓰는 모습
- 상세 정보: 사양, 구성품, 사이즈
- 근거: 후기, 인증, 비교
- 안내: 배송, 교환·반품, 주의사항
모든 상품에 이 순서가 정답은 아닙니다. 다만 첫 화면에 혜택이 있고 마지막에 안내가 있다는 큰 원칙만 유지하면 대부분의 상품에서 무난하게 작동합니다.
3. 디자인 기본기
- 글자 크기: 모바일에서 읽히는 크기로 정합니다. 상세페이지는 대부분 모바일에서 보게 됩니다. 본문은 가능한 한 크게, 강조 문구는 더 크게 구분해 위계를 만드세요.
- 색상: 브랜드 색 1~2개와 보조색으로 통일합니다. 상세뚝딱의 컬러/폰트 일괄 변경 기능을 쓰면 전체 톤을 한 번에 맞출 수 있습니다.
- 여백: 섹션 사이 여백을 충분히 두면 정보가 구분되어 읽기 쉽습니다. 빽빽한 페이지는 정보가 많아도 오히려 덜 읽힙니다.
- 이미지 비율: 한 페이지에서 비율이 계속 달라지면 산만해 보입니다. 같은 종류의 컷은 비율을 맞추세요.
- 글꼴: 글꼴은 두 가지 이내로 제한하는 편이 안정적입니다.
디자인 기본기를 처음부터 하나하나 적용하기 어렵다면 템플릿을 활용하세요. 상세뚝딱 에디터의 왼쪽 블럭 패널에는 섹션별 템플릿이 있고, 템플릿의 텍스트를 더블클릭해서 바로 내 문구로 바꿀 수 있습니다. 필요한 섹션이 더 있으면 "+ 페이지 추가"로 늘릴 수 있습니다.
4. 저장 방식 선택
완성한 상세페이지를 저장할 때는 페이지별 분할과 전체 통이미지 중에서 고를 수 있고, 이미지 형식과 품질도 선택할 수 있습니다. 두 방식의 차이를 정리하면 아래와 같습니다.
일부만 수정할 일이 잦다면 분할 저장이, 업로드 횟수를 줄이고 싶다면 통이미지가 편할 수 있습니다. 다만 마켓마다 업로드 방식과 파일 용량·길이 제한이 다를 수 있으므로 등록 화면의 안내에 맞춰 선택하세요. 이미지 형식과 품질은 파일 용량과 선명도에 영향을 주므로, 처음에는 기본 설정으로 저장해 보고 용량 문제가 생기면 조정하는 순서를 권합니다.
5. 저장 후 마지막 점검
저장이 끝났다고 작업이 끝난 것은 아닙니다. 업로드 전 아래 항목을 꼭 확인하세요.
- PC와 모바일에서 모두 열어 글자가 잘리지 않는지
- 이미지 순서가 어긋나지 않았는지
- 배송·교환 안내가 포함되어 있는지
- 사양·옵션·구성품이 실제 상품과 같은지
자주 묻는 질문
Q. 여러 마켓에 올릴 때마다 새로 만들어야 하나요? A. 같은 디자인으로 마켓별 너비만 달리해서 저장할 수 있습니다. 다만 마켓별 정책과 노출 방식이 다를 수 있으므로 등록 후 미리보기를 꼭 확인하세요.
Q. 처음에는 어떤 마켓 너비로 시작하는 게 좋을까요? A. 가장 먼저 판매할 마켓의 너비로 시작하세요. 이후 다른 마켓에 올릴 때 너비를 바꿔 다시 저장하면 됩니다.
Q. 수정은 어떻게 하나요? A. 에디터에서 텍스트를 더블클릭해 바로 고치고 다시 저장하면 됩니다.
마치며
상세페이지 디자인은 감각보다 순서의 문제인 경우가 많습니다. 규격을 먼저 확인하고, 구성 순서를 잡고, 기본기를 적용하고, 저장과 점검까지 마치면 처음 만든 상세페이지도 충분히 쓸 만해집니다. 지금 만들고 있는 상세페이지를 보면서 이렇게 물어보세요. 올릴 마켓의 권장 너비를 확인했을까? 모바일에서 읽히는 글자 크기일까? 저장 방식은 마켓 안내에 맞게 골랐을까? 가이드를 읽었다면 이제 템플릿으로 직접 만들어 볼 차례입니다.
