DETAIL PAGE REFERENCE TEMPLATE
[제품 한줄 설명 — 사이즈, 핵심 소재, 대표 특징]
v2 · 2026.04 · 이태리정미소
| 브랜드 | 배운 것 | 적용 섹션 |
|---|---|---|
| Our Place 🇺🇸 | "이것 하나로 N개 대체" — 라이프스타일 > 스펙 | 인트로, 활용 섹션 |
| HexClad 🇺🇸 | 기술 차별점을 시각 인포그래픽으로 보여줌 | 소재/기술 섹션 |
| BALMUDA 🇯🇵 | 여백의 미학, 제품 하나에 전용 랜딩페이지 | 전체 레이아웃 |
| Vermicular 🇯🇵 | 장인정신 스토리텔링, 시네마틱 비주얼 | 신뢰/브랜드 섹션 |
| 위칙 🇰🇷 | 카테고리 관행 깨는 카피, 브랜드 동사화 | 카피라이팅 가이드 |
| Caraway 🇺🇸 | 색상이 곧 브랜드 — 컬러 네이밍 | 컬러 가이드 |
| Stanley 🇺🇸 | 100년 브랜드의 MZ 리브랜딩, 컬러 드롭 | 마케팅 전략 |
개요 · 경쟁 · 타겟 · 컨셉 · 톤앤매너 · 체크리스트
상세페이지의 뼈대. 이 섹션을 채우면 나머지 섹션이 자동으로 방향이 잡힙니다.
1️⃣ [가장 강력한 차별점] — [한줄 설명]
2️⃣ [두번째] — [한줄 설명]
3️⃣ [세번째] — [한줄 설명]
4️⃣ [네번째] — [한줄 설명]
5️⃣ [다섯번째] — [한줄 설명]
💡 Our Place는 "8가지를 대체하는 팬 하나"라는 단 하나의 메시지로 모든 상세페이지를 관통합니다.
→ 우리 제품의 "한 문장"은 뭔가요?
추상적인 "20~30대 주부" 대신 실제 인물처럼 구체화. 카피·사진·FAQ 쓸 때 "이 사람이 꽂힐까?" 자문하는 기준이 된다.
| 이름 | [가상 이름] |
| 나이/직업 | [나이] / [직업] |
| 가족/주거 | [가족 구성] / [주거 형태] |
| 고민 | [이 제품 카테고리에서 불편했던 점 2~3개] |
| 구매 결정 요인 | [살 만한 이유 top 3] |
| 안 사는 이유 | [망설이는 이유] |
| 꽂힐 카피 | "[예시 카피]" |
PURCHASE JOURNEY
1. 인지 — [어떤 불편/계기로 검색하게 되나?]
2. 고려 — [어떤 대안들을 비교하나?]
3. 비교 — [상세페이지에서 뭘 확인하나?]
4. 망설임 — [마지막으로 뭘 걱정하나? → 상페 어디서 해소?]
5. 구매 — [결정 트리거는?]
| 이름 | [가상 이름] |
| 나이/직업 | [나이] / [직업] |
| 가족/주거 | [가족 구성] / [주거 형태] |
| 고민 | [다른 각도의 니즈] |
| 구매 결정 요인 | [살 만한 이유] |
| 안 사는 이유 | [망설이는 이유] |
| 꽂힐 카피 | "[예시 카피]" |
PURCHASE JOURNEY
1. 인지 — [어떤 불편/계기로 검색하게 되나?]
2. 고려 — [어떤 대안들을 비교하나?]
3. 비교 — [상세페이지에서 뭘 확인하나?]
4. 망설임 — [마지막으로 뭘 걱정하나? → 상페 어디서 해소?]
5. 구매 — [결정 트리거는?]
작성 팁
• 실제 지인 1명 머릿속에 얹고 써. "우리 언니" "박대리" → 그 사람 기준으로 써야 생생함
• 고민은 "이 제품 없어서 겪은 불편"으로 구체화 (막연한 것 금지)
• "꽂힐 카피" 칸이 공란이면 나머지가 부실하다는 뜻 — 다시 적어
"삶지 말고 위칙하세요" — 브랜드를 동사로 만들었다.
우리도 생각해보자: "[동작]하지 말고, [브랜드/제품명]하세요" 형태가 가능한가?
[메인 카피 — 짧고 강렬하게]
[서브 카피 — 메인을 한줄 풀어서]
[제품 핵심 키워드 나열]
| 원칙 | 설명 | 예시 (나쁜 → 좋은) |
|---|---|---|
| 스펙 + 감성 병기 | 스펙만 나열 X, 감성만도 X. 기능(논리) + 체감(감성) 둘 다 넣기. | "3중 구조" → "통3중으로 열이 고르게 퍼져, 맛이 균일해집니다" |
| 짧게, 한 호흡에 | 한 문장 15자 이내. 숨 한번에 읽히게. | "다양한 요리가 가능합니다" → "팬 하나로, 다." |
| 카테고리 관행 깨기 | 경쟁사가 다 하는 말은 하지 않기. | "최고급 프리미엄~" → (역발상 카피) |
| 질문으로 시작 | 고객의 불만/의문으로 훅. | "좋은 냄비 소개~" → "뚜껑이 덜그럭거리나요?" |
| 항목 | 방향 |
|---|---|
| 메인 컬러 | [색상명 + HEX] — [이 색이 전달하는 감정] |
| 서브 컬러 | [색상명 + HEX] |
| 무드 | [3~5단어로 무드 정의] |
| 카피 톤 | [톤 설명] |
| 금지 | ❌ [하면 안 되는 것 3가지] |
💡 Caraway는 색상에 이름을 붙여서 브랜드를 만들었다: Cream, Sage, Terracotta, Marigold. 색상이 곧 아이덴티티.
필요한 섹션만 ON. 순서 변경 자유. 각 섹션에 레퍼런스 이미지와 디자인 노트 포함.
| # | 섹션 | ON/OFF | 비고 |
|---|---|---|---|
| 01 | 인트로 — THE HOOK (첫인상) | ✅ 필수 | 히어로 이미지 + 메인 카피 |
| 02 | 신뢰 — TRUST (브랜드/인증) | ✅ 필수 | 브랜드 스토리, 인증, 수상 |
| 03 | 핵심 기능 A — HERO FEATURE | ✅ 필수 | 가장 강력한 셀링포인트 |
| 04 | 핵심 기능 B — TECH | 선택 | 소재/기술 차별점 |
| 04-B | 비교 — COMPARISON | 선택 | 시중 제품 / 대체재 비교표. 비교 대상 명확할 때 ON |
| 05 | 사이즈/옵션 — SIZE | 선택 | 사이즈 가이드, 옵션 비교 |
| 06 | 활용법 — MULTI-USE | 선택 | 다용도 활용, 레시피 |
| 07 | 호환성 — COMPATIBILITY | 선택 | IH, 세척, 열원 등 |
| 08 | 라이프스타일 — LIFESTYLE | ✅ 필수 | 실생활 연출, 감성 사진 |
| 09 | 스펙 — SPEC & PACKAGE | ✅ 필수 | 상세 스펙, 구성품, 박스 |
| 10 | FAQ | ✅ 필수 | 자주 묻는 질문 |
10개 섹션 × (디자이너 노트 + 사진 노트)
[브랜드 — 라인명]
[핵심 기능 키워드 · 기능 키워드] ← 작게, 먼저
[서브 카피 — 메인을 풀어서] ← 보통 크기
디자이너 노트 (BALMUDA 참고):
• 여백 충분히. 제품 하나가 화면의 60% 이상 차지
• 텍스트는 제품 위 or 아래에 겹치지 않게
• 뱃지(인증/특징)는 하단에 일렬로 작게
• BALMUDA는 "The Toaster"처럼 정관사를 써서 유일함을 강조
사진 촬영 노트 → 사진작가한테 전달할 것
| 필요 사진 | 히어로 샷 — 제품 대표 이미지 (정면 45° or 다크 배경) |
| 컷수 | 1~3컷 (각도/배경 다르게) |
| 참고 CUT | PART 3 → 히어로 |
| 예시 레퍼런스 | 레퍼런스 이미지 1~2장 |
1단 (작게): 핵심 기능 키워드 나열 — "이게 뭔지" 3초 안에 전달
2단 (크게): 감성 메인 카피 — 기억에 남는 한 문장
3단 (보통): 서브 카피 — 메인을 한줄 풀어서
⚠️ 브랜드 인지도 낮을 때 감성만 쓰면 "그래서 뭔데?" → 이탈.
기능을 먼저 깔아주면 감성 카피에 의미가 생긴다.
BALMUDA/다이슨은 이미 알아서 감성만 OK. 신규 브랜드는 기능+감성 필수.
듀얼 코딩 이론: 감성(이미지) + 논리(스펙) 동시 → 기억 보존율 2배.
[브랜드 신뢰 카피]
[브랜드명] — [핵심 크레덴셜]
☐ 브랜드 역사/전통 (몇 년?)
☐ 인증/수상 (KC, FDA, Red Dot 등)
☐ 소재 원산지 (어디 제조?)
☐ 누적 판매량 or 리뷰 수
☐ 셀럽/셰프 협업 (있다면)
☐ 미디어 노출 (방송, 잡지)
디자이너 노트 (Vermicular 참고):
• 브랜드 스토리는 감성 카피 + 객관적 근거(숫자/연도) 병기
• 인증 배지는 작게 가로로 정렬 — 요란하지 않게, 신뢰만 전달
• "N년 전통의 OO"처럼 시간을 강조하는 표현 활용
• 장인/장비/공정 사진 1장으로 "진짜 만드는 사람" 인상 전달
사진 촬영 노트 → 사진작가한테 전달할 것
| 필요 사진 | 브랜드/인증/각인 클로즈업 (MADE IN KOREA, 브랜드 마크 등) |
| 컷수 | 2~3컷 |
| 참고 CUT | PART 3 → 기능 매크로 |
| 예시 레퍼런스 | 레퍼런스 이미지 1~2장 |
85년 주물공장의 장인정신을 시네마틱 영상과 시적인 카피로 전달한다.
"우리 브랜드만의 시간/역사/철학"을 한 문장으로 — 이게 이 섹션의 전부.
Vermicular 예시: "우리는 매일 아침, 같은 금형 앞에 선다. 1936년부터."
이 섹션 = 가장 강력한 셀링포인트 1개. "이 제품을 사는 이유" 하나만.
[질문형 카피 — 고객의 불만을 건드리기]
[답변 — 우리 제품이 해결하는 방법]
이 섹션에서 가장 효과적인 GIF:
① [기능이 작동하는 3~5초 클립]
② [일반 제품 vs 우리 제품 나란히 비교]
일반 제품
[일반 제품의 문제 1]
[일반 제품의 문제 2]
[일반 제품의 문제 3]
✅ 우리 제품
[우리가 해결하는 것 1]
[우리가 해결하는 것 2]
[우리가 해결하는 것 3]
디자이너 노트 (HexClad 참고):
• 기술 차별점은 매크로 사진 한 장으로 — 설명보다 시각이 빠르다
• 기능 이름 → 체감(고객이 느끼는 결과)로 번역해서 쓰기
• GIF 옆에는 한 문장 설명 (동작 + 효과) 만 배치
• 매크로 컷은 여백을 살려 "이것만 보면 안다" 느낌으로
사진 촬영 노트 → 사진작가한테 전달할 것
| 필요 사진 | 핵심 기능 매크로 (클로즈업) + 작동 GIF |
| 컷수 | 사진 1~2컷 + GIF 1개 |
| 참고 CUT | PART 3 → 기능 매크로, GIF |
| 예시 레퍼런스 | 레퍼런스 이미지 1~2장 |
헥사곤 패턴 표면을 극대화한 매크로 사진이 상세페이지의 핵심.
"이것만 보면 기술이 뭔지 안다" — 한 장의 사진이 설명 100줄을 대체하는 것이 목표.
[기술 카피 — "OO과 OO은 다릅니다."]
[한줄 부연]
[기술이 시각적으로 드러나는 애니메이션/모션 설명]
| 층/부위 | 소재 | 역할 |
|---|---|---|
| [부위1] | [소재명] | [기능 설명] |
| [부위2] | [소재명] | [기능 설명] |
| [부위3] | [소재명] | [기능 설명] |
디자이너 노트 (인포그래픽):
• 3중 구조 등 레이어는 단면도 인포그래픽으로 시각화
• 숫자 스펙(mm, 중량)은 크게, 단위는 작게 — 시각적 위계
• 경쟁사 대비 어떤 차이인지 한 문장으로 명확히
• 아이콘은 선 굵기 통일, 컬러는 2색 이내로 절제
사진 촬영 노트 → 사진작가한테 전달할 것
| 필요 사진 | 소재 단면/구조 매크로 (인포그래픽 대체 가능) |
| 컷수 | 1~2컷 |
| 참고 CUT | PART 3 → 기능 매크로 |
| 예시 레퍼런스 | 레퍼런스 이미지 1~2장 |
구매 결정을 만드는 섹션. "이게 좋다"보다 "이게 저것보다 왜 좋은지"가 설득력 있다. (앵커링 효과)
비교 대상이 명확할 때만 ON. 차별점이 약하면 억지 비교보다 OFF가 낫다.
⚠️ 법적 주의 — 경쟁사 브랜드명 직접 표기 금지
표시광고법 제3조: "부당 비교광고" → 과징금 매출 2% or 5억, 형사처벌 2년 이하 징역
쿠팡: 타 브랜드명 삽입 시 판매 중단 사례 있음
→ "시중 일반 OO" / "시중 프리미엄 OO"으로 표현. 브랜드명/제품명 절대 넣지 않기.
| 비교 유형 | 언제 쓰나 | 예시 |
|---|---|---|
| 동일 카테고리 (기본) | 거의 항상. 같은 종류 제품 간 차별점 보여줄 때 | 우리 그릴팬 vs 시중 일반 그릴팬 vs 시중 프리미엄 그릴팬 |
| 대체재 (선택) | 고객이 실제로 다른 카테고리 제품으로 대체하고 있을 때만 | 그릴팬 vs 에어프라이어 / 찜냄비 vs 전기찜기 |
💡 대체재 비교는 "고객이 실제로 저걸로 대신하고 있는가?"가 기준. 억지 비교 금지.
[비교 질문 카피 — "OO으로 굽고 계신가요?"]
[한 줄 서브카피 — 비교의 결론]
| 우리 제품 | 시중 일반 OO | 대체재 (선택) | |
|---|---|---|---|
| [비교항목1] | ✅ | ❌ | ❌ |
| [비교항목2] | ✅ | ❌ | △ |
| [비교항목3] | ✅ | △ | ❌ |
| [비교항목4] | ✅ | ✅ | ❌ |
* 비교 항목은 사실 기반만. 주관적 표현("맛없음", "별로") 금지 — 팩트만 표로.
디자이너 노트 (HexClad 참고):
• 비교표는 인포그래픽으로 — 텍스트 나열보다 ✅/❌ 시각 아이콘이 3배 빠르다
• 우리 제품 열(column)만 컬러 강조, 나머지는 뉴트럴톤
• 경쟁 제품을 "깎아내리는 톤" 금지 — 중립적으로 사실만 나열하면 오히려 신뢰감 상승
• 비교 결론을 한 문장으로 하단에 배치 (예: "유리뚜껑이 만드는 차이")
제작 노트 → 디자이너가 제작 (실촬 불필요)
| 기본 (필수) |
비교표 인포그래픽 — 우리 제품 실사진 + AI 생성 "시중 일반" 이미지로 제작 → 사진작가 촬영 불필요. 디자이너가 비교표 그래픽으로 만들면 됨. |
| 선택 | 🎬 비교 GIF — 나란히 두고 차이 시각화 (3~5초) |
| 컷수 | 인포그래픽 1장 (필수) + GIF 0~1개 (선택) |
HexClad는 "스테인리스 vs 논스틱 vs HexClad" 3열 비교표를 상세페이지 핵심 섹션으로 씀.
비교표 하나가 설명 10줄을 대체한다. 고객은 "뭐가 다른데?"에 가장 빠르게 반응한다.
사이즈가 여러 개인 제품에서 "어떤 거 사야 되지?" 해결.
디자이너 노트 (옵션 비교):
• 옵션 카드를 그리드로 배치 — 한눈에 비교 가능하게
• 각 사이즈에 "이럴 때 추천" 라벨 (용도 제안)
• 일상 소품(사과, 핸드폰, 손) 대비로 크기 체감 시각화
• 옵션 간 가격 차이가 있다면 가치 차이도 한 줄로 보여주기
[활용 카피]
연출 촬영 2~3컷 + AI 생성으로 나머지 채우기
[다용도 활용을 보여주는 시퀀스 — 조립/분해, 모드 전환 등]
디자이너 노트 (Our Place 참고):
• "이것 하나로 N개 대체" — 경제성·공간효율 메시지 핵심
• 활용 장면 그리드 (조리/찜/보관 등) — 3~6컷 균일한 톤앤매너
• GIF로 모드 전환 보여주기 (2~3초, 루프 자연스럽게)
• 각 장면에 한 단어 라벨만 — 설명 길어지면 효과 반감
사진 촬영 노트 → 사진작가한테 전달할 것
| 필요 사진 | 다양한 용도 장면 (조립/변환 GIF 포함) |
| 컷수 | 2~3컷 + GIF 1개 |
| 참고 CUT | PART 3 → GIF |
| 예시 레퍼런스 | 레퍼런스 이미지 1~2장 |
"Always Pan은 8가지 조리도구를 대체합니다" — 숫자가 주는 임팩트.
"이 [제품]으로 [숫자]가지가 됩니다" — 구체적 숫자가 구매 결정을 만든다.
"[호환성 카피]"
[부연 설명]
디자이너 노트 (아이콘 & 안내):
• 호환 열원 아이콘 가로 배열 (IH/가스/인덕션/오븐) — 균일한 크기
• 세척 방법은 3단계 이내로 간결하게, 순서 번호 명확히
• 주의사항은 작게, 핵심만 — 공포 마케팅 금지
• 가능/불가능은 체크/엑스 아이콘으로 직관적으로
사진 촬영 노트 → 사진작가한테 전달할 것
| 필요 사진 | 인덕션/가스 위 사용 장면 |
| 컷수 | 1~2컷 |
| 참고 CUT | PART 3 → 기능 매크로 |
| 예시 레퍼런스 | 레퍼런스 이미지 1~2장 |
디자이너 노트 (Our Place 참고):
• 제품이 "주인공"이 아니라 "일상의 일부"처럼 보이게
• 사람의 손, 식재료, 수증기, 린넨 냅킨 — 생활감 있는 소품
• 오버헤드 앵글(위에서 내려다보기) + 45도 앵글 믹스
• 인스타그램에 바로 올릴 수 있는 컷 = 상세페이지에도 좋은 컷
사진 촬영 노트 → 사진작가한테 전달할 것
| 필요 사진 | 실제 사용 장면 + 요리 연출 (실촬 필수) |
| 컷수 | 2컷 실촬 + AI 보충 |
| 참고 CUT | PART 3 → 라이프스타일 |
| 예시 레퍼런스 | 레퍼런스 이미지 1~2장 |
| 항목 | 내용 |
|---|---|
| 재질 | [상세 소재] |
| 사이즈 | [치수] |
| 무게 | [무게] |
| 열원 | [호환 열원] |
| 생산지 | [제조국] |
| 구성 | [구성품 목록] |
디자이너 노트 (스펙 테이블):
• 스펙 테이블은 2열 그리드 — 항목명(왼쪽) / 값(오른쪽)
• 중요 스펙(재질/사이즈/무게)은 굵게, 나머지는 일반
• 구성품은 아이콘/썸네일 + 텍스트 병기로 한눈에 확인
• 박스 이미지는 선물용 어필 — 여백 충분히, 프리미엄 느낌
Q. [가장 많이 묻는 질문 1]
A. [명확한 답변]
Q. [질문 2]
A. [답변]
Q. [질문 3]
A. [답변]
Q. [질문 4]
A. [답변]
💡 FAQ는 "고객이 진짜 묻는 것"으로. 네이버 쇼핑 Q&A, 리뷰 불만에서 추출.
디자이너 노트 (FAQ 구조):
• Q&A 아코디언 형식 권장 (모바일에서 스크롤 부담 감소)
• 가장 중요한 3~5개만 상단 노출, 나머지는 접어두기
• 답변은 길어도 OK — 구매 전 마지막 망설임을 해소하는 자리
• Q는 굵게, A는 일반 — 시각적 계층으로 읽기 쉽게
사진 촬영 노트 → 사진작가한테 전달할 것
| 필요 사진 | (선택) 자주 묻는 포인트 이미지 |
| 컷수 | 0~2컷 (선택) |
| 참고 CUT | PART 3 → (해당 없음) |
| 예시 레퍼런스 | 레퍼런스 이미지 1~2장 |
사진 + GIF + 영상 + AI
📸 실촬 필수 | 🎬 GIF/영상 촬영 | 🤖 AI 생성 가능
AI: Kling / Imagen / Veo | 인포그래픽: 미주 직접 (Figma/Canva) | 실촬 톤앤매너에 맞춰 후보정 필수
| 상페 섹션 | 제작물 | 소스 | 담당 |
|---|---|---|---|
| 03. 핵심 기능 A | GIF + 비교표 | CUT 07 촬영분 | |
| 04. 소재/기술 | GIF 인포그래픽 | 그래픽 제작 or CUT 08 | |
| 06. 활용법 | GIF 시퀀스 | CUT 12 촬영분 | |
| 08. 라이프스타일 | GIF + 이미지 그리드 | CUT 14,15 + AI |
| 채널 | 포맷 | 제약 |
|---|---|---|
| 카페24 (자사몰) | HTML + 찰나 영상 | script 1회 OK, 반복루프 차단 |
| 쿠팡 | IMAGE only + YouTube embed | HTML 불가, 이미지만 |
| 네이버 | HTML + GIF + img | GIF 자유, iframe OK |
실제 쿠팡/네이버/카페24 모바일에서 보이는 너비 기준. 디자이너 참고용.
💡 모바일 디자인 규칙:
• 한 화면에 메시지 1개만. 스크롤하면 다음 메시지.
• 텍스트 최소 14px (모바일에서 12px 이하는 안 보임)
• 좌우 패딩 최소 20px (빡빡하면 싸 보임)
• 이미지 세로 비율 — 가로로 넓은 이미지는 모바일에서 작아짐
• clamp() 사용: font-size:clamp(16px, 4vw, 24px)
1. 이 HTML 파일을 복사 → 제품명으로 저장
2. TEMPLATE 표시된 곳만 채우기 (나머지는 고정 구조)
3. OVERVIEW → CONCEPT → 섹션 ON/OFF → 촬영 가이드 순서로
4. 레퍼런스 이미지를 제품에 맞게 교체 (핀터레스트/언스플래시 검색)
5. Netlify 배포 → 링크 공유
6. 배포링크_모음.md에 추가
| 양식 | 용도 | 상태 |
|---|---|---|
| 주방기기 상페 레퍼런스 | 냄비, 팬, 그리들 등 주방기기 | ✅ 이 파일 |
| 식품 상페 레퍼런스 | 바질페스토, 파스타 등 식품 | 🔜 제작 예정 |
주방기기 상세페이지 레퍼런스 양식 v1 · 2026.04 · 이태리정미소
다음 제품부터 이 파일 복사해서 내용만 바꾸면 됩니다.
DETAIL PAGE REFERENCE TEMPLATE v1
좋은 상세페이지는
좋은 레퍼런스에서 시작됩니다.
이태리정미소 · 2026.04