AI로 서비스 하나쯤 뚝딱 만들 수 있다는 이야기는 이제 꽤 흔해졌습니다.
문제는 늘 그다음입니다.
그래서 정말로 돌아가는 결과물이 나오느냐, 그리고 그 안에 수익화 요소까지 붙일 수 있느냐입니다.
이번에는 그 궁금증을 해결해보기 위해, 비개발자인 제가 Bolt AI로 이미지 갤러리 만들기와 후원 위젯 연결까지 직접 시도해봤습니다.
결론부터 말하면, 됩니다.
아주 화려하진 않습니다.
엄청 복잡하지도 않습니다.
하지만 분명히 돌아갑니다.
이번 실험은 단순히 “AI가 웹사이트도 만들어준다더라” 수준의 구경이 아니라, 실제로 ai로 웹사이트 만들기가 어디까지 가능한지 확인하는 과정이었습니다. 그리고 그 과정에서 꽤 현실적인 벽도 만났습니다.
토큰은 생각보다 빨리 녹고, 후원 플랫폼은 국가 지원 이슈가 있고, 이미지 주소 하나도 그냥 붙이면 끝날 줄 알았는데 또 CDN이라는 문이 하나 더 있었습니다.
세상은 늘 그렇게 한 단계씩 귀찮습니다.
그래도 하나씩 붙여보면 결국 형태는 나옵니다. 그게 이번 실험의 핵심이었습니다. 🚀
IT 비전공자 바이브코딩_이번 실험의 목표: 보기 좋고, 열리고, 후원도 붙는 심플한 페이지 만들기
이번에 만들고 싶었던 것은 아주 거창한 서비스가 아니었습니다. 목표는 오히려 명확했습니다.
- 위와 같은 귀여운 고양이 이미지를 보여주는 심플한 갤러리 페이지를 만든다.
- 방문자가 마음에 들면 후원할 수 있도록 버튼 또는 위젯을 붙인다.
- 코드는 내가 직접 짜지 않고, 비개발자 바이브코딩 방식으로 최대한 자연어 지시만으로 만든다.
즉, 이번 실험은 “코드를 배우는 과정”보다 “AI에게 원하는 결과물을 얼마나 정확히 설명할 수 있는가”에 더 가까웠습니다.
이 지점이 요즘 말하는 바이브코딩의 가장 흥미로운 부분입니다.
코드를 직접 한 줄씩 쓰지 않아도, 원하는 구조와 흐름을 설명하면 AI가 형태를 만들어줍니다.
물론 설명이 어설프면 결과물도 어설퍼집니다.
기계는 거짓말을 잘 안 합니다. 우리가 두루뭉술했던 것뿐입니다.
IT 비전공자 바이브코딩 1단계: Google AI Studio에서 먼저 프롬프트를 설계했습니다
처음부터 Bolt에 바로 던지지는 않았습니다. 먼저 Google AI Studio에서 프롬프트를 정리해달라고 요청했고 몇 번의 문답이 오갔습니다. 원하는 사이트의 목적은 명확했습니다.
- Buy Me a Coffee로 후원을 받을 수 있는 이미지 갤러리
- 내가 올린 이미지들이 갤러리 형태로 보여야 함
- 심플한 구조여야 함
이 단계에서 중요한 건 “멋진 문장”이 아니라 기능 요구사항을 빠짐없이 넣는 것이었습니다. 예를 들면 아래와 같은 정보가 핵심이었습니다.
- 갤러리 형태로 이미지가 보여야 한다
- 이미지가 여러 장 들어가야 한다
- 후원 위젯이 페이지에 노출되어야 한다
- 전체 분위기는 심플해야 한다
- 나중에 이미지 주소를 한 번에 교체하기 쉽게 구조화되어야 한다
처음 프롬프트를 잘 짜놓으면 나중에 토큰을 아낄 가능성이 높아집니다.
이건 체감상 거의 확실했습니다.
Bolt에서 이것저것 뒤늦게 수정하려고 하면, 한 줄 고치려고 불러낸 AI가 갑자기 집 전체를 리모델링하려 들 때가 있습니다.
나는 전등만 바꾸고 싶었는데 AI는 벽을 허무는 타입의 과감함이 있습니다.
IT 비전공자 바이브코딩 2단계: Nano Banana 무료 이미지 생성으로 고양이 이미지를 준비했습니다
갤러리에 넣을 이미지는 Google Ai Studio에서 Nano Banana를 선택하여 무료 이미지 생성으로 만들었습니다.
이번 실험에서는 아주 정교한 아트워크보다, 웹 갤러리에 올렸을 때 통일감 있고 귀여운 느낌이 드는 고양이 이미지 몇 장이 필요했습니다.
그래서 이미지 생성 단계에서는 스타일을 과하게 흔들지 않고, 비슷한 톤으로 여러 장을 뽑는 데 집중했습니다. 🐱
이미지를 만든 뒤에는 파일명을 1, 2, 3 같은 단순한 숫자 형태로 바꿨습니다.
이유는 별것 없습니다.
관리하기 편하기 때문입니다.
특히 여러 장을 빠르게 연결해야 할 때는, 긴 한글 파일명이나 공백이 포함된 이름보다 단순 숫자 파일명이 훨씬 덜 귀찮습니다.
실무에서는 간지보다 덜 꼬이는 쪽이 이깁니다.
IT 비전공자 바이브코딩 3단계: GitHub 저장소를 만들어 이미지를 업로드했습니다
이미지를 웹에서 불러오려면 어딘가에 올려둬야 합니다. 저는 GitHub를 사용했습니다. 과정은 대략 이렇습니다.
- GitHub 우측 상단 프로필 영역을 클릭합니다.
- Repositories 메뉴로 이동합니다.
- New 버튼을 눌러 새 저장소를 만듭니다.
- Repository name을 입력하고 Create repository를 클릭합니다.
- 생성된 저장소에 Nano Banana가 만든 이미지 파일들을 업로드합니다.
여기서 중요한 포인트는, Bolt에 이미지를 붙일 때 GitHub 페이지 주소 자체를 넣는 것이 아니라 실제로 이미지가 불러와질 수 있는 주소가 필요하다는 점입니다.
(저 포함) 많은 초보자가 여기서 한 번 멈춥니다.
“올리긴 올렸는데 왜 안 뜨지?”가 시작됩니다.
아주 정상적인 통과의례입니다.
IT 비전공자 바이브코딩 4단계: jsDelivr로 GitHub 이미지를 CDN 링크로 바꿨습니다
예전에 바이브코딩 강의를 통해 배운 것이 jsDelivr였습니다.
GitHub에 올린 파일을 더 빠르게, 그리고 웹에서 쓰기 좋은 방식으로 불러오려면 CDN 링크로 바꾸는 방법이 있습니다.
jsDelivr는 GitHub 저장소 파일을 CDN 형태로 제공해주는 서비스입니다.
제가 했던 흐름은 이렇습니다.
- GitHub에 올라간 이미지 파일을 클릭한 후 현재 링크를 복사합니다.
- jsDelivr 사이트에(https://www.jsdelivr.com/) 복사한 링크를 넣으면 CDN용 주소를 만들어줍니다.
- 생성된 주소를 아까 만든 프롬프트 안에 cdn_url 이라고 설명해주며 집어넣습니다.
IT 비전공자 바이브코딩 5단계: Buy Me a Coffee에서 후원 위젯 코드를 가져왔습니다
후원 연결은 Buy Me a Coffee로 시도했습니다.
가입 후 Buttons & Graphics 메뉴로 들어가 Website Widget을 생성하고, Generate Widget을 누르면 다음과 같은 스크립트 코드가 나옵니다.
여기서 Copy Code를 눌러 위젯 스크립트를 복사한 뒤, 이것도 프롬프트에 넣었습니다.
즉 이번 작업의 핵심은 직접 코드를 짠 것이 아니라, 필요한 외부 요소를 하나씩 준비한 다음 AI가 조립하기 좋은 재료 형태로 전달한 것이었습니다.
- 이미지 주소 준비
- 후원 위젯 코드 준비
- 사이트의 목적과 스타일 설명
- 최종 조립은 Bolt에게 요청
이 흐름이 바로 요즘 많이 말하는 ai로 웹사이트 만들기의 현실 버전입니다.
AI가 모든 것을 공중에서 만들어주는 게 아니라, 사람이 재료를 준비하고 AI가 조립과 구현을 담당하는 형태에 가깝습니다.
IT 비전공자 바이브코딩 6단계: 완성된 프롬프트를 Bolt에 넣고 사이트를 생성했습니다
이제 준비된 프롬프트를 Bolt에 붙여넣고, 이 요구사항대로 만들어달라고 요청했습니다.
그러자 Bolt가 단계별로 프로세스를 보여주면서 사이트를 생성했습니다.
이번 결과물은 화려한 포트폴리오급 사이트는 아니었습니다.
하지만 에러 없이 열리고, 이미지가 보이고, 후원 위젯도 붙는 형태까지는 도달했습니다.
여기서 느낀 점은 하나였습니다.
Bolt AI 사용법 자체는 어렵지 않습니다.
어려운 건 도구가 아니라, 내가 원하는 결과를 얼마나 구조적으로 설명할 수 있느냐입니다.
이번에는 심각한 오류 없이 웬일로 꽤 얌전히 완성됐습니다.
그 자체로도 꽤 인상적이었습니다.
제가 원래 만족의 기준이 매우 낮습니다.
실제 만들어진 이미지 갤러리입니다.
👉https://responsive-react-ima-x8v9.bolt.host
예, 매우 부실해서 놀랄 수 있습니다.
써보니 느낀 현실적인 한계 1: Buy Me a Coffee는 한국 사용자에게 애매했습니다
사이트는 붙였지만, 후원 플랫폼 선택은 다시 생각해볼 필요가 있었습니다.
Buy Me a Coffee는 지급 가능 국가를 Stripe 지원 국가 기준으로 운영하고 있어서 한국에서 바로 쓰기엔 제약이 있는 편이라 실제 후원 수단으로는 다소 애매했습니다.
그래서 지금 단계에서는 “연결 실험” 정도로 의미가 있고, 실제 운영용이라면 한국 사용자가 접근하기 쉬운 다른 후원 방식으로 바꾸는 것이 더 현실적입니다.
이 부분은 꽤 중요합니다.
기능이 붙는 것과 실제로 돈이 들어오는 것은 완전히 다른 문제입니다.
서비스는 종종 예쁘게 완성되고, 수익화는 그 뒤에 냉정하게 남습니다.
디자인은 동화책처럼 끝나는데 정산은 세무서 톤으로 시작됩니다.
써보니 느낀 현실적인 한계 2: 무료 토큰은 생각보다 금방 닳습니다
이번 실험에서 꽤 놀랐던 부분은 토큰 소모량이었습니다.
겨우 이 정도의 심플한 갤러리 페이지를 만드는 데도 744K 토큰을 사용했습니다. 체감상 정말 많이 쓴 편입니다.
2026년 3월 기준 Bolt의 무료 플랜은 월 100만 토큰, 일 30만 토큰 제한이 있고, 유료 플랜은 월 30달러부터 시작하며 월 1,000만 토큰이 제공됩니다. 따라서 조금만 구조가 복잡해져도 무료 플랜만으로는 금방 한계가 올 수 있습니다.
이 말은 곧, 취미 수준의 가벼운 실험은 무료로도 가능하지만, 실제 운영용 사이트나 여러 번 수정이 필요한 프로젝트는 결국 결제를 고려하게 된다는 뜻입니다.
특히 이미지, 위젯, 디자인 수정, 반응형 조정, 문구 수정까지 반복하다 보면 토큰은 아주 조용하게 사라집니다. 조용해서 더 무섭습니다.
그래서 프롬프트를 잘 쓰는 게 왜 중요한가
이번 실험을 하고 나서 더 확실히 느낀 점은 이것입니다.
프롬프트는 그냥 요청문이 아니라 예산 절약 도구입니다.
처음부터 아래 항목을 선명하게 정리해 두면 토큰 낭비를 줄일 수 있습니다.
- 사이트 목적
- 페이지 구성
- 필요한 외부 코드
- 이미지 소스 위치
- 원하는 디자인 톤
- 수정 가능성이 높은 부분
예를 들어 “귀여운 이미지 갤러리 사이트 만들어줘”보다, “상단 소개 문구, 중앙 3열 이미지 갤러리, 하단 후원 위젯, 모바일 대응, 이미지 소스는 cdn_url 배열 사용”처럼 구체적으로 주는 편이 훨씬 효율적입니다.
이건 사실 개발자만의 영역이 아니라, 이제는 비개발자 바이브코딩에서도 중요한 기본기처럼 느껴졌습니다.
IT 비전공자 바이브코딩_이번 실험에서 배운 점 정리
이번 작업을 통해 얻은 핵심은 아래와 같습니다.
- 이미지 갤러리 만들기 자체는 Bolt로 충분히 빠르게 시도할 수 있습니다.
- 외부 이미지 파일은 GitHub에 올린 뒤 jsDelivr 같은 CDN으로 연결하면 활용성이 높아집니다.
- 후원 위젯은 코드 복붙만으로도 붙일 수 있지만, 실제 사용 가능 여부는 국가 지원 정책을 확인해야 합니다.
- 무료 플랜은 입문용 실험에는 좋지만, 운영형 프로젝트로 가면 토큰이 부족할 가능성이 큽니다.
- 결국 성패를 가르는 것은 툴보다 프롬프트 구조화 능력입니다.
IT 비전공자 바이브코딩 결론: 비개발자도 만들 수 있습니다. 다만 공짜로 무한정은 어렵습니다
이번 실험의 결론은 꽤 명확합니다.
비개발자도 Bolt AI를 활용해 이미지 갤러리와 후원 위젯이 붙은 웹페이지를 만들 수 있습니다.
실제로 저는 코드 한 줄 한 줄을 직접 짜지 않고도, 재료를 준비하고 프롬프트를 구조화하는 방식으로 결과물을 만들었습니다.
다만 여기서 환상을 조금 걷어내야 합니다.
AI가 모든 걸 마법처럼 해결해주진 않습니다.
이미지 주소도 정리해야 하고, 외부 위젯 코드도 가져와야 하고, 국가 지원 이슈도 확인해야 하고, 토큰도 생각보다 빠르게 닳습니다.
즉, 개발 장벽은 낮아졌지만 운영 장벽이 사라진 것은 아닙니다.
그래도 이 실험은 충분히 의미 있었습니다.
예전 같으면 갤러리 사이트 하나 만들겠다고 HTML, CSS, JavaScript부터 공부해야 한다고 느꼈을 텐데, 이제는 적어도 “원하는 구조를 말로 설명하고 조립해보는 단계”까지는 누구나 접근할 수 있게 됐습니다.
이건 분명한 변화입니다.
그리고 저처럼 IT 비전공자인 사람에게는 꽤 큰 변화이기도 합니다. ✨
Google ai studio를 활용한 바이브 코딩으로 게임 만드는 과정을 보고 싶다면?
👉 바이브코딩으로 게임 만들기: IT 비전공자의 Google AI Studio 실험기 – Lifetestlab
다음 글
다음 글에서는v0으로 블로그 만드는 방법에 대해 구체적으로 정리해보겠습니다.
👉 [바이브코딩으로 노션 DB 연결해 v0 블로그 만들기, 카카오애드핏까지 붙이는 방법]
*본 글은 개인적인 경험과 데이터 분석을 바탕으로 작성되었으며, 개개인의 상태와 환경에 따라 체감은 달라질 수 있습니다.