📝 한줄 요약
이커머스 셀러분들을 많이 만나다 보니 "상세페이지 자동화" 니즈가 정말 크다는 걸 알게 됐어요. 그래서 상품 정보만 넣으면 AI가 상세페이지를 통째로 만들어주는 웹앱 **'셀러's 디테일'** 을, 코드 한 줄 직접 안 짜고 만들어봤습니다. 아이디어 한 줄 → 10라운드 인터뷰 → PRD 자동 생성 → AI 팀 병렬 개발 → 이미지·팔레트 기능까지, Claude Code 스킬 3개(`gpters-saturday-webapp` · show-me-the-prd · kkirikkiri)를 엮어서요. 외주 맡기면 하루 이상 걸리던 상세페이지가, 입력 몇 칸 채우면 6섹션짜리 HTML로 바로 나옵니다.
🎯 이런 분들께 도움돼요
- 상품마다 상세페이지를 새로 만드느라 지친 온라인 셀러·마케터
- "기획서 쓰고 → 개발하고 → 배포"를 비개발자가 혼자 돌려보고 싶은 분
- show-me-the-prd → kkirikkiri 같은 스킬 연결(체이닝) 이 실제로 어떻게 굴러가는지 궁금한 분
😫 문제 상황 (Before)
요즘 이커머스 셀러분들을 부쩍 많이 만났어요. 업종도 규모도 제각각인데, 약속이나 한 듯 같은 말을 하시더라고요 — "상세페이지 만드는 게 제일 일이다." 상품을 등록할 때마다 그 상품에 맞는 디자인·문구로 상세페이지를 **매번 새로** 만들어야 하니까요. 디자이너가 없으면 직접 사진 배치하고 문구 쓰고 색 맞추고… 결과물은 초라한데 시간만 잡아먹죠. 외주를 주면 **하루 이상, 수십만 원**, 직접 하자니 막막하고요.
이 니즈가 한두 명이 아니라 거의 모든 셀러에게 공통이라는 걸 알게 되면서, "상품 정보만 넣으면 상세페이지가 뚝딱 나오는 도구"를 직접 만들어보기로 했어요.
🛠️ 사용한 도구
- Claude Code (Opus 4.7) — 전 과정 진행
- 스킬 3종: gpters-saturday-webapp(전체 흐름 안내 — 스터디장 gptaku님이 공유해주신 스킬) · show-me-the-prd(PRD 자동 생성) · kkirikkiri(AI 에이전트 팀 병렬 개발)
- Codex CLI(gpt-5.4) — 코드 리뷰 교차검증
- 결과물 스택: Next.js 15 + Claude API(claude-haiku-4-5) + Tailwind, 패키지매니저 pnpm
🔧 작업 과정
1단계 — 스킬 설치
```
✅ .claude/skills/gpters-saturday-webapp/SKILL.md
.claude/skills/gpters-saturday-webapp/references/... ← 같이!
```
2단계 — 아이디어 한 줄을 10라운드 인터뷰로 구체화
"상품정보만 넣으면 상세페이지를 만들어주는 앱" 한 줄로 시작했더니, 스킬이 AskUserQuestion으로 **한 번에 한두 개씩** 물어봤어요. 사용자(1인 셀러)·문제·사용 순간(등록 직전)·입력 6~7개·출력(미리보기+HTML 복사)·톤· 제외 범위까지. 이 인터뷰 덕분에 "한 화면 MVP"로 범위가 딱 좁혀졌어요.
3단계 — show-me-the-prd로 PRD 5종 자동 생성
인터뷰로 정리된 아이디어 브리프를 넘기니, PRD·데이터모델·Phase분리·프로젝트스펙·README **5개 문서**가 한 번에 나왔어요. "Claude 모델 뭐 쓸지", "응답을 HTML 통짜로 받을지" 같은 미결정 항목까지 정리해줘서, 추천값으로 확정하고 잠갔습니다.
4단계 — kkirikkiri로 AI 팀 병렬 개발
PRD를 주고 "전문가 팀 꾸려서 병렬로 개발해줘" 했더니 **빌더 2명**(백엔드·코어 / 프론트엔드)이 동시에 붙어서, 겹치지 않는 파일을 나눠 만들었어요. 공유 타입 계약으로 정합성을 맞춰서 충돌 없이요.
5단계 — 실제 생성, 그런데 502
API 키를 넣고 처음 생성을 눌렀더니 502. 로그를 열어보니 코드 문제가 아니라 credit balance is too low — 계정 크레딧 부족이었어요. 충전하니 바로 성공. 입력 한 번에 6섹션 상세페이지 HTML(약 9,500자) 이 뚝딱 나왔습니다.
키보드와 마우스가 있는 한국 웹사이트의 스크린샷
6단계 — 욕심내서 기능 2개 추가
- 상품 사진 업로드: 올린 사진을 자동 리사이즈해서, 상세페이지의 [여기에 상품 사진] 자리에 순서대로 끼워 넣어요.
한국어 키보드 스크린샷
- 컬러 팔레트 추출: 분위기 이미지를 넣으면 대표 색 5개를 뽑아서, 그 색으로 상세페이지를 생성해요. 테스트했더니 추출한 5색이 결과물에 5/5 모두 적용됐습니다.
한국어 텍스트가 포함된 키보드를 보여주는 웹페이지
✅ 결과 (After)
| 구분 | Before (외주/수작업) | After (셀러's 디테일) |
|---|---|---|
| 상세페이지 1건 | 하루 이상 / 수십만 원 | 입력 몇 칸 → 즉시 생성 |
| 디자인·문구 | 직접 고민 | AI가 톤·6섹션 자동 |
| 색감 | 수동 | 팔레트 이미지에서 자동 추출·적용 |
| 사진 | 일일이 배치 | 업로드 → 자리에 자동 삽입 |
💬 이 과정에서 배운 AI 활용 팁
- "만들어줘" 한 줄보다, 인터뷰로 범위를 먼저 잠가라
❌ "상세페이지 만들어줘" / ✅ 10라운드 인터뷰 → PRD로 입력·출력·제외범위 고정
- AI 결과를 그냥 믿지 말고 교차검증
❌ 생성됐으니 끝 / ✅ Codex 리뷰 + 빌드/런타임 스모크로 검증
- 막히면 에러 원문을 읽어라
502는 코드가 아니라 크레딧 문제였고, Codex가 막힌 건 샌드박스 셸 문제라 stdin 주입으로 우회했어요. "안 돼요"가 아니라 "왜 안 되는지"를 보면 길이 보여요.
🚀 앞으로의 계획
- Vercel 배포로 공개 URL 만들기 (지금 직전 단계)
- 만나는 셀러분들께 베타로 열어드리고, 실제 상품으로 피드백 받기
- 재생성 버튼 / .html 다운로드 / 마켓별(스마트스토어·쿠팡) 포맷 변환
- HTML 새니타이즈 등 보안 하드닝
🙌 마치며
이 모든 흐름은 스터디장 gptaku님이 공유해주신 gpters-saturday-webapp 스킬 덕분에 가능했어요. 아이디어 한 줄만 던졌는데 인터뷰 → PRD → 개발 → 배포까지 레일이 쫙 깔리더라고요. 비개발자가 만들었다는 게 믿기지 않을 만큼 **결과물이 정말 잘 나와서** 저도 놀랐어요. 좋은 스킬 하나가 만드는 차이를 제대로 체감했습니다. 🙏
