Bolt.new를 사용하여 코딩 기술 없이 영화 웹사이트를 구축한 방법

코딩하는 법을 전혀 모르는 상태에서 영화 검색 웹사이트를 구축했습니다 — 제가 정확히 어떻게 했는지 알려드립니다.

개발자도 없었습니다. 대행사도 없었습니다. 코딩 배경 지식도 없었습니다. 오직 아이디어 하나, Bolt.new라는 도구, 그리고 수많은 밤샘 작업뿐이었습니다.

대신, 저는 직접 만들었습니다. 우크라이나에서, 단 한 줄의 코드도 직접 작성하지 않고 말이죠.

이 웹사이트의 이름은 MovieHunt입니다 — 실제로 영화를 보는 시간보다 무엇을 볼지 고르는 데 더 많은 시간을 쓰는 사람들을 위해 만들어진 영화 검색 앱입니다. 그리고 이를 가능하게 만든 도구는 Bolt.new입니다.

이것은 그 과정이 어떻게 일어났는지, 무엇이 효과적이었고 무엇이 그렇지 않았는지, 그리고 만약 제가 오늘 다시 시작한다면 무엇을 다르게 할 것인지에 대한 솔직한 이야기입니다.

Bolt.new란 무엇이며 왜 중요한가

Bolt.new는 StackBlitz에서 만든 AI 기반 풀스택 (Full-stack) 웹 개발 플랫폼입니다. 개발자가 자신의 환경에 붙여넣을 코드 조각을 생성하는 전통적인 AI 코딩 어시스턴트 (AI coding assistants)와 달리, Bolt.new는 단순한 텍스트 프롬프트 (Text prompt)로부터 브라우저에서 직접 전체 웹 애플리케이션을 구축, 실행 및 배포합니다.

당신이 무엇을 만들고 싶은지 설명하면, Bolt.new는 단순히 복사해서 붙여넣을 코드를 제공하는 데 그치지 않습니다. 실시간 미리보기, 수정 가능한 코드, 그리고 즉시 배포할 수 있는 기능을 갖춘 실제로 작동하는 애플리케이션을 생성합니다.

Bolt는 자연어 프롬프트를 프로덕션 준비가 된 (Production-ready) 풀스택 (Full-stack) 애플리케이션으로 변환하여 작동합니다. 로컬 설정 (Local setups)이나 수동 설치가 필요하지 않습니다.

이 플랫폼은 StackBlitz가 WebContainers라고 부르는 기술 위에서 실행됩니다 — 이 기술은 보통 컴퓨터가 필요한 코드를 웹 브라우저 내부에서 안전하게 실행할 수 있게 해줍니다. 간단히 말해, WebContainers는 Bolt.new가 추가 설정 없이 소프트웨어 패키지를 설치하고, 개발 서버를 실행하며, 라이브 웹사이트 미리보기를 보여줄 수 있게 해줍니다. 마치 브라우저 안에 아무것도 다운로드하지 않고도 사이트를 구축하고 테스트할 수 있는 가상 작업실이 있는 것과 같습니다.

코딩을 하지 않는 사람에게 이것은 엄청나게 중요합니다. 설치할 것도 없고, 구성할 것도 없습니다. 브라우저 탭을 열고 당신이 만들고 싶은 것을 설명하기 시작하면 됩니다.

아이디어: 결정 장애가 있는 사람들을 위한 영화 발견 앱
MovieHunt의 이면에 담긴 개념은 단순하고 개인적이었습니다. 저는 영화를 아주 많이 봅니다. 영화에 대해 글을 쓰기도 합니다. 무엇이 영화를 볼 가치가 있게 만드는지에 대해 강한 의견을 가지고 있습니다. 그리고 스트리밍 서비스의 홈 화면을 멍하니 바라보며 무엇을 볼지 결정하지 못하는 데에 민망할 정도로 많은 시간을 보냅니다.

기존의 도구들 — 기록을 위한 Letterboxd, 데이터를 위한 TMDB, 평점을 위한 Rotten Tomatoes —은 모두 제 역할을 다하고 있습니다. 하지만 그 어떤 것도 '무엇인지 모르겠지만 지금 당장 무언가를 보고 싶은 기분'이라는 구체적인 문제를 해결해주지는 못했습니다. 결정 피로 (Decision fatigue)는 실제로 존재하며, 이는 현대 스트리밍 문화에서 가장 흔하게 불평되는 경험 중 하나입니다.

그래서 저는 기분 (Mood), 장르 (Genre), 연대 (Decade), 그리고 스트리밍 가능 여부에 따라 추천을 필터링하고, 정말로 결정을 내릴 수 없어 알고리즘이 대신 골라주길 바라는 순간을 위한 스핀 휠 (Spin Wheel) 기능이 포함된 무언가를 만들고 싶었습니다.

제가 원하지 않았던 것은 코딩을 배우기 위해 몇 달을 보내거나

Bolt는 대부분의 사이트가 필요로 하는 필수 페이지들을 포함하는 기본적인 구조를 빠르게 생성하여, 그 위에 구축할 수 있는 탄탄한 토대를 제공합니다. 결과물로 돌아오는 것은 완성된 제품이 아니라 — 하나의 시작점입니다. 실제 페이지, 실제 네비게이션(Navigation), 그리고 그 뒤에서 실행되는 실제 코드가 포함된 진정한 시작점 말입니다.

2단계: 대화를 통한 반복 (Iteration). 여기서 진짜 작업이 이루어집니다. Bolt가 구축한 것을 살펴보고, 무엇이 잘못되었거나 누락되었는지 파악한 뒤, 다음 변경 사항을 일상적인 언어로 설명합니다. “배경을 더 어둡게 만들어줘.” “영화 검색 결과가 나타날 때 로딩 스피너 (Loading spinner)를 추가해줘.” “모바일에서 검색창이 중앙에 있지 않아 — 수정해줘.”

이 시스템은 프롬프트 정교화 (Prompt refinement)를 통해 프레임워크 (Framework) 생성, UI 컴포넌트 (UI component) 제작, 그리고 간단한 기능 구현에 탁월한 성능을 보입니다. 반복할 때마다 당신이 실제로 원하는 것에 더 가까워집니다. 핵심 기술 — 그리고 이것은 분명히 기술입니다 — 은 당신이 보고 있는 것과 바꾸고 싶은 것을 AI가 이해할 수 있을 만큼 충분히 정밀하게 설명하는 법을 배우는 것입니다.

이러한 통합 작업 중 그 어떤 것도 저에게 기저에 깔린 코드를 이해할 것을 요구하지 않았습니다. 대신 제가 무엇을 연결하고 싶은지 이해하고, 그것을 Bolt에게 명확하게 설명할 것을 요구했습니다.

4단계: 차별화된 기능들. SEO 부스트 (SEO Boost) 기능은 나중에 추가되었습니다. 이는 MovieHunt의 영화 페이지가 특정 영화 관련 검색어에 대해 Google에서 순위를 높일 수 있도록 돕는 구조화된 메타데이터 (Metadata) 및 스키마 마크업 (Schema markup) 세트입니다. 다시 말씀드리지만: 일상적인 언어로 설명했고, AI가 구축했으며, 제가 테스트했습니다.

엔터를 누르거나 클릭하여 이미지를 전체 크기로 보세요

*솔직한 어려움들
*
이 과정이 아무런 마찰이 없는 것처럼 들리게 한다면 여러분에게 잘못된 정보를 전달하는 것이 될 것입니다. 그렇지 않았습니다.

토큰 제한 (Token limits)은 실재합니다. Bolt는 기능과 비용 모두에 영향을 미치는 토큰 기반 경제 (token-based economy)를 사용합니다. 애플리케이션의 규모가 커질수록 각 상호작용에 더 많은 토큰이 필요하며, 유료 플랜은 월 $20부터 시작합니다. 인증 (authentication), 결제 (payments), 다중 API 통합 (API integrations), 그리고 Chrome 확장 프로그램 (Chrome extension)을 포함하는 MovieHunt 규모의 프로젝트라면 토큰 소비량이 상당할 것입니다. 이에 대한 예산을 세워두세요.

복잡한 버그 (bugs)는 인내심을 요구합니다. 사용자들은 단지 버그를 수정하기 위해 엄청난 양의 토큰을 소진하기도 했습니다. 시각적으로 명확하게 드러나지 않는 방식으로 무언가 고장 났을 때 — 예를 들어, 조용히 실패하는 결제 흐름(payment flow)이나 잘못된 데이터를 반환하는 API 호출(API call) 같은 경우 — 대화를 통한 디버깅 (debugging) 과정은 코드를 직접 읽을 수 있는 사람보다 느릴 수밖에 없습니다. 당신은 증상을 설명하고, AI는 해결책을 제안합니다. 당신은 그것을 테스트합니다. 때로는 한 번에 성공하기도 하지만, 때로는 그렇지 않아 처음부터 다시 시작해야 할 때도 있습니다.

프롬프트 정밀도 (Prompt precision)가 전부입니다. Bolt는 빠르고 직관적이며 놀라울 정도로 유능하지만, 특히 프롬프트 정밀도 측면에서는 가파른 학습 곡선 (learning curve)이 존재합니다. 모호한 프롬프트는 모호한 결과를 낳습니다. “더 보기 좋게 만들어줘”라는 요청은 “영화 카드 제목의 대비를 높이고, 카드의 패딩(padding)을 12px로 줄이며, 호버(hover) 상태를 약간 더 밝게 만들어줘”라는 요청과는 전혀 다른 결과를 만들어냅니다. 시각적, 기능적, 구조적으로 구체적으로 말하는 법을 배우는 것이 이 도구가 당신에게 가르쳐주는 실제 기술입니다.

당신은 여전히 무엇을 만들고 있는지 이해해야 합니다. Bolt는 코드를 처리하지만, 제품에 대한 결정 (product decisions)까지 처리해주지는 않습니다. 어떤 기능이 중요한가? 어떤 순서로 구축할 것인가? 사용자 경험 (user experience)은 어떤 느낌인가? 당신이 실제로 해결하려는 문제는 무엇인가? 이러한 질문들은 여전히 전적으로 당신의 몫입니다. 이 도구는 기술적 장벽을 제거할 뿐, 사고(thinking) 자체를 제거하지는 않습니다.

완성된 제품이 어떤 모습인지 — 영화 탐색 기능, 구독 등급 등 — 보고 싶다면 MovieHunt는 여기에서 확인하실 수 있습니다. 둘러보는 것은 무료이며, 전체 액세스를 위해서는 구독이 필요합니다.

내가 다르게 했을 점

내가 상당한 시간과 좌절을 겪으며 배운, 시간을 절약할 수 있었던 몇 가지 사항들은 다음과 같습니다:

단순히 막연한 아이디어가 아니라 상세한 사양(spec)부터 시작하세요. 초기 프롬프트(prompt)가 구체적일수록 Bolt가 제공하는 기반이 더 탄탄해집니다. Bolt를 열기 전에 여러분이 원하는 것, 즉 페이지, 기능, 사용자 흐름(user flows), 시각적 스타일을 정확하게 작성하는 데 시간을 투자하세요. 초기 빌드(build)가 아키텍처(architecture)를 설정하며, 나중에 아키텍처를 변경하는 것은 토큰(tokens)과 시간 측면에서 비용이 많이 듭니다.

법적 및 개인정보 보호 인프라를 조기에 처리하세요. 저는 MovieHunt의 개인정보 처리방침(Privacy Policy)과 서비스 약관(Terms of Service)을 Termly를 통해 프로세스 후반부에 설정했습니다. GDPR, COPPA, 그리고 모든 제3자 도구(Google Analytics, Stripe, Beehiiv, Auth0, TMDB)에 대한 고지 사항을 다루는 것은 마지막 단계가 아니라 가장 먼저 해야 할 일 중 하나였어야 했습니다. 사용자 데이터나 결제를 포함하는 무언가를 구축하고 있다면, 이를 가장 먼저 수행하세요.

지속적으로 모바일에서 테스트하세요. Bolt는 반응형 코드(responsive code)를 생성하지만, 반응형 코드와 훌륭한 모바일 경험은 같은 것이 아닙니다. 브라우저의 반응형 미리보기(responsive preview)뿐만 아니라 실제 휴대폰에서 모든 새로운 기능을 확인하세요. 빌드 후반부에 모바일에서 발견한 문제들은 초기에 발견했을 때보다 수정하기가 훨씬 더 고통스러웠습니다.

버전 기록(version history)을 활용하세요. Bolt는 프로젝트의 이전 버전들을 저장합니다. 이를 활용하세요. 반복 작업(iteration)이 잘못되었을 때 — 실제로 그런 경우가 발생할 것입니다 — 작동하던 시점으로 되돌릴 수 있다는 것은 매우 가치 있는 일입니다.

더 중요한 점

MovieHunt를 제대로 구축하는 데는 몇 달이 걸렸습니다. 주말 동안 끝낼 수 있는 프로젝트가 아니었습니다. 하지만 이 프로젝트는 코딩 지식 없이 혼자서 구축되었으며, 세계의 다른 지역에서 이 과정을 더 쉽게 만들어주는 주요 결제 프로세서(payment processors) 및 개발 생태계(development ecosystems)에 대한 접근이 제한적인 국가에서 만들어졌습니다.

그것이 Bolt.new의 진짜 이야기입니다. 소프트웨어를 만드는 과정을 사소하게 만든다는 것이 아니라, 진정으로 장벽을 옮겨 놓았다는 점입니다. 당신과 기능적인 웹 제품 사이를 가로막고 있는 것은 더 이상 기술적 지식이 아닙니다. 그것은 비전의 명확성, 소통의 정밀함, 그리고 반복(iterate)하려는 의지입니다.

전통적으로 기본적인 웹 애플리케이션을 구축한다는 것은 개발자나 대행사를 고용하고, 몇 주를 기다리며, 소규모 팀 예산의 상당 부분을 소비하는 것을 의미했습니다. Bolt.new는 그 권한을 창업자, 마케터, 제품 관리자(product managers)의 손에 직접 쥐여주는 것을 목표로 하며, 몇 주가 걸리던 작업을 단 몇 시간의 문제로 바꿉니다.

아이디어는 있지만 기술적 배경이 없는 사람들 — 크리에이터, 기업가, 교육자, 작가 — 에게 그 변화는 엄청납니다. 저에게도 그러했습니다.

현재의 MovieHunt

MovieHunt는 영화를 사랑하지만 결정 피로(decision fatigue)를 싫어하는 사람들을 위해 구축된 영화 발견 웹 앱입니다. 다음과 같은 기능을 갖추고 있습니다:

• 분위기 및 장르 필터링 — 단순히 넓은 카테고리가 아니라, 실제로 당신이 원하는 분위기에 따라 범위를 좁힙니다.
• 연대(Decade) 필터링 — 때로는 구체적으로 80년대 영화를 원하며 그 외의 것은 만족스럽지 않을 때가 있기 때문입니다.
• 워치리스트(Watchlist) — 영화를 나중에 보기 위해 저장하고, 시청한 영화를 추적합니다.
• Chrome 확장 프로그램 — 브라우저를 떠나지 않고도 영화 추천을 받습니다 (추후 업데이트 예정).

구독 등급은 월 $4.99입니다. 계정 없이도 무료 브라우징이 가능합니다.

만약 당신이 영화를 좋아하는 사람이라면 — 그리고 이 글을 읽고 있다는 점을 고려하면 아마 그럴 것입니다 — 한 번 살펴볼 가치가 있습니다.