← 템플릿 목록
전자상거래중급🌍 Gumroad 모델
디지털 상품 스토어
PDF·프롬프트·강의·템플릿을 판매하는 개인 스토어. 결제 연동 후 자동 다운로드. 내 30년 경험을 디지털 상품으로 파는 모델.
Claude Code · Cursor · ChatGPT 에 붙여넣기
# 디지털 상품 스토어 MVP 만들기 ## 프로젝트 개요 전문가가 PDF, 강의자료, 프롬프트 모음, 엑셀 템플릿 등 디지털 상품을 판매하는 개인 스토어. 참고 모델: Gumroad (gumroad.com) — 누적 거래액 $500M+ ## 기술스택 - Next.js 14 (App Router) + TypeScript - Supabase (DB + Storage + Auth) - Tailwind CSS + shadcn/ui - 토스페이먼츠 결제 - Resend API (이메일 발송) - 언어: 한국어 UI ## 필수 기능 ### 1. 스토어 메인 페이지 (/) - 상품 카드 그리드 (썸네일, 제목, 가격, 짧은 설명, 별점) - 카테고리 필터 (PDF / 강의 / 템플릿 / 프롬프트) - 베스트셀러 / 신상품 섹션 ### 2. 상품 상세 페이지 (/products/[slug]) - 상품 이미지, 제목, 가격, 상세 설명 - 포함 내용 목록 (체크리스트 형태) - 미리보기 이미지 슬라이더 - 구매 버튼 (토스페이먼츠 연동) - 구매자 후기 목록 ### 3. 결제 & 자동 다운로드 플로우 - 토스페이먼츠 결제 완료 → webhook 수신 - 구매자 이메일로 "다운로드 링크" 자동 발송 (24시간 유효 토큰) - 다운로드 횟수 제한 (최대 3회) ### 4. 판매자 어드민 (/admin) - 상품 등록/수정/삭제 (파일 업로드 포함) - 판매 현황 대시보드 (오늘/이번달/전체 매출) - 구매자 목록 + 다운로드 링크 재발송 - 쿠폰 코드 생성/관리 (% 또는 정액 할인) ## DB 스키마 ```sql products: id, slug, title, description, price, file_url, preview_images(text[]), category, is_published, sales_count purchases: id, product_id, buyer_email, download_token, download_count, paid_at coupons: id, code, discount_type, discount_value, uses_left ``` ## 디자인 - 밝고 신뢰감 있는 스토어 분위기 - 모바일 최적화 - 결제 후 즉시 이메일 발송 (Resend)
💡 사용 방법
- ① 위 프롬프트를 복사하세요
- ② Claude Code · Cursor (한국어) 또는 Lovable · Bolt · v0 (영어)에 붙여넣기
- ③
[업종]부분을 내 업종으로 교체하세요 - ④ 실행하면 강력한 MVP 완성!