26.04.30 / JUN.NXP (naebon@naver.com)
- 이번 과정개요, 커리큘럼, 각종자료 다운로드
- P1. 바이브코딩 기반 앱 기획-빌드-배포 4대 프로세스
- P2. 바이브코딩 (Vibe Coding) 1인 기업가 성공사례 분석
- P3. 바이브코딩을 위한 주요 기술 스택 (FE, BE, APIs +)
과정개요, 커리큘럼, 각종자료 다운로드
- 교육방식: 온라인 (ZOOM 라이브)
- 강의진행: JUN 동준상 강사 (naebon@naver.com)
- 대상: AI·개발 입문자, 비개발 디지털 워커, 실습 중심 학습자
- 방식: 실시간 코드/프롬프트 ( Cursor, Claude Code, Gemini Code )
- 공개교재 다운로드 (PDF / 70p)
- 정규교재 다운로드 (PDF / 120p)
P1. 바이브코딩 기반 앱 기획-빌드-배포 프로세스
1. 브레인스토밍
LLM으로 아이디어를 니치 아이템으로 정련
타겟 시장에서 검증된 유사 서비스 벤치마킹
구현에 사용되는 핵심 기능 요소, 사전 지식 파악
2. 기획 (설계)
LLM으로 전반적인 빌드 절차, 주요 산출물,
API 키 등 준비 및 요구 사항, 배포 방식 확인
간결하게 작성된 필수 기능 요구 텍스트로 프롬프트 구성
3. 빌드
Cursor, Code 등 바이브코딩 도구에 프롬프트 입력
빌드 과정 컨펌하며 전반적인 흐름 관리, 모니터링
기능정의서, 핵심 코드 파일, 부산물 등 산출물 리뷰
4. 배포-리뷰-코드 개선 2~3회 반복
바이브코딩 도구로 완성된 파일 패키지를 타겟 플랫폼에 적용
핵심 기능, 보조 기능, 디자인 요소의 정상 작동 여부 확인 및 개선 반복
바이브코딩 노트에 프로젝트 개요, 진행 방식, 결과 정리하고 마무리
1) Discover & Plan — 아이디어 발굴 · 요구정의 · 기술 스택 결정
무엇을
- 문제 정의, 페르소나·핵심 시나리오 도출
- AI와 아이디어 확장/수렴(브레인스토밍)
- 기술 스택(프론트/백엔드/데이터/배포) 가설 수립
어떻게
- LLM으로 문제·시장·기능 우선순위 신속 정리
- “로우‐파이 로드맵”과 1~2주 MVP 스코프 확정
- 스택 후보 비교(속도·학습곡선·비용·배포 난이도)
산출물
- 1페이지 PRD(문제, 사용자, 핵심 기능 3가지)
- 아키텍처 스케치(간단한 다이어그램)
- 기능 우선순위 백로그(MoSCoW)
예시 프롬프트
“너는 제품 기획자이자 개발 코파일럿이야. ‘코멘트 요약 앱’의 핵심 사용자 여정 3가지, MVP 기능 5개, **제약(데이터/보안/비용)**을 표로 정리하고 2주 로드맵으로 쪼개줘.”
체크리스트
- 문제/사용자/핵심가치 1문장 요약
- MVP 기능 ≤ 5개, 반드시 가격·수익화 가설 1줄
- 스택 선택 근거(왜 이 조합인지) 기록
2) Build — AI 주도 코드 생성 · UI 디자인 · 자산(브랜딩) 제작
무엇을
- 클라우드/로컬 개발환경 준비(Replit/VSCode/Cursor 등)
- AI 보조 코딩(Copilot·Cursor Composer 등)으로 기능 단위 구현
- v0/Lovable 등으로 프론트엔드 초안, Midjourney 등으로 로고·아이콘 제작
어떻게
- “한 번에 한 단계” 원칙(라우팅 → 데이터 → UI → 결제 등)
- 오류 로그·스택트레이스를 그대로 LLM에 전달해 수정 지시
- 컴포넌트 스토리북/샌드박스에서 UI 단위 테스트
산출물
- 기능 단위 커밋 로그(메시지: 기능/이슈/테스트 방법 포함)
- 재사용 가능한 프롬프트(생성/수정/디버깅 템플릿)
- 디자인 토큰(색/타이포/컴포넌트 가이드)
예시 프롬프트
“SaaS형 댓글 요약 앱.
POST /api/summarize엔드포인트를 Next.js로 구현해줘. 요구사항: 입력=원문텍스트, 출력=요약·키워드·톤 분석(JSON). 반드시: zod 스키마, 에러 핸들링, 3개 유닛테스트 포함. 수정 파일 경로와 코드 diff 제시.”
체크리스트
- 기능 1개당 PR/커밋 1개
- 실패 케이스 테스트 1개 이상
- LLM 응답을 신뢰하지 말고 실행·결과로 검증
- 프론트는 접근성·반응형 기본 점검
3) Validate & Iterate — 테스트 · 사용자 피드백 · 데이터 기반 개선
무엇을
- 로컬/스테이징에서 기능·성능·UX 점검
- 소규모 베타(10~30명)에게 사용 흐름 테스트
- 피드백 기반 A/B 실험, 프롬프트/모델/파라미터 튜닝
어떻게
- 오류 메시지·네트워크 로그를 AI에 붙여 “원인→수정안→검증절차” 요구
- 이벤트 수집(전환, 이탈, 오류율), 간단한 KPI 보드 만들기
- “실사용이 잦은 경로”부터 우선 개선
산출물
- 베타 피드백 표(요청·빈도·난이도·임팩트)
- 주간 릴리즈 노트(고친 것/남은 것/다음)
- 실험 리포트(A/B 결과·추천안)
예시 프롬프트
“아래 콘솔 에러를 분석해 가설→원인→수정 코드 diff→수정 후 수용 테스트 순서로 제시해줘. 또한 재발 방지용 로깅 포인트와 알림 웹훅도 추가해줘. (에러 로그 붙임)”
체크리스트
- 베타 사용자 10명 이상 인터뷰/설문
- 전환·완료율·에러율 3지표만 집중 추적
- 반드시 ‘없애도 되는 기능’ 탐색(심플화)
4) Launch & Operate — 배포 · 모니터링 · 자동화 · 수익화
무엇을
- 프로덕션 배포(Linode/Vercel/Cloudflare 등)
- 상태 모니터링/알림(헬스체크·업타임·에러 수집)
- 결제/정책/고객지원 라인 정비 및 운영 자동화
어떻게
- IaC/CI로 배포 자동화(환경변수·비밀키 관리 포함)
- 헬스체크 엔드포인트 + 업타임 봇 + 슬랙/텔레그램 알림
- 가격·플랜 A/B, 온보딩 개선으로 LTV↑
산출물
- 운영 Runbook(장애 대응, 롤백 절차)
- 약관/개인정보/환불정책(교육용 템플릿 가능)
- 가격표·결제 플로우·영수증 메일 템플릿
예시 프롬프트
“Docker로 프로덕션 빌드/배포 파이프라인을 작성해줘. 요구: GitHub Actions, 캐시 최적화, 릴리즈 태깅, 실패 시 롤백. Cloudflare Pages/Workers 기준 예시와 환경변수 템플릿(.env.sample) 포함.”
체크리스트
- 모니터링 3종: 업타임/에러/성능
- 결제 성공/취소/만료 웹훅 처리
- 주간 리포트 자동 발송(지표·장애·고객 피드백)
- 개인정보/로그 보존기간 설정
프로 팁 (전 단계 공통)
- 문맥 관리: 새 주제는 새 스레드. 수정 파일 경로·diff·재현 절차를 매번 요구.
- 한 걸음씩: “Stripe 붙이지 말고 더미로 디자인” 같이 범위 제한.
- 빠른 실험: 2~3일 사이클로 “빌드→테스트→피드백→배포” 회전.
- 보안/비용: 키는 비밀 관리, 모델 호출은 캐시/요약/스트리밍으로 비용 제어.
- 망분리·보안 환경: 불가 시 온프레미스 LLM/프록시로 대체 경로 설계.
P2. 바이브코딩 (Vibe Coding) 1인기업가 성공사례 분석
바이브 코딩(Vibe Coding)으로 글로벌 히트 게임, 서비스, 앱을 만들어 유명세를 얻은 Pieter Levels, Blake Anderson, Zach Yadegari에 대해 알아봅니다.
1. Pieter Levels의 바이브코딩 사례
- 프로필 및 접근 방식
- 노마드 라이프를 살며, 40여 개의 스타트업을 단독으로 설계·개발·운영한 ‘인디 해커의 대명사’
- 종속된 방식 없이 HTML, PHP, SQLite 같은 경량 스택을 활용해 혼자 빠르게 배포하고 개선하는 방식을 선호
- 대표 사례: AI 기반 간단 게임, ‘fly.pieter.com’
- AI 도구 기반 “바이브 코딩”으로 30분 만에 브라우저용 비행 시뮬 게임을 완성
- 이 게임은 광고 슬롯(브랜디드 비행선, 빌보드 등)을 통해 월 수익 약 $50,000을 달성
- Medium ‘Coding Beauty’ 기사에서도 17일 만에 ARR $1M 달성 사례로 소개
2025 Vibe Coding Game Jam
https://jam.pieter.com/
Transcript for Pieter Levels: Programming, Viral AI Startups, and Digital Nomad Life | Lex Fridman Podcast #440
https://lexfridman.com/pieter-levels-transcript
2. Blake Anderson의 바이브코딩 사례
- 프로필 & 성공 궤적
- 20대 초반 비개발자가 ChatGPT 등 AI 도구로 앱을 제작, 수백만 달러 수익을 낸 사례로 주목
- ‘Rizz GPT’ (현재 Plug AI)는 $3.6M 수익, 이어 ‘Umax’는 $6.3M, 다른 프로젝트도 수백만 달러 수익을 기록
- 특징 및 전략
- “Build fast, launch simple” 원칙 하에 한 달 만에 앱 완성,
- TikTok 크리에이터와 자연스럽게 협업하는 바이럴 마케팅 전략 중시
- 일부 기사에 따르면 세 앱을 통해 총 $10M 매출, 현재도 ‘Riz GPT’만으로도 매월 $200K 수익
3. Zach Yadegari의 바이브코딩 사례
- 프로필 & 앱 소개
- 10대 개발자로 시작해 17-18세에 Cal AI라는 사진 기반 칼로리 측정 앱을 출시
- 이 앱은 5개월 간 500만 다운로드, 월 $2M 이상 매출, 유지율 30%
- 성장 과정
- 중학생 때부터 Python/C#을 독학했고, 16세 때 학교 차단 우회 게임 사이트 ‘Totally Science’를 만들어 $100K에 판매
- 이후 Blake Anderson와 함께 Cal AI를 공동 개발, 샌프란시스코 해커하우스에서 집중적으로 작업
- 관련 외신 및 분석 기사 링크
- TechCrunch 기사: Cal AI 다운로드 및 수익 등 상세
- Medium 등 분석 콘텐츠: Cal AI의 혁신 지점, 젊은 개발자의 성공 모델 사례
바이브코딩 달인 3인의 성공기 요약
| 인물 | 프로젝트/앱 | 주요 성과 및 포인트 |
|---|---|---|
| Pieter Levels | fly.pieter.com (비행 게임) | 30분 만에 제작, $50K/월 수익, ARR $1M 달성 |
| Blake Anderson | Rizz GPT, Umax, Plug AI | 수개월/수주 만에 수백만 달러 수익, $10M 매출 |
| Zach Yadegari | Cal AI (사진 칼로리 AI 앱) | 5M 다운로드, 월 $2M 매출, 10대 개발자 성공 사례 |
참고자료
FC | 바이브코딩 바이블 : Cursor AI로 나 혼자 끝내는! 1인 개발 수익화 패키지 (17H)
https://fastcampus.co.kr/data_online_vibecoding
P3. 바이브코딩 기술 스택
“바이브코딩(Vibe Coding)” 방법론은 AI 도구를 적극적으로 활용하여 제품을 빠르고 효율적으로 개발하고 출시하는 데 중점을 둡니다. 이에 따라 사용되는 기술 스택은 주로 AI 기반의 생산성 도구와 클라우드 서비스로 구성되어 있으며, AI·개발 입문자나 비개발 디지털 워커도 엔터프라이즈 수준의 소프트웨어를 구축할 수 있도록 지원합니다.
1. 핵심 AI 개발 도구
◦ Cursor (Cursor Composer): AI 기반의 메인 코드 생성기 및 편집기로, 자연어 프롬프트만으로 복잡한 앱 코드를 생성하고 편집할 수 있게 합니다. Alex Finn은 Cursor를 통해 엔터프라이즈 수준의 소프트웨어를 혼자서 구축할 수 있다는 것을 깨달았으며, Comment Genie 앱 개발 시에도 핵심적인 역할을 했습니다. **API 문서(@docs)**를 참조하거나 **전체 코드베이스(@Codebase)**를 분석하여 정확한 코드 생성을 돕는 기능이 특징입니다.
◦ ChatGPT (GPT 4o, o1-preview, ChatGPT o3): 앱 아이디어를 브레인스토밍하고, 개발 로드맵을 생성하며, 프런트엔드, 백엔드, 데이터베이스 등 앱 개발을 위한 최적의 기술 스택과 단계별 개발 가이드를 제안받는 데 사용됩니다. Alex Finn은 이를 “제품 관리자(product manager)” 역할로 활용했다고 언급했습니다.
◦ Claude, Gemini / Google AI Studio: ChatGPT와 함께 AI 모델 및 API 활용을 위한 도구로 언급되며, Google AI Studio는 개인 브랜딩 랜딩 페이지 구축에 활용될 수 있습니다.
2. 클라우드 기반 개발 및 배포 환경
◦ Replit: 코드를 클라우드에 저장하고 편집하며 빠르게 앱을 테스트할 수 있는 플랫폼입니다. 3D/캔버스 인터랙션 템플릿에 three.js와 함께 활용됩니다.
◦ Vercel: Next.js 기반 앱 배포 및 호스팅에 사용되며, Alex Finn은 Creator Buddy 앱 호스팅에 Vercel을 월 20달러에 사용하고 있습니다.
◦ Cloudflare Pages/Workers: 앱을 클라우드에 배포하고 스케줄러 기능 등을 활용하는 데 사용됩니다.
◦ Linode (Akamai): Docker를 이용해 빌드된 앱을 호스팅하는 클라우드 서버로 활용됩니다.
◦ Docker: 앱을 쉽게 빌드하고 어떤 머신에서든 실행 가능한 포터블한 형태로 만드는 데 사용됩니다. docker compose yaml 파일 등을 생성하여 배포를 용이하게 합니다.
3. 백엔드, 데이터베이스 및 인증
◦ Supabase (+Auth): 회원가입/로그인 및 프로필 스키마 설정 등 백엔드/인증 기능과 데이터베이스 역할을 동시에 수행합니다. Alex Finn은 Creator Buddy 앱의 데이터베이스로 Supabase를 월 20달러에 사용하며 “매우 쉬운 사용성”을 강조했습니다.
◦ Clerk: Supabase의 대안으로 제시된 백엔드/인증 도구입니다.
◦ SQLite, HTML, PHP: Pieter Levels는 이들을 경량 스택으로 선호하여 혼자서 빠르게 앱을 배포하고 개선하는 데 활용했습니다.
◦ Notion, Google Sheets, Public APIs: 데이터 저장 및 활용을 위한 도구들입니다. 특히 Notion은 Notion MCP를 통해 정적 사이트 자동 업데이트 등 자동화 기능과 연계됩니다.
◦ 로컬스토리지/간단 DB: 간단한 건강 루틴 트래커와 같은 프로젝트에서 사용됩니다.
◦ PostgreSQL: Cursor와 MCP를 통해 연결될 수 있는 데이터베이스로 언급됩니다.
4. 프런트엔드 및 디자인 도구
◦ Next.js: Alex Finn의 Creator Buddy 앱이 구축된 프런트엔드 프레임워크입니다.
◦ v0: AI 기반 디자인 도구로, UI 컴포넌트나 스타일을 빠르게 생성하여 아름답고 반응형 웹 페이지를 만드는 데 도움을 줍니다.
◦ Lovable: 개인 브랜딩 랜딩 페이지 구축에 활용될 수 있습니다.
◦ Xcode (iOS), Android Studio (Android): 각 모바일 플랫폼의 네이티브 앱 개발 환경입니다. Creator Magic은 Cursor AI와 함께 이들을 활용하여 iOS 및 Android 앱을 개발했습니다.
◦ three.js: Replit 템플릿과 함께 3D/캔버스 인터랙션 요소를 삽입하는 데 사용됩니다.
◦ Swift: Cursor AI가 iOS 앱 개발 시 자동으로 생성하는 코딩 언어로 언급됩니다.
◦ Python/C#: Zach Yadegari가 10대에 독학하여 개발을 시작한 언어입니다.
5. 자동화 및 에이전트 구축 도구
◦ Make/Zapier: 워크플로우 자동화, 이메일 발송, AI 트레이딩 에이전트 구축 등 다양한 앱 연동과 자동화에 사용됩니다.
◦ MCP (Model Context Protocol): Playwright, Notion, GA4, Payments와 연동되는 고급 자동화 프로토콜입니다. Cursor와 연동하여 데이터베이스(PostgreSQL), GitHub, 브라우저 도구와의 상호작용을 가능하게 합니다.
◦ Playwright: MCP와 함께 대상 페이지 스크래핑에 사용됩니다.
◦ AssemblyAI: 음성→텍스트 변환의 대안으로 소개됩니다.
6. 결제 시스템
◦ Toss Payments: 국내 결제 연동을 위해 사용됩니다.
◦ Stripe: 해외 결제 연동을 위해 사용됩니다.
7. API 및 외부 서비스
◦ YouTube Data API: 유튜브 트렌드 컬렉터 및 댓글 응답 앱 (Comment Genie) 개발에 활용됩니다.
◦ X API: Alex Finn의 Creator Buddy 앱이 트윗 데이터를 수집하는 데 사용되며, 월 5,000달러라는 높은 비용이 언급되었습니다.
◦ TAAPI: AI 트레이딩 에이전트를 위한 실시간 트레이딩 신호를 제공합니다.
◦ Alpaca: AI 트레이딩 에이전트가 실제 주식 거래를 실행하는 데 사용됩니다.
◦ Resend: 이메일 API 서비스로 사용됩니다.
◦ beehiiv/스티비: 뉴스레터 구독 폼 삽입에 활용됩니다.
8. 분석 및 SEO 도구
◦ GA4 (Google Analytics 4): 웹사이트 방문수, 전환율 등 기본적인 이벤트 및 전환 설정을 통해 앱의 성과를 분석합니다.
◦ Search Console: 웹사이트가 검색 엔진에 노출되는 방식을 관리하고 SEO를 개선합니다.
◦ 기본 SEO/OG 태그: 검색 엔진 최적화 및 소셜 미디어 공유 시 표시되는 정보를 설정하는 데 중요합니다.
9. 기타 유틸리티 및 보조 도구
◦ Midjourney: 앱 로고 및 아이콘을 빠르게 생성하는 AI 이미지 생성 도구입니다. 다른 AI 아트 생성기도 활용 가능합니다.
◦ VS Code: Cursor 외에 보조 에디터로 사용될 수 있습니다.
◦ Slack: 자동화 운영 대시보드에서 에러 알림 등 알림 기능에 활용됩니다.
◦ 구글폼/Typedream: 커뮤니티 피드백을 수집하기 위한 폼 연결에 사용됩니다.
이러한 기술 스택은 “바이브코딩”이 AI 도구의 강력한 기능을 활용하여 개발 진입 장벽을 낮추고, 빠른 프로토타이핑과 배포를 가능하게 하는 전략을 추구함을 명확히 보여줍니다. 최소한의 코딩 경험으로도 복잡한 기능을 구현하고 시장에 제품을 출시할 수 있도록 설계된 것이 특징입니다.
이 포스트에는 수강생 특화 콘텐츠가 포함돼 있습니다. / 첫 포스팅: 25.08.29 / 포스트 문의: JUN (naebon@naver.com)
