Bolt.new — 브라우저 기반 AI 풀스택 앱 빌더

Bolt.new — 브라우저 기반 AI 풀스택 앱 빌더은(는) 무엇을 하나요?

StackBlitz의 Bolt.new에 대한 전문가입니다. 브라우저에서 완전히 실행되는 AI 기반 풀스택 개발 환경으로, 자연어 프롬프트를 사용하여 몇 분 만에 아이디어에서 배포된 앱까지 개발할 수 있도록 도와줍니다. Bolt는 프론트엔드, 백엔드, 데이터베이스, 배포를 포함한 완전한 애플리케이션을 생성하며, 이 모든 것이 로컬 설정 없이 WebContainer 내에서 실행됩니다.

핵심 기능

프롬프트-투-앱 (Prompt-to-App)

## Bolt 작동 방식

1. 자연어로 앱을 설명합니다.
2. Bolt가 전체 코드베이스를 생성합니다(프론트엔드 + 백엔드 + 데이터베이스).
3. 앱이 브라우저에서 실시간으로 실행됩니다(WebContainer).
4. 후속 프롬프트로 반복 개선합니다.
5. Netlify/Vercel에 한 번의 클릭으로 배포합니다.

## 예시 프롬프트

### SaaS 대시보드
"다음 기능이 있는 프로젝트 관리 대시보드를 만들어 주세요:
- 사용자 인증(이메일/비밀번호)
- 드래그 앤 드롭이 가능한 칸반 보드
- 팀원 관리
- 활동 피드
- 다크 모드 토글
React, Tailwind, SQLite 데이터베이스를 사용하세요."

### API + 랜딩 페이지
"다음 기능이 있는 URL 단축기를 만들어 주세요:
- 긴 URL을 붙여넣는 양식이 있는 랜딩 페이지
- 짧은 코드를 생성하는 API
- 리디렉션 핸들러
- 클릭 분석 대시보드
- IP당 시간당 10개의 URL로 속도 제한
프론트엔드는 Astro, API는 Hono를 사용하세요."

### 내부 도구
"직원 디렉토리 앱을 만들어 주세요:
- 이름, 부서, 위치로 검색
- 사진, 역할, 연락처 정보가 포함된 프로필 카드
- 부서 필터 사이드바
- 대량 직원 추가를 위한 CSV 가져오기
- 프로필 편집을 위한 관리자 패널"

반복 개발 (Iterative Development)

## 후속 프롬프트 (생성된 앱 반복 개선)

초기 생성 후:
- "프로필 사진 업로드가 있는 설정 페이지를 추가해 주세요"
- "대시보드를 모바일 반응형으로 만들어 주세요"
- "서버 전송 이벤트를 사용하여 실시간 알림을 추가해 주세요"
- "SQLite 대신 Supabase에 연결해 주세요"
- "프리미엄 플랜에 Stripe 체크아웃을 추가해 주세요"
- "API 엔드포인트에 대한 테스트를 작성해 주세요"
- "모바일에서 사이드바가 닫히지 않는 버그를 수정해 주세요"

Bolt는 생성된 앱의 전체 컨텍스트를 이해합니다.
각 프롬프트는 처음부터 시작하지 않고 기존 코드베이스를 수정합니다.

기술 스택 옵션

## 지원되는 프레임워크 및 도구

프론트엔드: React, Vue, Svelte, Astro, Next.js, Remix, Angular
스타일링: Tailwind CSS, shadcn/ui, DaisyUI, CSS Modules
백엔드: Node.js, Hono, Express, Fastify
데이터베이스: SQLite(내장), Supabase, Firebase, Prisma
인증: Clerk, Supabase Auth, 사용자 정의 JWT
배포: Netlify, Vercel, Cloudflare Pages

## WebContainer
- 브라우저 내 전체 Node.js 런타임
- npm install 작동(대부분의 패키지)
- 파일 시스템, 터미널, 패키지 관리자
- Docker 불필요, 로컬 설정 불필요, 환경 문제 없음

설치

# 설치 불필요 — 브라우저에서 실행
# https://bolt.new

# 무료 티어: 제한된 생성 횟수
# Pro: 월 $20 (무제한 생성)
# 팀: 맞춤 가격

모범 사례

1. 프롬프트에 구체적으로 작성 — "드래그 앤 드롭이 가능하고, 기본 칼럼이 3개이며, 로컬 스토리지를 사용하는 칸반 보드를 만들어 주세요"가 "프로젝트 도구를 만들어 주세요"보다 좋습니다.
2. 다시 시작하지 말고 반복하세요 — 후속 프롬프트를 사용하여 기능을 추가합니다. Bolt는 생성된 앱의 전체 컨텍스트를 유지합니다.
3. 기술 스택을 명시하세요 — "React, Tailwind, Supabase를 사용하세요"라고 지정하면 Bolt가 예상치 못한 선택을 하는 것을 방지할 수 있습니다.
4. 먼저 프로토타입을 만드세요 — Bolt는 프로토타이핑에 뛰어납니다. 코드를 내보내고 IDE에서 프로덕션 수준으로 다듬으세요.
5. 데이터베이스는 초기에 언급하세요 — 데이터베이스 요구 사항을 미리 언급하세요. 나중에 영속성을 추가하려면 더 많은 리팩토링이 필요합니다.
6. 모바일 우선 — 초기 프롬프트에서 반응형 디자인을 요청하세요. 사후 적용은 더 어렵습니다.
7. GitHub로 내보내기 — 생성된 코드를 GitHub 저장소로 내보내고, 일반 워크플로우에서 계속 개발하세요.
8. Cursor와 함께 사용 — Bolt에서 프로토타입을 생성한 후 내보내고, Cursor로 프로덕션 품질을 위해 다듬으세요.