Mocha AI 앱 빌더 완벽 튜토리얼: 프롬프트에서 출시까지
Mocha AI의 전 과정을 단계별로 안내합니다——첫 프롬프트 작성, Google 로그인과 Stripe 결제 추가, mocha.app 서브도메인 배포, 코드 내보내기까지. 2026년 8월 서비스 종료의 전말도 공식 문서로 검증한 사실과 함께 정리했습니다.
핵심 요약
- Mocha(getmocha.com)는 AI 풀스택 앱 빌더였습니다. 평이한 문장으로 앱을 설명하면 데이터베이스·인증·호스팅을 갖춘 실제 React + TypeScript 앱을 만들고, 원클릭으로 mocha.app 서브도메인에 배포해 주었습니다.
- 작업 흐름: 프롬프트 → AI 계획 검토 → 라이브 미리보기 테스트 → 채팅으로 반복 개선. Discuss 모드는 코드를 건드리지 않고 계획을 세우고, Direct Edit은 크레딧 없이 텍스트를 수정합니다.
- 코드의 소유자는 사용자였습니다. 헤더의 앱 이름 뒤에 다운로드 버튼이 있었고, 스택은 이식 가능했으며(React·Hono·SQLite) 데이터베이스는 CSV 내보내기가 가능했습니다.
- Mocha는 2026년 8월 1일에 서비스를 종료했습니다. 이 튜토리얼은 빌더의 실제 작동 방식을 기록하고, FAQ에서 앱·결제·내보내기의 뒷이야기를 다룹니다.
Build A Full App In 15 Minutes + Stripe Monetization (Mocha AI Guide)
채널:Wanderloots28:57
Mocha AI App Builder 101: Everything You Need To Build Your App
채널:Mocha (official channel)13:57
Mocha documentation (getting started, billing, limits, hosting)
문서:docs.getmocha.com
Mocha is shutting down on August 1 (announced May 15, 2026)
공지:getmocha.com/blog
모든 사실은 2026년 9월 Mocha 공식 문서 및 서비스 종료 공지와 대조해 확인했습니다. 가격 수치는 튜토리얼 영상에 나온 가격 페이지(2025년 12월)와 Mocha 문서에서 가져왔습니다.
스크린샷은 위 영상에서 가져왔으며, 출처와 각 단계의 정확한 타임스탬프 링크를 함께 표기했습니다.
Mocha AI 사용법: 프롬프트에서 출시까지
파트 1 · 아이디어에서 첫 빌드까지
- 1
계정을 만들고 빌더 열기
getmocha.com에서 무료로 가입하고 대시보드에서 "Create new app"을 클릭합니다. 모든 프로젝트는 "What do you want to build?" 상자에서 시작합니다. 아이디어를 적고 참고 스크린샷을 첨부하고, 방문자를 맞을 준비가 될 때까지 Private로 두세요. 막히면 상자 아래의 Inspiration·Templates·Prompting 101을 활용하세요.
모든 Mocha 앱의 출발점, "What do you want to build?" 상자3:06에 보기 - 2
한 줄이 아니라 요구사항을 쓰기
기능과 디자인을 구체적으로 적습니다. 데모 프롬프트는 상품 그리드·카테고리·필터·장바구니·Stripe 결제·이메일/비밀번호 및 Google 로그인·관리자 로그인을 갖춘 커머스+멤버십 스토어를 요청하고, 핵심 기능부터 만들고 다음 단계를 목록으로 달라고 했습니다. 구체성이 승부처입니다. "헤더에 파란색 Contact Us 버튼 추가"가 "좀 더 예쁘게"보다 낫습니다.
데모 요구사항: Stripe·Google 로그인·관리자 역할이 있는 커머스 멤버십 스토어3:15에 보기 - 3
Mocha에게 빌드시키고 미리보기에서 테스트
제출하면 Mocha는 먼저 계획을 세운 뒤 코드를 작성합니다. 데모 스토어의 첫 빌드는 약 3분 24초, 크레딧 19개가 들었고 "13 changes made" 요약으로 마무리됐습니다. 가운데 미리보기는 실제 동작하는 앱입니다. 상품 필터링, 다크 모드 전환, 장바구니 추가, 데스크톱/모바일 전환, Google 로그인으로 내장 인증까지 테스트하세요.
생성된 스토어프론트: 카테고리 필터, 상품 그리드, 다크 모드9:54에 보기
파트 2 · 내부 들여다보기: 코드, 데이터, 수정
- 4
생성된 코드 살펴보기
Code 탭에는 Mocha가 작성한 React + TypeScript 프로젝트 전체가 보입니다. 파일과 폴더를 추가하고 코드를 직접 수정할 수 있고, 일부 플랫폼 파일은 잠겨 있으며 AI 빌드 중에는 전부 읽기 전용입니다. 기술에 익숙한 사용자는 이 지점에서 인수인계할 수 있습니다.
Code 탭: 전체 프로젝트. 빌드 중에는 플랫폼 파일이 잠깁니다5:12에 보기 - 5
개발 데이터베이스 살펴보기
Data 탭에는 users·products·cart_items·memberships 테이블이 개발용 목업 데이터와 함께 표시됩니다. 프로덕션 데이터는 배포 전까지 별도로 비어 있어 여기서 자유롭게 실험해도 실사용자에게 영향이 없습니다. Mocha는 프로덕션 데이터를 직접 수정하지 않으므로 상품 등록은 앱 안의 관리자 패널로 합니다.
Data 탭: 목업 상품이 채워진 개발 테이블10:38에 보기 - 6
Fix with AI로 오류 복구하기
미리보기가 실패하면 Mocha는 오류를 보여주고 Quick restart와 "Fix with AI"를 제안합니다. 데모에서는 클릭 한 번으로 TypeScript 크래시를 수정했습니다(수정 1회에 크레딧 1~3). 잘 안 풀리는 버그는 Discuss 모드로 AI와 원인을 먼저 정리한 뒤 수정시키세요.
미리보기 실패? Fix with AI가 데모 오류 대부분을 한 번에 고쳤습니다7:36에 보기 - 7
Google 로그인 켜기
Mocha 앱에는 Google 로그인이 기본 내장돼 있습니다. Settings에서 Google Sign In을 열어 Google OAuth 클라이언트 ID와 시크릿을 붙여넣고, 패널에 표시된 Mocha 리디렉션 URI를 Google Cloud Console에 등록하세요. 로그인 페이지 브랜딩은 별도 설정이니 첫 단계에서는 건너뛰어도 됩니다.
Google Sign In 설정: OAuth 자격증명과 Mocha 리디렉션 URI 붙여넣기6:27에 보기 - 8
빌드 전에 Discuss 모드로 계획하기
입력창을 Discuss로 바꾸면 AI는 코드를 건드리지 않고 질문에 답합니다. "what are our next steps?"라고 물으면 앱 상태를 점검하고 우선순위를 제안합니다. 데모는 이것으로 Stripe 결제 → 주문 내역 → 멤버십 순서를 정했습니다. 계획이 맞으면 빌드 모드로 돌아와 "build it"이라고만 하면 됩니다.
Discuss 모드는 코드를 바꾸지 않고 "다음 단계"에 답해 줍니다12:21에 보기
파트 3 · 결제, 배포, 비용
- 9
가이드형 시크릿 플로우로 Stripe 연결
Stripe 결제를 요청하면 Mocha는 프로젝트에 STRIPE_SECRET_KEY 시크릿을 추가하고, Walkthrough 버튼으로 Stripe 대시보드에서의 클릭 하나하나를 안내합니다. 테스트 키와 라이브 키 구분까지 포함됩니다. sk_test 키를 붙여넣고 제출하면 결제가 연결됩니다. 시크릿은 환경 변수로 저장되며 배포 후 앱 사용자에게는 보이지 않습니다.
STRIPE_SECRET_KEY 대화상자와 내장 Stripe 워크스루14:23에 보기 - 10
mocha.app 서브도메인에 배포하기
Publish 버튼을 누르면 URL, Status 드롭다운, 공개 범위가 있는 대화상자가 열립니다. 테스트 중에는 Status를 Unpublished로, 공개 범위를 Private로 두고 Publish app을 클릭하세요. 데모에서는 재배포에 약 15초였습니다. Stripe 테스트 결제는 배포된 URL에서만 동작합니다. 에디터 샌드박스가 리디렉션 결제를 막기 때문입니다.
Publish app: mocha.app 서브도메인을 고르고 테스트 중엔 Unpublished 유지17:30에 보기 - 11
라이브 앱에서 테스트 결제 실행하기
관리자 패널로 상품을 추가하고, 배포된 URL에서 결제를 진행한 뒤 Stripe 테스트 카드 4242 4242 4242 4242로 지불하세요. 데모에서는 "Payment Successful"이 표시되고 Stripe 대시보드에 거래가 나타났습니다. 모두 정상이면 Status를 Published로 바꾸고 링크를 공유합니다.
Payment Successful: 배포된 URL에서의 $699.98 테스트 결제19:51에 보기 - 12
본격적으로 쓰기 전에 비용 파악하기
무료 티어는 Mocha 문서 기준 20 크레딧으로 시작합니다. 튜토리얼 영상(2025년 12월)의 가격 페이지에서는 Bronze가 월 $20에 1,500 크레딧, Silver는 $50에 4,500, Gold는 $200에 25,000이었습니다. 크레딧은 AI 작업이 성공했을 때만 차감되며, 배포·Direct Edit·버전 복원은 항상 무료입니다.
2025년 12월 가격 페이지: Bronze, Silver, Gold 3개 플랜27:15에 보기
내보내기의 진실: 코드는 당신 것이었다 — 그리고 지금은 어떻게 됐나
"코드를 가져갈 수 있나?"는 Mocha를 선택할 때 늘 결정적인 질문이었습니다. 정직한 답은 두 부분입니다. 서비스가 살아 있는 동안의 넉넉한 내보내기, 그리고 무너질 때의 짧은 탈출 기회. 날짜와 함께 기록합니다.
- 1코드 다운로드(서비스 중): 헤더의 앱 이름을 클릭하면 코드 다운로드 버튼이 나타났습니다. Mocha 공식 FAQ는 "Mocha로 만든 모든 것은 당신의 것"이라고 밝혔고 Cursor·Windsurf 등 어떤 IDE로도 가져가라고 안내했습니다. 스택은 이식 가능했습니다. TypeScript, React, API용 Hono, SQLite.
- 2제한: GitHub 동기화 불가, Vercel·Netlify 등 외부 호스팅 배포 불가 — Mocha는 자체 Cloudflare 인프라에만 배포했습니다. 다만 코드 읽기는 크레딧이 0이어도 항상 무료였습니다.
- 3데이터베이스: Mocha에게 앱 안에 CSV 내보내기 기능을 만들어 달라고 할 수 있었고, Data 탭에서 개발·프로덕션 데이터를 확인할 수 있었습니다.
- 4종료 시 내보내기 도구: 2026년 5월 15일 공지는 앱 Settings → Export에 코드와 데이터를 내려받는 도구를 추가하면서도, Mocha 밖에서 실행하려면 "엔지니어링 노력이 필요하다"고 경고했습니다.
- 5마이그레이션: 공식 추천 경로는 모바일 앱도 지원하는 유사 통합 빌더 Anything으로의 원클릭 이전(마이그레이션 후 수정용 $20 크레딧 제공)이었습니다. 빌더는 2026년 8월 1일에 멈췄고, 이전·내보내기 링크는 종료 후 30일간 유지될 예정이었습니다.
교훈은 Mocha를 넘어 적용됩니다. 어떤 AI 앱 빌더에 비즈니스를 얹기 전에 코드가 어디에 살고, 스택이 다른 곳에서 도는지, 종료 시 출구가 어떤 모양인지 확인하세요. 아래 관련 가이드——Lovable부터 DeepSeek in Cursor까지——가 이전지 검토에 도움이 됩니다.
Mocha 가격과 크레딧 구조 완전 정리
Mocha는 부분 유료(freemium) 모델이었습니다. 크레딧은 AI 작업에, 티어는 크레딧과 각종 한도에 쓰였습니다. 아래 수치는 Mocha 문서(2026년 9월 확인)와 튜토리얼 영상의 가격 페이지(2025년 12월)에서 왔습니다.
- 1무료 티어: 스타터 20 크레딧, 배포 앱의 "Made in Mocha" 워터마크(유료 플랜에서 제거), 소규모 프로젝트에 충분한 용량. 데모의 풀 앱——인증·Stripe·멤버십·관리자——는 총 약 100 크레딧이 들었습니다.
- 2유료 티어(2025년 12월 가격 페이지): Bronze 월 $20에 1,500 크레딧, Silver 월 $50에 4,500(가장 인기), Gold 월 $200에 25,000. 문서에서도 같은 크레딧 수치를 확인할 수 있으며 매월 충전되고, 남은 구독 크레딧은 월 할당량의 최대 2배까지 이월됐습니다.
- 3크레딧 소모: 간단한 텍스트·스타일 변경 5~15, 새 컴포넌트 15~40, 새 페이지 30~60, 데이터베이스가 있는 복잡한 기능 50~100+. 실패한 AI 작업은 무료 — 변경이 성공했을 때만 차감됐습니다.
- 4항상 무료: 프로젝트 탐색, Direct Edit 텍스트 수정, 데이터베이스 조회, 앱 배포, 버전 복원. 앱 크기 제한은 Bronze에서 적용되었고 Silver 이상은 일반 앱 기준 사실상 무제한이었습니다.
종료 후 결제: 구독은 2026년 8월 1일까지 기존 요금으로 유지되다 그날 자동 해지되었고, 이후 청구는 없었습니다. 결제 문의 창구가 공지에 안내됐지만 종료 후 30일 기간은 지금은 지났습니다.