StackBlitz에서 만든 AI 기반 풀스택 웹 개발 플랫폼으로, 브라우저에서 애플리케이션을 생성, 실행 및 배포합니다.
| 명령어 | 설명 |
|---|
bolt.new으로 이동 | 브라우저에서 Bolt.new 열기 |
| GitHub 또는 Google로 로그인 | 프로젝트 영구 저장을 위한 계정 생성 |
| 채팅에 프롬프트 입력 | 애플리케이션 빌드 시작 |
| 준비되면 “Deploy” 클릭 | Netlify 또는 다른 호스팅에 배포 |
| StackBlitz로 포크 | StackBlitz IDE에서 편집 계속 |
| 프로젝트 다운로드 | 소스 코드를 zip으로 받기 |
Bolt.new Architecture:
1. You describe what you want in natural language
2. AI generates the full project (frontend + backend + config)
3. WebContainer runs the app in-browser (no server needed)
4. Live preview updates as AI makes changes
5. You iterate by chatting — AI modifies code in real-time
6. Deploy directly to Netlify or download source
Technology: Runs on StackBlitz WebContainers
- Node.js runs IN the browser (not a remote server)
- npm install, build, and dev server all run locally
- No Docker, no VMs, no cloud compute
| 프롬프트 스타일 | 설명 |
|---|
| ”Build a todo app with React and Tailwind” | 프레임워크와 스타일링 지정 |
| ”Create a REST API with Express and MongoDB” | 백엔드 중심 프롬프트 |
| ”Make a landing page for a SaaS product” | 디자인 중심 프롬프트 |
| ”Add authentication with email/password” | 기존 프로젝트에 기능 추가 |
| ”Fix the bug where the form doesn’t submit” | 기존 이슈 디버그 |
| ”Change the color scheme to dark mode” | 스타일 수정 |
| ”Add a dashboard page with charts” | 새 페이지/기능 요청 |
| ”Refactor the code to use TypeScript” | 코드 품질 개선 |
Good prompts:
"Build a blog platform with Next.js, Tailwind CSS,
and MDX support. Include a homepage listing posts,
individual post pages, and a tag filtering system."
"Create a weather dashboard using React that fetches
from the OpenWeatherMap API. Show current weather,
5-day forecast, and a search by city feature."
Bad prompts:
"Make me a website" → Too vague
"Build Facebook" → Too broad
"Fix everything" → No specific target
Tips:
- Specify the tech stack (React, Vue, Svelte, etc.)
- Describe the features you need
- Mention styling preferences (Tailwind, CSS modules)
- Reference specific APIs or data sources
- Break large apps into incremental prompts
| 프레임워크 | 설명 |
|---|
| React | 컴포넌트 기반 UI 라이브러리 |
| Next.js | SSR/SSG를 지원하는 React 프레임워크 |
| Vue.js | 점진적 JavaScript 프레임워크 |
| Nuxt | SSR/SSG를 지원하는 Vue 프레임워크 |
| Svelte | 컴파일 타임 반응형 프레임워크 |
| SvelteKit | Svelte 풀스택 프레임워크 |
| Astro | 콘텐츠 중심 정적 사이트 빌더 |
| Solid.js | 세밀한 반응형 UI 라이브러리 |
| Angular | 완전한 기능의 TypeScript 프레임워크 |
| 프레임워크 | 설명 |
|---|
| Express.js | 최소한의 Node.js 웹 프레임워크 |
| Fastify | 빠른 Node.js 웹 프레임워크 |
| Hono | 경량 엣지 우선 프레임워크 |
| NestJS | TypeScript 엔터프라이즈 프레임워크 |
| tRPC | 엔드투엔드 타입 안전 API |
| Remix | 풀스택 React 프레임워크 |
| 라이브러리 | 설명 |
|---|
| Tailwind CSS | 유틸리티 우선 CSS 프레임워크 |
| shadcn/ui | React 컴포넌트 라이브러리 |
| DaisyUI | Tailwind 컴포넌트 라이브러리 |
| Material UI | Google의 React용 디자인 시스템 |
| Chakra UI | 접근성 높은 React 컴포넌트 |
| Radix UI | 스타일 없는 접근성 컴포넌트 |
| 명령어 | 설명 |
|---|
| 사이드바에서 파일 클릭 | 편집기에서 파일 열기 |
| 코드 직접 수정 | 수동 코드 변경 |
Ctrl + S | 파일 변경 저장 |
| 파일 우클릭 → New File | 새 파일 생성 |
| 파일 우클릭 → Delete | 파일 삭제 |
| 폴더 우클릭 → New Folder | 디렉토리 생성 |
| 파일 변경 자동 감지 | 핫 리로드로 미리보기 업데이트 |
| 명령어 | 설명 |
|---|
| 하단 터미널 패널 클릭 | WebContainer 터미널 접근 |
npm install package | npm 패키지 설치 |
npm run dev | 개발 서버 시작 |
npm run build | 프로덕션 빌드 |
npx prisma migrate dev | Prisma 마이그레이션 실행 |
node script.js | Node.js 스크립트 실행 |
| 명령어 | 설명 |
|---|
| ”Add a navbar with logo and links” | 새 컴포넌트 추가 |
| ”Make the button bigger and blue” | 스타일 수정 |
| ”Add form validation for email” | 기능 추가 |
| ”The page crashes when I click submit” | 버그 리포트 |
| ”Show loading spinner while data fetches” | UX 개선 |
| ”Add error handling for the API call” | 견고성 향상 |
| ”Make it responsive for mobile” | 반응형 디자인 |
| ”Add dark mode toggle” | 테마 전환 |
| 명령어 | 설명 |
|---|
| 채팅 기록에 모든 변경 표시 | AI가 수정한 내용 추적 |
| ”Undo the last change” | AI 수정 되돌리기 |
| ”Go back to the version with the blue header” | 이전 상태 참조 |
| 언제든 프로젝트 다운로드 | 로컬에 스냅샷 저장 |
| StackBlitz로 포크하여 git 사용 | 완전한 git 통합 |
| 명령어 | 설명 |
|---|
| ”Deploy” 버튼 클릭 | 배포 프로세스 시작 |
| Netlify 계정 연결 | Netlify 접근 권한 부여 |
| 자동 빌드 및 배포 | 몇 초 만에 라이브 URL 생성 |
| 커스텀 도메인 지원 | Netlify 대시보드에서 설정 |
| HTTPS 포함 | 자동 SSL 인증서 |
| 명령어 | 설명 |
|---|
| 프로젝트 다운로드 → 수동 배포 | 모든 호스팅 제공자 |
| StackBlitz로 포크 → CI/CD 연결 | GitHub 기반 배포 |
| GitHub로 포크 → Vercel/Netlify 자동 배포 | Git 기반 워크플로우 |
다운로드 → npm run build → dist/ 업로드 | 수동 정적 호스팅 |
Deployment workflow:
1. Click "Deploy" in Bolt.new
2. Select Netlify (or connect account)
3. Bolt.new builds the project
4. Uploads to Netlify automatically
5. Get your live URL: https://your-app.netlify.app
For custom domains:
1. Deploy first to get Netlify URL
2. Go to Netlify dashboard → Domain settings
3. Add your custom domain
4. Update DNS records at your registrar
| 기능 | 설명 |
|---|
| 브라우저에서 Node.js 실행 | 원격 서버 불필요 |
| npm/yarn/pnpm 지원 | 완전한 패키지 관리 |
| 브라우저 내 파일 시스템 | 가상 파일 시스템 |
| 브라우저 내 개발 서버 | 로컬 URL로 핫 리로드 |
| Docker 불필요 | 모든 것이 클라이언트 측에서 실행 |
| 로드 후 오프라인 작동 | 지속적인 인터넷 불필요 |
What runs in WebContainers:
✓ Node.js (most recent LTS)
✓ npm, yarn, pnpm
✓ TypeScript compilation
✓ Vite, Webpack, esbuild
✓ Express, Fastify, Hono
✓ SQLite (in-memory)
✓ Prisma (with SQLite)
✓ File system operations
What does NOT run:
✗ Docker containers
✗ PostgreSQL / MySQL / MongoDB
✗ Native binary dependencies
✗ Python / Ruby / Go
✗ System-level operations
✗ Long-running background processes
| 데이터베이스 | 설명 |
|---|
| SQLite (인메모리) | WebContainer에서 직접 작동 |
| Prisma + SQLite | 로컬 데이터베이스가 있는 ORM |
| Supabase (원격) | API를 통한 PostgreSQL |
| Firebase (원격) | Firebase SDK를 통한 NoSQL |
| Turso (원격) | libSQL을 통한 엣지 SQLite |
| PlanetScale (원격) | API를 통한 MySQL |
For local development in Bolt.new:
SQLite + Prisma is the best combo
- Runs entirely in WebContainer
- No external services needed
- Full ORM with migrations
For production:
Connect to a hosted database
- Supabase (free tier: 500MB)
- Turso (free tier: 9GB)
- PlanetScale (free tier: 5GB)
Set connection strings as environment variables
| 템플릿 | 설명 |
|---|
| ”React + Vite + Tailwind starter” | 모던 React SPA |
| ”Next.js app with shadcn/ui” | 풀스택 React |
| ”Express API with Prisma + SQLite” | REST API 백엔드 |
| ”Vue + Nuxt + Tailwind” | Vue 풀스택 |
| ”Svelte + SvelteKit” | Svelte 풀스택 |
| ”Astro blog with MDX” | 콘텐츠 사이트 |
| ”Landing page with Tailwind” | 마케팅 페이지 |
-
명확하고 구체적인 프롬프트로 시작 — 기술 스택, 기능 및 디자인 선호도를 미리 설명하세요. “Build a task manager with React, Tailwind, and localStorage persistence”는 “make a todo app”보다 더 좋은 결과를 얻습니다.
-
점진적으로 빌드 — 핵심 기능부터 시작하고 작동하는지 확인한 다음, 한 번에 하나씩 기능을 추가하세요. 각 프롬프트는 모든 것을 한꺼번에 요청하지 말고 하나에 집중해야 합니다.
-
디버깅 시 코드를 참조 — “it doesn’t work” 대신 “the handleSubmit function in ContactForm.tsx doesn’t send the POST request”라고 말하면 더 정확한 수정을 받을 수 있습니다.
-
확인을 위해 터미널 사용 — AI에게 디버그를 요청하기 전에 터미널 출력에서 빌드 오류, 누락된 의존성 또는 런타임 이슈를 확인하세요.
-
정기적으로 백업 다운로드 — 안전망으로 프로젝트를 주기적으로 다운로드하세요. 브라우저 기반 프로젝트는 브라우저 데이터를 삭제하면 손실될 수 있습니다.
-
필요시 패키지 버전 지정 — 특정 라이브러리 버전이 필요하면 명시하세요: “Use react-query v5” 또는 “Use Tailwind CSS v3, not v4.”
-
고급 편집을 위해 StackBlitz로 포크 — git, 여러 터미널 또는 더 복잡한 워크플로우가 필요할 때, 프로젝트를 전체 StackBlitz IDE로 포크하세요.
-
시크릿에는 환경 변수 사용 — 프롬프트에 API 키를 하드코딩하지 마세요. AI에게 환경 변수를 사용하도록 요청하고 배포 플랫폼에서 설정하세요.
-
브라우저 내 데이터베이스에는 SQLite 선택 — WebContainers는 PostgreSQL이나 MySQL을 실행할 수 없으므로, 로컬 개발에는 SQLite와 Prisma를 사용하고 프로덕션에서는 호스팅 DB로 전환하세요.
-
명령 팔레트 활용 — Ctrl + K를 눌러 파일 검색, 명령 실행, 프로젝트 탐색을 메뉴를 클릭하지 않고 빠르게 수행하세요.
