2026 실전 마스터클래스

바이브 코딩
MVP 마스터클래스

아이디어 → 배포 가능한 MVP를
4시간 안에 완성하는 실전 가이드

Claude CodeVibe CodingMVP 전략실전 배포

← → 방향키 또는 스와이프로 탐색

1 / 11

비전, 철학, 결과물

바이브 코딩이 지향하는 세 가지 핵심 축

🎯

Target

목표

▸4시간 내 완성 가능한 MVP
▸배포 가능한 실제 서비스
▸유지보수 가능한 코드베이스
▸확장 가능한 아키텍처

🧭

Philosophy

철학

▸AI는 도구, 판단은 인간
▸가드레일 먼저, 속도 나중
▸검증된 패턴 재사용
▸최소주의 기술 스택

📦

Output

결과물

▸작동하는 프로덕트
▸문서화된 아키텍처
▸AGENTS.md + CLAUDE.md
▸배포 파이프라인

2 / 11

4시간 로드맵

체계적인 단계별 실행 계획

0:00

30분

환경 설정

개발 환경 구성

AGENTS.md 작성

0:30

45분

아이디어 구체화

PRD 작성

기술 스택 결정

1:15

60분

MVP 코어 구현

핵심 기능 개발

DB 스키마

2:15

45분

UI/UX 완성

인터페이스 구현

반응형 디자인

3:00

30분

통합 테스트

E2E 검증

버그 수정

3:30

30분

배포 & 검증

프로덕션 배포

모니터링 설정

💡 각 단계는 독립적으로 검증 가능 — AI와 함께 반복적으로 개선

3 / 11

가드레일
바이브 코딩 루프

5단계 순환 프로세스로 AI와 협업하여 지속적으로 개선하는 개발 방법론

🛡️ 가드레일이란?

AGENTS.md와 CLAUDE.md를 통해 AI의 행동 범위를 제한하고 프로젝트 컨텍스트를 유지하는 안전장치

4 / 11

최소주의 개발 환경

꼭 필요한 도구만, 최대한 단순하게

🏗️ Core Engine

🤖

Claude CodeCore

CLI AI 코딩 어시스턴트

📦

Node.js / npmRuntime

패키지 관리 & 빌드 도구

🌿

GitVCS

버전 관리 & 히스토리

🖥️

VS Code / CursorEditor

통합 개발 환경

🤖 Claude Code 생태계

📋

AGENTS.mdContext

프로젝트 가이드라인 & AI 지시사항

⚙️

CLAUDE.mdGlobal

전역 Claude 행동 설정

🔌

MCP 서버Extension

도구 확장 & 외부 통합

💡

Custom SkillsWorkflow

재사용 가능한 워크플로우

5 / 11

컨텍스트 분리 전략

두 파일의 역할 분리로 AI 지시사항을 체계적으로 관리

📋

AGENTS.md

프로젝트 스코프 컨텍스트

📁 /project-root/AGENTS.md

▸ 프로젝트 개요 & 목표
▸ 기술 스택 명세
▸ 아키텍처 패턴
▸ 코딩 컨벤션
▸ API 엔드포인트 목록
▸ 금지 패턴 & 제약사항
▸ 테스트 전략

⚙️

CLAUDE.md

전역 사용자 설정

📁 ~/.claude/CLAUDE.md

▸ 전역 작업 스타일
▸ 응답 언어 & 톤
▸ 커밋 메시지 형식
▸ Oh-my-claudecode 설정
▸ 보안 정책
▸ 개인 선호도
▸ MCP 서버 설정

💡 AGENTS.md는 프로젝트마다 다르고, CLAUDE.md는 모든 프로젝트에 공통 적용됩니다

6 / 11

Skills vs MCP 매트릭스

언제 무엇을 선택해야 하는가

항목

💡 Skills (슬래시 커맨드)

🔌 MCP 서버

위치

~/.claude/commands/

MCP 서버 (별도 프로세스)

언어

Markdown + 프롬프트

TypeScript / Python

실행

Claude 내부

외부 프로세스 호출

상태

무상태

상태 유지 가능

도구

기본 Claude 도구

커스텀 도구 정의

통합

단순 워크플로우

외부 API/DB 연동

난이도

⭐ 쉬움

⭐⭐⭐ 복잡함

✅ Skills 사용 시: 반복적인 Claude 워크플로우 자동화, 빠른 프로토타이핑

✅ MCP 사용 시: 외부 API 연동, 데이터베이스 직접 접근, 커스텀 도구 필요 시

7 / 11

기술 스택 결정 트리

프로젝트 유형별 최적의 기술 선택 가이드

🚀 새 프로젝트

🌐 웹 서비스

📊 데이터 중심

Next.js

SSR

SvelteKit

경량

🎨 인터렉티브

React+Vite

SPA

Astro

정적

📱 앱/모바일

크로스플랫폼

React Native

모바일

Expo

빠른 빌드

데스크탑

Tauri

경량

Electron

범용

💡 MVP에서는 Next.js 또는 React+Vite가 가장 AI 친화적 (문서 풍부, 학습 데이터 많음)

8 / 11

클라우드 비용 매트릭스

MVP 단계에서 비용을 최소화하는 서비스 선택

Free Tier

Vercel

100GB 대역폭/월

프론트엔드 배포

Supabase

500MB DB, 2GB 저장

PostgreSQL + Auth

Cloudflare

무제한 요청

CDN + DNS

GitHub Actions

2,000분/월

CI/CD

Paid (소규모)

Vercel Pro

$20/월

팀 협업 + 분석

Supabase Pro

$25/월

8GB DB + 더 많은 API

Railway

$5~20/월

풀스택 앱 배포

AWS (소규모)

$10~50/월

엔터프라이즈 확장

💰

MVP 예산

월 $0~25으로 시작 가능

📈

스케일업

트래픽 증가 시 단계적 업그레이드

🔒

락인 방지

오픈소스 기반 선택 권장

9 / 11

식당 주문 MVP 아키텍처

실전 예제: 3-Tier 레스토랑 주문 시스템

📱

Frontend

Next.js / React

▸ 메뉴 탐색 페이지
▸ 장바구니 UI
▸ 주문 상태 실시간 업데이트
▸ 결제 플로우

⟷REST/JSON

⚡

Middleware

Next.js API Routes

▸ 주문 생성 API
▸ 결제 검증 (Stripe)
▸ 인증 미들웨어
▸ 실시간 알림 (SSE)

⟷REST/JSON

🗄️

Backend

Supabase

▸ PostgreSQL DB
▸ Row Level Security
▸ Auth (JWT)
▸ Storage (이미지)

🚀

배포

Vercel

🔐

인증

Supabase Auth

💳

결제

Stripe

📊

모니터링

Vercel Analytics

10 / 11

프로덕션 보안 체크리스트

배포 전 반드시 확인해야 할 보안 사항

🔐

인증 & 접근제어

✓JWT 토큰 만료 시간 설정
✓Row Level Security (RLS) 활성화
✓API 키 환경변수 처리
✓CORS 화이트리스트 설정
Rate Limiting 구현

🛡️

데이터 보호

✓HTTPS 강제 적용
✓민감 데이터 암호화 저장
✓SQL Injection 방지 (ORM 사용)
XSS 방지 (입력 검증)
CSRF 토큰 적용

🔍

운영 보안

✓에러 로그 모니터링
의존성 취약점 스캔
정기적 보안 감사
✓백업 & 복구 계획
인시던트 대응 절차

🎉

바이브 코딩으로 MVP를 완성하셨습니다!

보안 체크리스트를 완료하고 프로덕션에 자신있게 배포하세요

11 / 11

강의 목록

아이디어에서 MVP 배포까지 4시간 설계 루프

강의 소개 예제 보기

한국어 English

전체 강의바이브 코딩 실전 마스터클래스[email protected]@studiojin_devSubstack

강의 요약

바이브 코딩 실전 마스터클래스

아이디어를 MVP로 압축해 배포하기까지의 4시간 루프를 초급자 기준으로 설명합니다.

Claude Code 중심의 실전 작업 흐름을 바탕으로, 목표 설정부터 개발 환경, 컨텍스트 분리, 스택 결정, 비용 판단, 보안 점검까지 MVP 제작 전 과정을 압축해 보여주는 강의입니다.

결과물: AI와 협업해 MVP를 빠르게 설계·구현·검증하는 개인 작업 루프와 템플릿 묶음

강의 소개 보기 강의 목록

이 강의에서 다루는 것

PRD와 AGENTS 문서를 이용해 AI에게 흔들리지 않는 작업 컨텍스트를 줄 수 있습니다.
작은 MVP를 위한 기술 스택과 클라우드 비용을 합리적으로 선택할 수 있습니다.
MVP 구현, UI/UX 정리, 테스트, 배포를 하나의 반복 루프로 묶을 수 있습니다.
배포 직전 보안 점검 항목을 최소한의 체크리스트로 정리할 수 있습니다.

챕터 구성

0115분

철학과 작업 루프 이해

바이브 코딩이 단순 코드 생성보다 작업 시스템에 가깝다는 점을 먼저 정리합니다.

0220분

문서와 컨텍스트 준비

AGENTS.md와 PRD를 어떻게 나눠 써야 AI가 흔들리지 않는지 설명합니다.

0320분

기술 스택과 비용 결정

프로젝트 유형에 맞게 프런트엔드, 백엔드, 인프라를 선택하고 MVP 예산을 계산합니다.

0420분

MVP 아키텍처와 구현 흐름

식당 주문 MVP 예제를 바탕으로 3-tier 구조와 기능 구현 흐름을 설명합니다.

0515분

검증, 보안, 배포

E2E 확인과 보안 체크를 통해 “동작하는 MVP”를 “내놓을 수 있는 MVP”로 바꾸는 마무리 단계입니다.

바이브 코딩MVP 마스터클래스