실전 프로젝트: AI 템플릿 스토어 (중급)

프로젝트 목표

AI 프롬프트 템플릿을 판매하는 온라인 스토어를 구축한다. 국내 결제(토스 페이먼츠)와 해외 결제(Paddle)를 동시에 연동하는 것이 핵심이다.

아키텍처

왜 Stripe가 아닌 Paddle인가?

SDD Auto 풀체인 실행

/sdd.auto AI 프롬프트 템플릿 판매하는 스토어 만들어줘. 결제는 토스 페이먼츠랑 패들 붙일 거야

Tech Spec 작성 시 Context7에서 토스 페이먼츠/Paddle SDK 문서를 확인하여 정확한 연동 방법을 반영했다.

프로젝트 구성

생성된 PRD 구조

항목	내용
핵심 기능	템플릿 탐색, 국내 결제, 해외 결제
타겟 사용자	국내 사용자 + 해외 사용자
기술 스택	Next.js, TypeScript, shadcn/ui
결제	토스 페이먼츠 (국내) + Paddle (해외)

Tech Spec에서 확인한 결제 연동

발생한 문제와 해결

문제 1: 하위 디렉토리에 프로젝트 생성됨

AI가 의도한 경로가 아닌 하위 디렉토리에 프로젝트를 생성하는 경우가 있다.

문제 2: 결제 위젯이 로드되지 않음

실제 결제 테스트를 하려면 토스 페이먼츠/Paddle에서 키를 발급받아야 한다. 승인 과정이 필요하므로, 실습에서는 구현 확인까지만 진행한다.

문제 3: PRD/Tech Spec 형식 불일치

매번 PRD와 Tech Spec의 형식이 조금씩 다르게 생성되는 경우가 있다.

해결 방법: 원하는 형식이 있다면 Skill 파일에 구체적인 템플릿을 명시하거나, 좋은 PRD 예시 파일을 첨부한다.

응용 가능한 변형

이 프로젝트를 기반으로 다양한 디지털 상품 스토어를 만들 수 있다.

핵심 교훈

교훈	상세
결제 연동은 키 필수	API 키 없이는 위젯 로드 자체가 불가
콘솔로 에러 확인	F12 → 콘솔에서 에러 원인 파악
경로 주의	AI가 잘못된 디렉토리에 생성할 수 있음
스펙 형식 통일	Skill에 구체적 템플릿 명시 권장
반응형 UI 자동	SDD 빌드 시 모바일 대응도 자동 구현