클로드 코드와 Codex로 월 10만 달러 유료 웹 앱 만드는 실전 프롬프트와 플레이북

Meng To(@MengTo)가 Claude Code와 Codex를 결합하여 월 반복 매출(MRR) 10만 달러를 달성한 제작 전략과 함께, 실제 유료 웹 애플리케이션 개발에 사용하는 구체적인 플레이북 및 3단계 핵심 프롬프트를 공개했습니다.

이미지 출처: X @MengTo

Meng To는 45분 분량의 튜토리얼 영상을 공유하며 자신이 월 반복 매출(MRR) 10만 달러를 돌파했다고 밝혔습니다. 기존 제품인 Aura는 이제 전체 매출의 20%에 불과하며, AI 코딩 에이전트를 전면에 내세운 완전히 다른 제품 개발 전략으로 전환했다고 설명했습니다. 이에 대해 Meng To는 "지난 몇 달간 쉽지 않았지만 마침내 결실을 맺고 있다"며 지금이 "1인 개발자와 디자이너에게 황금기(golden age for solo devs/designers)"라고 전했습니다.

유료 웹 앱 제작을 위한 AI 플레이북 9가지 원칙

원문에서 Meng To가 공유한 AI 기반 유료 웹 애플리케이션 구축 플레이북의 9가지 핵심 원칙은 다음과 같습니다.

1. 일상 도구에서 아이디어 발굴: 평소 매일 사용하는 도구(Codex, Cursor, Figma 등)를 관찰하고, 그 안에서 무엇이 부족하거나 불편한지 탐색하라.
2. 기존 제품의 현대적 재해석: 과거에 만들었던 제품들을 다시 살펴보고, "오늘날의 최신 AI 도구를 활용한다면 어떻게 처음부터 다시 구축할 것인가?"를 질문하라.
3. 역할별 AI 모델 분리: 프론트엔드 인터페이스 구현에는 Opus 5.5를 사용하고, 개발 환경 제어 및 하네스(Harness) 실행에는 Codex를 배정하라.
4. 원샷(One-shot) 베이스라인 후 모듈 분할: 초반에는 원샷 프롬프트로 전체 기준선(baseline)을 잡고, 이후 세부 파트로 분할하여 완성도를 높여라. 단순한 원샷 코드는 누구나 쉽게 복제할 수 있다.
5. 기술 스택과 미래 확장 요구사항 사전 명시: React + Vite, Supabase, Stripe 등 사용할 핵심 스택과 향후 확장 요구사항을 프로젝트 시작 시점에 명시하라.
6. 기능별 단일 품질 레퍼런스 지정: 각 기능마다 품질의 기준이 될 단일 레퍼런스를 제공하라 (목업은 {ref}, 디자인 및 2D 도구는 Figma, 3D 제작 및 옵션은 Spline, 컴포넌트 라이브러리는 Figma Community, 랜딩 페이지는 Linear 등).
7. 생성형 AI 레이어 결합: 단순한 데이터 표시(display)에 그치지 않고, 외부 API를 연동한 AI 레이어를 추가해 도구가 콘텐츠를 직접 생성(generate)하도록 구성하라.
8. 자가 채점 및 오류 스크린샷 검증: AI에게 스스로 작업 결과물을 10점 만점으로 평가하게 하고, 오류가 발생한 지점을 직접 스크린샷으로 캡처해 검증하도록 지시하라.
9. 데모 녹화와 피드백 루프 지속: 완성된 기능의 데모 영상을 촬영해 여러 채널에 공유하고, 수집된 피드백을 에이전트에 다시 입력하며 배포(ship) 주기를 이어가라.

Meng To는 이러한 반복 개발 과정의 핵심 태도로 "내가 관심을 기울이면 AI도 관심을 기울인다(If you care, the AI cares)."라는 원칙을 강조했습니다.

실전 프롬프트 3선: 기획부터 생성 기능, Stripe 결제 연동까지

Meng To가 실제 유료 웹 앱 개발 과정에서 사용하는 3단계 프롬프트 원문 전문입니다.

프롬프트 1: 회의록 기반 기획 및 풀스택 앱 스캐폴딩

회의록을 바탕으로 2D·3D 목업 편집 기능과 마케팅 에셋 변환 기능을 갖춘 풀스택 협업 앱을 구축하도록 지시하는 프롬프트입니다.

Can you create an app based on my meeting notes? I want a tool that creates editable 2D and 3D mockups. I want to switch the screen and turn the results into marketing materials: YouTube covers, Twitter posts, motion design, mockups, and website creatives. I want to animate all of that.
Use React and Vite. Use Supabase for the database and real-time collaboration, including teams and invitations for team members. Use Stripe Managed Payments for payments.
References: {ref} for mockups; Figma for design and 2D tooling; Spline for 3D creation and options; Figma Community for the library; and Linear for the landing page.
Self-verify until it's perfect.

• 핵심 기술 스택 지정: 프론트엔드는 React와 Vite를 기반으로 하며, 데이터베이스와 실시간 협업(팀 초대 및 권한 관리)은 Supabase를 활용하도록 지정했습니다.
• 상용 결제 시스템 명시: 결제 인프라로 Stripe Managed Payments를 즉시 연동하도록 요구했습니다.
• 기능별 참조 모델 분리: 2D 도구(Figma), 3D 생성(Spline), 에셋 라이브러리(Figma Community), 랜딩 페이지(Linear)의 명확한 벤치마크를 제시했습니다.
• 자율 검증 지침: Self-verify until it's perfect 구문을 통해 에이전트가 완성도를 스스로 검증하도록 지시했습니다.

프롬프트 2: 안전한 API 키 관리와 AI 생성 레이어 추가

제품 내부에 외부 AI 모델(Claude, Higgsfield, OpenAI)을 연동해 아이콘 생성 기능을 결합하는 프롬프트입니다.

Create an AI tool that lets me generate icons from a prompt. Use Claude, Higgsfield, or OpenAI. I'll log into the provider's website. Create the API key, store it securely server-side in Firebase or Supabase, and use it securely to generate new icons. Tell me if you need me to complete any steps.

• 보안 격리: API 키를 클라이언트에 노출하지 않고 Firebase 또는 Supabase 서버사이드에 안전하게 저장하도록 명시했습니다.
• 인터랙티브 협업: 에이전트가 단독으로 처리할 수 없는 웹사이트 로그인 및 키 발급 과정을 인간 작업자에게 단계별로 요청하도록 설계했습니다.

프롬프트 3: 초보자 맞춤형 Stripe Managed Payments 및 웹훅 구축

유료 서비스 전환에 필수적인 결제 파이프라인과 웹훅 처리를 에이전트 주도로 구성하는 프롬프트입니다.

Use Stripe Managed Payments. Set up the payment workflow and all required webhooks. Do as much of the setup as you can yourself. When you need me to do something, tell me exactly what to do and walk me through it as a beginner who has never set up payments before.

• Stripe Managed Payments 활용: 결제 워크플로우와 필수 웹훅(Webhook) 핸들러 구축을 에이전트에게 전담시켰습니다.
• 단계별 가이드 위임: 결제 연동 경험이 없는 초보자 관점에서 사용자가 직접 수행해야 하는 외부 콘솔 설정 절차를 안내하도록 지시했습니다.

원문 출처

• Meng To X 포스트: I recorded a 45-min tutorial on how to create paid apps with Claude Code and Codex