터미널도 IDE도 설치할 필요 없이, 웹 브라우저에서 자연어로 앱을 만드는 도구들입니다. Lovable은 풀스택 앱, v0는 UI 컴포넌트에 특화되어 있습니다.
Lovable & v0 — 브라우저만으로 앱 만들기
한 줄 요약: Lovable은 대화형으로 풀스택 앱을 생성하고, v0(Vercel)는 UI 컴포넌트 생성에 특화되어 있다. 둘 다 코드 작성 없이 브라우저에서 동작하는 앱을 만들 수 있다. 터미널도 IDE도 설치할 필요 없이, 웹 브라우저에서 자연어로 앱을 만드는 도구 들입니다. Lovable은 풀스택 앱, v0는 UI 컴포넌트에 특화되어 있습니다.
by Lee
한 줄 요약: Lovable은 대화형으로 풀스택 앱을 생성하고, v0(Vercel)는 UI 컴포넌트 생성에 특화되어 있다. 둘 다 코드 작성 없이 브라우저에서 동작하는 앱을 만들 수 있다.
코딩 경험 없는 사람도 앱을 만들 수 있는 AI 빌더 플랫폼의 대표 주자 2개를 비교한다. 기능, 가격, 제한사항, 실전 활용법을 정리한다.
브라우저 기반 코딩이란
Lovable: '할 일 목록 앱을 만들어줘'처럼 자연어로 요청하면 React + Supabase 기반의 풀스택 앱을 자동 생성한다. 인증, 데이터베이스, 결제(Stripe) 통합까지 대화형으로 추가할 수 있다. 생성된 코드를 GitHub 저장소로 내보내 직접 수정할 수도 있다.
v0 (Vercel): UI 컴포넌트와 페이지 생성에 특화되어 있다. 'shadcn/ui로 대시보드 레이아웃 만들어줘'처럼 요청하면 React + Tailwind CSS 컴포넌트 코드를 생성한다. 생성된 코드를 npx v0 add로 프로젝트에 바로 추가할 수 있다. 풀스택 앱보다는 UI 프로토타이핑에 적합하다.
Lovable 사용법
Lovable.dev에 접속 → 만들고 싶은 앱을 자연어로 설명 → AI가 React + Supabase 기반 앱을 생성 → 실시간 미리보기 → 원클릭 배포. 프로토타이핑 속도가 압도적입니다.
v0 사용법
v0.dev에서 UI 컴포넌트를 자연어로 생성합니다. shadcn/ui + Tailwind CSS 기반이라 실제 프로젝트에 바로 복붙 가능합니다. Vercel 생태계와 완벽 호환.
한계와 적합한 용도
브라우저 도구의 한계: 복잡한 백엔드 로직, 대규모 프로젝트, 세밀한 커스터마이징은 어렵습니다. MVP/프로토타입에 최적이고, 본격 개발로 넘어갈 때는 Cursor나 Claude Code로 전환하는 것이 일반적입니다.
효과적인 활용 전략
조합 전략: v0로 UI 컴포넌트를 빠르게 프로토타이핑하고, Lovable이나 Cursor로 풀스택 앱에 통합한다. 한계 인식: 복잡한 비즈니스 로직, 커스텀 인증 플로우, 성능 최적화가 필요해지면 코드 에디터(Cursor/Claude Code)로 전환해야 한다.
주의: AI 빌더로 만든 앱은 프로토타입으로는 훌륭하지만, 프로덕션 서비스로 바로 사용하기에는 보안/성능/유지보수 관점에서 검토가 필요하다. MVP 검증 후 코드 리뷰를 거쳐 프로덕션으로 전환하라.
1인 개발자 관점에서 이 주제가 왜 중요한가
이 글의 주제(Lovable & v0 — 브라우저만으로 앱 만들기)를 다룰 때 저는 실제 1인 사이트 운영에 바이브코딩을 끼워 넣은 경험 관점에서 봅니다. 단순히 새 기능을 소개하는 입장이 아니라, 12개 한국어 사이트를 1인으로 운영하면서 매일 클로드 코드를 켜두고 작업하는 입장이라 의사결정의 기준이 다소 좁고 실용적인 편입니다. 신기술이 출시될 때마다 곧바로 도입하기보다는 우선 한두 사이트에 시범 도입해 두고, 운영 부담이 늘지 않는지 며칠 지켜본 뒤 전체 확산을 결정하는 식입니다.
가장 자주 보는 변수는 한국어 응답 품질의 미세한 한계, 그리고 버셀 무료 티어 한도 vs 유료 전환 시점입니다. 두 변수는 신기술을 도입할지 말지 결정할 때 거의 매번 영향을 줍니다. 글의 본문은 위의 두 축을 직접 명시하지는 않지만, 본문에서 다루는 항목을 이 축에 비춰 보시면 본인 환경에 맞는지 빠르게 판단할 수 있습니다. 특히 12개 사이트를 동시에 운영할 때 변수 분리 비용 같은 운영 변수는 도구 자체 성능보다 더 큰 영향을 주는 경우가 많기 때문에 본문 비교표를 볼 때 같이 떠올리시면 좋습니다.
한 가지 더 강조하면, 바이브코딩 영역의 글을 읽을 때 저는 본문이 다루는 도구·서비스가 ① 한국 결제 가능 여부 ② 한국어 응답 품질 ③ 종량제 비용의 예측 가능성 ④ 1인 개발자 학습 시간 대비 효과, 네 항목을 모두 충족해야 실제 도입을 결정합니다. 네 항목 중 하나라도 명확하지 않으면 도입을 1~2주 미루는 편이고, 그 사이 같은 카테고리의 다른 글도 확인합니다.
본문의 각 비교·코드·체크리스트는 이 네 항목 중 어느 부분에 영향을 주는지 의식하면서 보시면 더 빠르게 결론에 도달하실 수 있습니다. 본 사이트의 다른 바이브코딩 글과 함께 보시면 같은 평가 축이 반복되는 것을 확인하실 수 있습니다. 토픽 페이지 또는 같은 카테고리 태그를 따라가시면 동일한 평가 기준이 적용된 글을 한 번에 모아 보실 수 있습니다.
본인 환경에 적용하기 전 확인할 체크포인트
본문의 내용을 본인 환경에 적용하기 전에 다음 항목을 빠르게 확인하시면 도입 실패 가능성을 줄일 수 있습니다.
- 공식 문서 버전 일치 — 본문 작성 시점과 현재 배포 버전이 다른 경우, 같은 명령어가 다르게 동작할 수 있습니다.
- 한국 결제·환율 검증 — 카드 결제, 부가가치세 처리, 원화 환산 시점에 따라 실제 청구액이 본문 예시와 다를 수 있습니다.
- 기존 스택과의 호환성 — Next.js·Vercel·Supabase 같은 기본 스택과 충돌이 없는지 패키지 의존성을 먼저 확인하세요.
- 롤백 절차 사전 정리 — 도입 후 문제가 생겼을 때 1회 명령으로 이전 상태로 되돌릴 수 있는 절차를 도입 전에 메모해 두시면 운영 부담이 크게 줄어듭니다.
위 네 항목을 모두 통과하면 보통 1~2시간 내에 도입을 마칠 수 있고, 통과하지 못한 항목이 있다면 그 항목을 우선 해결한 뒤 다시 시작하는 것이 효율적입니다.
자주 묻는 질문
실무에서 처음 도입할 때 가장 먼저 확인할 것은 무엇인가요?
만들려는 것이 풀스택 앱인지 UI 화면인지부터 가르는 것이 먼저입니다. 데이터베이스·인증·결제가 붙는 동작하는 서비스라면 React에 Supabase를 자동 연결하고 내장 호스팅까지 제공하는 Lovable이 맞고, 화면 레이아웃이나 컴포넌트만 빠르게 뽑아 기존 코드에 붙일 거라면 shadcn/ui와 Tailwind 기반으로 npx v0 add 한 줄이면 들어오는 v0가 맞습니다. 둘 다 무료 플랜이 있으니(각각 프로젝트 5개, 제한적 생성) 결정 전에 한도부터 확인하시고, 두 도구의 결과물 모두 MVP 검증용이라는 점을 전제로 시작하시는 것이 안전합니다.
가장 자주 발생하는 실수나 함정은 무엇인가요?
가장 큰 함정은 Lovable이나 v0로 잘 돌아가는 화면을 만들었다는 이유로 그대로 프로덕션에 올리는 것입니다. AI 빌더 결과물은 프로토타입으로는 훌륭하지만 보안·성능·유지보수 관점에서 검토되지 않은 코드라, 커스텀 인증 플로우나 복잡한 비즈니스 로직, 성능 최적화가 필요해지는 순간 한계에 부딪힙니다. 그때 처음부터 다시 만들지 않으려면, MVP로 컨셉을 검증한 뒤 Lovable은 GitHub로 내보내고 v0는 컴포넌트 코드를 가져와 커서나 클로드 코드에서 직접 리뷰·보강하는 식으로 코드 에디터로 넘어가는 전환점을 미리 정해두셔야 합니다.
다른 대안과 비교했을 때 어떤 상황에 적합한가요?
Lovable과 v0가 가장 빛나는 건 아이디어를 며칠 안에 동작하는 화면으로 검증해야 하는 MVP·프로토타입 단계입니다. 인증·데이터베이스·결제까지 붙는 서비스 형태를 통째로 뽑아야 하면 Lovable이, 이미 코드가 있는 프로젝트에 화면 한두 개만 빠르게 끼워 넣을 거라면 v0가 적합합니다. 반대로 복잡한 비즈니스 로직, 커스텀 인증 플로우, 세밀한 성능 최적화가 필요한 본격 프로덕션 단계라면 둘 다 부적합하고, 이때는 생성된 코드를 GitHub로 내보내거나 컴포넌트를 가져와 커서나 클로드 코드 같은 코드 에디터로 넘어가야 합니다. 정리하면 검증 단계는 브라우저 빌더, 운영 단계는 코드 에디터로 역할을 나누는 것이 안전합니다.
더 깊게 공부하려면 어떤 자료를 보면 좋을까요?
두 도구의 공식 문서가 출발점입니다. Lovable은 docs.lovable.dev에서 Supabase 연동과 GitHub 내보내기 흐름을, v0는 v0.dev 가이드와 npx v0 add 사용법을 먼저 읽으시면 됩니다. 그다음으로는 v0 결과물이 그대로 얹히는 shadcn/ui 공식 문서(ui.shadcn.com)와 Tailwind CSS 문서를 보시면 생성된 컴포넌트를 직접 손볼 수 있고, Lovable이 내보낸 풀스택 코드를 이해하려면 React와 Supabase 공식 문서를 함께 보시는 것이 효과적입니다. 검증 이후 단계로 넘어갈 생각이라면 커서나 클로드 코드 가이드까지 이어 보시길 권합니다.
Lovable & v0, 한 줄로 정리하면 어떻게 되나요?
Lovable은 자연어 한 마디로 React와 Supabase 기반의 풀스택 앱을 통째로 생성하고 내장 호스팅으로 배포까지 해주는 도구이고, v0는 shadcn/ui와 Tailwind 기반의 UI 컴포넌트를 만들어 npx v0 add로 기존 프로젝트에 바로 꽂는 도구입니다. 즉 서비스 전체를 빠르게 세우려면 Lovable, 화면만 빠르게 뽑으려면 v0가 답입니다. 다만 둘 다 MVP 검증용이라, 본격 운영 단계에서는 코드를 에디터로 옮겨 직접 보강해야 합니다.
lovablev0브라우저노코드프로토타이핑
