Bolt.new 완벽 가이드 — 가장 쉬운 바이브코딩 도구 (2026)

🎯 Bolt.new가 도대체 뭔가

Bolt.new는 StackBlitz가 만든 AI 풀스택 웹 IDE예요. 이름 그대로 주소창에 bolt.new를 치면 바로 열리고, 그 자리에서 한 문장 프롬프트로 React·Next.js·Vue 앱을 만들어 낸 뒤 같은 화면 안에서 실행·수정·배포까지 끝낼 수 있습니다. 비전공자 사이에서 “AI 코딩 도구를 처음 써본다면 Bolt.new”라는 추천이 자주 나오는 이유는 단 하나, 설치할 게 없다는 점이에요. Node.js도, VS Code도, 터미널 명령어도 일단 몰라도 됩니다.

기술적으로는 StackBlitz의 WebContainer 기술 위에서 동작합니다. 브라우저 탭 안에서 Node.js 런타임이 돌아가는 거라 npm 설치도, dev 서버도 모두 사용자의 컴퓨터가 아니라 브라우저 자체에서 처리돼요. 결과적으로 “AI가 코드를 짜고, 같은 자리에서 실행되고, 옆 패널에 미리보기가 뜨는” 흐름이 끊김 없이 이어집니다. 같은 자리에서 GitHub 푸시·Netlify 배포까지 한 번에 가는 게 다른 AI 코딩 도구와 가장 다른 지점이에요.

🆚 Cursor·Claude Code와 어떻게 다른가

비슷한 도구가 여럿이라 처음에는 헷갈릴 수밖에 없어요. 한국에서 이름이 자주 들리는 셋을 한 줄로 요약하면 이렇습니다. Cursor는 “VS Code에 AI를 붙인 데스크톱 에디터”, Claude Code는 “터미널에서 AI에게 일을 시키는 CLI 도구”, Bolt.new는 “브라우저 안에서 끝나는 풀스택 IDE”예요. 셋이 겨냥하는 사용자가 다르고, 잘 맞는 작업도 갈립니다.

“하루 만에 결과물 한 개를 보고 싶다”가 목표면 Bolt.new가 압도적으로 빠릅니다. 반대로 코드를 본격적으로 키워나가거나, 회사 저장소처럼 이미 큰 프로젝트를 다루는 일에는 Cursor나 Claude Code가 어울려요. 셋 중 하나만 골라야 하는 건 아니고, 시작은 Bolt.new로 → 본격 운영은 Cursor/Claude Code로 옮겨 가는 흐름이 자연스럽습니다.

🚀 5분 만에 첫 앱 만들기

처음 진입하는 분들을 위해 가장 짧은 길로 안내할게요. 다른 준비물은 없습니다. 브라우저만 켜져 있으면 돼요.

1️⃣ bolt.new 접속과 로그인

주소창에 bolt.new를 입력합니다. 처음 방문이면 화면 정중앙에 큼지막한 입력창이 보여요. 무조건 로그인해야 하는 건 아니지만, 만든 결과물을 저장하거나 다시 열어보려면 GitHub·Google 계정 중 하나로 로그인해두는 편이 편합니다. 로그인은 우측 상단 “Sign in” 버튼을 눌러 OAuth 한 번이면 끝나요.

2️⃣ 한 문장으로 만들고 싶은 걸 적기

입력창에는 만들고 싶은 앱을 자연어로 그대로 씁니다. 한국어도 잘 알아듣지만, 처음 한 번은 영어로 적어보시는 걸 권해요. 모델이 영어 학습량이 더 많아서 결과 품질의 흔들림이 줄어듭니다. 입력 예시는 다음과 같아요.

Build a dark-mode todo app with three priority levels (high, medium, low),
local storage persistence, and a counter at the bottom showing
how many tasks are completed and how many are left.

같은 내용을 한국어로 써도 무방합니다. “다크 모드 투두앱을 만들어줘. 우선순위 3단계(높음/중간/낮음), localStorage 저장, 하단에 완료/남음 개수 카운터” 정도면 충분히 통해요.

3️⃣ 자동 생성과 미리보기 확인

엔터를 누르면 오른쪽에 코드가 흘러내리듯 차례로 만들어집니다. 같이 의존성도 설치되고, 잠시 후 가장 오른쪽 패널에 실제 동작하는 화면이 떠요. 클릭해 보면 진짜로 동작합니다. 새 항목을 추가하면 추가되고, 새로고침해도 localStorage 덕에 그대로 남아 있어요.

여기까지 오시는 데 평균 3~5분이 걸립니다. 처음 한 번 흐름을 잡으면 두 번째부터는 정말로 1~2분 안에 완성돼요.

💡 좋은 프롬프트 vs 안 좋은 프롬프트

Bolt.new의 결과 품질을 가르는 건 결국 첫 문장이에요. AI에게 던지는 첫 프롬프트가 두루뭉술하면 뒤이어 수정 요청을 다섯 번, 열 번 반복해야 합니다. 토큰도 그만큼 빠르게 닳아요. 그래서 처음에 조금 길게 써두는 게 길게 보면 훨씬 효율적입니다.

왼쪽 열의 공통점은 “AI가 결정해야 할 게 너무 많다”는 점이에요. 색상·레이아웃·라이브러리·동작 모두 AI 추측에 맡기면 결과는 운에 가까워집니다. 오른쪽처럼 만들고 싶은 그림을 구체적으로 묘사해두면, 한 번에 의도한 결과에 가까운 코드가 나옵니다.

🛠️ 만든 앱 수정·반복하기

첫 결과물이 100점일 일은 거의 없어요. 색이 마음에 안 들거나, 동작이 약간 어긋나거나, 기능 한두 개를 더 붙이고 싶은 게 자연스럽습니다. 이때부터가 Bolt.new를 길게 쓰는 진짜 구간이에요.

대화창에 후속 요청 보내기

왼쪽 채팅 패널에 추가 메시지를 보내면 AI가 기존 코드를 이해한 상태로 수정합니다. 처음부터 다시 만드는 게 아니라 변경분만 적용하는 식이에요. “헤더에 다크모드 토글 추가해주세요”, “completed 상태가 변경될 때 짧은 애니메이션을 넣어주세요” 같은 식으로 하나씩 쌓아가는 흐름이 가장 잘 맞습니다.

코드를 직접 손대기

가운데 코드 패널은 일반 에디터처럼 동작해요. AI에게 전부 맡길 필요 없이 색 코드 한 줄, 텍스트 한 줄 정도는 직접 바꾸는 게 빠릅니다. 손댄 내용은 즉시 미리보기에 반영돼요. 약간 코드를 본 적 있는 분이라면 이 조합이 가장 생산적입니다.

롤백과 버전 관리

왼쪽 상단 메뉴에서 “Restore checkpoint”로 이전 상태로 되돌릴 수 있어요. AI 수정이 의도와 다르게 일을 키웠을 때 가장 빨리 빠져나오는 길입니다. 큰 변경 직전에 GitHub 연결을 해두면 더 안전해요. 다음 섹션에서 이 부분을 다룹니다.

🌐 GitHub 연결과 1클릭 배포까지

여기까지 만든 결과물을 다른 사람에게 보여주려면 두 가지 방법이 있어요. URL 한 줄로 끝내는 1클릭 배포와, 코드를 GitHub로 옮겨 본격 관리하는 방식입니다. 둘 다 같은 화면 안에서 가능합니다.

Netlify로 1클릭 배포

오른쪽 위 “Deploy” 버튼을 누르면 Netlify 연결 안내가 떠요. Netlify 계정이 없으면 가입까지 같은 흐름으로 자연스럽게 이어집니다. 1~2분 뒤 your-app.netlify.app 형태의 공개 URL이 발급되고, 그 자리에서 카카오톡·트위터로 바로 공유할 수 있어요. 첫 데모를 빨리 보여주는 게 목적이라면 이쪽이 가장 빠릅니다.

GitHub 저장소로 옮겨 본격 관리

같은 메뉴의 “Push to GitHub”를 누르면 GitHub 인증을 거쳐 새 저장소가 만들어집니다. 이 시점부터는 Cursor나 VS Code에서 해당 저장소를 클론해 로컬에서 이어 작업할 수 있어요. 즉, “초기 결과는 Bolt.new에서 빠르게 → 이후 본격 개발은 로컬 도구로” 흐름이 가장 깔끔합니다. GitHub 가입이 처음이면 GitHub 가입과 첫 저장소 만들기 가이드를 먼저 훑어보고 오시는 게 편해요.

💰 무료 vs 유료 — 토큰 한도 정확히 보기

Bolt.new는 토큰 기반으로 동작합니다. 코드를 길게 만들수록, 수정 횟수가 많을수록 토큰이 줄어요. 무료 한도가 비교적 넉넉한 편이지만, 한 프로젝트를 길게 키우다 보면 의외로 빠르게 닳기도 합니다. 2026년 4월 기준 한도를 정리해두면 이렇습니다.

토큰 단가는 모델·요청 길이에 따라 변하므로 위 숫자는 대략적 기준이에요. 처음에는 무료로 시작해 본인의 한 달 사용량을 본 뒤, 한도가 자주 막힌다 싶을 때 Pro로 올리시는 게 합리적입니다. 정확한 최신 한도는 Bolt.new 공식 사이트의 Pricing 페이지에서 확인해주세요.

⚠️ Bolt.new가 잘 못하는 것

장점이 또렷한 만큼 한계도 또렷합니다. 미리 알고 시작하면 헛심 쓸 일이 줄어들어요.

영구 데이터베이스

WebContainer는 브라우저 안에서 동작하기 때문에 실제 PostgreSQL·MySQL 같은 서버형 DB를 띄울 수 없어요. 데이터를 진짜로 쌓아야 하는 앱이라면 Bolt.new에서 구조만 잡고, Supabase·Neon 같은 호스티드 DB를 외부에서 연결하는 식으로 가야 합니다.

무거운 백엔드 작업

이미지 업로드·동영상 처리·헤비한 배치 작업처럼 컴퓨팅 자원을 많이 쓰는 일은 브라우저 안에서 한계가 분명해요. 가벼운 API 호출 정도는 무리 없지만, 제대로 된 서버 처리는 Vercel Functions·Cloudflare Workers 같은 외부 환경으로 분리하는 게 맞습니다.

아주 큰 프로젝트

파일 수가 수백 개를 넘기 시작하면 브라우저 메모리·AI 컨텍스트 한계가 먼저 옵니다. 100개 미만의 파일·5,000줄 이내의 코드까지가 체감상 부드러운 영역이에요. 그 이상으로 커진다면 GitHub로 옮겨 Cursor 같은 데스크톱 에디터에서 이어가시면 됩니다.

오프라인 사용

모든 AI 호출이 서버를 거치므로 인터넷 없는 환경에선 사용할 수 없어요. 비행기·지하 같은 환경에선 Cursor의 로컬 모델 옵션이나 Claude Code의 오프라인 캐시 정도가 대안입니다.

🔧 자주 마주치는 에러와 해결

비전공자분들이 Bolt.new에서 가장 자주 막히는 지점을 추려봤어요. 증상이 비슷하면 해당 해결법부터 시도해보세요.

오류 메시지를 그대로 복사해 채팅창에 붙이는 게 가장 빠른 해결책일 때가 많아요. AI가 컨텍스트(자기가 만든 코드)를 알고 있어서 외부 검색보다 정답에 빠르게 도달합니다.

🧭 언제 Cursor·Claude Code로 넘어갈까

Bolt.new를 끝까지 메인으로 쓰는 분도 있지만, 결과물이 진지해지기 시작하면 자연스럽게 다른 도구가 더 편해지는 시점이 옵니다. 그 신호를 정리하면 이렇습니다.

• 파일 수가 100개를 넘기 시작하고, AI가 “어떤 파일을 봐야 할지” 맞히는 비율이 떨어진다.
• 같은 프로젝트를 며칠 이상 이어서 작업하고 싶고, 로컬 환경에서의 디버깅이 그리워진다.
• 외부 서비스(Stripe·Auth·Database)를 본격 연결해야 하고, 환경변수·시크릿 관리가 필요해진다.
• 토큰 한도가 일주일에 두세 번 막혀, 같은 작업을 다른 도구로 옮기고 싶다.

이 신호 중 두 개 이상이 같이 오면 Cursor로 옮길 타이밍이에요. 처음 옮길 때는 어색하지만 며칠 적응하면 더 빠릅니다. 도구 선택 기준이 헷갈리면 Cursor vs Claude Code 비교 글을 함께 읽어보시는 걸 권해요.

🪧 면책 조항

여기까지 따라오셨다면 한 번 정도는 빈손으로 bolt.new를 켜서 본인 머릿속의 작은 아이디어 하나를 그 자리에서 만들어보시는 걸 권해요. 첫 5분의 경험이 이후 도구 선택 기준 전부를 바꿉니다.

❓ FAQ

질문을 누르면 답변이 펼쳐집니다.

🔰 시작하기 전 궁금한 것들

🛠 작업 중 자주 마주치는 상황

🚀 확장과 운영

🔗 관련 글

• 바이브코딩 투두앱 만들기 — 30분이면 비전공자도 완성
• AI 랜딩 페이지 만들기 5단계 — 디자인 감각 없어도 1시간 완성
• 바이브코딩 게임 만들기 5단계 — 비전공자 첫 게임 + 수익화 경로
• Cursor vs Claude Code — 비전공자에게 더 나은 선택은?
• AI 코딩 도구 비교 2026 — Copilot vs Cursor vs Claude

📑 참고 자료

• Bolt.new — 공식 사이트
• StackBlitz WebContainers — 기술 문서
• Bolt.new 공식 지원 센터
• Netlify 공식 배포 문서

Brandon

IT 기획 10년차 / 비전공자를 위한 바이브코딩 블로그 운영 / vibe-start.com 제작

Building VibeStart — the fastest path for non-devs into AI coding. Launching on Product Hunt 2026-05-26.

vibe-start.com