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 → 사람이 정제 → 운영. 이 흐름이 현실적입니다.

8. 참고 링크

• Replit
• Google AI Studio
• AI 코딩 IDE — 데스크탑
• AI CLI 도구
• AI 워크플로 도구