초보도 10분이면 끝 — Vercel로 웹사이트 자동 배포하는 방법 총정리

내가 만든 웹사이트를 다른 사람도 볼 수 있게 하고 싶은데, 서버 설정이나 인프라 공부부터 해야 한다는 말에 막막함을 느낀 적 있으셨나요. 예전엔 배포가 진짜 그랬어요. 서버 직접 세팅하고, 방화벽 열고, 도메인 연결하고, SSL 인증서도 따로 발급받아야 했으니까요. Vercel은 그 복잡한 과정을 GitHub 연동 하나로 압축해놓은 플랫폼입니다. 코드를 GitHub에 push하는 순간 자동으로 빌드되고 배포까지 완료돼요. HTTPS 적용, 글로벌 CDN 배포, 미리보기 URL 생성까지 전부 자동입니다. 초보자도 처음 배포까지 10분이면 충분하고, Next.js나 React 프로젝트라면 특히 궁합이 잘 맞아요.

📋 목차

1. Vercel이란 — 왜 개발자들이 선택하나
2. GitHub 연동부터 첫 배포까지 — 단계별 방법
3. 무료 플랜 vs 유료 플랜 — 뭐가 다른가
4. 배포 이후 꼭 알아야 할 실전 기능
5. 정리 — 이런 분께 추천합니다

Vercel이란 — 왜 개발자들이 선택하나

Vercel은 프론트엔드 자동 배포 플랫폼입니다.
Next.js를 직접 만든 회사로, GitHub 연동 하나로 빌드·배포·HTTPS·CDN을 전부 자동으로 처리해줍니다.
2026년 기준 기업가치 93억 달러, 개인 프로젝트는 Hobby 플랜으로 무료 사용 가능.

Vercel은 2015년 ZEIT라는 이름으로 시작해 2020년 지금의 이름으로 바뀐 프론트엔드 배포 플랫폼입니다. Next.js를 직접 만들고 유지하는 회사이기도 해서, Next.js 프로젝트 배포에 가장 최적화된 환경을 제공합니다.

핵심은 Git 연동 자동 배포예요. GitHub, GitLab, Bitbucket 중 하나와 연결해두면 특정 브랜치에 코드가 push될 때마다 Vercel이 자동으로 빌드와 배포를 처리합니다. main 브랜치에 머지하면 프로덕션이 업데이트되고, 다른 브랜치에 push하면 미리보기용 URL이 따로 생성되는 구조예요.

지원 프레임워크도 Next.js에 국한되지 않습니다. React, Vue, Svelte, Nuxt, Remix, Astro 등 주요 프론트엔드 프레임워크를 프레임워크 자동 감지 기능으로 설정 없이 바로 배포할 수 있어요. 코드만 올리면 Vercel이 어떤 프레임워크인지 파악해서 npm install, npm run build, 출력 디렉토리까지 알아서 설정해줍니다.

GitHub 연동부터 첫 배포까지 — 단계별 방법

Vercel 배포 흐름은 단순합니다. GitHub 레포지토리를 Vercel에 연결하고 Import 버튼 하나 누르면 끝이에요.

🚀 Vercel 첫 배포 순서

① vercel.com 접속 → GitHub 계정으로 로그인
별도 가입 없이 GitHub 소셜 로그인으로 즉시 시작 가능

② Add New Project → GitHub 레포지토리 선택
특정 레포만 권한 부여하거나 전체 레포 접근 허용 중 선택

③ 프레임워크 자동 감지 확인 → 환경 변수 입력 (있다면)
빌드 커맨드·출력 디렉토리 자동 설정, .env 내용은 여기서 입력

④ Deploy 버튼 클릭 → 1~3분 후 배포 완료
프로젝트명.vercel.app 주소가 자동 생성, HTTPS 자동 적용

이후로는 GitHub에 push할 때마다 자동 재배포가 됩니다. 별도 배포 명령어를 실행하거나 서버에 접속할 필요가 없어요.

⚠️ 환경 변수 설정 시 주의점

NEXT_PUBLIC_ 접두사가 붙은 변수 → 클라이언트 브라우저에 노출됨
API 키, DB 연결 정보 등 민감한 값 → 접두사 없이 서버 사이드 전용으로 설정
.env 파일은 절대 GitHub에 올리지 말고, Vercel 대시보드 환경 변수로만 관리

무료 플랜 vs 유료 플랜 — 뭐가 다른가

Vercel 무료 플랜인 Hobby 플랜과 월 20달러 Pro 플랜의 차이를 정리했습니다. 사이드 프로젝트라면 Hobby 플랜으로 충분한 경우가 많아요.

항목	Hobby 플랜 (무료)	Pro 플랜 (월 $20)
상업적 사용	불가	가능
대역폭	월 100GB	월 1TB
서버리스 실행	월 100GB-시간	월 1000GB-시간
팀 협업	개인만	팀원 추가 가능
커스텀 도메인	가능	가능
자동 배포	가능	가능
미리보기 URL	가능	가능

개인 포트폴리오, 블로그, 토이 프로젝트는 Hobby 플랜으로 운영하다가 수익이 생기거나 팀 협업이 필요해지면 Pro로 전환하는 게 일반적인 패턴이에요. 이미지 최적화와 CDN 캐싱을 잘 활용하면 월 수십만 PV까지도 무료 한도 안에서 운영 가능합니다.

배포 이후 꼭 알아야 할 실전 기능

배포 이후 실전에서 자주 쓰는 기능 두 가지가 있습니다.

🌐 커스텀 도메인 연결

프로젝트 → Settings → Domains 메뉴에 도메인 입력 → Vercel이 DNS 설정 방법 안내 → 도메인 등록 업체에서 CNAME 레코드 설정 → 완료. SSL 인증서는 Vercel이 자동 발급해서 수 분 안에 HTTPS가 붙습니다.

👁️ 미리보기 배포 (Preview Deployment)

main이 아닌 브랜치에 push하거나 Pull Request를 열면 해당 변경 사항이 독립된 URL로 자동 배포됩니다. 팀원에게 링크 하나를 공유하면 실제 동작하는 환경에서 리뷰할 수 있어요. AWS나 GCP에서 직접 인프라를 구성하면 프리뷰 환경 하나 만드는 데도 상당한 설정이 필요한데, Vercel은 브랜치 push만으로 자동으로 처리해줍니다.

실제로 처음 배포를 끝내고 나면 설정이 너무 적어서 뭔가 빠진 게 아닌가 싶은 느낌이 들 정도예요. 그게 Vercel이 의도한 경험이기도 합니다.

정리 — 이런 분께 추천합니다

Vercel이 잘 맞는 상황:

✅ 처음으로 웹사이트를 인터넷에 공개해보고 싶은 초보자
✅ Next.js, React 기반 프로젝트를 빠르게 배포하고 싶은 개발자
✅ 서버 설정이나 인프라 관리 없이 코드만 집중하고 싶은 분
✅ 팀원과 PR 단위로 미리보기 링크를 공유하며 리뷰하는 환경이 필요한 팀
✅ 개인 포트폴리오·블로그를 무료로 배포·운영하고 싶은 분

Vercel은 배포를 단순하게 만든 게 핵심 가치입니다. 서버 설정, SSL 발급, CDN 구성 같은 인프라 작업을 전부 플랫폼이 대신해주고, 개발자는 코드만 push하면 되는 구조예요. Hobby 플랜은 개인 비상업적 프로젝트에 한해 무료로 사용 가능하고, 수익이 발생하거나 팀으로 운영하게 되면 Pro 플랜 전환이 필요합니다. 처음 웹사이트를 세상에 공개해보고 싶다면, Vercel이 가장 빠른 길입니다.