TODO
현대 SaaS 개발은 20년 넘게 웹 앱 중심이었다 (최초 SaaS 플랫폼: Salesforce, 1999년). 이 강의는 "vibe coding" 수업이 아니지만, 이번 회차는 예외적으로 AI 기반 자동 앱 빌딩을 다룬다.
4개의 주요 스택 진화:
- LAMP: Linux → Apache → MySQL → PHP. 전통적 오픈소스 동적 웹사이트 스택.
- MERN: MongoDB → Express.js → React.js → Node.js. 전체 JavaScript 기반 SPA 스택. 아키텍처: User ↔ React(client) ↔ Express(server) ↔ MongoDB(DB)의 3-tier 구조.
- JAM: JavaScript + APIs + Markup. JS 프레임워크 + Headless CMS의 Content API + 프리빌트 정적 Markup. End User → CDN(Fastly, Akamai, Netlify) → 프리빌트 페이지 서빙. SSG(Static Site Generator) ← CMS(Webhook 트리거). 도구: Gatsby, Next.js, Nuxt.js + Contentful, Sanity 등.
- Serverless (AWS 예시): Frontend + AWS Lambda + DynamoDB. CloudFront → Cognito(인증) → API Gateway → Lambda → DynamoDB. CloudFormation, S3, CloudWatch 등 AWS 매니지드 서비스 활용. 서버 관리 불필요, 이벤트 기반, 온디맨드 실행.
코딩 없이 시각적 드래그 앤 드롭으로 웹사이트/앱 구축: Wix, Squarespace, Webflow.
주요 도구: Lovable(AI full-stack 앱 생성), Replit(AI 코딩+배포), Vercel v0(프롬프트 기반 UI 생성), Base44(AI 앱 빌더), Cursor/Claude Code 등(AI 코드 에디터/CLI).
무엇이 변했나:
- 프롬프트만으로 완전한 앱 생성 가능
- 엔지니어가 디자인·PM 등 cross-functional 역할 수행 가능
- 비개발자도 앱 개발 가능 — 1세대 no-code보다 훨씬 user-friendly
Bolt를 사용한 실시간 앱 생성: "Salsa Partner Finder" 앱 FE/BE 생성 후 색상 팔레트(#EF8354, #660000, #EFCA08), 아이콘, 타이포그래피 추가 수정.
- WebContainer: AI가 생성한 임의의 코드를 브라우저 내에서 실행하는 샌드박스 환경. HTML/CSS/JS가 실시간 렌더링.
- System Prompt (Bolt 기준): 확립된 기술/프레임워크만 명시적으로 요청.
boltartifact/Boltaction태그로 WebContainer 내 작업(파일 생성, 파일 실행 등)을 지정.
- 디버깅: 잘 작동할 때는 좋지만, 문제가 생기면 원점으로 돌아감
- 프롬프트의 본질: 프롬프트는 제안(suggestion)일 뿐 — 모든 사용자가 이를 이해하진 않음
- 보안: 과거 보안 문제 발생 이력 존재
- 획일적 디자인: AI 생성 앱들이 모두 비슷하게 보이는 문제
- 복잡성 한계: 이러한 앱들이 현실적으로 얼마나 복잡해질 수 있는가
Gaspar Garcia: Stanford CS 2016 (BS Theory, MS AI). Vercel에서 데이터 파이프라인, 모델 학습/파인튜닝, 에이전트 개발, 웹 인프라 담당.
v0 (https://v0.app) — Vercel의 AI 기반 프론트엔드 빌더. 학생 무료 (https://v0.app/students).
핵심 철학: "Fail fast, fail often" — 제품 개발의 학습 순간을 가속화. 아이디어가 좋은지는 모른다. 빠르게 만들고 빠르게 검증하라.
Idea → Production 4단계: Natural Language Input → AI Processing(프로덕션 수준 코드 생성) → Live Preview(즉시 확인·반복) → One-Click Deploy(마찰 없이 배포).
v0의 빠른 채택은 프론트엔드 개발 접근 방식의 근본적 변화. 사일로 해체:
- PM: 엔지니어링 사이클 대기 없이 컨셉 검증. PRD → 인터랙티브 프로토타입
- Designer: 디자인 도구 ↔ 프로덕션 코드 격차 해소. 즉시 구현 + 반응형
- Engineer: 보일러플레이트는 AI에 위임, 복잡한 로직에 집중
- Founder: 대규모 팀 없이 MVP 빌드·런칭. 실시간 피드백 반영
5단계:
- Intent Understanding — NLP로 대화형 입력에서 구조화된 요구사항 추출 (컴포넌트, 레이아웃, 인터랙션, 데이터 플로우)
- Context Assembly — 디자인 시스템 토큰, 기존 컴포넌트, API 스키마, 접근성 요구사항 수집
- Code Generation — LLM이 프로덕션 품질 React 컴포넌트 생성 (TypeScript, 반응형, best practices)
- Validation & Testing — 접근성·반응형·코드 품질 자동 검증
- Human-in-the-Loop — 엔지니어 리뷰·수정 → 피드백이 모델 학습에 활용
핵심 명제: 에이전트는 워크플로우다. Vercel AI SDK (Experimental_Agent, tool(), Zod 스키마, stopWhen: stepCountIs(20))로 에이전트 정의. 참고: https://ai-sdk.dev/docs/agents/overview
그러나 여전히 확률적 시스템 → 프레임워크를 제공해야 한다. v0의 경우 React + Next.js 규약을 LLM에 강제.
핵심 한계: 모델 지식은 빠르게 구식이 됨. Frontier 모델 제공사(OpenAI, Anthropic)는 Next.js 16에 맞는 커스텀 파이프라인을 만들어주지 않음.
Stream Manipulation — v0의 핵심 기술. LLM 출력 스트림이 사용자에게 도달하기 전에 감청·캡처하는 하위 시스템. 프롬프트 조정만으로는 부족할 때 출력 자체를 조작.
- 예시 1: LLM이
import { Suspense } from 'next/suspense'생성 → v0가import { Suspense } from 'react'로 실시간 교체 (Suspense는 React 것) - 예시 2: lucide-react 아이콘 수시 추가/제거 → LLM이 존재하지 않는
VercelLogo참조 → Stream Manipulation으로 수정
Autofixers — 단순 find-and-replace를 넘어서는 버그 수정:
- Approach 1 — Real-time Error Detection: 사소한 실수 감지(누락 브래킷, 게으른 코드). 빠르고 저렴한 LLM으로 특정 이슈 수정. 사용자가 에러를 보기 전에 수정.
- Approach 2 — Data-driven Finetuning: 프로덕션의 흔한 실수를 수집·저장. 오픈소스 모델에 RL/파인튜닝. 코드 생성 후 실행(수백 tokens/sec).
결과 — v0 Composite Model Family (출처: https://vercel.com/blog/v0-composite-model-family): v0-1.5-md의 에러 없는 코드 생성률은 93.87%. Claude Opus 같은 고급 범용 모델 대비 약 15%p, Sonnet이나 Gemini Flash 같은 범용 모델 대비 약 30%p 차이.
"AI 개발 도구의 캄브리아기 대폭발":
- Code Assistants — Vercel Agent, GitHub Copilot, Cursor (실시간 코드 제안)
- Frontend Builders — 시각적 개발 플랫폼
- Testing & QA — 자동 테스트 생성, 시각적 회귀 시스템
- DevOps Automation — AI 기반 배포·모니터링·인시던트 대응
핵심 차별점: 자동완성이 아닌 end-to-end feature 처리 워크플로우.
- Startup: MVP를 며칠 만에 출시
- Enterprise: 엔지니어링 투입 전 프로토타이핑. 개발 낭비 감소
- Agency: 킥오프 후 수 시간 내 인터랙티브 프로토타입. 스프린트당 5배 컨셉
TODO