바이브코딩으로 24분 만에 AI 서비스 완성하기 (기획부터 결제, 배포까지)
채널: Jay Choi | 인디해커 라이프
영상: YouTube · 24분
데모 서비스: 바이럴 영상 원클릭 생성 서비스 “모자이크” (사진 → 이미지 → 영상 파이프라인)
핵심 메시지
“중요한 건 도구가 아니라 흐름이니까요.”
“중요한 건 뼈대입니다. 단순한 아이디어를 상세한 기획으로 만드는 과정. 이 구조를 한번 이해하면 어떤 서비스든 만들 수 있어요.”
“랜딩 페이지에 뭘 넣어야 하는지를 알고 있느냐입니다. 그걸 알면 AI한테 시키든 직접 만들든 비슷하게 나옵니다.”
IDEAS
- 바이럴 영상을 원클릭으로 만들 수 있는 AI 서비스는 바이브코딩으로 빠르게 프로토타입 가능
- 사용자 여정(User Journey) 분석 → 기능 목록 자연스럽게 도출: 내가 사용자라면 뭘 할까? 를 분해하면 필요한 것들이 보임
- 아이디어를 상세한 기획으로 분해하는 과정이 실제 개발보다 중요한 뼈대
- 클로드-코드와 인스포지 조합으로 AI 에이전트가 DB·인증·스토리지를 직접 관리
- 영상 생성 AI는 시작 이미지를 넣어야 퀄리티가 훨씬 좋아짐
- 섹션별로 나눠서 랜딩 페이지를 만들면 품질이 훨씬 높아짐
- 크레딧 기반 1회성 결제는 비정기적 서비스에 적합한 비즈니스 모델
- Replicate는 다양한 AI 모델을 API로 호출할 수 있는 통합 플랫폼
- 파트별로 나눠 커밋하면 체크포인트로 작동하며 실수 복구가 쉬움
- CLAUDE.md에 디자인 제약(TailwindCSS만, 한국어 답변)만 명시해도 충분히 효과적
- 토스페이먼츠는 한국 서비스에서 결제 연동이 가장 편한 서비스 (LLM 퀵 레퍼런스 + MCP 서버 제공)
- 인스포지는 AI 에이전트를 위해 설계된 백엔드 (DB·인증·스토리지·배포 통합, 오픈소스)
- 구글 OAuth 배포 시 승인된 자바스크립트 원본에 실제 도메인 추가 필수
- 이미지 생성 → 영상 생성 파이프라인이 바이럴 영상 서비스의 핵심 구조
- 랜딩 페이지의 내용(무엇을 넣어야 하는지)을 아는 것이 AI보다 중요한 역량
- 영상 생성 모델은 사용 케이스(사람 등장 여부)에 따라 교체가 필요 (Kling CDN 2.0 → Kling V3로 교체)
INSIGHTS
- 바이브코딩의 핵심은 AI 도구가 아니다 — 사용자 중심 사고로 아이디어를 기획으로 전환하는 설계 능력이 최종 품질을 결정한다
- AI 에이전트가 직접 관리하는 백엔드(인스포지)와 AI 코딩 도구(Claude-Code)의 조합은 개발 속도를 획기적으로 높인다
- 같은 기술도 서비스 특성에 따라 비즈니스 모델이 달라야 한다 — 비정기적 사용 서비스는 구독보다 크레딧 방식이 적합
서비스 구현 스택 (8 파트)
| 파트 | 내용 | 도구 |
|---|---|---|
| 1 | 프로젝트 셋업, GitHub 연결 | [[wiki/entities/claude-code |
| 2 | 구글 로그인, 유저 테이블 | 인스포지, Google OAuth |
| 3 | 이미지 생성 + 스토리지 저장 | Replicate (GPT Image 2), 인스포지 Storage |
| 4 | 영상 생성 파이프라인 | Replicate (Kling V3), 인스포지 |
| 5 | 크레딧 기반 결제 | 토스페이먼츠 |
| 6 | 랜딩 페이지 디자인 | 21dev 컴포넌트, TailwindCSS |
| 7 | 배포 | 인스포지 Deploy |
| 8 | 최종 테스트 | — |
REFERENCES
- Claude-Code — AI 코딩 도구 (맥스 플랜 $100/월 사용)
- 인스포지 — AI 에이전트용 백엔드 (DB·인증·스토리지·배포)
- Replicate — AI 모델 API 플랫폼
- 토스페이먼츠 — 한국 결제 서비스
- Kling (CDN 2.0 → V3) — 영상 생성 AI (Replicate 통해 호출, stub 미생성)
- Next.js — React 프레임워크
- TailwindCSS — CSS 프레임워크
- 21dev — UI 컴포넌트 라이브러리
- Google OAuth — 소셜 로그인
FACTS
- 바이브코딩으로 24분 만에 기획부터 배포까지 완성 가능 (영상 기준)
- 클로드 코드 맥스 플랜 = 월 100달러
- 크레딧 가격 예시: 10크레딧 = 4,900원 / 25크레딧 = 9,900원
- 실제 결제 연동에는 사업자 등록 + 카드사 심사 필요 (약 1개월 소요)
- 인스포지는 오픈소스이며 도커 셀프호스팅 지원, 무료 요금제 넉넉
HABITS & RECOMMENDATIONS
- 파트별로 나눠 진행 후 GitHub 커밋 (체크포인트 방식)
- 섹션별로 나눠 랜딩 페이지 구현 (품질 향상)
- CLAUDE.md에 최소한의 제약만 명시하고 나중에 확장
- 사용자 여정을 먼저 분석해서 기능 목록을 도출하라
- 토스페이먼츠 연동 시 LLM 퀵 레퍼런스 + MCP 서버 적극 활용
관련 노트
- vibe-coding — 바이브코딩 개념 정리
- 인스포지 — AI 에이전트용 백엔드 서비스
- Replicate — AI 모델 API 플랫폼
- 토스페이먼츠 — 한국 결제 서비스