AI 코딩 도구로 SaaS MVP를 2주 만에 출시한 1인 개발 사례 — Cursor + Claude Code 실전 회고

만들려는 서비스는 InvoiceFlow라는 프리랜서용 인보이스 자동화 도구였다. 핵심 기능은 세 가지다.

• 고객 정보 입력 → 인보이스 PDF 자동 생성
• 이메일 자동 발송 + 열람 추적
• Stripe 연동 온라인 결제 링크

기술 스택은 빠른 프로토타이핑에 최적화된 조합을 골랐다.

기술 스택 선정 기준이 평소와 달랐다. "내가 잘 아는 것"이 아니라 "AI가 잘 아는 것"을 골랐다. Next.js + Tailwind + Prisma 조합은 GitHub에 예제가 가장 많고, Claude와 Cursor 모두 높은 정확도로 코드를 생성하는 스택이다. 반면 이전에 쓰던 SvelteKit + Drizzle ORM 조합은 AI 도구가 자주 틀리거나 오래된 API를 참조하는 경우가 많아 제외했다.

Day 1~2: 프로젝트 초기화와 인증

Cursor Composer에 피그마 와이어프레임 스크린샷을 붙여넣고 "이 디자인을 Next.js + Tailwind로 구현해줘"라고 요청했다. 30분 만에 대시보드, 인보이스 목록, 생성 폼의 레이아웃이 나왔다. 물론 그대로 쓸 수준은 아니었다. 간격이 어긋나고, 반응형이 깨지고, 다크 모드 색상이 빠져 있었다. 하지만 빈 화면에서 시작하는 것과 80% 완성된 레이아웃에서 시작하는 것은 완전히 다른 경험이었다.

인증은 Supabase Auth + Next.js middleware 조합을 썼다. Claude Code에 CLAUDE.md를 작성해두고 "Supabase Auth로 이메일/비밀번호 + Google OAuth 인증을 구현해줘. middleware에서 보호된 라우트를 체크하고, 세션 갱신은 서버 사이드에서 처리"라고 지시했다. 15분 만에 동작하는 인증 플로우가 나왔다. 수동으로 했으면 Supabase 문서를 뒤지며 반나절은 걸렸을 작업이다.

Day 3~4: 인보이스 CRUD와 PDF 생성

인보이스 생성/수정/삭제 API를 Claude Code로 작성했다. Prisma 스키마를 먼저 정의하고, "이 스키마 기반으로 CRUD API를 만들어줘. 유효성 검증은 Zod로"라고 지시하니 10분 만에 API 라우트 4개가 나왔다. 여기까지는 순조로웠다.

PDF 생성에서 첫 번째 벽에 부딪혔다. Claude Code가 생성한 @react-pdf/renderer 코드가 서버 사이드에서 동작하지 않았다. Next.js App Router의 서버 컴포넌트와 충돌이 생긴 것이다. AI가 생성한 코드를 3번 수정 요청했지만 같은 에러가 반복됐다.

Day 5~7: 이메일 발송과 Stripe 결제

Resend API로 인보이스 이메일을 보내는 기능은 Claude Code가 한 번에 완성했다. API 문서가 깔끔한 서비스일수록 AI의 코드 생성 정확도가 올라간다는 걸 다시 확인했다.

Stripe Checkout 연동도 비교적 빨랐다. Stripe의 공식 문서가 워낙 방대해서 AI가 학습할 데이터가 충분했기 때문이다. 결제 세션 생성, 웹훅 처리, 결제 완료 후 인보이스 상태 업데이트까지 하루 만에 끝났다. 다만 웹훅 시그니처 검증 부분에서 Stripe API 버전 차이로 한 번 틀렸고, 이건 공식 문서를 직접 확인해서 수정했다.

1주차가 끝나는 시점에 작업 시간을 정리했다.

PDF 생성 항목이 눈에 띈다. AI가 잘못된 접근법을 반복 제안하면서 오히려 수동으로 했을 때와 시간이 같아졌다. AI 코딩 도구의 한계가 분명히 드러나는 지점이었다.

Day 8~10: 엣지 케이스 처리

MVP라 해도 결제가 들어가는 서비스에서 엣지 케이스를 무시할 수 없었다. 인보이스 중복 발송 방지, 결제 웹훅 재시도 처리, 만료된 결제 링크 안내 페이지 등을 추가했다.

여기서 Claude Code의 진가가 나왔다. "Stripe 웹훅이 동일 이벤트를 중복 전송할 때 멱등성을 보장하는 코드를 짜줘"라고 하니, event.id를 DB에 저장하고 중복 체크하는 로직을 정확히 생성했다. 이런 잘 알려진 패턴에서는 AI의 정확도가 90%를 넘는다.

반면 "인보이스 PDF에 한국어 폰트를 적용해줘"라고 했을 때는 완전히 틀린 코드가 나왔다. Puppeteer에서 한글 렌더링 문제는 AI가 학습한 데이터에 사례가 적어서인지 3번 시도 모두 실패했고, 결국 Stack Overflow에서 해결법을 찾았다.

Day 11~12: Cursor로 UI 폴리싱

Cursor의 Tab 자동완성이 가장 빛나는 순간은 반복 작업이다. 대시보드 카드 컴포넌트 하나를 완성하면, 비슷한 구조의 다른 카드들은 Tab 키만 연타해도 생성됐다. 로딩 스켈레톤, 에러 바운더리, 빈 상태 화면도 같은 방식으로 빠르게 추가했다.

다크 모드 대응도 Cursor가 잘 처리했다. "이 컴포넌트에 다크 모드 스타일을 추가해줘"라고 하면 Tailwind의 dark: 접두사를 정확히 붙여줬다. 다만 색상 대비 비율까지 고려하지는 않아서, 접근성 검사 도구로 수동 확인이 필요했다.

Day 13~14: 배포와 모니터링

Vercel 배포는 GitHub repo 연결만으로 끝났다. 하지만 환경 변수 설정에서 실수가 있었다. Claude Code가 생성한 .env.example과 실제 Vercel에 넣어야 하는 변수명이 달랐다. NEXT_PUBLIC_ 접두사가 빠진 변수 2개 때문에 프론트엔드에서 API 키를 읽지 못하는 버그가 배포 후에 발견됐다.

Sentry 에러 추적은 Claude Code가 한 번에 설정해줬다. sentry.client.config.ts, sentry.server.config.ts, Next.js config 수정까지 5분 만에 완료. Vercel Analytics도 한 줄 추가로 끝났다.

14일간의 작업을 되돌아보면, AI 코딩 도구가 압도적으로 시간을 절약해준 영역이 명확히 있었다.

• 보일러플레이트 코드 생성 — Prisma 스키마 → API 라우트 → Zod 스키마 → 타입 정의. 이 파이프라인을 Claude Code가 일관되게 생성해줬다. 수동 시 가장 지루하고 실수가 많은 구간이다.
• 서드파티 API 연동 — Stripe, Resend, Supabase Auth 등 문서가 잘 된 서비스와의 연동. AI가 최신 API를 정확히 참조했다.
• 반복적 UI 패턴 — Cursor의 Tab 자동완성으로 비슷한 컴포넌트를 빠르게 복제하고 변형했다.
• 설정 파일 — ESLint, Prettier, tsconfig, Tailwind config 등 프로젝트 초기 설정을 5분 만에 완료했다.
• 테스트 코드 — "이 API의 유닛 테스트를 Vitest로 작성해줘"라고 하면 해피 패스 + 에러 케이스를 자동 생성했다.

반대로, AI가 시간을 절약하지 못하거나 오히려 늘린 경우도 분명히 있었다.

1. 라이브러리 호환성 문제 — @react-pdf/renderer와 Next.js App Router의 충돌처럼, AI가 두 라이브러리의 조합에서 발생하는 호환성 문제를 인지하지 못했다. 같은 실패 패턴을 3회 반복 제안.
2. 니치한 문제 — Puppeteer 한국어 폰트 렌더링, Supabase RLS 정책에서의 JWT 클레임 접근 등. 인터넷에 사례가 적은 문제에서는 높은 확률로 틀렸다.
3. 복잡한 비즈니스 로직 — 인보이스 번호 채번 규칙(연도-월-순번), 부분 결제 처리, 환불 시 상태 전이 등. 비즈니스 도메인 특화 로직은 AI가 맥락을 이해하지 못해 수동 작성이 더 빨랐다.
4. 디버깅 — 에러 메시지를 던져주면 원인 추측은 잘 하지만, 실제 코드베이스의 맥락을 고려한 수정은 부정확할 때가 많았다. 특히 여러 파일에 걸친 상태 관리 버그에서 그랬다.

이번 프로젝트에서 두 도구를 명확히 역할 분리해서 사용한 것이 효율의 핵심이었다.

핵심은 Claude Code로 뼈대를 만들고, Cursor로 살을 붙이는 워크플로우였다. Claude Code의 CLAUDE.md에 프로젝트 컨벤션(파일 구조, 네이밍 규칙, import 순서)을 상세히 적어둔 것이 일관성을 유지하는 데 결정적이었다.

14일간의 프로젝트를 숫자로 정리했다.

65~70% 시간 단축이라는 숫자가 인상적으로 보이지만, 주의할 점이 있다. AI가 생성한 코드의 약 30%는 수정이 필요했다. "AI가 코드를 짠 시간"이 아니라 "AI가 짠 코드를 검증하고 수정한 시간"까지 포함한 수치다. AI 없이 했으면 더 걸렸겠지만, "AI가 전부 해줬다"는 아니다.

이번 사례에서 다음 프로젝트로 가져갈 교훈을 정리한다.

1. CLAUDE.md를 처음부터 상세하게 쓴다. 프로젝트 구조, 네이밍 컨벤션, import 규칙, 금지 패턴을 적어두면 Claude Code의 코드 일관성이 확 올라간다. 이번 프로젝트에서 가장 효과적이었던 투자 시간은 CLAUDE.md 작성에 쓴 30분이었다.
2. AI에게 맡길 작업과 직접 할 작업을 미리 구분한다. 보일러플레이트, 서드파티 연동, 테스트 코드 → AI. 비즈니스 로직, 니치한 라이브러리 조합, 보안 검증 → 수동.
3. 기술 스택을 AI 친화적으로 선택한다. GitHub 스타 수가 많고, 공식 문서가 잘 돼 있고, 예제가 풍부한 스택을 고르는 것이 AI 코딩 도구의 정확도를 높인다.
4. 3회 실패 규칙을 적용한다. AI가 같은 유형의 실패를 3번 반복하면 접근법을 바꾸거나 직접 한다. "한 번 더"의 유혹에 빠지면 시간만 낭비된다.
5. 코드 리뷰를 생략하지 않는다. AI가 짠 코드도 반드시 읽는다. 특히 인증, 결제, 데이터 삭제 관련 코드는 한 줄씩 검증한다.

솔직히 말하면, 이 프로젝트가 성공한 건 AI 도구 덕분만은 아니다. 10년 넘는 웹 개발 경험이 있었기 때문에 AI의 제안이 맞는지 틀리는지 즉시 판단할 수 있었다. AI 코딩 도구는 경험 있는 개발자의 생산성을 폭발적으로 높여주지만, 경험을 대체하지는 않는다.

다음 사이드 프로젝트에서도 같은 조합을 쓸 것이다. 다만 이번에 배운 실패 패턴들을 CLAUDE.md에 미리 적어둘 생각이다. AI도 사람처럼 같은 실수를 반복하니까, 미리 경고해주는 게 서로에게 이득이다.