웹사이트를 만들었는데 어디에 올려야 할지 모르겠다면, Vercel이 정답입니다. GitHub 계정만 있으면 5분 안에 내 사이트를 전 세계에 공개할 수 있습니다.
AWS나 카페24 같은 호스팅 서비스를 써본 분이라면, 설정이 얼마나 복잡한지 잘 아실 겁니다. 서버 설정, SSL 인증서, 도메인 연결까지 하나하나 직접 해야 하죠. Vercel은 이 과정을 전부 자동화해서, 코드만 올리면 알아서 배포해줍니다.
▲ Vercel 공식 사이트 메인 화면
Vercel이 뭔가요?
Vercel은 프론트엔드 웹사이트 배포에 특화된 클라우드 플랫폼입니다. Next.js를 만든 회사이기도 합니다. React, Vue, Svelte, 정적 HTML 등 거의 모든 프론트엔드 프레임워크를 지원합니다.
무료 플랜(Hobby)으로도 개인 프로젝트는 충분히 운영할 수 있습니다. 월 100GB 대역폭에, SSL 인증서도 자동 발급되고, CDN도 기본 제공됩니다.
▲ Vercel 요금제 — Hobby(무료)부터 Enterprise까지
Vercel 무료 배포 준비물
시작하기 전에 아래 두 가지만 준비하면 됩니다.
- GitHub 계정 — 없다면 github.com에서 무료로 만들 수 있습니다
- 배포할 프로젝트 — HTML 파일 하나짜리도 가능합니다
▲ GitHub에 코드를 올려두면 Vercel이 자동으로 가져갑니다
Step 1: Vercel 회원가입
1. vercel.com에 접속합니다
2. 우측 상단 "Sign Up" 클릭
3. "Continue with GitHub" 선택 — GitHub 계정으로 바로 로그인됩니다
4. 이메일 인증까지 완료하면 대시보드가 열립니다
별도의 결제 정보 입력 없이 바로 사용할 수 있습니다. Hobby 플랜은 완전 무료입니다.
Step 2: GitHub에 프로젝트 올리기
이미 GitHub에 레포지토리가 있다면 이 단계를 건너뛰어도 됩니다.
GitHub에 새 레포지토리를 만들고 프로젝트 파일을 올립니다. 터미널에서 아래 명령어를 실행하면 됩니다.
git init
git add .
git commit -m "first commit"
git remote add origin https://github.com/내아이디/내프로젝트.git
git push -u origin main
Git이 처음이라면 GitHub Desktop 앱을 사용하는 것도 방법입니다. 드래그 앤 드롭으로 파일을 올릴 수 있습니다.
Step 3: Vercel에서 프로젝트 가져오기
여기서부터가 진짜 배포입니다. 놀라울 정도로 간단합니다.
1. Vercel 대시보드에서 "Add New → Project" 클릭
2. GitHub 레포지토리 목록이 나타납니다
3. 배포할 레포지토리 옆의 "Import" 클릭
4. 프로젝트 설정 화면에서 프레임워크가 자동으로 감지됩니다
5. "Deploy" 버튼 클릭
▲ Vercel 배포 프로세스 — Import부터 Deploy까지 클릭 몇 번이면 끝
배포가 시작되면 빌드 로그가 실시간으로 보입니다. Next.js나 React 프로젝트는 빌드 시간이 보통 30초~2분 정도 걸립니다. 정적 HTML이라면 10초도 안 걸립니다.
Step 4: 배포 완료 — 내 사이트 확인
배포가 끝나면 프로젝트명.vercel.app 형태의 URL이 자동 생성됩니다. 이 주소로 바로 접속할 수 있습니다.
SSL 인증서(https)는 자동으로 발급됩니다. CDN도 전 세계에 분산 배치되어 있어서 어디서 접속해도 빠릅니다.
▲ Vercel 공식 문서 — 처음 시작하는 분들을 위한 가이드
자동 배포 설정 (Git Push = 자동 업데이트)
Vercel의 가장 편한 기능이 바로 이겁니다. GitHub에 코드를 push하면 Vercel이 자동으로 감지해서 다시 배포합니다. 수동으로 배포 버튼을 누를 필요가 없습니다.
브랜치별로 프리뷰 배포도 자동 생성됩니다. PR을 열면 해당 브랜치의 프리뷰 URL이 만들어져서, 팀원들이 머지 전에 미리 확인할 수 있습니다.
커스텀 도메인 연결하기
기본 제공되는 .vercel.app 도메인 대신 나만의 도메인을 연결할 수도 있습니다.
1. Vercel 프로젝트 설정 → Domains 탭으로 이동
2. 도메인 주소 입력 (예: mysite.com)
3. DNS 설정에서 CNAME 또는 A 레코드를 Vercel이 알려주는 값으로 변경
4. SSL 인증서가 자동 발급됩니다
▲ 커스텀 도메인 설정 방법 — DNS만 연결하면 끝
Cloudflare에서 도메인을 관리하고 있다면 연결이 더 쉽습니다. Nameservers를 Vercel로 바꾸는 방법도 있지만, 보통은 CNAME 레코드만 추가하면 됩니다.
Vercel 무료 플랜 한도 정리
Hobby(무료) 플랜에서 사용할 수 있는 주요 한도입니다.
- 배포 횟수: 하루 100회
- 대역폭: 월 100GB
- 빌드 시간: 월 6,000분
- Serverless Function: 실행 시간 10초 제한
- 프로젝트 수: 무제한
- 팀원: 1명 (개인만)
개인 포트폴리오, 블로그, 사이드 프로젝트라면 이 한도를 넘길 일이 거의 없습니다.
Serverless Functions 활용하기
Vercel은 프론트엔드 배포뿐만 아니라, 백엔드 API도 만들 수 있습니다. 프로젝트 루트에 /api 폴더를 만들고 그 안에 JavaScript/TypeScript 파일을 넣으면, 자동으로 API 엔드포인트가 생성됩니다.
▲ Serverless Functions — /api 폴더에 파일만 넣으면 API 완성
// api/hello.js
export default function handler(req, res) {
res.status(200).json({ message: 'Hello from Vercel!' });
}
이렇게 만든 API는 https://내사이트.vercel.app/api/hello로 바로 호출할 수 있습니다. DB 연결이나 외부 API 호출에 유용합니다.
Vercel + Next.js 조합이 강력한 이유
▲ Next.js 공식 사이트 — Vercel이 직접 만든 React 프레임워크
Vercel이 Next.js를 직접 만들었기 때문에, 두 가지를 함께 사용하면 최적의 성능을 낼 수 있습니다.
- ISR (증분 정적 재생성) — 정적 페이지를 실시간으로 업데이트
- Edge Functions — 사용자와 가장 가까운 서버에서 실행
- Image Optimization — 이미지 자동 최적화 및 WebP 변환
- Analytics — 실제 사용자 성능 데이터 수집
Analytics로 사이트 성능 확인하기
▲ Vercel Analytics — 방문자 수, 로딩 속도 등을 한눈에 확인
Vercel에서 제공하는 Analytics를 활성화하면 페이지 로딩 속도, 방문자 수, 지역별 접속 현황 등을 확인할 수 있습니다. Google Analytics와 별개로 동작하며, Core Web Vitals 점수도 자동으로 측정됩니다.
자주 묻는 질문 (FAQ)
Q. Vercel 무료 플랜으로 상용 서비스를 운영할 수 있나요?
A. Hobby 플랜은 개인·비상업적 프로젝트용입니다. 상용 서비스라면 Pro 플랜(월 $20)을 사용해야 합니다.
Q. Vercel 말고 무료 배포 대안이 있나요?
A. Netlify, Cloudflare Pages, GitHub Pages 등이 있습니다. 정적 사이트라면 GitHub Pages가, SSR이 필요하면 Vercel이나 Netlify가 좋습니다.
Q. 백엔드(DB, 인증)도 Vercel에서 할 수 있나요?
A. Serverless Functions + Vercel Postgres/KV를 조합하면 풀스택 앱도 가능합니다. 단, 복잡한 백엔드라면 별도 서버를 추천합니다.
Q. 배포 실패하면 어떻게 하나요?
A. 빌드 로그를 확인하면 에러 원인이 나옵니다. 대부분 패키지 설치 오류나 환경 변수 누락입니다. 이전 성공한 배포로 즉시 롤백도 가능합니다.
Q. React가 아닌 프로젝트도 배포할 수 있나요?
A. 물론입니다. Vue, Svelte, Astro, Hugo, 순수 HTML/CSS/JS 등 거의 모든 프레임워크를 지원합니다.
▲ Vercel Templates — 다양한 프레임워크의 시작 템플릿을 제공
마무리
Vercel을 사용하면 서버 설정, SSL, CDN 같은 복잡한 인프라 작업을 전혀 신경 쓸 필요가 없습니다. GitHub에 코드를 push하는 것만으로 전 세계에 사이트가 배포됩니다.
특히 포트폴리오 사이트, 개인 블로그, 사이드 프로젝트를 빠르게 공개하고 싶다면 Vercel만한 선택지가 없습니다. 무료로 시작해서 트래픽이 늘면 그때 유료로 전환하면 됩니다.
이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
'개발 도구 & 팁' 카테고리의 다른 글
| 무료 디자인 시스템 추천 TOP 7 — React 개발자를 위한 2026년 가이드 (0) | 2026.03.07 |
|---|---|
| GitHub Copilot 무료 대안 추천 TOP 5 — 돈 안 내고 AI 코딩하는 법 (2026) (0) | 2026.03.04 |
| 무료 디자인 시스템 추천 TOP 5 — 개발자를 위한 UI 키트 비교 (2026) (0) | 2026.02.28 |
| Vercel 무료 배포 방법 — 5분이면 내 사이트가 세상에 공개된다 (0) | 2026.02.28 |
| GitHub Copilot vs Cursor AI, 직접 써보고 비교한 솔직 후기 (2026) (0) | 2026.02.26 |