bolt.new ai 사용기: 자연어로 풀스택 앱을 ‘명령’하는 시대가 왔다

풀스택 개발은 언제나 복잡한 일이다. 프론트엔드 설정, 백엔드 API 구축, 데이터베이스 연결까지. 아이디어 하나를 구현하기 위해 거쳐야 할 ‘보일러플레이트’ 코드가 너무 많다. 만약 이 모든 과정을 “투두 리스트 앱 만들어줘”라는 말 한마디로 끝낼 수 있다면 어떨까. StackBlitz가 선보인 bolt.new ai는 바로 이 상상을 현실로 만든, 자연어 기반 풀스택 개발 AI 에이전트다.

* 풀스택 개발, 아이디어는 있지만 시작이 막막할 때

하나의 웹 서비스를 만들기 위해 고려할 것은 한두 가지가 아니다. 사용자가 볼 화면(프론트엔드)은 React로 할지, Vue로 할지 정해야 한다. 데이터를 저장하고 처리할 서버(백엔드)는 Node.js Express로 구축하고, 데이터베이스는 Supabase나 MongoDB를 연결해야 한다. 이 모든 기술 스택을 설정하고 연동하는 작업은, 특히 초보 개발자에게는 거대한 진입 장벽이다. 숙련된 개발자에게도 반복적이고 시간을 소모하는 작업이다. 아이디어를 빠르게 프로토타입으로 만들어보고 싶을 뿐인데, 배보다 배꼽이 더 큰 상황이 자주 발생한다. 이 고질적인 ‘시작의 어려움’을 해결하겠다는 것이 bolt.new ai의 핵심 목표로 보인다.

* bolt.new ai란 무엇인가?: 자연어로 말하는 대로

bolt.new ai는 채팅창에 아이디어를 입력하면, AI가 스스로 풀스택 애플리케이션을 구축, 실행, 배포하는 서비스다.

이 도구의 가장 무서운 점은 단순 코드 조각을 생성하는 것이 아니라는 점이다. StackBlitz의 강력한 WebContainers 기술을 기반으로 작동한다.

즉, AI가 브라우저 내에서 가상의 파일 시스템, Node.js 서버, 패키지 매니저(npm), 터미널까지 직접 제어한다. 사용자가 “React와 Tailwind CSS로 랜딩 페이지 만들어줘”라고 말하면, AI는 스스로 npm install react 같은 명령어를 실행하고, 필요한 파일(App.js, index.css 등)을 생성하며, 심지어 개발 서버를 실행해 실시간 미리보기를 제공한다.

* 직접 써 보기: 분석 사이트 만들기

이왕 해보는거 평소에 내가 유용하게 사용하고 싶은 서비스를 만들어 보기로 했다. 한글을 지원하는지 알수 없어서 물어봤더니, 한글모드로 자동으로 전환해 주었다.

1. 요구사항 프롬프트 작성하기

프롬프트는 한글로 작성해도 잘 이해하기 때문에, 한글로 명령을 내리면 된다. 하지만 대부분의 AI가 그렇듯이 어설프게 질문하면 서비스가 산으로 갈 수 있다. 그렇기 때문에 chatgpt를 이용해서 먼저 프로젝트 개요를 작성하고, 이것을 bolt.new의 프롬프트에 입력하였다.

나는 구체적인 기술 스택과 사용자 요구사항을 자연어로 명시했다. bolt.new ai는 이 프롬프트를 분석한 뒤, 곧바로 파일 트리를 생성하기 시작했다. package.json 파일이 만들어지고, 터미널에서는 의존성 패키지들이 설치되는 로그가 실시간으로 올라왔다. 프론트엔드 폴더와 백엔드 폴더가 분리되어 생성되는 모습이 인상적이었다.

2. 생성된 코드와 즉각적인 피드백

몇 분 지나지 않아 기본적인 앱 구조가 완성되었다. AI는 프론트엔드 App.js 컴포넌트와 백엔드 index.js 서버 파일을 모두 작성했다.

(javascript / React)] // AI가 생성한 React 컴포넌트 예시 (일부) import React, { useState, useEffect } from 'react';

function App() { const [todos, setTodos] = useState([]); const [task, setTask] = useState('');

// ... (데이터 로딩, 추가, 삭제 함수들) ...

return ( <div className="container mx-auto p-4"> <h1 className="text-2xl font-bold mb-4">My Todo List</h1> {/* ... (입력 폼 및 리스트 렌더링) ... */} </div> ); }

export default App;

(javascript / React)] // AI가 생성한 React 컴포넌트 예시 (일부) import React, { useState, useEffect } from 'react';

function App() { const [todos, setTodos] = useState([]); const [task, setTask] = useState('');

// ... (데이터 로딩, 추가, 삭제 함수들) ...

return ( <div className="container mx-auto p-4"> <h1 className="text-2xl font-bold mb-4">My Todo List</h1> {/* ... (입력 폼 및 리스트 렌더링) ... */} </div> ); }

export default App;

물론, 생성된 코드가 완벽하지는 않았다. Supabase 연동을 위한 API 키를 넣는 부분(.env 파일 설정)은 사용자가 직접 처리해야 했다. 하지만 API 엔드포인트(POST /todos, DELETE /todos/:id)와 이를 호출하는 프론트엔드 로직의 뼈대는 거의 완벽하게 구현되어 있었다. 브라우저 내에서 바로 코드를 수정하고 실시간으로 반영되는 결과를 확인할 수 있다는 점이 압도적인 장점이었다.

* 장점과 명확한 한계점

bolt.new ai를 경험해 본 결과, 이는 분명 ‘게임 체인저’가 될 잠재력이 있다. 하지만 만병통치약은 절대 아니다.

장점: 속도, 그리고 배포 편의성

가장 큰 장점은 속도다. 아이디어를 MVP(최소 기능 제품)로 만드는 시간을 획기적으로 단축시킨다. 복잡한 설정 없이 브라우저에서 바로 풀스택 개발 환경에 접근할 수 있다는 것만으로도 엄청난 이점이다. 또한, 아이디어를 만드는 것에서 그치지 않는다. Supabase나 Netlify 같은 호스팅 서비스에 쉽게 연결할 수 있는 인터페이스를 제공하는 것은 또 다른 장점이었다. 생성(Generate)에서 배포(Deploy)까지의 과정을 매끄럽게 만들려는 의도가 보인다. 새로운 프레임워크나 기술 스택을 학습할 때, bolt.new ai에게 기본 예제를 만들어 달라고 요청하는 것도 좋은 학습 방법이 될 수 있다.

한계: 비용, 그리고 ‘AI 리터러시’의 필요성

하지만 몇 가지 명확한 한계도 보였다. 가장 먼저 체감되는 한계는 비용, 즉 토큰 소모다. bolt.new ai는 단순 코드 조각이 아닌 ‘전체 서비스’를 제작한다. 이 과정에서 상당한 양의 토큰이 소모된다. 수정 사항을 요청하다 보면, AI가 종종 더 나은 구조를 위해 리팩토링을 감행하는데, 이때에도 토큰 소모가 꽤 크다.

비용 정책을 면밀히 확인할 필요가 있다. 더 큰 문제는 AI가 종종 잘못된 결과를 내놓는다는 점이다. 코드는 결함이 있을 수 있다. 만약 사용자가 개발 지식이 전혀 없다면, 이 상황은 해결 불가능한 장벽이 될 수 있다. AI가 ‘왜 안 되는지’ 모르는 코드를 뱉어냈을 때, 디버깅은 오롯이 사용자의 몫이다. 다행히도 ‘되돌리기(Undo)’ 기능이 잘 구현되어 있다. AI가 코드를 잘못 수정한 경우, 이전 상태로 쉽게 돌아갈 수 있는 점은 좋았다. 하지만 이 역시 근본적인 해결책보다는 임시방편에 가깝다.

* 개발자의 새로운 ‘부사수’가 될 것인가

bolt.new ai는 개발자가 반복적인 보일러플레이트 코드에서 해방되어, 더 창의적이고 본질적인 문제 해결에 집중할 수 있도록 돕는 강력한 도구다. “자연어로 앱 만들기”는 더 이상 먼 미래의 이야기가 아니다. 물론 이 AI가 모든 것을 해결해 주진 않는다. 하지만 잘 활용한다면, 마치 유능한 ‘부사수’를 곁에 둔 것처럼 개발 생산성을 극대화할 수 있을 것이다.

기술의 발전이 또 한 번 개발의 풍경을 바꾸고 있다.