바이브 코딩 툴 Bolt.new 사용 후기 (대화 하나로 여행 짐싸기 체크리스트 앱 완성)

안녕하세요. 모두의바이브코딩입니다.

지난 Lovable 편에 이어, 오늘은 다양한 바이브 코딩 도구 중 또 다른 강력한 선수인 Bolt.new를 다뤄봅니다. Bolt.new는 한 마디로 ‘브라우저 안에서 웹 앱을 통째로 만들어주는 도구’예요. 채팅으로 앱을 만들 수 있다는 점은 Lovable과 비슷하지만, AI가 어떤 부품들을 어떻게 조립하고 있는지 옆에서 같이 보여준다는 점이 가장 큰 차이입니다.

오늘은 Bolt.new로 약 15분 만에 ‘AI 여행 짐싸기 체크리스트 생성기’를 만들어 보겠습니다. 이번에도 코드는 한 줄도 직접 쓰지 않습니다. 저만 따라오세요!

Bolt.new란?

Bolt.new는 StackBlitz(스택블리츠)라는 회사가 만든 브라우저 기반 풀스택 바이브 코딩 도구입니다. 채팅창에 만들고 싶은 앱을 한국어로 설명하면, 웹 앱을 만드는 데 필요한 모든 구성 요소를 한 번에 챙겨줍니다.

잠깐, ‘풀스택’이 뭔가요?

처음 들으면 어색한 단어인데, 뜻은 의외로 간단합니다. ‘웹 앱 한 개를 굴리는 데 필요한 것들 전체(full stack, 즉 한 묶음)’를 뜻합니다. 보통 네 가지로 나뉩니다.

• 프론트엔드 (Frontend) — 사용자 눈에 보이는 화면. 버튼, 입력창, 카드처럼 ‘겉모습’에 해당하는 부분입니다.
• 백엔드 (Backend) — 화면 뒤에서 돌아가는 ‘두뇌’. 입력값을 받아서 계산하고, 결과를 만들어내는 부분입니다.
• 데이터베이스 (Database) — 정보를 저장하는 창고. 회원가입 정보나 사용자가 만든 체크리스트 같은 것들이 여기 쌓입니다.
• 호스팅 (Hosting) — 만든 앱을 인터넷에 ‘올려두는 자리’. 이게 있어야 친구한테 링크를 보내서 보여줄 수 있습니다.

원래는 이 네 가지를 따로따로 준비해야 해서 비개발자에게는 진입 장벽이 꽤 높았습니다. Bolt.new는 이 네 가지를 모두 한 화면에서, 채팅 한 줄로 처리해 줍니다. 그래서 ‘풀스택’ 도구라고 부르는 거예요.

Bolt.new가 다른 도구와 다른 점

같은 풀스택 도구인 Lovable과 비교했을 때 Bolt.new의 결정적인 차이는 한 줄로 요약할 수 있습니다.

Lovable이 ‘결과 화면’을 보여준다면, Bolt.new는 ‘결과 화면 + 그 뒤의 설계도’를 함께 보여줍니다.

화면 한쪽에는 우리가 만들고 있는 앱이 실제로 동작하고, 다른 한쪽에는 그 앱을 구성하는 파일들이 차곡차곡 쌓이는 모습이 보입니다. 코딩을 모르는 분도 “아, 웹 앱이 이런 식으로 만들어지는 거구나” 하고 구조를 자연스럽게 익힐 수 있어요. 처음에는 그냥 채팅창만 쓰면 되고, 익숙해지면 나중에 코드 한 줄을 직접 살짝 고쳐보는 단계로도 자연스럽게 넘어갈 수 있습니다.

또 하나, 2025년 10월에 나온 Bolt v2 버전부터는 위에서 말한 데이터베이스, 호스팅, 회원 로그인 기능까지 모두 기본 제공됩니다. 예전에는 “앱은 만들었는데 사용자 정보는 어디 저장하지?” 같은 고민을 따로 해야 했는데, 이제는 그 부분까지 Bolt.new가 알아서 챙겨줘요.

오늘 예제는 ‘입력 → AI 생성 → 카드 결과’라는 흐름이 한 화면에서 깔끔하게 이어지는, 누구나 쓸 만한 작은 도구를 만드는 데 초점을 맞췄습니다.

1단계: Bolt.new 회원 가입 (Google 계정 한 개면 끝)

1. Bolt.new 홈페이지에 접속합니다. https://bolt.new/

2. 첫 화면 중앙에 이미 프롬프트 입력창이 보일 텐데요, 그냥 입력해도 되지만 결과물을 저장하고 배포하려면 회원 가입을 먼저 하는 게 좋습니다. 우측 상단의 [Get Started] 또는 [Sign In] 버튼을 클릭합니다.

3. 회원 가입 화면이 뜨면 Google 계정으로 가입합니다. (GitHub 계정도 가능한데, GitHub가 뭔지 모르신다면 그냥 Google로 가입하시면 됩니다. 더 편합니다.)

4. 가입이 완료되면 곧바로 작업 화면으로 넘어갑니다. Lovable이 ‘깔끔한 채팅 위주’ 화면이라면, Bolt.new는 개발자 도구 느낌이 조금 더 납니다. 처음엔 살짝 낯설 수 있는데, 어차피 우리는 채팅창 한 곳만 쓸 거예요.

여기까지 1~3분이면 완료됩니다. 무료 플랜에도 매일 일정량의 AI 토큰이 주어지므로 가벼운 프로젝트는 결제 없이도 충분히 만들어볼 수 있습니다.

2단계: 말 한마디로 웹/앱 만들기

이제 화면 중앙(혹은 왼쪽)의 프롬프트 창에 아래 문장을 그대로 복사해 붙여 넣습니다. 이것이 오늘의 ‘주문서’입니다.

여행 목적지, 여행 일수, 계절, 여행 스타일(휴양/관광/액티비티)을 입력하면 AI가 맞춤형 짐싸기 체크리스트를 카테고리별(의류, 세면도구, 전자기기, 서류, 기타)로 만들어주는 웹 앱을 만들어줘. 깨끗한 화이트 배경에 파스텔 블루를 포인트 컬러로 쓰고, 결과는 카드 UI로 카테고리별로 보기 좋게 정리해줘. 각 항목 옆에는 체크박스를 둬서 짐을 쌀 때 하나씩 체크할 수 있게 해줘.

본 포스팅은 코딩 기술 구현에 초점을 맞춘 가이드이며, 생성된 결과물은 학습용 예시일 뿐 실제 여행 준비물 점검은 본인의 일정과 환경에 맞게 별도로 확인하시기 바랍니다.

Enter를 누르면 Bolt.new의 AI 에이전트(Claude Agent) 가 작동하기 시작합니다. 이때부터가 Bolt.new의 진짜 매력이 드러나는 순간입니다.

화면 상단을 보면 다음과 같은 아이콘이 보일 텐데, 눈 모양을 선택하면 만들어진 웹 앱을 띄워주는 ‘미리보기’ 창이 나타납니다. 그 옆의 <>를 선택하면 Bolt.new가 작업 중에 만드는 파일들이 보이고 그 옆에서 각 파일의 코드도 확인할 수 있습니다. 그다음 드럼통 모양의 아이콘은 데이터베이스를 나타냅니다. 클릭하면 데이터베이스를 확인할 수 있는 별도의 창이 뜹니다.

1. 왼쪽 채팅창 — AI가 “먼저 화면을 만들고, 그다음 입력 폼을 붙이고…” 하고 자기가 지금 무엇을 하고 있는지 한국어로 중계해 줍니다. 이해 안 되는 영어 단어가 섞여 나와도 괜찮습니다. 그냥 “열심히 일하고 있구나” 정도로 보시면 됩니다.
2. 가운데 파일 목록(<>) — App.jsx, index.css 같은 이상한 이름의 파일들이 하나씩 생겨납니다. 이게 바로 위에서 설명한 ‘풀스택’ 의 부품들이에요. 화면 하나하나, 버튼 하나하나가 각자 자기 파일을 가지고 있다고 생각하시면 됩니다. 눌러볼 필요는 전혀 없습니다.
3. 미리보기(눈 모양 아이콘) — 진짜 사용자가 보게 될 앱 화면입니다. 빈 화면에서 시작해서, 헤더가 뜨고, 입력 폼이 생기고, 점차 완성된 모습으로 채워지는 걸 실시간으로 볼 수 있습니다.

우리가 신경 써야 할 곳은 왼쪽 채팅창과 오른쪽 미리보기뿐입니다. 파일 목록은 “AI가 알아서 정리하는 작업 책상” 정도로 두고 넘어가셔도 됩니다.

작업이 끝나는 데 걸리는 시간은 환경마다 다른데, 저는 약 7~8분 정도 걸렸습니다. 완료되면 오른쪽 Preview 창에 동작하는 앱이 뜹니다.

화면에서 목적지와 여행 기간, 계절 및 스타일을 입력하고 실행 버튼을 클릭해서 결과를 확인해 보세요. 제대로 구현이 되었다면 맞춤 짐 목록을 만들어 결과를 보여줄 것입니다.

결과 화면의 체크박스를 클릭해 보고 잘 클릭되는지(반응형) 확인해 봅니다. 혹시 작동하지 않는 기능이 있다면 채팅창에 해당 오류를 입력하고 고쳐달라고만 요청하면 됩니다.

어떠신가요? 한 줄짜리 프롬프트로 ‘그럴듯한 도구’가 진짜 동작합니다. 폼을 채우고, 버튼을 누르고, 결과 카드의 체크박스를 하나씩 눌러보세요. 단순한 정적 화면이 아니라 사용자가 실제로 끝까지 써볼 수 있는 앱이라는 점이 핵심입니다.

이제 결과물을 더 다듬고 싶다면, 채팅창에 한국어로 추가 요청만 하면 됩니다. 몇 가지 예시를 드릴게요.

1. 개인화 강화: “체크리스트에 ‘필수 / 권장 / 선택’ 우선순위 태그를 색깔로 구분해서 표시해줘. 필수는 빨간색, 권장은 주황색, 선택은 회색으로.”
2. 저장 기능 추가: “사용자가 만든 체크리스트를 브라우저에 저장해서 다음에 들어왔을 때도 진행 상태가 유지되게 해줘.”
3. 공유 기능: “완성된 체크리스트를 이미지로 다운로드하거나 카카오톡으로 공유할 수 있는 버튼을 추가해줘.”
4. UI 개선: “전체적으로 좀 더 따뜻한 느낌이 나게 폰트는 둥근 sans-serif로, 카드 모서리는 더 부드럽게 다듬어줘.”

추가 요청을 보낼 때마다 Bolt.new는 기존 코드를 통째로 다시 쓰는 게 아니라, 필요한 부분만 골라서 수정합니다. 이 과정이 채팅창과 파일 트리 양쪽에 그대로 보여서, *“내가 뭘 시켰고, 어디가 바뀌었는지”*를 한눈에 따라가기 좋습니다.

기획자의 Tip: 왜 ‘Bolt.new’인가?

같은 풀스택 바이브 코딩 도구인 Lovable과 비교했을 때, Bolt.new를 골라야 하는 이유는 크게 세 가지입니다.

• ‘기계가 일하는 모습’이 보입니다. Lovable이 결과 화면 위주라 *“AI가 알아서 만든 것”*에 가깝다면, Bolt.new는 옆에서 AI가 어떤 부품들을 어떤 순서로 조립하고 있는지가 그대로 보입니다. 한 줄도 안 건드려도 되지만, 보고만 있어도 ‘웹 앱’ 이라는 게 어떻게 만들어지는지 자연스럽게 익숙해집니다.
• ‘사용자 정보가 필요한 앱’을 만들기 쉽습니다. 회원가입·로그인이 필요한 앱, 사용자가 입력한 데이터를 저장해두는 앱(예: 일기장, 가계부) 같은 걸 만들 때, 별도 설정 없이 채팅으로 “로그인 기능 추가해줘” 한 마디면 됩니다.
• 나중에 ‘이사’가 자유롭습니다. Bolt.new로 만든 앱은 결과 코드를 통째로 다른 곳으로 옮길 수 있습니다. 지금은 이 부분이 와닿지 않아도 괜찮은데, 나중에 *“내 앱이 잘되니까 좀 더 전문적으로 운영하고 싶다”*는 순간이 오면 큰 차이가 됩니다. (다른 일부 도구는 그 회사 안에서만 굴릴 수 있어요.)

요약하면, ‘채팅으로 시작했다가 나중에 욕심이 생겨도 갈아탈 수 있는 도구’ 를 찾는다면 Bolt.new가 정답에 가깝습니다.

개인적으로는 Lovable보다는 Bolt.new의 UI가 더 깔끔하고 세련된 느낌이어서 마음에 들었습니다. 여러분 생각은 어떠신가요?

---

마음에 드는 앱이 완성되었다면, 이제 인터넷에 주소를 붙이는(배포) 단계로 넘어갑니다.

3단계: 완성된 웹/앱을 실제 서비스로 배포하기

Bolt.new도 Lovable처럼 클릭 한 번으로 배포가 끝납니다. Preview 창 상단의 [Publish] 버튼을 누르세요.

버튼을 누른 후 Public/Private을 선택하고 창 아래쪽에 있는 파란색 [Publish] 버튼을 다시 누릅니다.

• Bolt Hosting (.bolt.host 도메인) — 가장 간단한 옵션. 무료 플랜에서도 사용 가능하며, 클릭 한 번에 자동으로 인터넷 주소가 만들어집니다.
• Custom domain — 이 옵션을 선택하면 자신만의 도메인을 연결할 수 있습니다. 하지만 Bolt.new 유료 버전에서만 사용할 수 있으며, 도메인도 별도로 구매해야 합니다. 처음이시라면 신경 쓰지 마세요.

오늘은 가장 빠른 길인 Bolt Hosting을 선택하겠습니다. 기본으로 이 옵션으로 진행되니 따로 선택할 것은 없습니다.

배포가 마무리되면 창 상단에 자동 생성된 URL이 뜨는지 확인하세요. 주소가 *.bolt.host 형식으로 끝나면 배포에 성공한 겁니다.

배포는 보통 30초에서 1분 안에 끝납니다. 완료 메시지와 함께 공개 URL이 표시됩니다.

화면 왼쪽의 채팅 창 위에도 작업 결과를 알리는 메시지가 나타납니다. 해당 메시지의 URL을 클릭하거나 직접 복사해서 새 탭에 붙여넣어 보세요. 방금 만든 앱이 실제 인터넷에 공개되어 있을 겁니다. 친구에게 링크를 보내면 누구나 들어와서 사용할 수 있습니다.

모바일과 PC, 다른 네트워크에서도 한 번씩 열어보세요. 입력이 잘 되는지, 결과 카드가 깨지지 않는지, 체크박스가 제대로 동작하는지 확인합니다. 여기까지 OK라면, 오늘 Bolt.new로 첫 번째 풀스택 앱의 URL을 손에 넣으신 겁니다.

Tip: 무료 플랜에서 배포된 앱은 누구나 볼 수 있는 공개 상태가 기본입니다. 비공개로 운영하고 싶거나 주소를 여러분이름.com 같은 본인 소유 도메인으로 바꾸고 싶다면 Pro 플랜(월 $25부터)을 검토해 보세요.

---

마치며: ‘코드를 보면서 만드는’ 바이브 코딩의 매력

오늘 Bolt.new로 여행 짐싸기 체크리스트 생성기를 만들어 보셨는데, 어떠셨나요?

Lovable이 ‘AI에게 다 맡기고 결과만 받아보는’ 깔끔한 경험이었다면, Bolt.new는 ‘AI 옆에 앉아서 같이 만드는’ 느낌에 가깝습니다. 채팅창에서 주문하는 동시에, 파일이 생기고 코드가 자라는 모습을 곁눈질하면서 자연스럽게 ‘아, 웹 앱이라는 게 이렇게 구성되는구나’ 하고 감을 잡게 됩니다.

처음에는 100% 채팅(프롬프트)만 써도 충분합니다. 하지만 한 달 두 달 쓰다 보면 어느 순간 ‘이 색깔만 살짝 바꾸고 싶은데, AI한테 또 시키기는 귀찮네’ 싶은 순간이 옵니다. 바로 그때, 옆에 떠 있는 그 ‘낯선 파일들’ 에서 색깔 한 줄만 살짝 바꿔보는 경험이 여러분이 자연스럽게 한 단계 성장하는 순간이 될 거예요. 부담 가질 필요는 전혀 없습니다.

여러분은 Bolt.new로 어떤 작은 도구를 가장 먼저 만들어보고 싶으신가요? 오늘의 가이드대로라면, 회원 가입부터 배포까지 30분이면 충분합니다. 아이디어가 머릿속에서만 맴돌고 있다면 지금 바로 Bolt.new를 열어보세요.

다음 편에서는 또 다른 바이브 코딩 도구로 찾아뵙겠습니다. 감사합니다!

본 포스팅은 서비스 소개를 위한 리뷰이며, 모든 사이트 UI 저작권은 StackBlitz(Bolt.new)에 있습니다.