바이브코더가 알아야 할 GitHub 배포 3단계
일끝내는 Endwork 유튜브에서 3만 뷰가 넘은 Antigravity로 홈페이지 만들기
엔드플랜의 마쵸입니다. Antigravity로 홈페이지 만드는 영상이 인기가 많았습니다.
그만큼 질문도 많이 달렸는데요. "바이브 코딩으로 홈페이지를 만들었습니다. 로컬에서는 잘 돌아갑니다. 근데 이제 어떻게 올리죠?" 저도 예전에 이 부분에서 막혔습니다. 왜냐면 바이브 코딩 툴은 배포까지 자동으로 해주지 않거든요. Git이라는 걸 잘못 썼다가 작업을 날린 적도 있습니다. 근데 이제야 깨달았어요. 원칙 하나만 지켰으면 시간을 아꼈을 텐데! 오늘은 그 원칙과 함께. GitHub + Vercel로 무료 배포하는 방법을 정리해드리겠습니다.
준비물 : Github 계정(무료), Vercel 계정 (부분 무료)
1) GitHub 업로드 - 민망할 정도로 쉬움
GitHub는 "개발자를 위한 드롭박스"라고 생각하시면 됩니다. 코드를 저장하는 클라우드예요.
업로드 방법은 이렇습니다.
Github 우측에 있는 + 버튼을 누르면 나오는 버튼들.
- GitHub에 접속해서 New Repository를 만듭니다.
- 이름 적고, Private(비공개) 선택하고, Create.
- 생성된 URL을 복사합니다.
- 코딩 툴(커서, 안티그래비티 등)에 URL을 주고 "여기에 올려줘"라고 합니다.
- 끝입니다.
진짜 이게 전부예요. AI가 터미널 명령어까지 대신 실행해줍니다. Git 개념을 완벽히 이해할 필요 없습니다. "클라우드 백업"이라고 생각하시면 됩니다.
참고로 GitHub 무료 플랜에서도 Private Repository는 무제한입니다. 코드를 공개하기 싫으면 Private으로 만드세요. 파일 하나당 100MB 제한이 있으니 오디오나 영상은 올리지 마세요.
2) Vercel 연결 - 자동 배포의 마법
GitHub에 코드를 올렸습니다. 이제 세상에 공개할 차례입니다. Vercel을 쓰면 됩니다.
vercel에서 'Add New' 드랍박스를 누르면 프로젝트가 있다.
- Vercel에 접속해서 Add New Project를 누릅니다.
- GitHub 계정을 연결합니다.
- 방금 만든 Repository를 Import 합니다.
- Deploy 버튼을 누릅니다.
- 끝입니다.
Vercel이 자동으로 프레임워크를 감지합니다. 빌드 설정도 알아서 합니다. 배포 완료되면 URL이 나옵니다. 그게 여러분의 웹사이트입니다. 민망할 정도로 우리가 해야 되는 건 이것밖에 없습니다.
도메인 연결도 간단합니다. Vercel 대시보드에서 Domains 메뉴 들어가면 안내가 나와요. 그대로 따라가시면 됩니다. Vercel 무료 플랜 한도는 이렇습니다.
- 100GB 대역폭/월 (약 10만 방문자 수준)
- 15만 서버리스 함수 호출/월
- 1인 전용 (팀 협업 불가)
개인 프로젝트에는 충분합니다.
3) 브랜치 관리 - 이것만 지키면 안 망함
"Main 브랜치는 고결해야해요." -엔드플랜 은긔
여기가 핵심입니다. 제가 Git 잘못 써서 망한 이유도 여기에 있습니다. "메인은 완벽을 추구해야 합니다." 이 원칙 하나만 기억하세요. 메인 브랜치는 배포용입니다. 여기서 직접 작업하면 안 됩니다. 작업은 반드시 별도 브랜치에서 해야 합니다. 게임 세이브로 비유하면 이렇습니다.
- 브랜치 = 보스전 전에 따로 저장한 슬롯
- 머지 = 보스 클리어 후 세이브 덮어쓰기
- 메인 = 항상 "클리어 가능한" 상태 유지
정리하자면
작업 순서는 이렇습니다.
- 메인에서 브랜치를 만듭니다. (예:
feature/contact-button) - 그 브랜치에서 작업합니다.
- Vercel이 브랜치마다 프리뷰 URL을 만들어줍니다.
- 프리뷰에서 테스트합니다.
- 문제없으면 메인에 머지합니다.
- Vercel이 자동으로 프로덕션 배포합니다.
브랜치 하나당 기능 하나를 추천합니다. 끝나면 바로 머지하세요. 오래 열어두면 충돌 위험이 높아집니다. 저는 이걸 몰랐습니다. 메인에서 직접 작업했다가 문제가 생겼습니다. 돌이킬 수 없었어요. 처음부터 브랜치를 따고 시작했으면. 아무 문제 없었을 겁니다.
한 단계 더!
여기까지가 기본입니다. 혼자 작업한다면 이 정도면 충분합니다.
협업한다면 몇 가지 더 알아야 합니다.
충돌(Conflict) 대비:
- 같은 파일을 동시에 수정하면 충돌이 납니다.
- 충돌은 "끝"이 아니라 "선택"입니다.
- 누구 코드를 쓸지 고르면 됩니다.
커뮤니케이션:
- 누가 메인에 푸시하면 pull 먼저 하세요.
- 슬랙이나 디스코드에 "머지했습니다" 한 줄만 남겨도 됩니다.
AI 코드 리뷰 봇 (보너스):
- Gemini Code Assist: GitHub 연동하면 PR마다 자동 리뷰. 무료로 일일 6,000 요청.
- ChatGPT Codex: Plus 구독자라면 포함. 코딩 전용 한도가 따로 있어서 일반 채팅에 영향 없음.
바이브 코딩 + AI 리뷰 조합이면. 비개발자도 품질 관리가 가능합니다.
정리
바이브 코딩으로 만든 홈페이지 배포는 3단계입니다.
- GitHub 업로드: AI한테 시키면 됨
- Vercel 연결: Import 버튼 한 번
- 브랜치 관리: 메인은 고결하게, 작업은 브랜치에서
이 원칙만 지키면 됩니다. 오늘 레포지토리 하나 만들어보세요. 브랜치 따서 작업해보세요.
이거 진짜 들으시는 것만으로도. 한 하루 내지 이틀 버신 겁니다.
📝 핵심 요약
바이브코딩으로 만든 홈페이지 배포는 Vercel이 편하다. Vercel은 Github과 연동이 잘 되어있다. Git을 사용할 때는 Main 브랜치를 온전하게 유지하는게 중요하다.
⏱️ 타임라인
00:00하이라이트00:29인트로00:35많은 분들이 궁금했던 홈페이지 배포01:00홈페이지 배포 툴 Vercel / netlify01:33Git이란?02:10Coding Tool Antigravity02:45Repository 만들기04:07Git 업로드 확인04:23Git과 Vercel 연동05:09생각보다 쉬운 홈페이지 연동05:21Git을 어떻게 관리해야 하는가?06:51Branch07:09Branch란?07:36Branch를 따야하는 이유08:19Save가 가능한 게임이 생각나는 Branch09:00Branch 정리09:51Branch 이름 짓기10:33Git 활용해서 Branch관리하기13:12Vercel과 Github의 연동 편리성14:32Branch와 Main 합치기15:23Conflict가 발생하는 이유16:32Create pull request & Merge18:13Github Branch 관리 노하우19:49Branch 제작 직접 해보기21:52다양한 코딩 툴24:13영상 내용 정리 / 영상 마무리
💡 핵심 인사이트
바이브코더, 가장 효율적인 홈페이지 관리
1. GitHub는 "개발자를 위한 드롭박스"다. AI한테 "여기에 올려줘"만 하면 업로드 끝. 2. Vercel은 GitHub 연결 후 Deploy 버튼 한 번으로 자동 배포된다. 3. 메인 브랜치에서 직접 작업하면 안 된다. 브랜치를 따고 작업 후 머지하는 게 원칙.
📌 Key Takeaways
- 1GitHub는 "개발자를 위한 드롭박스"다. AI한테 "여기에 올려줘"만 하면 업로드 끝.
- 2Vercel은 GitHub 연결 후 Deploy 버튼 한 번으로 자동 배포된다.
- 3메인 브랜치에서 직접 작업하면 안 된다. 브랜치를 따고 작업 후 머지하는 게 원칙.
❓ 자주 묻는 질문
Git 브랜치를 왜 써야 하나요?▼
메인 브랜치는 배포용이므로 항상 안정적이어야 합니다. 작업은 별도 브랜치에서 하고, 테스트 후 머지해야 문제가 안 생깁니다.
바이브 코딩으로 만든 홈페이지 어떻게 배포하나요?▼
GitHub에 코드를 업로드하고, Vercel에서 Import하면 자동 배포됩니다. 둘 다 무료 플랜으로 충분합니다.
