FEATURES
상세페이지 한 장을 끝내는 데 필요한 전부
기획, 디자인, 문구, 이미지, 내보내기. 각각 다른 도구를 쓰던 과정을 한 화면에 모았습니다.
AI PLANNING
무엇을 어떤 순서로 보여 줄지부터 정합니다
예쁜 페이지가 아니라 팔리는 페이지를 만드는 건 순서입니다. 구매자가 스크롤하며 떠올리는 질문을 순서대로 처리하도록 섹션을 배치합니다.
- 01 카테고리별 전환 구조 패션은 사이즈, 뷰티는 성분, 가전은 비교표. 카테고리마다 다른 순서를 적용합니다.
- 02 반론 선제 대응 구매자가 가질 걱정 3~5가지를 뽑아 FAQ 와 안내 블록으로 먼저 해소합니다.
- 03 근거를 함께 제시 왜 이 순서인지 설명을 함께 돌려주므로, 수정할 때 무엇을 건드려야 하는지 알 수 있습니다.
- 04 거짓 정보를 만들지 않음 브리프에 없는 수치·인증·효능은 비워 두고 입력 자리만 만듭니다.
BLOCKS
상세페이지 전용 블록 28종
범용 디자인 툴에서 매번 표를 그리고 아이콘을 찾을 필요가 없습니다. 상품 고시 정보, 사이즈 표, 배송 안내처럼 커머스에만 필요한 블록까지 준비해 두었습니다.
아래 그림은 템플릿의 실제 블록을 그대로 그린 것입니다.
구조
키비주얼
첫 화면에서 시선을 잡는 대표 이미지와 헤드라인
섹션 제목
섹션을 나누는 제목과 부제
구분선 — 시각적으로 구간을 끊는 선· 여백 — 블록 사이 호흡을 주는 빈 공간
콘텐츠
본문
설명 문단. 글자 크기와 줄 간격을 고를 수 있습니다
핵심 포인트
체크 아이콘과 함께 장점을 나열. 상자에 담으면 추천 대상 카드가 됩니다
강조 문구
한 문장으로 각인시키는 큰 글씨
기능 카드
아이콘 + 제목 + 설명 카드를 격자로 배치
사용 방법
번호가 붙은 단계별 사용 안내
브랜드 스토리
연도나 단계로 이어지는 브랜드 서사
포인트 섹션
라벨 · 두 줄 제목 · 설명 · 큰 사진을 한 묶음으로. 상세페이지 본문의 기본 단위
미디어
이미지
단일 이미지. 캡션과 라운드 처리 가능
이미지 갤러리
2~4열 그리드로 여러 이미지를 배치
라인업 · 구성
사진 · 이름 · 설명 카드. 성분, 색상 옵션, 구성품을 나란히
전후 비교
두 사진을 겹쳐 사용 전후를 비교
영상 / GIF
자동 재생 영상 또는 GIF
부분 설명 사진 — 상품 사진의 부분마다 선을 그어 이름과 설명을 붙입니다. 소재 · 구조 · 성분을 보여 줄 때
설득
숫자 강조
판매량 · 재구매율 같은 숫자를 크게 강조
그래프 지표
막대 · 원형 그래프로 수치를 비교
고객 후기
별점과 함께 고객 리뷰를 인용
비교표
경쟁 상품과 항목별로 비교
인증 · 수상
시험 성적서 · 수상 내역 배지
쿠폰 · 혜택
할인 쿠폰과 사은품 혜택 안내
상품 정보
상품 정보
소재 · 용량 · 제조사 등 상품 고시 정보
사이즈 표
사이즈별 실측 치수 표
자주 묻는 질문
구매 전 걱정을 미리 해소하는 문답
배송 · 교환 안내
배송 · 교환 · 반품 정책 안내
마무리
구매 유도
지금 구매하도록 밀어주는 마지막 배너
EDITOR
익숙한 방식으로 편집합니다
왼쪽에 섹션 목록, 가운데 캔버스, 오른쪽에 속성. 디자인 툴을 써 보셨다면 설명 없이 바로 쓰실 수 있습니다.
- 1 캔버스에서 바로 수정 텍스트를 클릭해 그 자리에서 고칩니다. 별도 입력창을 열지 않습니다.
- 2 원하는 자리에 섹션 넣기 섹션 경계의 + 를 누르면 그 자리에 들어갈 디자인 섹션을 고를 수 있습니다.
- 3 끌어서 순서 변경 섹션 패널에서 블록을 끌어 순서를 바꿉니다. 캔버스가 즉시 따라옵니다.
- 4 되돌리기 50단계 Ctrl+Z 로 되돌리고 Ctrl+Shift+Z 로 다시 실행합니다.
- 5 자동 저장과 버전 편집을 멈추면 알아서 저장하고, 중요한 시점에 이름을 붙여 남깁니다.
- 6 모바일 미리보기 구매자 대부분이 모바일로 봅니다. 폭을 바꿔 가며 바로 확인합니다.
디자인 섹션
템플릿에서 뽑은 완성 섹션을 지금 페이지의 색과 글꼴로 미리 보고 넣습니다.
스타일 한 번에 바꾸기
색 · 글꼴 · 모서리 묶음을 카드 한 번으로 입히고, 마음에 들지 않으면 되돌립니다.
내용과 디자인을 나눈 속성 칸
문구 · 사진은 내용 탭에서, 모양 · 여백 · 배경은 디자인 탭에서 고칩니다.
EXPORT
채널 규격에 맞춰 알아서 나눕니다
채널마다 권장 폭과 장당 용량 제한이 다릅니다. 프리셋을 고르면 긴 이미지를 제한에 맞춰 자동 분할하고 파일명에 순서를 붙여 줍니다.
| 채널 | 권장 폭 | 분할 높이 | 장당 제한 |
|---|---|---|---|
| 네이버 스마트스토어 | 860px | 4,000px | 10MB |
| 쿠팡 | 780px | 3,000px | 5MB |
| 11번가 | 800px | 분할 없음 | 10MB |
| G마켓 · 옥션 | 860px | 4,000px | 10MB |
| Amazon A+ | 970px | 600px | 2MB |
| Shopify | 1200px | 4,000px | 20MB |
| Cafe24 / 자체몰 | 1000px | 분할 없음 | 20MB |
| 직접 설정 | 860px | 분할 없음 | 20MB |
- PNG 이미지
- 투명도를 유지한 고화질 이미지. 분할 저장을 지원합니다.
- JPG 이미지
- 용량이 작아 마켓플레이스 업로드에 적합합니다.
- WebP 이미지
- 같은 화질에서 JPG 보다 용량이 작습니다. 자사몰 · 카페24 에 알맞습니다.
- PDF 문서
- 거래처 · 촬영팀에 보내거나 인쇄할 때 씁니다.
- HTML 코드
- 반응형 HTML + 인라인 CSS. 자체몰에 바로 붙일 수 있습니다.
- 전체 패키지 (ZIP)
- 이미지·HTML·에셋·문서를 한 번에 내려받습니다.
- 문서 JSON
- 다른 프로젝트로 그대로 옮길 수 있는 원본 문서입니다.
- Figma 가져오기용 JSON
- Figma 플러그인으로 불러올 수 있는 레이어 구조입니다.
