오토프로그상세페이지 콘텐츠 자동생성기
| 항목 | 내용 |
|---|---|
| 만든 사람 | hoya1992 |
| 사용 도구 | Claude Code + Next.js 16 + Supabase + Gemini API |
| GitHub | hoya1992/hoya92 |
| Live Demo | digiwood-tool.vercel.app |
프로젝트 소개
이커머스 상세페이지 콘텐츠를 AI로 자동 생성하는 도구입니다. 제품명·설명·옵션 3개만 입력하면 Gemini AI가 상세페이지 카피, 플랫폼별 상품명, SEO 검색태그를 한 번에 생성합니다. 상품 이미지를 첨부하면 Gemini Vision이 제품 형태와 소재를 파악해 더 정확한 카피를 생성합니다.
주요 기능
- 카피 자동 생성 — 메인컷 헤드라인 / 소구 3Point / 커스텀 단락 / 컨셉컷 캡션(6맥락 x 5옵션) / 디테일컷, 총 5개 섹션 생성
- 플랫폼별 상품명 — 네이버 스마트스토어·자사몰·G마켓+옥션·쿠팡 SEO 규칙에 맞춰 자동 생성
- 검색태그 SEO 최적화 — 네이버 검색광고 API로 실제 검색량을 조회하고 Gemini가 관련성 높은 15개를 선별
- 제품 이미지 분석 — 최대 10장까지 첨부하면 Gemini Vision이 소재·형태를 파악해 카피 품질을 높임
- 팀 작업 공유 — Supabase에 생성 내역 저장 후 팀원 누구나 최근 50개 이력 조회 가능
- 항목별 복사 — 각 섹션을 복사해 바로 활용
어떻게 만들었나요?
코딩 경험 없이 Claude Code와 대화하면서 처음부터 끝까지 만든 과정입니다.
- PRD 작성 — "상품 등록할 때마다 카피 쓰는 게 너무 오래 걸린다"는 문제에서 출발. 필요한 기능을 문서로 정리
- 단일 HTML 프로토타입 — Claude API로 동작하는 단일 HTML 파일로 먼저 콘셉트 검증
- Next.js 전환 — 풀스택 앱으로 확장, 입력 폼과 Gemini API 연동 구현
- 카피 품질 개선 — 실제 잘 팔리는 상품의 카피 예시를 프롬프트에 대량 주입해 결과물 품질 향상
- 네이버 API 연동 — 검색태그에 실제 검색량 데이터를 결합해 SEO 최적화
- 로그인·팀 공유 — Supabase Auth로 인증, 생성 이력을 팀 전체가 조회할 수 있게 확장
- 배포 — Vercel에 배포해 팀원 누구나 접속할 수 있게 공개
기술 스택
| 영역 | 기술 |
|---|---|
| 프레임워크 | Next.js 16 (App Router) |
| UI | React 19 + Tailwind CSS v4 |
| AI | Gemini 2.5 Flash (텍스트 생성 + Vision) |
| 데이터베이스 | Supabase (PostgreSQL + Auth) |
| 외부 연동 | 네이버 검색광고 API (검색량 조회) |
| 배포 | Vercel |
배운 점
- 처음 기획보다 실제 업무에 필요한 도구로 빠르게 전환한 점이 성공 요인이었습니다
- AI 카피 품질은 좋은 예시를 프롬프트에 얼마나 담느냐에 달려 있습니다 — 프롬프트 엔지니어링이 핵심입니다
- 네이버 검색량 같은 실제 데이터를 결합하면 AI 결과물 실용성이 높아집니다