fouring-tools에서 node create-product.js "[제품명]" 실행 → Drive에 폴더 자동 생성
기획자 (민지홍)
제품 이미지 원본 업로드
01_images/original/ 폴더에 업로드. 파일명 정리 필수
📌 왜 필요한가? 기획자가 Claude에게 제품을 이해시키기 위한 자료예요. Claude가 이미지를 보고 제품 형태를 파악한 뒤 섹션 구성·카피·필요 이미지 목록을 기획해요.
📋 올려야 할 이미지 (우선순위 순서): 1. 제품 정면 컷 (흰 배경) ← 필수 2. 제품 측면 또는 후면 컷 3. 차량에 부착된 사용 장면 컷 4. 패키지 및 구성품 컷
💡 없는 컷은 안 올려도 돼요. 없는 이미지는 STEP 04에서 Midjourney로 AI 생성할 예정이에요.
디자이너 (민지현)
기획자에게 카톡 알림
"[제품명] 이미지 올렸어요. brief.md 작성 부탁드려요"
디자이너 (민지현)
brief.md 작성 및 Drive 업로드
소구점 5개·타겟·가격·채널·참고사항. _템플릿/brief_양식.md 복사해서 작성
📄 Claude 프롬프트 — Drive MCP 연결 시
훠링-상세페이지/진행중/[제품명]/brief.md 파일 읽어줘
기획자 (민지홍)
✓ STEP 01 완료 — 기획안 생성으로
STEP 02
AI 기획안 자동 생성
Claude.ai에 brief + 이미지 넣으면 섹션·카피·이미지 목록·MJ 프롬프트까지 자동 생성
Claude.ai⏱ 20분
기획자
Claude.ai
Claude.ai에 brief.md + 제품 이미지 첨부 후 기획안 요청
💬 Claude 프롬프트
첨부한 brief.md와 제품 이미지를 바탕으로 상세페이지 기획안을 만들어줘.
포함 내용:
1. 섹션 구성 (히어로/특장점/사용장면/CTA 순서와 각 섹션 목적)
2. 각 섹션별 헤드카피 초안 (구매전환 중심)
3. 필요 이미지 목록 (보유/AI생성필요/촬영필요 분류)
4. AI 생성 필요한 이미지의 Midjourney 프롬프트 (영문)
5. 채널별 톤 차이 (스마트스토어/쿠팡/자사몰)
기획안 완성 후 아래 형식으로 planning.md 파일을 자동으로 만들어서 다운로드해줘.
파일명: planning.md
--- planning.md 내용 시작 ---
# [제품명] 상세페이지 기획안
## 섹션 구성
[섹션 구성 내용]
## 섹션별 헤드카피
### 히어로
[카피]
### 특장점
[카피]
### 사용장면
[카피]
### CTA
[카피]
## 필요 이미지 목록
### 보유 컷
[목록]
### AI 생성 필요
[목록]
### 촬영 필요
[목록]
## Midjourney 프롬프트
[이미지별 영문 프롬프트]
## 채널별 톤
### 스마트스토어
[톤 방향]
### 쿠팡
[톤 방향]
### 자사몰
[톤 방향]
--- planning.md 내용 끝 ---
기획자 (민지홍)
기획안 내용 planning.md에 저장 후 Drive 업로드
Claude가 자동 생성한 planning.md 파일을 Drive / [제품명] / 폴더에 업로드
기획자 (민지홍)
✓ STEP 02 완료 — 기획 검토로
STEP 03
기획안 검토 · 컨펌 ★
가장 중요한 단계. 여기서 방향 확정 = 이후 재작업 없음. Claude와 대화로 즉시 수정 가능
★ 기획자 핵심 개입⏱ 30~60분
기획자
Claude 수정
섹션 구성 검토
히어로→특장점→사용장면→CTA 순서가 이 제품에 맞는지 확인. 순서 변경 필요 시 Claude에 요청
💬 Claude 프롬프트 미리보기
기획자 (민지홍)
카피 수정 및 확정
헤드카피·본문 문구 검토. 수정 필요 시 프롬프트 활용
💬 Claude 프롬프트 미리보기
기획자 (민지홍)
이미지 목록 확정
보유/AI생성필요/촬영필요 분류 확인. MJ 프롬프트 방향 검토
💬 Claude 프롬프트 미리보기
기획자 (민지홍)
planning.md 최종 업데이트 후 디자이너 알림
수정 반영 후 파일 업데이트. 카톡: "기획 확정! planning.md 확인 후 이미지 작업 시작해줘요"
💬 Claude 프롬프트 미리보기
기획자 (민지홍)
✓ STEP 03 완료 — 이미지 생성으로
STEP 04
추가 이미지 생성 · 튜닝 ★
Claude가 MJ 프롬프트 작성 → 디자이너 생성·보정 → 기획자 컨펌. Claude는 이미지 직접 생성 불가
Midjourney⏱ 1~3시간
디자이너
Midjourney
기획자 컨펌
planning.md에서 MJ 프롬프트 확인
AI 생성 필요 이미지 목록과 각 프롬프트 복사 준비
planning.md를 불러오면 MJ 프롬프트가 여기에 표시됩니다
디자이너 (민지현)
Midjourney에서 이미지 생성
Midjourney에는 반드시 영문 프롬프트를 사용해야 해요
📋 Midjourney 이미지 생성 순서:
STEP 1. planning.md 불러오기 버튼으로 MJ 프롬프트 확인 STEP 2. 영문 프롬프트 복사 → Midjourney에 붙여넣기 → 이미지 생성 STEP 3. 마음에 드는 컷 선택 V 버튼: 해당 이미지 기반으로 변형 생성 U 버튼: 해당 이미지 고화질로 업스케일
💡 생성된 이미지가 마음에 안 들면? → Claude.ai 대화창에 한글로 수정 요청 (아래 복사 버튼 활용) → Claude가 수정된 영문 프롬프트를 새로 작성해줌 → 수정된 영문 프롬프트를 다시 Midjourney에 붙여넣기
⚠️ 주의: Midjourney는 한글 프롬프트 인식 불가 반드시 영문으로 입력해야 정상 작동해요
💡 프롬프트 수정 필요 시
"이미지가 마음에 안 들어. [어떤 점이 문제인지 설명]하게 Midjourney 프롬프트를 영문으로 수정해줘"
디자이너 (민지현)
포토샵으로 후보정·제품 합성
생성 이미지에 실제 제품 합성·색보정·브랜드 톤 맞춤
디자이너 (민지현)
완성 이미지 01_images/generated/ 업로드 후 기획자 알림
카톡: "이미지 완성했어요. Drive에서 확인 부탁드려요"
디자이너 (민지현)
기획자 이미지 검토 · 컨펌
Drive 댓글로 피드백. OK면 카톡: "이미지 컨펌! Claude Design 작업 시작해줘요"
기획자 (민지홍)
✓ STEP 04 완료 — Claude Design 시작
STEP 05
Claude Design — 전체 톤 · 흐름 초안
섹션별 작업 전 전체 방향 한 번 컨펌. 여기서 톤 확정 = 이후 재작업 없음
Claude Design⏱ 1시간
디자이너
Claude Design
기획자 컨펌
claude.ai/design 에서 전체 레이아웃 초안 요청
planning.md 내용 + 확정 이미지 Import 후 전체 구조·분위기 확인용 초안 생성
💬 Claude Design 프롬프트
아래 기획안으로 상세페이지 전체 레이아웃 초안 만들어줘.
전체 톤·컬러·섹션 흐름 확인이 목적이야.
세부 수정은 이후 섹션별로 할 예정.
[planning.md 내용 붙여넣기]
디자이너 (민지현)
전체 초안 스크린샷 → 기획자 공유
카톡 or Drive에 올려서 "전체 톤 확인 부탁드려요" 알림
디자이너 (민지현)
기획자 전체 톤 컨펌
컬러·폰트·전체 무드 확인. OK면 카톡: "톤 컨펌! 섹션별 작업 진행해줘요"
기획자 (민지홍)
✓ STEP 05 완료 — 섹션 작업 시작
STEP 06
섹션별 세부 수정 · PNG 추출
섹션 단위로 쪼개서 집중 수정 → 각각 PNG 추출. 한 번에 전체 수정 X → 퀄리티 UP
Claude Design⏱ 2~3시간
Claude Design
디자이너
히어로 섹션 수정 완료 → PNG 추출
메인 이미지 + 헤드카피. 02_sections/01_hero.png 저장
디자이너 (민지현)
특장점 섹션 수정 완료 → PNG 추출
아이콘·설명·배치. 02_sections/02_features.png 저장
디자이너 (민지현)
사용장면 섹션 수정 완료 → PNG 추출
라이프스타일·감성 이미지. 02_sections/03_lifestyle.png 저장
디자이너 (민지현)
CTA 섹션 수정 완료 → PNG 추출
구매 유도·가격·혜택. 02_sections/04_cta.png 저장
디자이너 (민지현)
02_sections/ Drive 업로드 완료
02_sections/ 폴더에 섹션 PNG 업로드 완료
디자이너 (민지현)
✓ STEP 06 완료 — 채널 변환 마지막 단계
STEP 07
채널별 자동 변환 · 업로드
Claude Code 스크립트가 PNG를 채널 규격으로 자동 변환. 더블클릭 1번으로 완료
Claude Code⏱ 10분
자동 스크립트
디자이너
채널 변환 스크립트 실행
02_sections/ PNG → 03_output/ 채널별 폴더 자동 생성
💬 Claude Code 프롬프트 (최초 1회)
02_sections 폴더의 PNG를 채널별로 변환하는 스크립트 만들어줘.
- 스마트스토어: 가로 860px, JPG 품질 85
- 쿠팡: 가로 800px, JPG 품질 85
- 자사몰: 원본 PNG 유지
출력: 03_output/smartstore, coupang, own_mall 폴더
파일명: 01_hero, 02_features, 03_lifestyle, 04_cta 순서 유지
디자이너 (민지현)
03_output/ 결과물 최종 확인
각 채널 폴더 이미지 열어서 사이즈·품질 확인
디자이너 (민지현)
각 채널에 업로드
스마트스토어 / 쿠팡 / 자사몰 순서로 업로드
디자이너 (민지현)
제품 폴더를 완료/ 로 이동
Drive: 진행중/[제품명] → 완료/[제품명] 이동. 히스토리 보존
디자이너 (민지현)
✓ 전체 완료! 수고하셨습니다 🎉
🎉
상세페이지 제작 완료!
모든 체크리스트를 완료했습니다. 채널 업로드를 진행하세요.
상세페이지 미리보기
이미지를 업로드하면 실제 상세페이지처럼 순서대로 이어서 보여줍니다
0장 업로드됨
① 이 버튼으로 프롬프트 복사 ② Claude.ai 새 대화 열기 ③ 프롬프트 붙여넣기 ④ 미리보기 이미지들을 Claude.ai에 첨부 ⑤ 전송 → Claude 피드백 확인