01핵심 개요 (표)
| 항목 | 내용 | |
|---|---|---|
| 채널 | 바이브마피아 \ | AI Native 엔지니어 |
| 화자 배경 | 현업 개발자 겸 AI/바이브코딩 컨설턴트·강사, 오픈소스 소프트웨어(아르고스) 개발·B2B 커스터마이징 납품 경험 보유 | |
| 핵심 주제 | 바이브 코딩으로 실제 서비스(앱+서버+MCP)를 처음부터 만드는 초기 세팅 절차와 사람-AI 역할 분담 | |
| 다룬 도구/스택 | 클로드 코드, 페이블(Fable) 모델, 오퍼스/소넷 서브에이전트, Expo(X4, 리액트 네이티브), NestJS, Prisma(ORM), Supabase, Railway(서버 배포), Cloudflare(스토리지 후보), Git | |
| 실습 프로젝트 | '모핏' — PT 트레이너·수강생용 운동 목표 관리 시스템(앱+MCP 연동) | |
| 방송 성격 | 실시간 라이브 코딩 스트림, 기획부터 인프라 세팅 착수까지 약 2.5시간 진행 |
02핵심 기능/내용 구조
03기술적 맥락
화자는 타입스크립트를 "바이브 코딩의 깡패"로 표현하며, 앱·서버·웹·AI 서비스까지 하나의 언어로 대응 가능한 범용성 때문에 특별한 이유가 없다면 기본 선택지로 삼으라고 권한다. 크로스플랫폼 앱 프레임워크는 Expo(X4)와 Flutter 두 가지만 메이저로 보고, Flutter는 Dart 언어를 쓰기 때문에 서버와 언어를 통일할 수 없어 배제했다. 서버 프레임워크는 Express보다 보일러플레이트가 큰 NestJS를 택했는데, 이는 의존성 주입 등 초기엔 무거워 보이지만 프로덕션 단계에서 결국 필요해지는 구조를 프레임워크 레벨에서 강제해 개발자의 고민을 줄여주기 때문이라고 설명한다.
앱 서비스는 웹과 달리 풀스택 배포(클라이언트에서 DB 직접 연결)가 사실상 불가능하므로 반드시 별도 서버가 필요하다는 점, 그리고 Supabase처럼 클라이언트-DB 직접 연결을 지원하는 방식도 있지만 보안과 유지보수 관점에서 클라이언트-서버-DB로 분리하는 정석적 구조를 권장한다는 점을 강조한다. 데이터베이스와 스토리지 서비스 선택도 AI와 대화하며 결정했는데("Cloudflare가 낫지 않냐"는 질문에 에이전트가 응답), 이런 인프라 설정 작업을 사람이 직접 콘솔을 클릭하며 배우는 대신 에이전트의 브라우저 조작 기능에 맡기는 흐름을 실연했다.
04전략적 의미
이 방송의 핵심 메시지는 "바이브 코딩이 잘 되려면 AI에게 맡길 부분과 사람이 반드시 결정할 부분의 경계를 정확히 그어야 한다"는 것이다. 화자는 AI는 컴퓨터 안의 정보만 알고 있어 실제 타겟 유저(트레이너)의 기술 친화도나 문제 공감 수준 같은 현실 맥락을 모르기 때문에, 비즈니스 방향성 결정을 AI에 위임하는 것은 위험하다고 강조한다. 반대로 인프라 설정, 데이터 모델 초안 작성, 유저 스토리 초안 같은 반복적이고 검증 가능한 작업은 적극적으로 위임한다.
또한 "많이 만든다고 실력이 늘지 않는다"는 주장이 눈에 띈다. 화자는 자신도 15년간 요리를 해왔지만 요리사가 아니듯, 바이브 코딩도 반복만으로는 전문성이 생기지 않으며, PM 스킬(요구사항 명확화, 되묻기, 우선순위 결정)과 소프트웨어 공학 기본기(데이터베이스 의존관계, 아키텍처 분리 원칙)를 책과 이론으로 학습해야 실질적으로 성장한다고 역설한다. 이는 바이브 코딩 입문자들이 흔히 오해하는 "더 비싼 요금제, 더 많은 시행착오 = 실력 향상" 공식을 정면으로 반박하는 관점이다. 아울러 롱러닝 에이전트를 자랑하는 사례들에 대해 "토큰을 많이 쓰고 오래 도는 것 자체가 자랑거리가 아니라 비효율의 신호일 수 있다"는 회의적 시각도 제시한다.
05핵심 워크플로우 또는 비교표
| 단계 | 담당 주체 | 사용 도구/모델 | 핵심 산출물 |
|---|---|---|---|
| 1. 문제 정의·요구사항 나열 | 사람(화자) 단독 | 없음(직접 작성) | 기능 목록, 목적문 |
| 2. 인프라 개략 설계(앱/서버/DB/스토리지 구분) | 사람 단독 | 없음 | 클라이언트-서버-외부서비스 아키텍처 다이어그램 |
| 3. 기획 리뷰 및 모호점 질문 | AI(페이블) + 사람 답변 | 클로드 코드, Fable, 리즈닝 낮음/중간 | 보완된 요구사항 문서 |
| 4. 유저 스토리 도출(P0/P1/P2) | AI 초안 → 사람 확인 | Fable | 우선순위별 유저 스토리 목록 |
| 5. 데이터 모델 설계(DB 의존관계 순으로) | AI 초안 → 사람 되묻기 답변 | Fable, Prisma | 확정된 데이터 스키마 |
| 6. 목표 재검증("이대로 목표 달성되나?") | AI 자가 점검 | Fable | 누락 항목 목록 및 보완 |
| 7. 구현 위임 프롬프트 작성 | 사람 | 없음(프롬프트) | 서브에이전트 실행 원칙 |
| 8. 인프라 자동 구축(Railway/Supabase 연결) | AI(브라우저 유즈) | 클로드 코드 브라우저 스킬 | 배포된 서버, 연결된 DB/스토리지 |
| 9. 단계별 구현·검증 반복(0~9단계) | 서브에이전트 | 오퍼스 | 스캐폴딩된 코드베이스 |
06활용 시나리오
07현황 및 전망
방송이 끝난 시점까지 전체 9단계 구현 계획 중 0단계도 완료되지 않았으며, 화자는 실제 구현 진행 상황은 별도 녹화 영상으로 공개하고 다음 라이브(같은 주 금요일)에서 이어서 진행하겠다고 밝혔다. 서버 배포(Railway) 자체는 방송 중 성공했으나 실제 비즈니스 로직 구현은 이루어지지 않은 상태였다.
화자는 "예전에는 결과물을 만드는 것 자체에 학습 가치가 있었지만, 요즘은 AI가 어차피 잘 만들어주기 때문에 만드는 행위의 학습 가치가 크게 떨어졌다"고 진단하며, 앞으로는 코딩에 익숙해지는 것보다 탄탄한 이론·철학(소프트웨어 공학 원칙, PM 스킬)을 갖추는 쪽이 훨씬 중요해질 것이라는 전망을 제시한다. 또한 바이브 코딩으로 수익을 내는 난이도가 실제로는 매우 높으며, 검증되지 않은 고가 강의보다 스탠퍼드·YC 등에서 제공하는 무료 강의, 그리고 실질적 이론서를 우선하라는 조언을 덧붙였다. 본인의 전략으로는 컨설팅·강의로 먼저 고객 문제를 발견한 뒤, 반복되는 니즈를 소프트웨어(오픈소스 프로젝트 '아르고스' 등)로 전환해 B2B 커스터마이징·유지보수 계약으로 확장하는 방식을 소개했다.
08용어 사전
| 용어 | 설명 |
|---|---|
| 바이브 코딩(Vibe Coding) | AI(LLM 에이전트)에게 자연어로 요구사항을 전달해 코드 작성을 맡기고, 사람은 방향 제시와 검증 위주로 개발하는 방식 |
| 클로드 코드(Claude Code) | Anthropic의 터미널 기반 AI 코딩 에이전트 도구. 이 방송에서 메인 개발 환경으로 사용됨 |
| 페이블(Fable) | 방송에서 언급된 AI 모델(느리고 비용이 높지만 깊은 사고에 강함). 코딩 실행보다 기획·검증 단계에서 사용됨 |
| 오퍼스(Opus)/소넷(Sonnet) | Anthropic Claude 모델 라인업 중 코딩 구현 작업에 주로 쓰이는 모델들. 서브에이전트가 구현 작업에 사용 |
| MCP (Model Context Protocol) | AI 에이전트가 외부 도구·서버 기능(예: 운동 기록 저장)을 표준화된 방식으로 호출할 수 있게 하는 프로토콜 |
| Expo(X4) | 리액트 네이티브 기반 크로스플랫폼(iOS/Android) 앱 개발 프레임워크, 타입스크립트 사용 |
| 리액트 네이티브 | 자바스크립트/타입스크립트로 네이티브 모바일 앱을 만드는 프레임워크 |
| NestJS(네스트JS) | Node.js 기반 서버 프레임워크로 의존성 주입 등 구조화된 아키텍처를 프레임워크 레벨에서 제공 |
| Prisma(프리즈마) | 데이터베이스 스키마 관리와 쿼리를 담당하는 타입스크립트용 ORM |
| ORM | 코드의 객체와 데이터베이스 테이블을 매핑해 SQL 없이 데이터를 다루게 해주는 도구 |
| Supabase(슈퍼베이스) | PostgreSQL 기반의 백엔드 서비스형 플랫폼(BaaS). 이 프로젝트의 데이터베이스로 채택됨 |
| Railway(레일웨이) | 코드를 깃 저장소에 업로드하면 자동으로 서버를 배포해주는 클라우드 배포 플랫폼 |
| Cloudflare(클라우드플레어) | CDN·엣지 인프라 기업으로 이 방송에서는 스토리지/데이터베이스 대안으로 검토됨 |
| 휴먼 인터페이스 가이드라인 | 애플이 정의한 iOS 앱 디자인 원칙 문서로, 스위프트 네이티브 앱이 기본적으로 예뻐 보이는 이유로 언급됨 |
| 브라우저 유즈(Browser Use) | 에이전트가 실제 웹 브라우저를 조작해 로그인, 서비스 설정 등을 자동 수행하는 기능/스킬 |
| 유저 스토리 | "누가, 무엇을, 왜 원한다"의 형태로 기능 요구사항을 기술하는 기획 용어 |
| P0/P1/P2 | 기능 우선순위 등급. P0는 없으면 서비스가 성립하지 않는 필수 기능 |
| 눈바디 | 체중계 수치와 별개로 육안으로 봤을 때 근육이 붙어 보이는 정도를 뜻하는 헬스 커뮤니티 은어 |
| 인바디(InBody) | 체성분 분석기 브랜드명으로, 체중·골격근량·체지방률 등을 측정하는 기기/서비스를 통칭 |
| AI 슬롭(AI Slop) | 기획이 불충분한 상태로 AI에 맡겨 방향성이 어긋나거나 품질이 낮게 생성된 결과물을 가리키는 표현 |
| 도메인 주도 설계(DDD) | 소프트웨어 설계를 비즈니스 도메인 모델 중심으로 구조화하는 방법론을 다루는 고전 개발 서적/개념 |
