프로토타입은 5분, 그 이후가 진짜 문제다
"12분 만에 풀스택 앱 완성." Lovable이 내세우는 수치다. 과장처럼 들리지만, 실제로 v0·Bolt·Lovable 같은 AI 앱 빌더가 바꿔놓은 건 분명하다. 프로토타입을 만드는 비용이 거의 0에 수렴했다. 문제는 그 다음이다. 빠르게 생성한 코드가 쌓이고, 세션이 바뀌고, 팀원이 붙으면서 AI는 어김없이 '기억상실'에 빠진다. 프로토타입을 진짜 제품으로 키우려면 생성 도구 선택만큼 컨텍스트 관리 전략이 중요하다.
1단계: 목적에 맞는 빌더 고르기
dev.to에 올라온 v0·Bolt·Lovable 비교 분석을 보면, 세 도구는 겹치는 것처럼 보이지만 실제 쓰임새가 뚜렷하게 갈린다.
- v0 (Vercel): shadcn/ui + Tailwind 기반의 React 컴포넌트 생성에 특화. Figma 임포트와 이미지-투-코드 지원이 강점이다. 백엔드는 없다. 이미 API가 있고 UI만 빠르게 뽑아야 할 때, 혹은 디자인 시스템 컴포넌트를 클라이언트에게 빠르게 보여줘야 할 때 최선이다.
- Bolt.new (StackBlitz): 브라우저 안에서 Node.js가 돌아가는 WebContainer 기술 덕분에 로컬 설치 없이 즉시 시작 가능하다. 해커톤, 빠른 PoC, 어떤 디바이스에서도 코딩해야 하는 상황에 어울린다. 다만 복잡한 앱에서 토큰 소진이 빠르고, 반복 수정 시 컨텍스트 품질이 떨어지는 문제가 보고된다.
- Lovable: 프론트엔드 + Supabase 백엔드 + 인증 + 배포까지 원스톱. 비기술 창업자나 실제 사용자에게 보여줄 수 있는 MVP를 가장 빠르게 만들어야 할 때 적합하다. 아키텍처 제어 자유도는 낮다.
월 $20~25의 Pro 플랜으로 셋 다 비슷한 가격이다. 선택 기준은 예산이 아니라 "백엔드가 필요한가, 컴포넌트만 필요한가, 배포까지 묶어야 하는가"다.
2단계: instruction 파일이 곧 팀 온보딩이다
AI 앱 빌더로 초안을 뽑은 뒤, 코드를 Cursor나 Claude Code로 넘겨 고도화하는 흐름이 일반화되고 있다. 이때 등장하는 것이 CLAUDE.md, .cursor/rules 같은 instruction 파일이다.
dev.to의 'When Software Development Common Sense Flips' 분석은 이 파일들의 본질을 날카롭게 짚는다. CLAUDE.md는 온보딩 문서, .cursor/rules는 코딩 컨벤션(.eslintrc), Kiro Specs는 PRD, Devin Playbooks는 운영 절차서—AI 도구들이 발명하는 것처럼 보이는 개념들이 사실 20년간 인간 팀이 시행착오로 쌓아온 지식의 재발명이라는 것이다.
그리고 같은 실패 패턴도 반복된다. 문서 없이 시작하면 사일로가 생기듯, CLAUDE.md 없이 Claude Code를 쓰면 세션마다 같은 설명을 반복해야 한다. MCP 서버를 10개 붙이면 신입이 첫날 슬랙 채널 30개에 초대받은 것처럼 에이전트가 정보 과부하로 멈춘다. 스펙 없이 개발하면 후반부에 터지듯, 모호한 프롬프트로 시작하면 AI가 빈칸을 알아서 채우다 방향이 틀어진다.
3단계: CLAUDE.md 패턴으로 AI가 코드베이스를 기억하게 만들기
'Master CLAUDE.md: 5 Patterns' 글은 이 문제의 실전 해법을 제시한다. 핵심은 다섯 가지 패턴으로 요약된다.
① 프로젝트 파운데이션 파일: 루트의 CLAUDE.md에 빌드 명령어, 디렉터리 구조, 코딩 규칙을 200줄 이내로 명시한다. "코드 형식을 맞춰라"가 아니라 "2-space 들여쓰기"처럼 구체적으로 써야 AI가 일관되게 따른다.
② 개인 선호 파일: ~/.claude/CLAUDE.md에 pnpm 사용, vitest 선호 같은 개인 워크플로우를 저장하면 모든 프로젝트에 적용된다. 팀 설정을 오염시키지 않으면서 나만의 DX를 유지하는 방법이다.
③ 경로 기반 scoped 룰: .claude/rules/ 디렉터리에 파일별 규칙을 분리하면 컨텍스트 낭비 없이 필요한 규칙만 로드된다. src/auth/** 경로의 파일을 열 때만 보안 규칙이 활성화되는 식이다.
④ Auto Memory: Claude Code가 수정 사항에서 스스로 메모를 남기는 기능이다. "pnpm 써라"고 한 번 정정하면 다음 세션부터 Claude가 기억한다. 개발자가 쓰는 규칙과 AI가 발견하는 예외 사항이 분리·축적된다.
⑤ @import 기반 아키텍처: 여러 서비스에 걸친 대형 프로젝트라면 @docs/api-conventions.md 형태로 기존 문서를 CLAUDE.md에 임포트해 참조 구조를 만들 수 있다.
코드 생성 비용이 0에 수렴할 때, 가치의 중심은 어디로 가나
'생성 비용 감소의 법칙'이라는 관점이 흥미롭다. 코드를 생성하는 비용이 극적으로 낮아지면, 병목은 생성이 아닌 다른 곳으로 이동한다. 10년 전엔 구현 공수가 병목이었다. 이제 병목은 의도를 명확하게 정의하는 것, 즉 무엇을 만들지를 구체화하는 작업으로 옮겨간다.
이것이 instruction 파일이 단순한 설정을 넘어 팀의 경쟁력이 되는 이유다. CLAUDE.md를 잘 쓰는 팀은 AI를 더 정확하게 제어하고, 그 결과물이 팀의 기준에 맞게 나온다. 반대로 도구를 잘 골라도 컨텍스트 관리를 방치하면 세션마다 동일한 수정을 반복하는 낭비가 생긴다.
실전 적용 플로우: 지금 바로 시작할 수 있는 순서
세 가지 소스의 통찰을 하나의 실행 순서로 합치면 이렇다.
- 빌더 선택: UI만 필요하면 v0, 백엔드까지 묶인 MVP가 필요하면 Lovable, 빠른 PoC라면 Bolt.new로 시작한다.
- 코드 export 및 GitHub sync: 세 도구 모두 코드 소유권은 개발자에게 있다. 생성 즉시 레포지토리로 가져와야 다음 단계가 가능하다.
- CLAUDE.md 초안 생성: Claude Code에서
/init명령으로 기존 코드베이스를 분석해 CLAUDE.md를 자동 생성한다. 여기에 AI가 추론할 수 없는 맥락—과거 설계 결정 이유, 건드리면 안 되는 부분—을 추가한다. - scoped 룰 분리: 프로젝트가 커지면
.claude/rules/로 파일별 규칙을 나눠 컨텍스트 낭비를 막는다. - Auto Memory 활성화: 수정 사항이 쌓이면서 AI가 코드베이스의 '감각'을 익힌다.
전망: 빌더와 에디터의 경계가 사라진다
2026년 현재 v0·Bolt·Lovable은 각자의 강점이 뚜렷하지만, 경계는 빠르게 흐려지고 있다. Bolt는 백엔드와 인증을 추가했고, 새로운 경쟁자들이 세 도구의 장점을 결합한 형태로 등장하고 있다. 중요한 것은 특정 도구가 아니라 '빠른 생성 → 컨텍스트 축적 → 고도화'라는 플로우 자체를 내재화하는 것이다.
instruction 파일은 AI 도구의 부속물이 아니다. 팀의 의도와 기준을 코드베이스에 새기는 방식이며, 결국 프론트엔드 개발자가 AI 시대에 설계 주도권을 유지하는 핵심 수단이다. 프로토타입을 만드는 속도보다, 그 프로토타입이 왜 그렇게 만들어졌는지를 AI에게 가르치는 능력이 점점 더 중요해질 것이다.