AI Web IDE — Replit · Bolt.new · v0 · Lovable · Google AI Studio Build
AI Web IDE — 브라우저에서 자연어로 앱을 짓는 자리
10-ai-coding-ides 가 데스크탑 IDE (Cursor · Windsurf · Kiro · Trae · Antigravity) 의 자리라면, 본 글은 브라우저만으로 AI 가 코드 + DB + 배포까지 만드는 자리 — AI Web IDE 와 AI 앱 빌더 — 를 정리합니다.
1. 카테고리 정의
| 결 | 정의 | 대표 |
|---|---|---|
| AI Web IDE | 브라우저 IDE + LLM 통합 (편집 중심) | Replit · GitHub Codespaces + Copilot · StackBlitz |
| AI 앱 빌더 (no-code) | 자연어 → 앱 (자동 생성 중심) | Replit Agent · Bolt.new · v0.dev · Lovable · Google AI Studio Build |
| AI 코딩 IDE (데스크탑) | 로컬 IDE + AI | Cursor · Windsurf · Kiro · Trae · Antigravity |
세 카테고리가 겹칩니다. Replit 은 IDE + Agent 양쪽. Bolt.new 는 앱 빌더 측면이 강하지만 IDE 가 떠 있음.
2. 도구별 자리
Replit (2016 ~ , Replit Agent 2024 ~)
- 브라우저 IDE + 다인 협업 + 배포 + Agent.
- 모든 언어 (Node.js · Python · Go · Rust · …).
- 풀스택 — Reserved VM + Replit DB / PG.
- 모델: Anthropic Claude (default), OpenAI · Gemini 옵션.
- 강점: 학습·페어 프로그래밍·해커톤·Discord 봇.
- 약점: 트래픽 spike 시 단가가 클라우드 직접 사용보다 비쌈.
- 상세.
Bolt.new (StackBlitz, 2024)
- WebContainer (브라우저 안 Node.js 가상 머신) 위 Vite/Next/Astro 자동 생성.
- 사이트
bolt.new. StackBlitz 의 자산 활용. - 모델: Anthropic Claude.
- 강점: 빠른 SPA / Vite PoC. 즉시 미리보기 (브라우저 내).
- 약점: 백엔드 (long-running) 한계. Vercel/Netlify 배포 위임.
- 적합: Vite/Next/Astro 의 60초 PoC.
v0.dev (Vercel, 2023)
- UI 컴포넌트 우선. shadcn/ui + Tailwind 기반.
- 사이트
v0.dev. - 모델: OpenAI GPT · Anthropic Claude (변동).
- 결과물: React · Vue · Svelte UI 코드 (복사·붙여넣기) 또는 Next.js 자동 배포.
- 강점: 디자인 → 컴포넌트 자동화. Tailwind + shadcn 의 prebuilt 패턴.
- 약점: 백엔드 / DB 자동화 없음. 프론트엔드 한정.
- 적합: 풀스택 앱의 UI 부품 빠르게 만들기.
Lovable (2024, 스웨덴)
- 자연어로 풀스택 앱 자동 생성 + Supabase 통합.
- 사이트
lovable.dev. - 모델: Anthropic Claude.
- GitHub 자동 sync — 코드를 저장소로 export.
- 강점: 풀스택 (UI + DB + Auth) 가 Supabase 결합으로 한 번에.
- 약점: Supabase 락인. 사용량 한도가 빠르게 도달.
- 적합: SaaS MVP / 학습용 풀스택 앱.
Google AI Studio Build (Google, 2024 ~)
- Gemini 기반 자연어 → 앱 + Cloud Run 자동 배포.
- 사이트
aistudio.google.com/apps. - 모델: Gemini 1.5 / 2.0 / 2.5 시리즈.
- DB: Firestore · Cloud SQL · 직접 Gemini 호출.
- 강점: Gemini 1M token context · Workspace 통합 · Cloud Run 자동.
- 약점: Google 락인. 무료 키는 학습 사용 가능.
- 적합: GCP 사용자 / 긴 context RAG / Workspace API 결합.
- 상세.
GitHub Codespaces (2021 ~, GA 2022)
- 브라우저 / VS Code 데스크탑 양쪽에서 동작하는 클라우드 dev container.
- Copilot 통합으로 AI 보조.
- 무료 60h/월 (개인) · 조직별 사용량.
- 강점: 기존 저장소를 즉시 dev 환경으로. enterprise.
- 약점: AI 가 주연이 아닌 보조. 자연어 → 앱은 Copilot Workspace 측.
StackBlitz (2017 ~)
- WebContainer 시조. 브라우저 안 Node.js 시뮬레이션.
- Bolt.new 의 기반.
- 강점: 100% 브라우저, sandbox 격리.
- 약점: WebContainer 외 (Python · Rust 등) 한계.
3. 한 표 비교
| 도구 | 출시 | 모델 | 백엔드 | DB 자동 | 배포 | 무료 |
|---|---|---|---|---|---|---|
| Replit Agent | 2016/2024 | Anthropic + 옵션 | ✓ | Replit DB · PG | Replit | sleep 무료 |
| Bolt.new | 2024 | Anthropic | 부분 | ✗ | Vercel/Netlify | 제한 |
| v0.dev | 2023 | OpenAI · Anthropic | ✗ | ✗ | Vercel | ✓ |
| Lovable | 2024 | Anthropic | ✓ | Supabase | Vercel/Netlify | ✓ |
| AI Studio Build | 2024 | Gemini | ✓ | Firestore · CloudSQL | Cloud Run | Gemini quota |
| Codespaces | 2021 | Copilot 통합 | dev container | 사용자 정의 | ✗ (CI 필요) | 60h/월 |
4. 선택 기준
| 시나리오 | 추천 |
|---|---|
| 학습 / 페어 프로그래밍 / 협업 | Replit |
| Vite/Next 빠른 PoC | Bolt.new |
| UI 컴포넌트 (shadcn/Tailwind) | v0.dev |
| 풀스택 SaaS MVP + Supabase | Lovable |
| GCP / Gemini context 1M | AI Studio Build |
| 기존 저장소 dev 환경 | Codespaces |
| 강한 데스크탑 IDE 필요 | Cursor / Windsurf (10) |
5. 데이터 / 학습 정책
대부분 도구가 무료 티어에서 입력 데이터를 모델 학습에 사용 가능. 업무 코드라면:
- Replit — Pro/Teams 구독 + Privacy 옵션.
- Bolt.new — StackBlitz Pro.
- v0.dev — Vercel Pro.
- Lovable — 유료 plan + opt-out.
- AI Studio — 유료 키 (Pay-as-you-go) 또는 Vertex AI 로 이전.
- Codespaces — Enterprise 정책 (학습 사용 안함).
업무 코드는 약관 확인 + 가능하면 enterprise plan / 자체 호스팅.
6. 평가의 어려움
같은 프롬프트라도 결과물이 도구별로 매우 다릅니다. 평가 기준:
- 한국어 프롬프트 처리.
- 풀스택 (UI + 백엔드 + DB) 통합도.
- 코드 품질 (React 최신 패턴 · TypeScript · 에러 처리).
- 배포 자동화의 마찰.
- GitHub sync (코드를 손에 쥘 수 있는가).
자기 시나리오로 30분 동일 프롬프트 시험이 가장 정확.
7. 한계 — 공통
자연어 → 앱이 완성된 SaaS 를 만들지는 못합니다:
- 복잡한 비즈니스 로직 / 도메인 모델은 사람이 작성.
- 인증·결제·이메일 인증 등 프로덕션 wiring 은 추가 작업.
- 보안 (CSRF · XSS · SQL injection) 은 자동 적용 안 됨.
- 한국 시장 (휴대폰 인증·간편결제) 은 추가 통합.
PoC → 사람이 정제 → 운영. 이 흐름이 현실적입니다.