«바이브 01»에서 지도를 봤다면, 이번엔 실제로 걷습니다. 목표는 하나 — AI가 만들어 준 페이지를 카톡으로 링크를 보내면 누구나 휴대폰으로 열 수 있게 만드는 것입니다. 필요한 건 GitHub(창고)와 Vercel(가게) 두 곳, 비용은 0원, 처음 한 번 연결에 20~30분, 그다음부터는 «올려줘» 한마디에 2분입니다. 이 글의 배포 화면은 연출이 아닙니다 — 바로 앞 글 «바이브 01»을 올리던 그 순간을 그대로 찍었습니다.
GitHub와 Vercel을 한 번 이어 두면 창고에 새 물건(수정본)이 들어갈 때마다 벨트가 알아서 가게 진열대까지 옮깁니다. 우리가 할 일은 «창고에 넣기»뿐입니다.
| 단계 | 하는 일 | 누가 | 횟수 |
|---|---|---|---|
| ① 창고 만들기 | GitHub에 내 앱 보관함(저장소) 만들기 — 비공개로 | AI 또는 직접 클릭 | 앱마다 처음 한 번 |
| ② 창고에 넣기 | 지금 상태를 저장(커밋)하고 GitHub로 올리기(푸시) | AI(«올려줘») | 고칠 때마다 |
| ③ 가게와 연결 | Vercel에서 그 저장소를 «Import» → 배포 | 직접 클릭 2번 | 앱마다 처음 한 번 |
| 그다음부터 | ②만 하면 Vercel이 알아서 새로 진열 | 자동 | — |
저장소(레포지토리)는 «앱 하나를 담는 창고 한 칸»입니다. AI에게 «비공개 저장소 만들어서 올려줘»라고 하면 대신 만들어 주지만, 화면으로 한 번 보면 무엇이 만들어지는지 감이 옵니다.
| Public(공개) | Private(비공개) | |
|---|---|---|
| 누가 보나 | 전 세계 누구나 코드·기록 열람 | 나와 초대한 사람만 |
| Vercel 배포 | 됨 | 똑같이 됨 (사이트는 공개, 코드만 비공개) |
| 어울리는 것 | 오픈소스로 나누는 코드 | 업무용·고객용·강의용 전부 |
| 이미 Public으로 만들었다면 | 저장소 Settings → 맨 아래 Danger Zone → Change visibility 에서 Private으로 바꿀 수 있습니다. 단, 이미 키가 올라갔다면 바꾸는 것만으론 부족 — 키를 새로 발급해야 합니다(«바이브 04»). | |
«비공개 저장소면 사이트도 비공개인가요?» — 아닙니다. 창고(코드)만 잠기고, Vercel에 진열한 가게(사이트)는 주소를 아는 누구나 들어옵니다. 사이트까지 막고 싶다면 «로그인» 기능이 따로 필요합니다.
창고가 생겼으면 내 컴퓨터의 앱을 넣습니다. 두 동작으로 나뉩니다. 커밋은 «지금 상태를 세이브», 푸시는 «세이브를 GitHub로 업로드». 둘 다 AI가 합니다 — 우리는 «GitHub에 올려줘»라고만 하면 됩니다.
vercel.com 에 GitHub로 로그인하면 내 창고 목록이 바로 보입니다. 올리고 싶은 저장소 옆 Import를 누르고, 다음 화면에서 설정은 대부분 그대로 둔 채 Deploy를 누르면 끝입니다.
| 다음 화면에서 보이는 것 | 쉬운 말 | 어떻게 |
|---|---|---|
| Project Name | 가게 이름 = 무료 주소 앞부분(○○.vercel.app) | 원하면 바꾸기 |
| Framework Preset | 어떤 방식으로 만든 앱인지 | Vercel이 알아서 고름 — 그대로 |
| Build and Output Settings | 포장(빌드) 방법 | 그대로 |
| Environment Variables | 열쇠 보관함(API 키) | 열쇠가 있는 앱만(아래 설명) |
| Deploy 버튼 | 개업! | 누르기 |
Vercel 명령 도구를 쓰면 AI가 Import까지 대신할 수 있습니다. 다만 처음 한 번은 Vercel 로그인·권한 허락 화면이 뜨니, 그 화면만 본인이 눌러 주세요. 화면으로 한 번 해 보면 나중에 문제가 생겨도 어디를 볼지 알게 됩니다.
연결이 끝나면 그다음부터는 ②(창고에 넣기)만 하면 됩니다. 아래는 2026년 10월 8일 오후, 제가 «바이브 01» 글을 GitHub에 올린 직후부터 찍은 실제 화면입니다.
포장(빌드)하다 실패했다는 뜻입니다. 걱정할 것 없습니다 — 손님에게는 이전 버전이 그대로 보이고 있습니다. 그 줄을 눌러 나오는 빨간 글씨(로그)를 통째로 복사해 AI에게 «이 오류 고쳐서 다시 올려줘»라고 붙여 넣으세요.
| 무료 주소 (○○.vercel.app) | 내 도메인 (○○.co.kr) | |
|---|---|---|
| 비용 | 0원 | 도메인 1년 사용료 |
| 준비 | 배포하면 자동으로 생김 | 도메인 구입 → Add Existing에 입력 → 도메인 회사 화면에 Vercel이 알려 주는 값 붙여 넣기 |
| 어울리는 때 | 강의 실습, 사내 공유, 시안 | 고객·외부에 오래 쓰는 공식 서비스 |
| AI에게 | 할 일 없음 | «이 도메인을 Vercel에 연결하려면 도메인 회사 화면에 뭘 넣어야 해?» — 넣을 값을 표로 정리해 줍니다 |
| 이런 화면·말이 나오면 | 뜻 | 이렇게 |
|---|---|---|
| Vercel에 빨간 Error | 포장(빌드) 실패. 손님은 이전 버전을 보는 중 | 오류 글씨를 복사해 AI에게 «고쳐서 다시 올려줘» |
| 올렸는데 화면이 그대로 | 아직 Building 중이거나, 휴대폰이 옛 화면을 기억 | Vercel에서 Ready 확인 → 새로고침(안 되면 시크릿 창) |
| 404 · NOT_FOUND | 그 주소에 해당하는 페이지가 없음 | AI에게 «배포 주소에서 404가 나와, 주소와 파일 위치를 맞춰줘» |
| Permission denied · 권한 | GitHub·Vercel 로그인이 안 됐거나 만료 | AI가 띄워 주는 로그인 창에서 본인이 다시 로그인 |
| Public으로 만들어 버림 | 창고가 유리벽 | Settings → Change visibility → Private. 키가 있었다면 새로 발급 |
이 폴더의 앱을 다른 사람이 휴대폰으로 열 수 있게 인터넷에 올리고 싶어. 1) GitHub에 비공개(Private) 저장소를 만들어서 올려주고 2) Vercel에 연결해서 배포해줘. 내가 직접 로그인하거나 허락 버튼을 눌러야 하는 화면이 나오면 멈추고, 어디를 누르면 되는지 알려줘. 끝나면 접속 주소를 알려줘.
지금까지 고친 내용을 GitHub에 올려줘. 커밋 설명은 한국어로, 무엇을 바꿨는지 알기 쉽게 써줘. 올린 뒤 Vercel 배포가 Ready가 됐는지 확인하고, 실제 주소에서 바뀐 게 보이는지도 확인해줘.
Vercel 배포가 Error로 실패했어. 아래는 화면에 나온 오류 내용이야. 원인을 초보자도 알게 한두 줄로 설명하고, 고쳐서 다시 올린 뒤 Ready가 될 때까지 확인해줘. (여기에 오류 글씨를 붙여 넣기)
오늘 고친 뒤로 화면이 이상해졌어. GitHub 기록을 보고 어제 마지막으로 잘 되던 상태가 어느 커밋인지 찾아서, 그 상태로 되돌린 다음 다시 배포해줘. 지운 내용은 나중에 다시 꺼낼 수 있게 기록은 남겨줘.
| 편 | 내용 |
|---|---|
| 바이브 01 · 지도 | 각 서비스가 어디서 무슨 일을 하는지 한 장으로 |
| 바이브 02 · 배포 (지금 글) | GitHub에 저장하고 Vercel로 내 주소에 올리기 |
| 바이브 03 · 장부 붙이기 | 설문 응답을 Supabase(또는 구글 시트)에 모으기 |
| 바이브 04 · 열쇠와 보안 | 키 유출·공개 저장소·보안 규칙 — 실제 사고로 배우기 |
2026년 10월 8일, 제 GitHub·Vercel 계정에서 찍었습니다. GitHub «새 저장소» 화면은 입력만 해 보고 실제로 만들지는 않았고(Create 버튼은 누르지 않음), 배포 장면은 «바이브 01» 글을 실제로 올리던 순간의 기록입니다. 다른 저장소 이름은 흐리게 가렸습니다. 서비스 화면 구성은 바뀔 수 있습니다.