상세페이지 콘텐츠 자동생성기
| 항목 | 내용 |
|---|---|
| 만든 사람 | 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 결과물의 실용성이 크게 올라간다
이 글이 도움이 되었나요?