커머스 서비스 만들기
대표 서비스: 무신사, 29CM. 스택: Next.js + Supabase + Stripe. 상품 목록부터 결제까지 실전 구현.
// Stripe 결제 연동 import Stripe from "stripe"; const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!);
// app/api/checkout/route.ts export async function POST(req: Request) { const { items } = await req.json(); const session = await stripe.checkout.sessions.create({ mode: "payment", line_items: items.map((item) => ({ price_data: { currency: "krw", product_data: { name: item.name }, unit_amount: item.price, }, quantity: item.quantity, })), success_url: process.env.NEXT_PUBLIC_URL + "/success", cancel_url: process.env.NEXT_PUBLIC_URL + "/cart", }); return Response.json({ url: session.url }); }
// 기능 구현 순서: // 1. 상품 DB (Supabase) // 2. 상품 목록/상세 페이지 // 3. 장바구니 (localStorage) // 4. Stripe 결제 // 5. 주문 관리 (Supabase)
🛠️ 이 챕터의 실습 방법
README 작성 실습
프로젝트 루트의 README.md를 아래 구조로 작성하세요:
프로젝트 이름
한 줄 소개
🔗 데모
- 배포 URL: https://my-project.vercel.app
📸 스크린샷
🛠️ 기술 스택
- Frontend: Next.js 14, TypeScript, Tailwind CSS
- Backend: Supabase (PostgreSQL + Auth + Storage)
- Deploy: Vercel
🚀 실행 방법
git clone https://github.com/유저명/프로젝트.git cd 프로젝트 npm install cp .env.example .env.local npm run dev
📁 폴더 구조
(주요 폴더만 설명)
✨ 핵심 기능
- 기능 A
- 기능 B
📝 회고
배운 점, 어려웠던 점, 개선하고 싶은 점
포트폴리오 체크리스트
- README에 데모 URL 포함
- 스크린샷/GIF 포함
- 기술 스택 명시
- 실행 방법(README만 보고 실행 가능)
- Vercel 배포 완료
- 반응형 확인 (375px ~ 1440px)
- 에러 처리 (로딩/에러/빈 상태)
- GitHub 커밋 이력 깔끔
Gemini 2.5 Flash(무료) + Claude Sonnet 4.6(무료) + Grok 4.1(무료)
'커머스 서비스 만들기'를 0원으로 시작하고 싶어. Gemini(무료)로 기존 서비스 분석 + Claude(무료)로 핵심 코드 생성 + Vercel·Supabase 무료 티어로 배포까지 끝내는 플랜을 짜줘.
Claude API + Cursor $20/mo + Make.com — 월 10~30만원
'커머스 서비스 만들기'에 월 20만원을 투자할 수 있어. Claude API(코드) + Make.com(자동화) + Stripe(결제) 조합으로 수익 구조까지 포함한 아키텍처를 월 비용 분배안과 함께 설계해줘.
Claude Opus + CrewAI + LangGraph — 월 100만원+
'커머스 서비스 만들기'를 프로덕션으로 스케일업하려 해. CrewAI(개발+테스트+배포 에이전트 팀) + LangSmith(모니터링) + K8s(오토스케일링) 엔터프라이즈 아키텍처를 월 100만원 예산으로 설계해줘.
0원→$20/mo→$100/mo 단계별 스택 비교
'커머스 서비스 만들기'를 만들 때 1인 개발자에게 최적의 스택을 알려줘. 예산 0원→20만원→100만원 단계별로 프론트+백+DB+AI+배포 전체 스택과 전환 시점을 설계해줘.