웹사이트, 0원으로 배포하기 🚀

이 글이 다루는 것

HTML/CSS/JS로 만든 사이트를 서버 비용 0원으로 전 세계에 서비스하고, 내 도메인(https 포함)까지 붙이는 전 과정입니다. 실제로 CogPop을 이 방법으로 운영 중이며, 아래 내용은 전부 직접 밟아 본 단계입니다.

1. 왜 정적 사이트 + Vercel인가

• 정적 사이트(HTML/CSS/JS)는 서버가 필요 없어 무료 호스팅이 가능하고, 빠르고, 보안 이슈가 적습니다.
• Vercel 무료 티어는 개인 프로젝트에 충분한 트래픽을 제공하고, 글로벌 CDN·자동 HTTPS가 기본입니다.
• 로그인·데이터 저장이 필요하면 Supabase(무료) 같은 BaaS를 브라우저에서 직접 호출하면 됩니다 — 서버 없이도 리더보드까지 가능해요.

2. 배포 준비: 폴더 구조

루트에 index.html만 있으면 됩니다. 하위 폴더(css/, js/, images/)는 자유. 한 가지 함정 — 폴더에 server.js 같은 파일이 있으면 Vercel이 Node 앱으로 오인해 빌드 에러("No entrypoint found")가 납니다. 정적 사이트임을 명시하는 vercel.json을 루트에 만들어 두세요:

{ "version": 2, "builds": [{ "src": "**/*", "use": "@vercel/static" }] }

3. 배포하기 (2가지 방법)

• 드래그 앤 드롭 — vercel.com 가입 후 대시보드에 폴더를 끌어다 놓으면 끝. 제일 쉬움.
• CLI — npx vercel deploy --prod 한 줄. 수정→재배포 반복에 편합니다.

배포되면 프로젝트명.vercel.app 주소가 즉시 생깁니다.

4. 커스텀 도메인 연결 (제일 헷갈리는 부분)

도메인은 Cloudflare·Porkbun 등에서 연 1만~2만 원에 구매합니다. 연결 절차:

• Vercel 프로젝트 → Domains에 도메인 추가 → 안내되는 DNS 레코드 확인
• 도메인 구매처 DNS에 A 레코드 @ → 76.76.21.21, CNAME www → cname.vercel-dns.com 추가
• ⚠️ Cloudflare 사용자 필수: 레코드의 프록시(주황 구름)를 반드시 "DNS only(회색)"로 두세요. 주황이면 SSL 발급이 꼬여서 무한 리다이렉트가 납니다. "Proxying is required…" 경고가 떠도 무시하면 됩니다 — Vercel이 이미 CDN·DDoS 방어를 제공해요.

몇 분 내 HTTPS 인증서까지 자동 발급됩니다.

5. 배포 후 체크리스트

• 모든 페이지 <link rel="canonical">을 새 도메인으로
• sitemap.xml·robots.txt 만들고 Google Search Console에 제출
• 파비콘, OG 태그, 모바일 뷰 확인

비용 정리

호스팅 0원 + 도메인 연 ~15,000원 = 전부입니다. 트래픽이 아주 커지기 전까지는 추가 비용이 없습니다. 사이드 프로젝트를 미루는 이유 중 '비용'은 이제 없다고 봐도 됩니다.