바이브 코딩, 만든 다음이 막힌다면 — GitHub·Vercel·Cloudflare·Supabase·Firebase 한 장의 지도

한 장의 지도

앱 하나가 세상에 나가기까지 — 식당 하나 차리기와 똑같습니다

«바이브 코딩»은 코드를 직접 짜지 않고, AI에게 말로 시켜서 프로그램을 만드는 방식입니다. 만드는 건 AI가 해 줍니다. 우리가 알아야 할 건 만든 것을 어디에 두고, 어떻게 내보내느냐입니다.

작업실

내 컴퓨터AI(Claude Code 등)가 폴더 안에서 앱을 만든다. 나만 볼 수 있다.

→

창고 · 세이브

GitHub만든 파일과 «언제 무엇을 바꿨는지»를 인터넷에 보관한다.

→

가게 건물

Vercel창고에 새 물건이 들어오면 자동으로 가게에 진열한다(= 배포).

→

간판 · 경비실

도메인 · Cloudflare«jjcreative.co.kr» 같은 내 주소를 달고, 나쁜 손님을 막는다.

장부 · 필요할 때만 옆에 붙임

Supabase · Firebase신청자·점수·게시글처럼 «남겨야 하는 것»을 쌓는다. 필요할 때만.

꼭 기억할 한 가지

다섯 개를 다 쓰는 앱은 드뭅니다. 보여 주기만 하는 페이지(소개 페이지·교육 안내문)는 «내 컴퓨터 → GitHub → Vercel» 세 칸이면 끝납니다. 장부(Supabase)는 입력한 내용을 남겨야 할 때만 등장합니다. 아래 «내 앱엔 뭐가 필요?» 표에서 확인하세요.

용어 사전

낯선 말 12개를 식당 말로 바꾸면

AI가 작업 중에 이 단어들을 꺼냅니다. 뜻만 알면 «네, 그렇게 해 주세요»라고 자신 있게 답할 수 있습니다.

들리는 말	쉬운 말	식당으로 치면	언제 나오나
프로젝트(폴더)	앱 하나 = 폴더 하나	작업실 한 칸	처음 만들 때
로컬 / localhost	내 컴퓨터에서만 열리는 미리보기	가족만 먹어 보는 시식	만드는 내내
커밋	지금 상태를 한 번 저장	레시피 노트에 날짜 적고 저장	고칠 때마다
푸시	저장한 걸 GitHub로 올리기	창고로 보내기	내보내고 싶을 때
저장소(레포)	GitHub 안의 내 앱 보관함	창고 한 칸	처음 올릴 때
배포(디플로이)	남들이 접속할 수 있게 올리기	개업	공개할 때
도메인	사람이 외우는 주소(jjcreative.co.kr)	간판·주소	내 이름 주소가 필요할 때
프런트엔드	눈에 보이는 화면	홀(손님 자리)	늘
백엔드	안 보이는 처리·저장	주방	저장·로그인이 있을 때
데이터베이스(DB)	입력된 내용을 쌓는 표	장부	신청·점수를 모을 때
API 키	유료 서비스를 쓰는 비밀 열쇠	금고 열쇠	AI·지도·결제를 붙일 때
환경 변수 / .env	열쇠를 따로 넣어 두는 보관함	열쇠 보관함	열쇠가 생기면 바로

① 작업실

내 컴퓨터 — AI가 실제로 일하는 곳

바이브 코딩은 결국 내 컴퓨터의 폴더 하나에서 시작합니다. 그 폴더 안에 화면 파일, 그림, 설정이 쌓이고, AI는 그 폴더 안의 파일을 직접 고칩니다.

	대화창 AI ChatGPT·Gemini 웹	코딩 에이전트 Claude Code·Codex·Cursor
일하는 곳	대화창 안 (내 컴퓨터 파일엔 손 못 댐)	내 컴퓨터 폴더를 직접 열고 고침
결과물	코드를 «보여 줌» → 내가 복사해서 저장	파일을 «만들어 둠» → 바로 실행됨
GitHub·Vercel	내가 직접 올려야 함	«올려줘» 한마디면 대신 처리
어울리는 일	한 장짜리 페이지, 아이디어 시안	여러 화면·저장·배포까지 있는 앱

localhost(로컬호스트)란

AI가 «http://localhost:3000 에서 확인하세요»라고 하면, 내 컴퓨터에서만 열리는 시식 코너라는 뜻입니다. 그 주소를 카톡으로 보내도 다른 사람은 열 수 없습니다. 남에게 보여 주려면 아래 ②·③ 단계(GitHub·Vercel)가 필요합니다.

설치가 처음이라면 «설치 02»에서 Claude 데스크톱 앱과 Claude Code를 먼저 깔아 두세요.

② 창고 · 세이브

GitHub — 내 앱의 «클라우드 세이브»

게임에서 보스 앞에서 세이브하죠. 망하면 그 지점부터 다시 하면 되니까요. GitHub가 바로 그 세이브 파일을 인터넷에 보관하는 곳입니다. 이름이 비슷한 Git은 «세이브하는 기능», GitHub는 «세이브를 맡아 두는 회사»입니다.

GitHub 저장소 화면 — jj-aiedu 이름 옆 Private 표시와 377 Commits 숫자에 빨간 네모 — 제 홈페이지가 들어 있는 GitHub 저장소. 왼쪽은 폴더·파일 목록, 이름 옆 **Private**은 «나만 보는 창고», 오른쪽 위 **377 Commits**는 지금까지 세이브한 횟수입니다.

GitHub 커밋 목록 — 날짜별 저장 기록과 7d93798 같은 저장 번호 — 세이브 기록(커밋 목록). 한 줄이 «한 번 저장»이고, 무엇을 바꿨는지 한국어로 적혀 있습니다(AI가 대신 써 줍니다). 오른쪽 **7d93798**은 그 저장의 고유 번호 — 아래 Vercel 화면에도 똑같이 나옵니다.

🔒 Private(비공개) 저장소

나와 내가 초대한 사람만 봅니다. 업무용·고객용은 무조건 이쪽. 무료로도 만들 수 있습니다.

🌐 Public(공개) 저장소

전 세계 누구나 코드를 봅니다. 오픈소스로 나눌 때만. 실수로 열쇠(API 키)를 넣어 두면 몇 분 안에 털립니다.

왜 굳이 GitHub에 올리나

① 컴퓨터가 고장 나도 앱이 남고 ② AI가 망가뜨려도 어제 세이브로 되돌릴 수 있고 ③ 무엇보다 다음 단계인 Vercel이 GitHub를 보고 자동으로 가게를 엽니다. GitHub가 «창고», Vercel이 «가게»인 이유입니다.

③ 가게 건물

Vercel — 창고에 들어오면 자동으로 진열하는 가게

Vercel(버셀)은 GitHub 창고를 지켜보다가 새 세이브가 올라오면 1~2분 안에 자동으로 인터넷 주소에 올려 주는 서비스입니다. 이 과정을 «배포»라고 합니다. 한 번 연결해 두면 그다음부터는 «GitHub에 올려줘» 한마디가 곧 «홈페이지 고쳐줘»가 됩니다.

Vercel 배포 목록 — 맨 위 줄 Production 표시와 7d93798 저장 번호에 빨간 네모 — Vercel 배포 목록. 맨 윗줄의 **7d93798**은 위 GitHub 세이브 번호와 같습니다 — «GitHub에 올라온 그 세이브를 2분 18초 만에 가게에 진열했다(Ready)»는 뜻. **Production**은 «지금 손님이 보고 있는 진열대»입니다.

Vercel 프로젝트 화면 — Domains 칸의 jjcreative.co.kr 와 Source 칸의 main 7d93798 에 빨간 네모 — 같은 프로젝트의 요약 화면. **Domains**에 내 주소(jjcreative.co.kr)가, **Source**에 «어느 세이브를 진열 중인지»가 보입니다. 잘못 올렸으면 **Instant Rollback**(즉시 되돌리기) 버튼 하나로 어제 진열대로 돌아갑니다.

비슷한 «가게» 서비스 비교

서비스	한 줄 특징	이럴 때
Vercel	GitHub 연결이 가장 쉽고 화면이 단순. 무료로 시작	처음이라면 여기(이 시리즈 2편)
Netlify	Vercel과 거의 같은 역할. 폴더를 끌어다 놓아도 올라감	GitHub 없이 일단 올려 보고 싶을 때
Cloudflare Pages	Cloudflare의 가게 서비스. 무료 범위가 넉넉함	이미 Cloudflare로 도메인을 관리할 때
GitHub Pages	GitHub 안에서 바로 공개. 아주 단순한 페이지 전용	저장 기능 없는 한 장짜리 안내문

④ 간판 · 경비실

도메인과 Cloudflare — 내 이름 주소를 달고, 문 앞을 지키기

Vercel에 올리면 «내앱이름.vercel.app» 같은 주소가 공짜로 생깁니다. 이것만으로도 충분히 공유할 수 있습니다. 회사 이름이 들어간 주소(예: jjcreative.co.kr)를 쓰고 싶을 때 도메인이 등장합니다.

	무료 주소	내 도메인
모양	survey-app.vercel.app	survey.mycompany.co.kr
비용	0원	도메인 1년 사용료(보통 연 1~3만 원대)
어울리는 때	사내 테스트·강의 실습·시안 공유	고객·외부에 오래 쓰는 공식 서비스
할 일	없음	도메인 사기(가비아·Cloudflare 등) → Vercel에 연결(AI에게 시키면 됨)

Cloudflare 대시보드 첫 화면 — 왼쪽 메뉴의 Domains, Compute, Storage, Application security 항목 — Cloudflare(클라우드플레어) 첫 화면. 메뉴가 많아 겁나지만 초보가 쓸 곳은 세 군데 — **Domains**(도메인 사기·관리), **Application security**(나쁜 접속 막기), **Compute**(가게 서비스 Pages·Workers).

Cloudflare는 «경비실 + 고속도로»

전 세계에 지점이 있어서 내 사이트를 손님 가까운 곳에서 빠르게 보여 주고, 한꺼번에 몰려드는 공격 접속을 문 앞에서 걸러 냅니다. 처음 만드는 앱에는 없어도 됩니다. 도메인을 싸게 사고 싶거나, 공개 서비스가 커졌을 때 떠올리면 충분합니다.

⑤ 장부

Supabase · Firebase — «남겨야 하는 것»이 생기면

교육 안내 페이지는 보여 주기만 하면 끝입니다. 그런데 설문 응답을 모으고, 퀴즈 점수 순위를 띄우고, 로그인을 시키는 순간 «어딘가에 적어 둘 곳»이 필요해집니다. 그게 데이터베이스, 식당으로 치면 장부입니다.

벽을 사이에 둔 식당 — 왼쪽 홀에서 손님이 메뉴판을 보고 버튼을 누르고, 오른쪽 주방에서 요리사가 요리하며 뒤에 주문서 서랍장이 있는 그림. 빨간 배식구가 둘을 잇는다 — 홀(프런트엔드)은 손님이 보는 화면, 주방(백엔드)은 보이지 않는 처리, 서랍장(데이터베이스)은 장부. 빨간 배식구가 둘을 잇는 «주문 창구»입니다.

Supabase 데이터베이스 소개 화면의 표 — id, created_at, name, email, role 열이 있는 예시 데이터 — Supabase(수파베이스) 공식 소개 화면의 예시 표. 생긴 건 **엑셀 시트와 똑같습니다** — 줄은 «한 사람», 칸은 «이름·이메일·역할». 응답이 들어올 때마다 줄이 하나씩 늘어납니다.

Firebase 콘솔 첫 화면 — 새 Firebase 프로젝트 만들기 버튼과 흐리게 가린 프로젝트 목록 — Firebase(파이어베이스) 콘솔. 구글이 만든 «장부 + 로그인» 서비스로, 구글 계정으로 바로 들어갑니다. 오른쪽(흐리게 가림)이 제가 만든 앱별 프로젝트 목록입니다.

장부 네 가지 비교

	구글 시트	Supabase	Firebase	브라우저 저장
생김새	평소 쓰는 시트	엑셀 같은 표	폴더 속 메모 카드	그 사람 컴퓨터에만
좋은 점	가장 친숙, 바로 열어 봄	표가 직관적, 로그인·실시간 포함	구글 계정으로 시작, 실시간 강함	설정 0
아쉬운 점	동시에 많이 들어오면 느림	보안 규칙(RLS)을 꼭 챙겨야 함	표 형태가 아니라 처음엔 낯섦	다른 사람과 공유 안 됨
어울리는 앱	교육 신청서·만족도 조사	강의장 실시간 퀴즈·진단 결과 모으기	채팅·실시간 게임	혼자 쓰는 체크리스트

«브라우저 저장»의 함정

AI가 아무 말 없이 만든 앱은 종종 그 사람의 브라우저에만 저장합니다. 강사 화면에서 «응답이 0명»으로 보이는 이유가 대부분 이것입니다. 여러 사람의 응답을 한곳에 모아야 하면 처음부터 «응답은 Supabase(또는 구글 시트)에 모아줘»라고 말하세요.

⑥ 열쇠

API 키 — 사고는 거의 다 여기서 납니다

앱 안에 AI(ChatGPT·Gemini)를 넣거나 Supabase에 연결하면 «키»라는 긴 문자열을 받습니다. 이건 내 신용카드가 연결된 금고 열쇠입니다. 남이 주우면 내 돈으로 AI를 씁니다.

왼쪽은 열쇠 꾸러미를 금고에 넣는 사람, 오른쪽은 길바닥에 떨어진 빨간 열쇠를 낯선 손이 줍는 그림 — 열쇠는 금고(보관함)에. 길바닥(공개된 곳)에 떨어진 순간 누군가 줍습니다.

🟢 보여도 되는 키

«publishable», «anon», «public» 같은 이름이 붙은 키. 화면에 들어가도록 만든 키라 노출돼도 괜찮습니다 — 단, 장부의 보안 규칙(RLS)이 켜져 있을 때만.

🔴 절대 보이면 안 되는 키

«secret», «service_role», OpenAI·Gemini 키. 공개 GitHub·화면 코드·카톡·캡처 어디에도 나오면 안 됩니다. 노출되면 즉시 새로 발급(폐기)해야 합니다.

열쇠는 «.env»라는 보관함 파일에 — AI에게 «키는 코드에 쓰지 말고 .env에 넣어줘»라고 하면 알아서 나눕니다.
보관함은 GitHub에 안 올라가게 — «.env는 GitHub에 올리지 않게 해줘» 한마디. (.gitignore라는 «올리지 않을 목록»에 넣어 줍니다.)
가게(Vercel)에는 따로 등록 — Vercel의 «Environment Variables(환경 변수)» 칸에 넣습니다. 손님은 못 보고 가게만 씁니다.

열쇠와 보안은 이 시리즈 4편에서 실제 사고 사례와 함께 따로 다룹니다.

내 앱엔 뭐가 필요?

만들려는 앱으로 찾아보세요

✅ 꼭 필요 · ○ 있으면 좋음 · — 필요 없음

만들려는 것	내 컴퓨터	GitHub	Vercel	도메인	장부(DB)	API 키
교육 안내 페이지 보여 주기만	✅	✅	✅	○	—	—
혼자 쓰는 계산기·체크리스트	✅	○	○	—	—	—
설문·진단 결과 모으기 여러 사람 응답을 한곳에	✅	✅	✅	○	✅	○ 보여도 되는 키
강의장 실시간 퀴즈·순위판	✅	✅	✅	○	✅	○
로그인 있는 사내 앱	✅	✅	✅	✅	✅	✅
AI 챗봇·AI 피드백 앱 앱 안에서 ChatGPT·Gemini 호출	✅	✅	✅	○	○	✅ 절대 숨길 키

요금 감각

GitHub·Vercel·Supabase·Firebase·Cloudflare 모두 무료로 시작할 수 있습니다. 강의 실습·사내 소규모 앱은 대부분 무료 범위 안에서 끝납니다. 돈이 드는 건 보통 ① 내 도메인 ② 앱 안에 넣은 AI 사용료 ③ 사용자가 아주 많아졌을 때입니다. 무료 범위와 가격은 자주 바뀌니 시작할 때 각 서비스 요금 페이지를 한 번 확인하세요.

AI에게 말하기

명령어 대신, 이렇게 말하세요

Claude Code·Codex 같은 코딩 에이전트에게 그대로 붙여 넣는 문장입니다. 용어를 몰라도 «무엇을 원하는지»만 말하면 AI가 GitHub·Vercel 작업을 대신 합니다.

AI-01 💬 코딩 에이전트

시작할 때 — 지도부터 그려 달라고 하기

무엇이 필요한지 AI가 먼저 정리하게

강의장에서 30명이 휴대폰으로 응답하는 진단 앱을 만들고 싶어.
만들기 전에, 이 앱을 다른 사람이 접속할 수 있게 하려면 GitHub·Vercel·Supabase 중 무엇이 필요한지,
각각 무슨 역할인지 초보자도 알게 식당에 비유해서 먼저 설명해줘. 무료로 할 수 있는지도 알려줘.

AI-02 💬 코딩 에이전트

만든 뒤 — 남에게 보여 주고 싶을 때

GitHub 저장 + Vercel 배포를 한 번에

지금 만든 앱을 다른 사람이 휴대폰으로 열 수 있게 인터넷 주소로 올려줘.
GitHub에는 비공개(Private) 저장소로 저장하고, Vercel로 배포해줘.
진행하면서 내가 직접 눌러야 하는 화면이 나오면 어디를 누르면 되는지 쉽게 알려줘.

AI-03 💬 코딩 에이전트

응답을 모아야 할 때 — 장부 붙이기

브라우저 저장 함정 피하기

참가자들이 낸 응답이 각자 휴대폰에만 남지 않고 한곳에 모이게 해줘.
Supabase를 쓰고, 다른 사람이 남의 응답을 고치거나 지울 수 없게 보안 규칙도 같이 설정해줘.
설정하는 동안 내가 Supabase 화면에서 해야 할 일이 있으면 순서대로 알려줘.

AI-04 💬 코딩 에이전트

올리기 전에 — 열쇠 점검

배포 전 마지막 확인

GitHub에 올리기 전에 API 키나 비밀번호가 코드 안에 그대로 들어간 곳이 없는지 점검해줘.
있으면 .env 보관함으로 옮기고, .env는 GitHub에 올라가지 않게 해줘.
키 값 자체는 화면에 보여주지 말고, 어느 파일에 있었는지만 알려줘.

요령 마지막 줄 «키 값은 보여주지 말고»가 중요합니다. 점검하다가 AI가 키를 화면에 찍으면, 그 화면 캡처 한 장으로도 새어 나갈 수 있습니다.

다음 편

바이브 코딩 기초 시리즈

편	내용
바이브 01 · 지도 (지금 글)	각 서비스가 어디서 무슨 일을 하는지 한 장으로
바이브 02 · GitHub + Vercel	만든 페이지를 내 주소로 올리기까지 화면 따라 하기
바이브 03 · 장부 붙이기	설문 응답을 Supabase(또는 구글 시트)에 모으기
바이브 04 · 열쇠와 보안	키 유출·공개 저장소·보안 규칙 — 실제 사고로 배우기

라운지의 함께 볼 자료

자료	왜 이걸
설치 02 · Claude 설치	«작업실»을 차리는 첫 단계
응용 01 · AI 스튜디오로 앱 만들기	설치 없이 웹에서 앱을 만들어 보는 가장 쉬운 길
운영 02 · 서버킷	내 컴퓨터를 24시간 도는 «작업실 겸 가게»로

이 글의 실제 화면은 2026년 10월 8일, 제 홈페이지(jjcreative.co.kr)를 운영하는 GitHub·Vercel 계정과 Cloudflare·Firebase 콘솔, Supabase 공식 사이트에서 찍었습니다. 개인 정보와 고객사 프로젝트 이름은 흐리게 가렸습니다. 서비스 화면 구성은 바뀔 수 있습니다.