바이브코딩 세 번째 걸음
— 내 앱을 진짜 클라우드에 올리기
GitHub · Vercel · Supabase · 전원 실습
빌린 게시판에서, 내 이름의 가게로
- 주소는 진행자의 서버에 있었다
- 붙이려면 열쇠를 받아야 했다
- 폰에서 적은 것은 폰에만 남았다
- 주소가 내 계정에 생긴다
- 고쳐서 올리면 저절로 다시 열린다
- 어디서 적어도 같은 기록이 보인다
오늘의 흐름
핵심 블록을 다 더하면 170분입니다. 휴식 10분 × 2회와 버퍼 20~30분을 더해 총 210~220분을 잡습니다.
오늘의 도착점
- 내 앱이 내 계정의 주소로 열린다
- 코드는 내 GitHub 저장소에 있다
- 고쳐서 올리면 저절로 다시 배포된다
- 앱의 저장이 냉장고에 연결된다
- 폰에서 적은 것이 컴퓨터에서도 보인다
- 못 가도 완주 실패가 아닙니다
배포는 내가 만든 것을 인터넷 주소로 여는 일입니다. 저장소(리포)는 코드를 담아 두는 인터넷 서랍이죠.
앱은 세 조각으로 되어 있습니다
오늘 쓰는 곳은 세 군데입니다
세 곳은 따로 노는 것이 아닙니다. 노트에 올리면 매장이 그것을 읽어 메뉴판을 새로 겁니다.
게시판과 다른 점은 네 가지입니다
- 주소가 남의 서버에 있다
- 올리려면 열쇠를 받아야 한다
- 올릴 때마다 명령을 다시 친다
- 기록은 기기마다 따로 남는다
- 주소가 내 계정에 있다
- 내 저장소에 올리면 그걸로 끝이다
- 배포는 저절로 다시 일어난다
- 기록이 한 곳에 모인다
오늘 이후로는 내가 고치고 내가 올립니다. 이제 남의 서버를 빌릴 일이 없어요.
준비 체크
GitHub 계정 하나면 됩니다. 없으면 지금 만들어요.
Vercel과 Supabase는 GitHub로 로그인합니다.
2편에서 만든 앱 폴더를 그대로 씁니다.
PowerShell을 열고 그 폴더로 들어간 뒤, claude를 실행합니다. 2편과 똑같은 출발입니다.
환경 점검 프롬프트
오늘은 내가 만든 앱을 인터넷에 올릴 거야. 나는 코딩을 전혀 몰라. 1) 올리는 데 필요한 도구가 내 컴퓨터에 있는지 확인해줘 — git, GitHub 명령 도구(gh), Vercel 명령 도구, Supabase 명령 도구. 2) 없는 것이 있으면 그게 뭐에 쓰는 도구인지 한 줄로 알려주고, 하나씩 설치해줘. 3) 로그인이 필요한 순간이 오면 네가 대신 하지 말고, 브라우저 창을 열고 나에게 말해줘. 내가 로그인하면 그때 이어서 해줘. 4) 다 끝나면 도구 이름과 상태를 표로 정리해서 보여줘.
이 프롬프트는 [ ] 없이 그대로 씁니다.
로그인은 이 컴퓨터의 브라우저에서 합니다
- Claude Code가 로그인을 요청하면, 열린 브라우저 창에서 내가 직접 누릅니다
- 휴대폰으로는 안 됩니다 — 이 컴퓨터의 창이어야 그다음이 이어집니다
- 로그인이 끝나면 "됐어, 이어서 해줘"라고 말해줍니다
올리는 일은 세 단계로 끝납니다
저장소는 나만 보이게 비공개로 만듭니다. 폰에서도 같은 주소로 열려요.
올리기 프롬프트
이제 이 앱을 인터넷에 올리고 싶어. 나는 코딩을 전혀 몰라. 아래 순서대로 해줘. 1) 이 폴더를 [앱이름]이라는 이름의 내 GitHub 저장소로 만들어줘. 저장소는 비공개로 만들어줘. 2) 올리기 전에 이 폴더의 git 사용자 이름과 이메일을 내 GitHub 계정과 똑같이 맞춰줘. 내 GitHub 이메일은 [내 GitHub 이메일]이야. 이메일이 다르면 배포가 막히니까 꼭 먼저 확인해줘. 3) 코드를 GitHub에 올리고, Vercel에 연결해서 배포해줘. 로그인 창이 필요하면 브라우저를 열고 나에게 말해줘. 4) 배포가 끝나면 짧은 공개 주소를 알려줘. 팀 이름이 길게 붙은 주소 말고, 로그인 없이 아무나 열 수 있는 짧은 주소여야 해. 5) 그 주소를 직접 열어서 정상으로 열리는지(HTTP 200) 확인하고, '주소 한 줄 + 상태 한 줄'로 보고해줘. 6) 중간에 실패하면 멈추고 받은 응답을 그대로 보여줘. 혼자 되돌리거나 지우지는 마.
[앱이름]은 영문 소문자 · 숫자 · 하이픈으로 짧게 씁니다. [내 GitHub 이메일]은 GitHub에 로그인할 때 쓰는 그 이메일입니다.
폰에서 열리면 오늘의 완주입니다
- Claude Code에게 "내 앱 주소만 한 줄로 다시 보여줘"라고 말합니다
- 그 줄을 마우스로 긁으면 PowerShell에서는 그대로 복사됩니다 — 나에게 카톡으로 보냅니다
- 폰에서 눌러 내 앱이 뜨면 — 완주 최소선 달성입니다 🎉
- 옆 사람에게도 주소를 보내 보세요. 남의 폰에서도 똑같이 열립니다
고쳐서 올리면 저절로 다시 열립니다
- Claude Code에게 "제목 색을 바꿔줘, 그리고 올려줘"라고 말합니다
- 1~2분 기다립니다 — 그동안 화면은 그대로 두면 됩니다
- 폰에서 화면을 새로고침합니다. 색이 바뀌어 있으면 연결이 살아 있는 겁니다
고쳐도 주소는 바뀌지 않습니다. 그래서 한 번 보낸 주소가 늘 최신이에요.
기록이 기기마다 따로인 이유
비밀 열쇠는 코드에 적지 않습니다
냉장고 연결 프롬프트
이제 이 앱이 적은 내용을 인터넷의 한 곳에 저장하게 만들고 싶어. 나는 코딩을 전혀 몰라. 1) Supabase에 내 프로젝트를 만들어줘. 로그인 창이 필요하면 브라우저를 열고 나에게 말해줘. 이미 만들어진 프로젝트가 있으면 새로 만들지 말고 그걸 쓰자. 2) 이 앱의 기록을 담을 표를 만들어줘. 어떤 칸이 필요한지는 앱을 보고 네가 정해줘. 3) 앱의 저장과 불러오기를 브라우저 저장 대신 Supabase로 바꿔줘. 지금 되는 기능은 그대로 두고. 4) 비밀 열쇠는 코드에도 GitHub에도 적지 말고 Vercel의 환경변수로 넣어줘. 화면에도 열쇠를 찍지 마. 5) 다 되면 다시 배포하고, 내 주소에서 한 줄 적어 저장한 다음 새로고침해서 그대로 남아 있는지 확인해줘. 6) 폰처럼 다른 기기에서 열어도 같은 내용이 보이는지, 내가 무엇을 눌러 확인하면 되는지 한 줄로 알려줘. 7) 중간에 실패하면 멈추고 받은 응답을 그대로 보여줘.
이 프롬프트도 [ ] 없이 그대로 씁니다. 중간에 로그인 요청이 오면 내가 눌러 줍니다.
폰에서 적은 것이 컴퓨터에 뜨면 끝입니다
- 폰에서 내 주소를 열고 아무 한 줄을 적어 저장합니다
- 컴퓨터에서 같은 주소를 새로고침합니다
- 그 줄이 화면에 보이면 — 도전 목표 달성입니다 🎉
- 반대로도 해보세요 — 컴퓨터에서 적고 폰에서 새로고침하면 됩니다
점검 프롬프트
배포가 끝났어. 이제 제대로 됐는지 점검하자. 하나씩 실제로 확인하고 결과를 표로 알려줘. 1) 내 짧은 공개 주소가 로그인 없이 열리는지 확인해줘. 2) 첫 화면만 열리고 안쪽 페이지가 404로 뜨지는 않는지도 확인해줘. 3) 한 줄 적어 저장한 뒤 새로고침했을 때 그대로 남아 있는지 확인해줘. 4) 비밀 열쇠가 코드와 GitHub에 들어가 있지 않은지 확인해줘. 5) 폰에서 열었을 때도 같게 보이는지, 내가 무엇을 눌러 확인하면 되는지 알려줘. 6) 표의 각 줄은 '항목 / 결과(됨·안 됨) / 안 되면 무엇을 해야 하는지 한 마디'로 채워줘.
냉장고를 붙이지 못했으면 3번은 건너뛰어도 됩니다.
마지막 세 가지는 내 눈으로 봅니다
로그인 없이 열리는가. 폰에서도 그대로 열리는가.
한 줄 적고 새로고침했을 때 그 줄이 남아 있는가.
코드와 저장소 어디에도 열쇠가 적혀 있지 않은가.
자주 막히는 곳
| 증상 | 원인 | Claude Code에게 할 한 마디 |
|---|---|---|
| 배포가 5분 넘게 안 끝난다 | 커밋 이메일이 GitHub 계정과 다름 | "커밋 이메일을 내 GitHub 이메일로 바꾸고 다시 올려줘" |
| 주소를 열면 로그인 화면이 뜬다 | 팀 주소를 열었음 | "짧은 공개 주소를 알려줘" |
| 저장이 안 된다 | 열쇠가 금고에 안 들어감 | "환경변수가 등록됐는지 확인하고 다시 배포해줘" |
| 화면은 뜨는데 일부가 404다 | 서버 쪽 경로 규칙 | "api 경로 설정을 점검하고 두 단계 주소도 되게 해줘" |
| 로그인 창이 안 열린다 | 팝업 차단, 또는 폰으로 시도 | 차단을 풀고 이 컴퓨터의 브라우저에서 다시 엽니다 |
2분 이상 막히면 손을 들어주세요. 여기서 막혀도 완주에는 영향이 없습니다.
오늘 가져가는 것
내 계정에서 나온 주소. 어느 기기에서나 열린다.
코드가 담긴 내 GitHub 서랍. 고친 내역이 남는다.
기록이 모이는 한 곳. 어디서 적어도 같은 내용이 보인다.
말하고, "올려줘". 오늘 배운 것은 사실 이 한 줄이다.
집에서도 같은 방법으로 이어갑니다
- 같은 폴더에서 claude를 다시 엽니다
- 고치고 싶은 것을 말로 설명합니다
- "올려줘"라고 말합니다 — 주소는 그대로, 내용만 바뀝니다
막히면 그 화면을 그대로 말로 설명하세요. 오늘 표에 있던 한 마디들이 대부분 통합니다.
오늘은 무료 등급 안에서 시작합니다
- 세 곳 모두 무료로 시작하는 등급이 있습니다
- 한도가 얼마인지는 각 서비스 안내에서 봅니다
- 오늘 만든 정도의 작은 앱은 그 범위에서 출발합니다
여기까지 오신 여러분은 이제 주소를 가진 사람입니다. 다음에 만들 앱도 오늘의 세 단계면 됩니다.
진행자용 타임테이블
진행자(HC · 보조 진행자) 참고용
| 시간(누적) | 블록 | 비고 |
|---|---|---|
| 0:00 ~ 0:15 | 블록 1 | 지난 시간 · 흐름 · 도착점 |
| 0:15 ~ 0:30 | 블록 2 | 개념 — 세 조각과 세 곳 |
| 0:30 ~ 0:55 | 블록 3 | 프롬프트 ① · 로그인 |
| 0:55 ~ 1:05 | 휴식 | 10분 |
| 1:05 ~ 1:40 | 블록 4 | ★완주 최소선 — 올리기 · 폰 확인 |
| 1:40 ~ 2:20 | 블록 5 | ★도전 목표 — 냉장고 |
| 2:20 ~ 2:30 | 휴식 | 10분 |
| 2:30 ~ 2:55 | 블록 6 | 프롬프트 ④ · 막힘 표 |
| 2:55 ~ 3:10 | 블록 7 | 마무리 |
지연 없는 기준표입니다(190분 = 핵심 170 + 휴식 20). 버퍼 20~30분을 더해 210~220분을 잡습니다.
진행자용 막힘 대응표
진행자(HC · 보조 진행자) 참고용 — 블록 · 확인할 것 · 우회로
| 막히는 지점 | 블록 | 확인할 것 · 우회로 |
|---|---|---|
| 명령 도구 설치가 실패 | 블록 3 | 다른 설치 방식으로 재시도. 안 되면 짝 컴퓨터에 붙인다 |
| 로그인 창이 안 뜬다 | 블록 3 | 팝업 차단 해제 → 주소를 직접 붙여 열게 한다 |
| GitHub 계정이 없다 | 블록 3 | 그 자리에서 만든다. 메일 인증까지 마쳐야 이어진다 |
| 배포가 오래 걸린다 | 블록 4 | 커밋 이메일부터 본다. 다르면 표의 한 마디를 친다 |
| 주소에서 로그인 화면이 뜬다 | 블록 4 | 긴 팀 주소를 연 것. 짧은 공개 주소를 다시 받는다 |
| 폰에서만 안 열린다 | 블록 4 | 사내 와이파이 대신 폰 데이터로 재시도 |
| 냉장고 연결이 30분을 넘긴다 | 블록 5 | 여기서 끊는다. 완주 판정에 영향 없다고 알린다 |
| 저장이 안 된다 | 블록 5 | 환경변수 등록 → 다시 배포 순서로 본다 |
| 열쇠가 코드에 들어갔다 | 블록 6 | 즉시 멈추고 열쇠를 새로 받는다. 저장소 비공개도 본다 |
| 2분 이상 혼자 막힘 | 전체 | 짝에게 먼저 묻고, 안 풀리면 진행자가 화면을 본다 |