만든 앱 무료로 배포하기 — Vercel·Netlify·Cloudflare Pages 완벽 가이드

 

바이브코딩으로 챗봇도, 백엔드까지 만들었는데 내 노트북에서만 돌면 아무도 못 씁니다. 마지막 관문은 배포 — 세상에 공개하는 일이에요. 예전엔 서버 임대에 돈·설정이 필요했지만, 지금은 GitHub에 올리고 버튼 몇 번이면 무료로, 심지어 자동 HTTPS까지 붙어 나옵니다. 3대 무료 호스팅을 비교하고 실전 배포법을 정리합니다. 이 글로 풀스택 여정이 완성돼요.

📌 30초 요약

① 코드를 GitHub에 올린다(push)
② 호스팅에 저장소를 연결(Import)하면 끝 — 자동 빌드·배포
③ 무료 HTTPS 주소가 즉시 생성, 이후 push할 때마다 자동 갱신
④ 3대 무료: Vercel(DX)·Netlify(간편)·Cloudflare Pages(무제한 대역폭)
⚠️ Vercel 무료는 상업용 금지 — 돈 버는 앱은 Cloudflare·Netlify로

배포가 왜 이렇게 쉬워졌나

요즘 배포의 핵심은 "GitHub에 올리면 나머지는 자동"입니다. 호스팅 서비스가 내 저장소를 지켜보다가, 코드가 바뀌면 알아서 빌드하고 전 세계 CDN에 배포해요. 서버 관리·HTTPS 인증서·도메인 연결을 전부 대신해 줍니다.

🔄 흐름 한 줄 요약 — git push → 호스팅이 감지 → 자동 빌드 → HTTPS 주소로 공개. 한 번 연결해 두면, 이후엔 push만 하면 사이트가 알아서 갱신됩니다.

3대 무료 호스팅 비교

서비스	무료 한도	강점 / 주의
▲ Vercel Hobby	대역폭 100GB/월 함수 호출 1M/월	Next.js·DX 최고 상업용 금지
◆ Netlify	대역폭 100GB/월 빌드 300분/월	가장 간편 상업용 허용
☁ Cloudflare Pages	대역폭 무제한 빌드 500회/월	트래픽 폭증에 강함 상업용 허용

셋 다 카드 없이·자동 HTTPS·글로벌 CDN을 무료로 줍니다. 배우고 연습할 땐 Vercel/Netlify가 가장 쉽고, 돈 버는 서비스나 트래픽 큰 사이트는 상업용을 허용하는 Cloudflare·Netlify가 안전해요.

STEP 1. 코드를 GitHub에 올리기

배포의 출발점은 GitHub입니다. 만든 앱 폴더에서 아래를 실행하세요(저장소는 GitHub에서 미리 하나 만들어 둡니다).

git init
git add .
git commit -m "first deploy"
git branch -M main
git remote add origin https://github.com/내아이디/내앱.git
git push -u origin main

✅ 막히면 AI에게 — "이 프로젝트를 GitHub에 올리게 git 명령어 순서대로 알려줘"라고 Claude Code에 물으면, 내 폴더 상황에 맞춰 짚어줍니다.

STEP 2. 호스팅에 연결하고 배포 (Vercel 예시)

1️⃣ vercel.com → Continue with GitHub로 가입(카드 X)

2️⃣ Add New Project → 내 저장소 목록에서 방금 올린 앱 Import

3️⃣ (필요 시) 환경변수 입력 → Deploy 클릭

4️⃣ 1~2분 뒤 https://내앱.vercel.app 주소로 전 세계에 공개!

Netlify·Cloudflare Pages도 거의 동일합니다. "GitHub 연결 → 저장소 선택 → Deploy" 3단계 흐름은 어디나 같아요. 한 번 익히면 전부 통합니다.

놓치기 쉬운 꿀팁

🔑 환경변수로 API 키 넣기

Supabase·NVIDIA 키 같은 비밀값은 코드에 박지 말고 호스팅의 Environment Variables 설정란에 넣으세요. 지난 백엔드 글 /153의 키를 여기에 등록하면 배포판에서 안전하게 연결됩니다.

👀 PR 프리뷰 — 배포 전 미리보기

GitHub에서 Pull Request를 열 때마다 호스팅이 그 버전을 별도 미리보기 주소로 자동 배포해 줍니다. 본 사이트에 반영하기 전에 안전하게 확인할 수 있어요.

🌐 내 도메인 연결

.vercel.app 대신 직접 산 도메인(예: myapp.com)도 설정에서 몇 분이면 연결됩니다. 무료 플랜에서도 커스텀 도메인은 가능해요.

주의사항

💼 Vercel 무료(Hobby)는 상업적 이용 금지. 수익이 나는 앱은 유료(월 $20~) 또는 상업용 허용 서비스(Cloudflare·Netlify)로 가세요.

📊 무료 한도(대역폭·빌드·함수 호출)를 넘으면 일시 중단되거나 유료 전환이 필요해요. 개인·학습용엔 넉넉합니다.

🔒 배포 전 비밀키가 코드에 남아있지 않은지 다시 확인. (실수 7가지 /146)

자주 묻는 질문

Q. 셋 중 뭘 골라야 하나요?

Next.js 앱이면 Vercel, 단순 사이트면 Netlify, 트래픽·상업용이 걱정이면 Cloudflare Pages. 처음엔 아무거나 골라 일단 배포해 보는 게 제일 중요해요. 셋 다 나중에 옮기기 쉽습니다.

Q. HTML 파일 하나짜리도 배포되나요?

네, 정적 사이트는 셋 다 완벽 지원합니다. 바이브코딩으로 만든 단일 페이지·간단한 게임도 그대로 올리면 바로 공유 가능한 주소가 나와요.

Q. GitHub을 꼭 써야 하나요?

가장 편한 길이라 추천합니다(push하면 자동 배포). CLI로 직접 올리는 방법도 있지만, GitHub 연동이 이후 관리·프리뷰까지 자동이라 초보에게 더 좋아요.

✨ 정리 — GitHub push → 저장소 연결 → 무료 HTTPS 주소. 이 흐름이면 오늘 만든 앱을 세상에 공개할 수 있어요. 챗봇(/151)·백엔드(/153)에 이어 배포까지 — 이제 진짜 풀스택 바이브코더입니다.

---

출처: Vercel 공식 요금제·한도 문서(Hobby plan), Netlify·Cloudflare Pages 무료 티어 안내(2026 기준). 무료 한도·상업용 정책은 각 서비스 정책에 따라 바뀔 수 있으니 배포 시점의 공식 페이지를 확인하세요.