바이브코딩으로
시작하는 1인 SaaS
코드를 몰라도 괜찮습니다.
아이디어 한 문장에서 배포까지,
15분이면 읽는 입문서.
다 읽고 나면 ① 내 아이디어를 한 문장으로 정리한 기획, ② AI에게 그대로 붙여넣을 첫 프롬프트, ③ 배포까지 가는 지도가 손에 남습니다.
이런 분을 위해 썼습니다
한 줄도 안 써봤지만, 머릿속에 만들고 싶은 게 있는 분.
대화는 익숙한데, 그걸로 서비스를 만드는 건 막막한 분.
사이드 프로젝트를 벌여만 놓고 끝내본 적 없는 분.
목차
시작 전 준비물 (약 15분)
Claude 또는 ChatGPT 계정 하나. 무료 등급으로 충분합니다.
대부분의 개발 서비스는 구글 로그인으로 3초면 가입됩니다.
이 책의 ‘직접 채워보세요’ 칸을 옮겨 적을 곳.
이 자료는 교육 목적으로 누구나 무료로 쓸 수 있습니다. 도움이 되었다면 자율 후원으로 응원해 주세요 — 응원은 100% 선택이며, 자료 이용에 아무 영향을 주지 않습니다.
바이브코딩이 뭔가요
한 줄 정의: 코드를 직접 쓰는 대신, 만들고 싶은 것을 말로 설명해서 AI가 코드를 쓰게 하는 방식입니다.
겁먹게 만드는 용어 8개를 정리하고, ‘내가 할 일 / AI가 할 일’의 경계를 긋습니다.
역할이 바뀝니다
무엇을·누구를 위해·왜 만드는지 정하기. 결과물을 확인하고 “이건 다르다”고 말해주기.
코드 작성, 오류 해석, 파일 구조 잡기, 안 되는 이유 찾아 고치기.
즉 여러분은 개발자가 아니라 기획자 겸 검수자가 됩니다. 문법은 몰라도 되지만, 원하는 게 무엇인지는 알아야 합니다.
초보자 용어사전 — 이 8개면 시작할 수 있습니다
| 용어 | 쉬운 뜻 |
|---|---|
| 프론트엔드 | 사용자 눈에 보이는 화면. 가게로 치면 인테리어와 메뉴판. |
| 백엔드 | 보이지 않는 곳에서 처리하는 부분. 주방과 창고. |
| 데이터베이스(DB) | 정보를 저장하는 창고. 회원·글·주문이 여기 쌓입니다. |
| API | 서비스끼리 주고받는 창구. “주문 넣으면 결과 주세요”의 약속. |
| 배포(Deploy) | 내 컴퓨터 안의 결과물을 인터넷에 올려 남이 쓰게 만드는 일. |
| 환경변수 | 비밀번호·열쇠 같은 값을 코드 밖에 따로 보관하는 칸. 초보자가 가장 많이 막히는 곳. |
| 저장소(Repository) | 코드가 보관되는 서랍. 보통 GitHub에 둡니다. |
| MVP | ‘최소한으로 쓸 만한 첫 버전’. 완벽한 1.0이 아니라 부끄러운 0.1. |
도구 지도 — 무엇으로 만드나요
Claude Code · Cursor 같은 AI 코딩 도구. 말로 시키면 파일까지 만들어 줍니다.
Supabase 등. 회원가입·데이터 저장을 클릭 몇 번으로 붙입니다.
Vercel · Cloudflare. 코드를 올리면 알아서 인터넷 주소를 만들어 줍니다.
“어떤 도구가 제일 좋아요?”는 대부분 시작을 미루는 질문입니다. 도구는 나중에 바꿔도 되지만, 무엇을 만들지 정하지 않으면 어떤 도구로도 못 만듭니다. 2장부터 그걸 정합니다.
바이브코딩 3원칙
- 작게 시작한다. 기능 3개를 넘기지 않습니다. 넷째부터는 출시 후에.
- 돌아가는 걸 먼저 만든다. 예쁜 것보다 작동하는 게 먼저입니다.
- 막히면 AI에게 그대로 붙여넣는다. 빨간 오류 메시지는 통째로 복사해서 주면 됩니다.
아이디어를 한 문장으로
AI는 마음을 읽지 못합니다. 흐릿한 설명에는 흐릿한 결과가 돌아옵니다.
빈칸을 채우는 것만으로 완성되는 한 문장 기획서. 3장의 프롬프트에 그대로 들어갑니다.
한 문장 기획 공식
［ 누가 ］를 위해, ［ 어떤 불편 ］을 ［ 어떻게 ］ 해결하는 서비스
| 예시 | |
|---|---|
| 🙅 나쁜 예 | “독서 앱을 만들고 싶어요.” → 누구를 위한 건지, 뭐가 불편한지 없음. AI가 아무거나 만듭니다. |
| 🙆 좋은 예 | “책은 읽지만 남는 게 없다고 느끼는 직장인을 위해, 읽고 나서 기록을 안 하는 문제를 하루 한 문장 필사와 기록 잔디로 해결하는 서비스” |
기능은 3개까지만
프로젝트가 끝나지 않는 첫째 이유는 실력이 아니라 범위입니다. 떠오르는 기능을 다 적은 뒤, 3개만 남기세요.
이게 없으면 서비스가 성립하지 않는 것만. 예: 글 쓰기 · 목록 보기 · 로그인
있으면 좋은 것 전부. 예: 알림, 통계, 다크모드, 결제, 공유
이미 있다는 건 수요가 검증됐다는 뜻입니다. 내가 아는 좁은 사람들(내 직군, 나 자신)에게 더 잘 맞는 버전이면 충분합니다.
AI에게 제대로 시키는 법
같은 AI라도 지시문에 따라 결과가 하늘과 땅입니다. 외울 건 네 칸뿐입니다.
2장에서 채운 문장을 넣으면 바로 쓰이는 프롬프트 4단 공식과 복붙용 예시 2종.
프롬프트 4단 공식
“나는 코드를 모르는 초보자야. 용어는 쉬운 말로 풀어서 설명해줘.”
2장의 한 문장을 그대로 붙여넣습니다. 기능 3개도 함께.
“무료 도구만 사용”, “한 번에 한 단계씩”, “파일을 어디에 저장할지도 알려줘”.
“따라 할 순서 목록으로”, “내가 클릭할 버튼 이름까지”. 형식을 정해주면 헤매지 않습니다.
복붙용 예시 ① — 처음 시작할 때
복붙용 예시 ② — 오류가 났을 때 / 결과가 마음에 안 들 때
막혔을 때 4가지 대처
- 오류는 통째로 붙여넣는다. 요약하지 마세요. 원문이 가장 좋은 정보입니다.
- “왜 그런지 먼저 설명해줘”라고 한다. 이해하면 다음엔 안 막힙니다.
- 한 번에 하나만 바꾼다. 두 곳을 동시에 고치면 뭐가 원인인지 영영 모릅니다.
- 되돌릴 지점을 만든다. 잘 되던 상태를 저장(커밋)해두면 언제든 돌아올 수 있습니다.
계속 “해줘”만 하면 뭐가 뭔지 모르는 코드 더미가 됩니다. 한 단계가 끝날 때마다 “지금 뭘 만든 건지 3줄로 요약해줘”라고 물으세요.
세상에 내보내기
내 컴퓨터에서만 도는 건 아직 서비스가 아닙니다. 주소가 생겨야 서비스입니다.
배포 3단계의 지도와, 공개 버튼을 누르기 전에 확인할 체크리스트 10개.
배포는 결국 3단계입니다
내 결과물을 인터넷 저장소에 올립니다. 이후엔 ‘올리기(push)’만 반복하면 됩니다.
한 번 연결해두면, 코드를 올릴 때마다 새 버전이 자동으로 반영됩니다.
비밀번호·API 키는 배포 설정 화면의 별도 칸에 넣습니다. 배포 실패의 절반이 여기입니다.
API 키를 코드에 적은 채 올리면 전 세계에 공개되고, 자동 수집 프로그램이 몇 분 안에 찾아냅니다. 키는 반드시 환경변수 칸에 넣으세요.
내 컴퓨터에서 되는데 배포하면 안 될 때
| 증상 | 가장 흔한 원인 |
|---|---|
| 화면이 하얗게만 나온다 | 환경변수를 배포 설정에 안 넣었음 |
| 로그인이 안 된다 | 허용 주소 목록에 새 도메인을 추가하지 않음 |
| 빌드가 실패한다 | 내 컴퓨터에만 있는 파일을 올리지 않았음 |
공개 전 체크리스트 10
- 첫 화면에서 “이게 뭐 하는 서비스인지” 5초 안에 읽히나요
- 휴대폰 화면에서도 안 깨지나요
- 핵심 기능 3개가 처음부터 끝까지 동작하나요
- 내가 아닌 사람이 로그인/가입할 수 있나요
- 비밀 키가 코드에 남아 있지 않나요
- 오류가 났을 때 사용자에게 안내가 나오나요
- 연락받을 창구(메일·폼)가 있나요
- 개인정보를 받는다면 안내 문구가 있나요
- 주소를 지인 3명에게 보내 직접 써보게 했나요
- 다음에 고칠 것 3가지를 적어뒀나요
여기까지 왔다면, 다음은
배포가 막힐 땐 화면의 로그(Log)를 통째로 복사해 AI에게 붙여넣는 것이 가장 빠릅니다. 다음 걸음은 vibe.habitree.io에 모두 무료로 있습니다 — 도움이 되었다면 딱 한 사람에게만 이 링크를 건네주세요.
- 배포 영상 가이드 — 마우스 포인터까지 따라 보여주는 실습 영상
- LINKMAP 템플릿 — 원클릭 배포로 첫 주소 만들어 보기
- 1:1 커피챗 — 추첨으로 무료 진행