ChanghyukBan비개발자의 첫 배포 가이드
Vercel로 10분 만에 서비스 공개하기
바이브코딩으로 MVP를 완성했습니다. 로컬에서 잘 돌아갑니다. 그런데 "배포"를 검색하면 AWS, Docker, Nginx... 처음 보는 단어들이 쏟아집니다.
결론부터 말하면, Next.js 프로젝트라면 Vercel을 쓰면 됩니다. 가입부터 배포까지 10분, 비용은 무료입니다.
이 글의 대상: 바이브코딩(Claude Code, Cursor, Bolt 등)으로 Next.js 프로젝트를 만들었고, GitHub에 코드가 올라가 있는 분.
01 배포란 무엇인가
카페를 예로 들어보겠습니다. 레시피를 개발했습니다(= 코드 작성). 집에서 만들어 혼자 먹으면 맛있습니다(= 로컬 실행). 손님을 받으려면 가게를 열고, 간판을 달고, 주소를 알려줘야 합니다. 그게 배포입니다.
localhost:3000. 컴퓨터 끄면 서비스도 꺼짐.https://내서비스.vercel.app. 컴퓨터 꺼도 24시간 돌아감.02 왜 Vercel인가
| 기준 | Vercel | AWS EC2 | Railway |
|---|---|---|---|
| 난이도 | 클릭 몇 번 | 서버 지식 필요 | 보통 |
| 비용 | 무료 | 월 1~5만원+ | 월 $5+ |
| Next.js 지원 | 완벽 (만든 회사) | 직접 설정 | 좋음 |
| HTTPS | 자동 | 직접 설정 | 자동 |
| 커스텀 도메인 | 무료 | 가능 | 가능 |
03 사전 준비물
git push를 한 번이라도 했다면 OK..env.local 파일을 열어두세요. API 키, DB URL 등이 적혀있습니다.주의:
.env.local은 절대 GitHub에 올리면 안 됩니다..gitignore에 포함되어 있는지 확인하세요.
04 단계별 배포 과정
https://프로젝트명.vercel.app 주소 생성!05 자주 발생하는 에러 TOP 5
| 에러 | 원인 | 해결법 |
|---|---|---|
Build failed: exit code 1 | 코드 문법 오류 | Vercel 로그의 빨간 줄을 AI에게 붙여넣기 |
| 흰 화면만 나옴 | 환경변수 누락 | Settings → Environment Variables에서 .env.local과 대조 |
500 Internal Server Error | DB 연결 실패 | Supabase URL/Key를 다시 복사해서 환경변수 교체 |
Module not found | 패키지 미설치 | 로컬에서 npm install 후 git push |
| 로그인이 안 됨 | Auth Redirect URL 미설정 | Supabase → Authentication → Site URL에 Vercel 도메인 추가 |
팁: 에러가 나면 Vercel 대시보드 → Functions 탭에서 로그를 확인하세요. 그 내용을 그대로 Claude에게 보여주면 해결책을 알려줍니다.
06 커스텀 도메인 연결
내서비스.vercel.app 대신 내서비스.com을 쓰고 싶다면:
- 도메인 구매 (가비아, 카페24 등 — 연 1~3만원)
- Vercel Settings → Domains → 도메인 입력
- Vercel이 알려주는 DNS 레코드를 도메인 관리 페이지에 입력
- 5분~48시간 내 자동 반영
# Vercel이 알려주는 DNS 설정 예시
# A 레코드 (루트 도메인)
Type: A | Name: @ | Value: 76.76.21.21
# CNAME (www)
Type: CNAME | Name: www | Value: cname.vercel-dns.com07 배포 후 체크리스트
https://로 시작하는지.배포가 막막하다면
이 글을 읽어도 배포가 어렵게 느껴질 수 있습니다. 환경변수, DNS, 에러 로그 — 처음이면 당연히 낯섭니다.
중요한 건 배포 한 번을 못 해서 몇 달을 날리지 않는 것입니다.
AtoZAI의 설치/배포 지원 서비스를 이용하면, 바이브코딩으로 만든 프로젝트를 실제 서비스로 띄워드립니다. 환경변수, 도메인, Supabase 연동, 에러 디버깅까지 한 번에 해결.