Vercel 무료 배포 방법 — 5분이면 내 사이트가 세상에 공개된다

"내가 만든 프로젝트, 어떻게 하면 세상에 공개할 수 있을까?"

개발 입문자라면 한 번쯤 고민해봤을 겁니다. AWS? 도메인 설정? SSL? 서버 관리? 하나씩 따라가다 보면 배포보다 설정에 시간을 더 쓰게 되죠.

Vercel은 이 모든 과정을 깃허브 연동 한 번이면 끝내주는 플랫폼입니다. 무료 플랜으로도 개인 포트폴리오, 사이드 프로젝트, 블로그까지 충분히 운영할 수 있고요.

이 글에서는 Vercel 무료 배포 방법을 실제 화면과 함께 A부터 Z까지 정리했습니다.

▲ Vercel 공식 홈페이지 — "Build and deploy the best web experiences"

1. Vercel이란? 왜 무료 배포에 최적인가

Vercel은 프론트엔드 배포에 특화된 클라우드 플랫폼입니다. Next.js를 만든 회사이기도 하죠. 핵심 장점을 정리하면:

• GitHub/GitLab 연동 — 푸시하면 자동 배포
• 글로벌 CDN — 전 세계 어디서든 빠르게 로딩
• 무료 SSL — HTTPS 자동 적용
• 프리뷰 배포 — PR마다 별도 URL 생성
• 서버리스 함수 — API 엔드포인트도 무료로 가능

▲ Vercel 요금제 — Hobby 플랜은 완전 무료

Hobby(무료) 플랜으로도 월 100GB 대역폭, 서버리스 함수 실행, 커스텀 도메인 연결이 전부 가능합니다. 개인 프로젝트에는 이것만으로 충분하고 남습니다.

2. 사전 준비 — GitHub 계정과 프로젝트

Vercel 배포에 필요한 건 딱 두 가지입니다:

1. GitHub 계정 (GitLab, Bitbucket도 가능)
2. 배포할 프로젝트 레포지토리

▲ 배포할 프로젝트가 GitHub에 올라가 있어야 합니다

아직 레포가 없다면, 로컬 프로젝트 폴더에서 아래 명령어를 실행하세요:

git init
git add .
git commit -m "Initial commit"
git remote add origin https://github.com/YOUR_USERNAME/YOUR_REPO.git
git push -u origin main

3. Vercel 가입 및 GitHub 연동 (30초)

Vercel 가입은 정말 간단합니다.

1. vercel.com 접속
2. "Sign Up" → "Continue with GitHub" 클릭
3. GitHub 권한 승인 → 끝

별도 회원가입 폼 없이 GitHub OAuth로 바로 연결됩니다. 이메일 인증도 필요 없고요.

4. 새 프로젝트 생성 — Import Git Repository

▲ Import Git Repository 화면에서 배포할 레포를 선택합니다

가입 후 대시보드에서 "Add New → Project"를 클릭하면 위 화면이 나옵니다.

1. 연결된 GitHub 계정의 레포 목록이 표시됩니다
2. 배포할 레포지토리 옆의 "Import" 클릭
3. 프레임워크 자동 감지 (Next.js, React, Vue 등)
4. 환경 변수가 필요하면 여기서 추가
5. "Deploy" 클릭 — 끝!

5. 첫 배포 완료! — 자동으로 일어나는 일들

▲ Vercel의 배포 프로세스 개요

Deploy 버튼을 누르면 Vercel이 자동으로 처리하는 것들:

• ✅ 프로젝트 빌드 (npm run build 등)
• ✅ 글로벌 CDN에 배포
• ✅ your-project.vercel.app 도메인 자동 할당
• ✅ SSL(HTTPS) 자동 적용
• ✅ GitHub webhook 등록 → 이후 푸시마다 자동 재배포

빌드 시간은 프로젝트 규모에 따라 다르지만, 간단한 React 앱이라면 30초~1분이면 끝납니다.

6. Git Push = 자동 배포 (CI/CD)

▲ Git 연동 배포 — 코드 푸시하면 알아서 배포됩니다

첫 배포 이후가 진짜 편한 부분입니다. 코드 수정 후:

git add .
git commit -m "Update homepage design"
git push

이 세 줄이면 자동으로 새 버전이 배포됩니다. 별도의 배포 명령이나 FTP 업로드 같은 건 필요 없습니다.

PR(Pull Request)을 만들면 프리뷰 URL도 자동 생성돼서, 팀원에게 "이거 한번 봐줘" 하고 링크만 보내면 됩니다.

7. 커스텀 도메인 연결하기

▲ 커스텀 도메인 연결 가이드

your-project.vercel.app 대신 자기만의 도메인을 쓰고 싶다면:

1. 프로젝트 Settings → Domains
2. 도메인 입력 (예: mysite.com)
3. 도메인 등록 업체에서 DNS 레코드 수정 (CNAME 또는 A 레코드)
4. SSL 자동 발급 완료

도메인만 별도 구매하면 되고 (Namecheap, Cloudflare 등에서 연 $10 내외), Vercel 쪽 설정은 무료입니다.

8. 지원하는 프레임워크 — Next.js만 되는 거 아닙니다

▲ Vercel 템플릿 갤러리 — 다양한 프레임워크 지원

Vercel은 Next.js 제작사이지만, 사실상 대부분의 프론트엔드 프레임워크를 지원합니다:

• ⚡ Next.js — 당연히 최적 지원
• ⚛️ React (CRA, Vite)
• 💚 Vue.js / Nuxt
• 🟠 Svelte / SvelteKit
• 🅰️ Angular
• 🚀 Astro
• 📄 정적 HTML/CSS/JS

프레임워크 자동 감지 기능이 있어서 별도 설정 없이 Import만 하면 알아서 빌드합니다.

9. 서버리스 함수로 백엔드도 무료

▲ Vercel Serverless Functions 문서

"프론트만 되는 거 아니야?" 하는 분들을 위해 — Vercel은 서버리스 함수(Serverless Functions)도 무료로 제공합니다.

Next.js의 /api 폴더에 파일을 만들면 자동으로 API 엔드포인트가 됩니다:

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello from Vercel!' })
}

DB 연결, 외부 API 호출, 인증 처리 등 간단한 백엔드 로직은 이걸로 충분히 처리할 수 있습니다.

10. Vercel 무료 플랜의 한계 — 알고 쓰면 문제없다

무료라고 아무 제한이 없진 않습니다. 주요 제한사항:

항목	Hobby (무료)	Pro ($20/월)
대역폭	100GB/월	1TB/월
빌드 시간	6,000분/월	24,000분/월
서버리스 실행	100GB-h/월	1,000GB-h/월
팀 멤버	1명 (개인)	무제한
상업적 사용	❌	✅

개인 포트폴리오, 사이드 프로젝트, 학습용이라면 Hobby 플랜으로 충분합니다. 다만 상업적 프로젝트는 Pro 이상이 필요하다는 점은 기억하세요.

마치며 — 배포가 두려우면 Vercel부터 시작하세요

▲ Vercel 공식 시작 가이드

정리하면 Vercel 무료 배포 과정은 이렇습니다:

1. GitHub에 프로젝트 올리기
2. Vercel 가입 (GitHub 연동)
3. Import → Deploy 클릭
4. 끝. 진짜 이게 전부입니다.

복잡한 서버 설정, SSH 접속, nginx 설정 같은 건 잊으세요. 코드에만 집중하고, 배포는 Vercel한테 맡기면 됩니다.

👉 Vercel 무료로 시작하기 →

---

이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.