바이브코딩 배포가 필요한 순간은 생각보다 빨리 옵니다.
바이브코딩으로 작은 웹사이트를 만들면 처음에는 localhost:3000 같은 주소에서 확인합니다.
문제는 이 주소가 내 컴퓨터 안에서만 열린다는 점입니다.
친구에게 보여주거나, 포트폴리오로 공유하거나, 실제 사용자에게 테스트를 부탁하려면 공개 링크가 필요합니다.
이 글은 바이브코딩 첫 프로젝트 다음 단계입니다.
목표는 하나입니다.
내 컴퓨터에서만 보이던 웹사이트를 xxx.vercel.app 같은 공개 링크로 바꾸는 것입니다.
여기서는 여러 배포 방법 중 GitHub와 Vercel을 연결하는 방식을 예시로 씁니다.
처음부터 도메인, 서버, 배포 자동화까지 다 이해하려고 하면 어렵습니다.
일단은 이 흐름만 잡으면 됩니다.
GitHub에 프로젝트를 올리고, Vercel이 그 프로젝트를 가져와서 인터넷에 띄운다.
이 정도만 이해해도 첫 배포는 충분합니다.
바이브코딩 배포는 언제 필요한가요?
바이브코딩 배포는 로컬에서 만든 웹사이트를 다른 사람이 열 수 있는 공개 링크로 바꿀 때 필요합니다.
localhost는 내 컴퓨터 안에서만 열리는 테스트 주소입니다.
반대로 Vercel 같은 배포 서비스에 올리면 인터넷 주소가 생깁니다.
이 차이를 모르면 “분명 내 브라우저에서는 잘 되는데 왜 남들은 못 보지?”에서 막힙니다.
바이브코딩에서 첫 번째 결과물을 만드는 것만큼 중요한 게 이 지점입니다.
결과물이 내 컴퓨터에만 있으면 연습이고, 링크로 공유되기 시작하면 피드백을 받을 길이 열립니다.
전체 흐름은 무엇인가요?
이번 글의 바이브코딩 배포 방법은 GitHub와 Vercel을 연결하는 5단계입니다.
| 단계 | 하는 일 | 결과 |
|---|---|---|
| 1 | 프로젝트 폴더 확인 | 배포할 파일을 정리 |
| 2 | GitHub 저장소 생성 | 코드가 온라인 저장소에 올라감 |
| 3 | Vercel 가입 | GitHub 계정으로 연결 준비 |
| 4 | Import Git Repository | Vercel이 프로젝트를 가져옴 |
| 5 | Deploy 후 URL 확인 | 공개 링크 생성 |
Vercel 공식 문서에서도 Git 저장소를 연결하면 push나 production branch 변경에 따라 배포가 이어지는 구조를 안내합니다.
복잡하게 들리지만, 처음에는 “GitHub에 올린 파일을 Vercel이 대신 인터넷에 띄운다”로 이해하면 됩니다.
1단계: 배포할 프로젝트 폴더를 확인합니다
먼저 내 컴퓨터에 배포할 웹사이트 폴더가 있어야 합니다. 이 폴더가 Vercel이 읽을 기준점입니다.
앞 글에서 만든 HTML 체크리스트 앱이라면 index.html이 들어 있는 폴더가 기준입니다.
Next.js나 React로 만든 프로젝트라면 package.json이 있는 폴더가 기준입니다.
AI 코딩 도구에 이렇게 물어보면 됩니다.
이 프로젝트를 Vercel에 배포하려고 해.
배포 기준이 되는 루트 폴더가 어디인지 확인해줘.
GitHub에 올리면 안 되는 파일이 있는지도 같이 확인해줘.
여기서 중요한 건 비밀 값입니다.
API 키, 비밀번호, 토큰이 코드 안에 들어 있으면 그대로 인터넷에 올라갑니다.
작은 HTML 앱이면 대체로 걱정이 적지만, 로그인이나 외부 API를 붙인 프로젝트라면 배포 전에 꼭 확인해야 합니다.
2단계: GitHub 저장소에 프로젝트를 올립니다
GitHub 저장소는 Vercel이 가져갈 프로젝트의 온라인 보관함입니다.
GitHub 공식 문서도 새 repository를 만들고, README나 파일을 추가하고, commit하는 흐름을 기본 시작점으로 안내합니다.
비개발자라면 명령어를 외우기보다 AI에게 작업 단위를 정확히 맡기는 게 낫습니다.
이 폴더를 GitHub 새 repository로 올리고 싶어.
repository 이름은 vibe-checklist로 해줘.
올리기 전에 다음을 확인해줘.
- API key, token, password 같은 비밀 값이 없는지
- node_modules 같은 불필요한 폴더가 올라가지 않는지
- README에 로컬 실행 방법이 적혀 있는지
문제가 없으면 git init, commit, GitHub repository 생성, push까지 진행해줘.
중간에 로그인이나 권한 승인이 필요하면 내가 승인할 수 있게 멈춰줘.
처음에는 이 과정에서 GitHub 로그인, 권한 승인, repository 생성 화면이 나오기도 합니다.
그건 정상입니다.
한 번 연결해두면 다음부터는 훨씬 짧아집니다.
3단계: Vercel에 가입하고 GitHub로 로그인합니다
Vercel은 GitHub 계정으로 가입하면 이후 연결이 편합니다. repository 권한 승인까지 한 흐름으로 이어지기 때문입니다.
Vercel 가입 화면에서 GitHub로 계속 진행하면 됩니다.
이 단계에서 새 계정을 또 만드는 느낌이 들 수도 있습니다.
하지만 구조는 단순합니다.
GitHub는 코드를 보관하고, Vercel은 그 코드를 인터넷에 띄웁니다.
둘을 연결해두면 이후에는 GitHub에 수정본을 올릴 때마다 Vercel 배포가 이어집니다.
4단계: Import Git Repository에서 프로젝트를 선택합니다
Vercel 대시보드에서 Add New 또는 New Project를 눌러 GitHub 저장소를 가져옵니다.
목록에 내가 만든 repository가 보이면 Import를 누르면 됩니다.
원하는 repository가 안 보이면 Adjust GitHub App Permissions를 눌러 권한을 추가해야 합니다.
이건 “Vercel이 내 GitHub의 어떤 repository를 읽을 수 있는지” 정하는 과정입니다.
가능하면 모든 repository 권한을 열기보다, 이번 프로젝트 하나만 선택하는 편이 좋습니다.
권한을 추가하면 다시 Import 화면에서 프로젝트가 보입니다.
5단계: Deploy 버튼을 누르고 공개 URL을 확인합니다
설정이 특별히 필요 없는 간단한 웹사이트라면 기본값으로 Deploy를 눌러도 됩니다.
Next.js 같은 프레임워크는 Vercel이 자동으로 감지하는 경우가 많습니다.
HTML 파일 중심의 정적 사이트라면 빌드 없이 파일을 그대로 배포하는 방식으로 이해하면 됩니다.
배포가 끝나면 Vercel에 공개 URL이 생깁니다.
이 URL을 브라우저에서 열어 실제 화면이 보이는지 확인합니다.
확인할 것은 네 가지입니다.
- 공개 URL이 열리는가
- 내가 만든 화면이 보이는가
- 모바일에서도 크게 깨지지 않는가
- 개인정보나 테스트용 문구가 그대로 노출되지 않는가
여기까지 되면 첫 Vercel 배포는 끝입니다.
수정할 때는 어떻게 다시 배포하나요?
수정할 때는 로컬에서 고치고, GitHub에 push하면 Vercel이 다시 배포하는 흐름으로 반복합니다.
처음 배포가 끝나면 다음부터가 더 중요합니다.
웹사이트는 한 번 올리고 끝나는 게 아니라, 계속 고치게 됩니다.
이때 매번 Vercel 화면에서 새로 만들 필요는 없습니다.
AI 코딩 도구에는 이렇게 요청하면 됩니다.
방금 배포한 Vercel 프로젝트를 수정하려고 해.
헤더 문구를 "오늘의 체크리스트"로 바꾸고,
모바일에서 버튼이 너무 붙어 보이지 않게 여백을 조정해줘.
수정 후 로컬에서 확인하고,
문제가 없으면 commit, push까지 해줘.
Vercel 배포가 완료되면 공개 URL에서 다시 확인할 수 있게 알려줘.
여기서 핵심은 commit, push입니다.
GitHub에 변경 사항이 올라가면 Vercel이 그 변경 사항을 보고 새 배포를 만듭니다.
바이브코딩 배포 흐름을 한 번 익히면, 이후에는 “수정하고 링크 갱신하기”가 하나의 루프가 됩니다.
GitHub가 어렵다면 Vercel Drop도 있습니다
GitHub가 너무 어렵다면 Vercel Drop으로 폴더를 끌어다 놓는 방법도 있습니다.
Vercel 공식 문서에는 Git, Vercel Drop, CLI, Deploy Hooks, REST API 같은 여러 배포 방법이 정리되어 있습니다.
그중 Drop은 브라우저에 폴더를 드래그해서 올리는 방식이라 첫 실험에는 편합니다.
다만 저는 바이브코딩 시리즈에서는 GitHub 연결 방식을 먼저 추천합니다.
이유는 간단합니다.
한 번 만든 웹사이트는 반드시 수정하게 되기 때문입니다.
폴더를 매번 끌어다 놓는 것보다, GitHub에 수정본을 올리고 Vercel이 자동으로 다시 배포하는 흐름이 장기적으로 덜 헷갈립니다.
터미널에 익숙하다면 Vercel CLI도 있습니다
GitHub 화면에서 Import하는 방식 말고, 터미널에서 Vercel CLI로 배포하는 방법도 있습니다.
Vercel 공식 문서에서는 CLI로 로컬 프로젝트를 Vercel 프로젝트에 연결하고, preview 배포와 production 배포까지 진행하는 흐름을 안내합니다.
대표적으로는 이런 흐름입니다.
vercel link
vercel deploy
vercel deploy --prod
vercel link는 지금 폴더를 Vercel 프로젝트와 연결하는 단계입니다.
vercel deploy는 preview 배포를 만들고, vercel deploy --prod는 production 배포를 만듭니다.
다만 CLI를 쓴다고 해서 가입이 없어지는 것은 아닙니다.
어차피 Vercel 계정 로그인은 필요합니다. 처음 실행하면 브라우저 로그인이나 팀/프로젝트 선택 과정이 나올 수 있습니다.
그래서 비개발자에게 처음부터 추천할 방식은 아닙니다.
하지만 이미 터미널과 Claude Code를 쓰고 있다면 CLI 방식이 더 자연스러울 수 있습니다. 브라우저에서 클릭하는 대신, AI에게 “Vercel CLI로 preview 배포하고 URL 확인해줘”라고 맡길 수 있기 때문입니다.
처음 한 번만 공개 링크를 만들 거라면 Vercel Drop도 괜찮습니다.
계속 수정할 프로젝트라면 GitHub 연동이 편합니다.
터미널 작업이 익숙하다면 Vercel CLI도 선택지입니다.
배포 전에 무엇을 꼭 확인해야 하나요?
Vercel 배포 전에 확인할 것은 기능, 보안, 모바일, 공개 URL입니다.
작은 체크리스트 앱이어도 인터넷에 올리는 순간부터는 “내 컴퓨터 안의 장난감”이 아닙니다.
최소한 이 정도는 확인합니다.
- 비밀번호, API 키, 토큰이 코드에 들어 있지 않은가
- 삭제하면 안 되는 개인 파일이 repository에 들어가지 않았는가
- 모바일 화면에서 버튼과 글자가 겹치지 않는가
- 테스트 문구나 임시 이미지가 그대로 남아 있지 않은가
- 공개 URL을 시크릿 모드에서도 열 수 있는가
저는 이 체크를 배포 전 루틴으로 두는 편이 좋다고 봅니다.
바이브코딩은 빠르게 만들 수 있다는 장점이 있지만, 빠르게 공개할수록 사람이 확인해야 하는 것도 생깁니다.
다음 글은 포트폴리오 사이트 만들기로 넘어갑니다
다음 글에서는 단순 체크리스트 앱이 아니라, Claude Design과 Claude Code를 이용해 포트폴리오 사이트를 만드는 흐름으로 넘어갑니다.
이번 글에서 배포를 먼저 분리한 이유가 있습니다.
포트폴리오 사이트를 만들 때도 결국 마지막 질문은 같습니다.
“이걸 다른 사람이 볼 수 있는 링크로 어떻게 만들지?”
그 답이 바이브코딩 배포입니다.
이 글에서는 그 예시로 Vercel을 썼습니다.
먼저 바이브코딩 시작 가이드에서 전체 순서를 보고, 개념이 헷갈리면 바이브코딩 뜻 정리를 다시 보면 됩니다.
자주 묻는 질문
Vercel 배포는 무료인가요?
개인 실험과 작은 정적 사이트는 무료 플랜으로 시작하는 경우가 많습니다. 다만 요금제와 제한은 바뀔 수 있으니 실제 배포 전에는 Vercel 가격 페이지를 확인하는 편이 좋습니다.
localhost 주소를 그대로 공유하면 안 되나요?
안 됩니다. localhost는 내 컴퓨터를 뜻하는 주소라서 다른 사람 컴퓨터에서는 열리지 않습니다. 다른 사람에게 보여주려면 Vercel 같은 호스팅에 배포해야 합니다.
GitHub 없이도 Vercel 배포가 가능한가요?
가능합니다. Vercel Drop이나 Vercel CLI로도 배포 가능합니다. 다만 Vercel 계정 가입과 로그인은 필요합니다. 계속 수정할 프로젝트라면 GitHub repository를 연결하는 방식이 관리하기 쉽고, 터미널에 익숙하다면 CLI 방식도 괜찮습니다.
배포 후 수정하면 URL이 바뀌나요?
Vercel은 배포마다 고유 URL을 만들지만, 프로젝트의 기본 도메인은 최신 production 배포를 가리키는 방식으로 씁니다. 그래서 보통 공유용 링크는 프로젝트 도메인 하나를 기준으로 관리하면 됩니다.