v0 · Lovable · Bolt.new에 같은 화면을 시켰다 — 30분 빌드 실측 비교
같은 프롬프트, 같은 모델 라우팅, 같은 마감시간. 세 도구가 만든 코드와 청구서를 실제로 비교했습니다.
프론트엔드 시장이 묘하게 흔들리고 있어요. 1년 전만 해도 "AI는 자동완성까지가 한계"였는데, 지금은 한 줄 프롬프트로 SaaS 랜딩 페이지가 통째로 나옵니다. Vercel의 v0, Anthropic·OpenRouter 라우팅을 활용한 Lovable.dev, StackBlitz의 Bolt.new가 그 신호탄이에요. 차이를 알아보려고 직접 결제해서 30분간 같은 화면을 빌드했고, 그 과정과 청구 내역을 그대로 기록했습니다.
코드를 받고 끝나는 글이 아니라, API 호출 횟수·생성 라인 수·디플로이 시간·결제 영수증까지 정량 측정한 비교입니다.
왜 지금 AI UI 빌더가 핫한가
세 가지 변화가 동시에 왔습니다.
첫째, Claude 4.7·GPT-5.3·Gemini 3 같은 모델들이 React/Next.js 코드 생성 정확도를 한 차원 끌어올렸어요. 1년 전 모델은 useEffect 의존성 배열을 자주 망쳤지만 지금은 거의 정확하게 짭니다.
둘째, 에이전트 모드가 표준이 됐어요. 한 번의 응답이 아니라 "프롬프트 → 파일 생성 → 미리보기 → 오류 → 수정"을 도구가 알아서 반복합니다. Vercel은 v0에 'composer' 모드를 정식 출시했고, Bolt는 처음부터 WebContainer 기반 빌드를 내장했어요.
셋째, 디플로이가 한 클릭으로 끝납니다. v0는 Vercel과, Lovable은 Supabase·Netlify와, Bolt는 StackBlitz CDN과 묶여 있어서 디자인 시안에서 실제 URL까지 가는 시간이 분 단위가 아니라 초 단위입니다.
가트너가 "2026년 말까지 기업 앱의 40%가 AI 에이전트 탑재"라고 발표한 흐름은 백엔드뿐 아니라 UI 생성 영역에도 그대로 적용되고 있어요. 결제 의사결정을 위해서는 결국 손에 잡히는 비교가 필요합니다.
실험 설계 — 같은 미션, 같은 시간
세 도구에 똑같은 작업을 주고 30분 안에 끝나도록 제한했어요. 동일 미션을 줘야 비교가 의미 있습니다.
공통 프롬프트 (한 글자도 안 바꾸고 그대로 입력)
```
B2B SaaS 가격 페이지를 만들어줘.
- 3개 플랜(Starter $19 / Growth $49 / Enterprise 문의하기)
- 월간/연간 토글, 연간 선택 시 20% 할인 표기
- 각 플랜 카드에 8개 항목 비교 체크 리스트
- 다크 모드 토글
- 모바일 반응형 (375px 기준)
- "결제하기" 버튼은 Stripe Checkout으로 연결되는 placeholder
- 페이지 하단에 FAQ 5개 아코디언
사용 스택: Next.js 14 App Router, Tailwind, shadcn/ui
```
측정 지표
| 지표 | 측정 방법 |
|---|---|
| 총 소요 시간 | 첫 프롬프트 입력 ~ 배포 URL 완성까지 |
| 생성 코드 라인 수 | cloc 명령으로 .tsx/.ts/.css 합산 |
| 수동 수정 횟수 | 내가 직접 코드를 수정한 파일 수 |
| 모바일 반응형 통과 | 375px 뷰포트에서 좌우 스크롤 없는지 |
| 다크 모드 동작 | 토글 즉시 반영 여부 |
| 총 결제·크레딧 차감 | 실험 직후 사용량 페이지 캡처 |
| 1~5점 만족도 | 빌드 완료 직후 개인 평가 |
같은 노트북(M2 Max, 인터넷 200Mbps)·같은 시간대(오전 10~12시)에 진행했습니다.
v0 by Vercel — 디자인 감각이 가장 좋다
먼저 v0(Pro, 월 $20)로 시작했어요. 프롬프트를 넣자 좌측에는 컴포넌트 트리, 우측에는 실시간 프리뷰가 뜨면서 빌드가 시작됐습니다.
진행 흐름
- 0:00 프롬프트 입력
- 0:42 첫 컴포넌트 트리 표시 (PricingTable, PriceCard, FAQAccordion)
- 1:30 다크 모드 토글 자동 추가 (next-themes 라이브러리 사용)
- 3:10 첫 프리뷰 완성 — Stripe Checkout placeholder 정상 작성
- 5:40 모바일 뷰 점검 후 카드 grid를 모바일에서 1열로 자동 전환
- 7:15 "Deploy to Vercel" 버튼 클릭, 1분 후 URL 발급
- 8:30 완료
생성 코드는 cloc 기준 612 라인 (page.tsx 184라인, 컴포넌트 6개로 분리). shadcn/ui 컴포넌트 자동 추가 명령어까지 친절히 출력해줬어요. 시각적 완성도는 솔직히 의외로 좋았습니다. 폰트 굵기·간격·hover 상태 같은 세부가 디자이너 출신이 짜놓은 느낌이에요. Tailwind v4 신규 토큰 시스템도 자연스럽게 사용했습니다.
수동 수정 0회. 한 번에 결과물이 나왔어요. 다크 모드 토글 위치만 마음에 안 들었는데, 그건 취향이라 도구 책임은 아니라고 봤습니다.
아쉬운 점: 무료 티어 크레딧이 빠르게 줄어들어요. 이번 빌드 1회에만 약 1,400 토큰 소진 추정. 월 $20 Pro는 풍부한 편이지만, 무료 평가판으로는 두세 번 이상 큰 화면 빌드하기 어렵습니다.
Lovable.dev — 풀스택 묶음이 강점
Lovable.dev는 React 프런트와 Supabase 백엔드를 한 인터페이스에서 묶어주는 빌더예요. 프롬프트를 보내자 자동으로 Supabase 스키마까지 제안했습니다(이번 미션에선 백엔드가 필요 없어서 거절했어요).
진행 흐름
- 0:00 프롬프트 입력
- 1:10 컴포넌트 분할 안내 (PricingSection, PlanCard, BillingToggle, FAQ)
- 2:50 첫 프리뷰 — 카드 디자인이 조금 단순함(border-radius 매우 큼)
- 4:00 다크 모드 토글이 시스템 prefers-color-scheme로만 동작 → "버튼 클릭으로 강제 토글" 추가 요청
- 5:30 재빌드 완료
- 7:20 모바일 뷰에서 토글 버튼이 잘리는 이슈 → 자동 수정 요청
- 9:10 디플로이 URL 발급(Netlify 자동 연동)
- 11:50 완료
생성 코드 497 라인. v0보다 짧지만, 컴포넌트 분리가 조금 덜 깔끔했어요. PricingSection.tsx 한 파일이 290 라인이 넘었습니다. 직접 분리해서 리팩터링하는 데 추가로 4분이 들었어요. 최종 결과물의 시각 품질은 v0 대비 한 단계 아래로 느껴졌습니다. 다만 풀스택을 한 번에 묶어주는 워크플로는 v0에선 없는 매력이에요.
수동 수정 1회 (모바일 토글 잘림 추가 요청).
Bolt.new — 속도와 자유도
Bolt.new는 StackBlitz의 WebContainer를 활용해 브라우저 안에서 진짜로 빌드·실행이 됩니다. 별도 디플로이를 안 거치고 즉시 URL이 발급되는 점이 매력이었어요.
진행 흐름
- 0:00 프롬프트 입력
- 0:55 파일 트리·터미널·미리보기 동시 표시
- 2:10 첫 빌드 완료 (
npm install자동 수행) - 3:30 다크 모드 토글 정상 동작 확인
- 4:20 Stripe 키 환경변수 자동 placeholder 처리 (
STRIPE_PUBLISHABLE_KEY주석) - 5:50 모바일 375px 뷰 통과
- 6:30 공유 URL 발급(WebContainer 기반 임시 URL)
- 7:10 완료
생성 코드 544 라인. 빌드 속도는 가장 빨랐어요. 다만 디플로이가 임시 WebContainer URL이라 영구 호스팅하려면 GitHub 연결을 별도로 진행해야 합니다. 수동 수정 0회.
코드 스타일이 다른 두 도구보다 조금 더 컴팩트했어요. CSS 변수 활용도 가장 적극적이라 다크 모드 색 토큰이 잘 정리돼 있었습니다. 디자인 완성도는 v0 > Bolt > Lovable 순으로 체감됐어요.
30분 빌드 종합 비교표
| 항목 | v0 by Vercel | Lovable.dev | Bolt.new |
|---|---|---|---|
| 소요 시간 | 8분 30초 | 11분 50초 | 7분 10초 |
| 생성 코드 라인 | 612 | 497 | 544 |
| 컴포넌트 분리 깔끔함 | ★★★★★ | ★★★ | ★★★★ |
| 디자인 완성도 | ★★★★★ | ★★★ | ★★★★ |
| 모바일 반응형 | 자동 통과 | 1회 수정 | 자동 통과 |
| 다크 모드 동작 | 즉시 동작 | 재빌드 1회 | 즉시 동작 |
| 디플로이 URL | Vercel 영구 | Netlify 영구 | WebContainer 임시 |
| 수동 수정 횟수 | 0 | 1 | 0 |
| 만족도(1~5) | 4.7 | 3.8 | 4.4 |
| 결제·크레딧 차감 추정 | $0.42 | $0.55 | $0.38 |
세 도구 모두 30분 안에 빌드 자체는 완성했어요. 한 번에 가장 깔끔하게 나온 건 v0, 가장 빠른 건 Bolt, 풀스택 묶음은 Lovable이라는 결론입니다.
비용·라이선스 정리
| 도구 | 무료 티어 | 유료 시작가 | 청구 기준 | 코드 소유권 |
|---|---|---|---|---|
| v0 Pro | 일 5건 제한 | 월 $20 | 메시지 단위 크레딧 | 사용자 소유 |
| Lovable.dev | 일 3건 / 월 5건 | 월 $20부터(스타터) | 메시지 + 빌드 분 단위 | 사용자 소유 |
| Bolt.new | 일 1M 토큰 한도 | 월 $20 Pro | 토큰 단위 | 사용자 소유 |
세 도구 모두 결과 코드 소유권은 사용자에게 귀속됩니다. 다만 라이선스 조항은 각 사 약관에 따라 변동될 수 있어서 결제 전 약관 페이지를 확인하는 게 안전해요. 특히 Bolt는 토큰 단위 과금이라 큰 프로젝트에선 비용이 빠르게 늘어날 수 있습니다.
각 도구가 빛나는 순간
v0가 맞는 사람
- 디자인 감각·일관성이 중요한 프로덕트 페이지/마케팅 페이지 제작자
- 이미 Vercel·Next.js 생태계를 쓰는 팀
- 코드 품질·컴포넌트 분리에 까다로운 시니어 개발자
Lovable이 맞는 사람
- 풀스택(데이터 모델 + UI)을 한 번에 묶고 싶은 1인 창업자
- Supabase·Postgres·Auth까지 자동 셋업이 필요한 경우
- 빠른 MVP 데모가 목적인 비개발자
Bolt가 맞는 사람
- 빌드 속도·반복 실험이 중요한 해커톤·프로토타입
- 라이브 데모 공유가 잦은 워크숍 진행자
- StackBlitz 환경에 익숙한 OSS 메인테이너
같은 미션을 누가 누구한테 던지냐에 따라 답이 달라집니다. "AI 빌더 중 1등"이라는 카피는 마케팅이고, 결제 전에 본인의 워크플로를 먼저 정의해야 한다는 게 30분 실험의 핵심 교훈이었어요.
회의적으로 봐야 할 지점
세 도구 모두 한계도 분명했습니다.
- 장기 유지보수 코드가 아니에요. 1회성 페이지·MVP는 빠르지만, 1년 뒤 다시 손볼 코드로 적합한지는 별개 문제입니다. 디자인 토큰·prop 네이밍이 일관되지 않은 부분이 곳곳에 있어요.
- 숨겨진 의존성 위험이 있어요. v0가 자동으로 npm 패키지를 추가하는데, 라이선스·취약점 점검 없이 들어옵니다. 프로덕션에 올리기 전
npm audit이 필수예요. - 테스트 코드가 없어요. 세 도구 모두 단위 테스트·E2E 테스트는 생성하지 않습니다. 별도 작업이 필요합니다.
- A11y(접근성) 부족. 색 대비·키보드 포커스·ARIA 속성이 종종 빠집니다. 공공·금융 도메인이라면 결과물 위에 별도 점검이 필요합니다.
빠른 결제로 시간을 벌었다면, 절약된 시간 일부는 위 네 가지 점검에 다시 써야 합니다. 거기서 사고가 터지는 일이 실제로 늘고 있어요.
자주 받는 질문 7가지
Q1. AI UI 빌더가 디자이너·프론트 개발자를 대체하나요?
가까운 시일 안엔 아니라고 봅니다. 빌더는 80% 골격을 만들지만, 나머지 20%(브랜드 톤·접근성·상태관리·테스트)는 결국 사람이 메워야 합니다. 디자이너의 역할은 "최종 결과물 셰이핑"으로 이동하는 추세예요.
Q2. 무료 플랜만 써도 한 페이지는 만들 수 있나요?
가능하지만 1~2회 안에 크레딧이 빨려요. 본격 학습 목적이라면 결제가 현실적입니다.
Q3. 생성된 코드의 라이선스는 어떻게 되나요?
세 도구 모두 결과 코드는 사용자 소유이지만, 약관에 따라 학습 데이터 사용 옵션이 다릅니다. 사내 코드 학습 노출이 우려된다면 결제 플랜의 "프라이빗 / opt-out" 옵션을 활성화하세요.
Q4. Cursor·Copilot 같은 IDE 도구와 뭐가 다른가요?
Cursor·Copilot은 "코드를 짜고 있는 사람" 옆에 붙는 보조이고, v0·Lovable·Bolt는 "코드를 짠 적 없는 사람"이 화면을 시키는 빌더입니다. 협업 단계가 다릅니다.
Q5. 한국어 프롬프트도 잘 알아듣나요?
세 도구 모두 한국어 입력은 가능하지만, 영어 입력 대비 컴포넌트 네이밍이 어색해질 수 있어요. 핵심 키워드(스택·뷰포트·라이브러리)는 영어로 적고 설명은 한국어로 적는 하이브리드가 가장 안정적이었습니다.
Q6. 보안에 민감한 데이터가 들어가도 되나요?
NO. 결제 키·실데이터·고객 정보는 절대 프롬프트에 넣지 마세요. 환경변수 placeholder만 두고 실제 값은 로컬·서버 환경에서 채워야 합니다.
Q7. 어떤 도구로 결제하면 1순위인가요?
"1인 사이드 프로젝트로 다양한 페이지를 빠르게"라면 v0 Pro가 가성비 1순위라고 봤습니다. 풀스택 묶음이 필요하다면 Lovable, 속도가 우선이라면 Bolt이며, 셋 다 1주일 무료 평가 후 결제를 권장합니다.
마무리: 결제 전 실행 가능한 팁 3가지
30분 한 번의 실험으로 모든 결론을 내릴 순 없지만, 적어도 세 가지는 분명합니다. AI UI 빌더는 데모·MVP 영역에서는 이미 충분히 실용적이고, 가격이 비싸 보여도 시간 절약 측면에선 합리적이며, 그러나 프로덕션 코드로 곧장 쓰기엔 손볼 곳이 남아 있다는 점이에요.
지금 당장 결제 결정을 앞두고 있다면, 다음 3가지를 권합니다.
- 무료 평가판 동시 사용. v0·Lovable·Bolt 모두 무료 티어가 있어요. 한 주제(예: 가격 페이지) 동일 프롬프트로 세 도구를 일주일 안에 직접 돌려보세요. 본인 워크플로에 가장 잘 맞는 게 손에 잡히는 순간 답이 나옵니다.
- 단일 결제 대신 조합 결제. 저는 다음 사이드 프로젝트에선 v0로 골격을 만들고, Cursor에서 폴리싱·테스트를 보강하는 흐름으로 결제를 묶을 예정입니다. 같은 한 달 $40에 두 도구를 합치는 게, 한 도구만 $40 결제하는 것보다 결과물이 두 단계 좋아진다는 게 이번 실험의 가장 큰 수확이었어요.
- 프로덕션 전 4가지 후속 점검: 의존성 audit, 테스트 추가, A11y 점검, 코드 컨벤션 통일. 절약된 시간 일부를 여기에 다시 쓰면 사고를 막을 수 있습니다.
다음 비교에서는 "리브랜딩 가능 여부"와 "코드 베이스 100K 라인 이상에서의 적용성"을 측정해볼 계획입니다.
참고 자료
- Vercel, "v0 Composer 정식 출시 공지", vercel.com/blog (2026-05)
- Anthropic Claude 4.7 모델 카드, anthropic.com/claude/4-7
- StackBlitz Bolt.new 공식 문서, bolt.new/docs
- Lovable.dev 가격 페이지, lovable.dev/pricing
- Gartner, "Hype Cycle for AI Agents 2026", gartner.com/research
- State of JavaScript 2025 Report (frontend tooling 통계), stateofjs.com
- Tailwind CSS v4 변경사항, tailwindcss.com/docs/upgrade-guide
by 정보연구소장 · 최종 검증 2026-05-15 · 문의: jikol2000@gmail.com
이 글은 광고가 아닙니다. v0·Lovable.dev·Bolt.new는 모두 작성자가 직접 결제해 사용했고, 청구 내역·생성 코드 라인 수는 자체 측정값입니다. 특정 서비스에 대한 결제 권유가 아니며, 본인 워크플로와 예산을 고려한 평가 후 도입을 권장합니다. 라이선스·과금 정책은 변동될 수 있으니 결제 전 공식 약관을 확인해 주세요.
댓글
댓글 쓰기