프론트엔드 프로젝트를 배포할 때 Vercel, Netlify, Cloudflare Pages 중 어디를 선택해야 할까요? 실제 사용 경험을 바탕으로 비교해봅니다.
한눈에 비교
| 항목 | Vercel | Netlify | Cloudflare Pages |
|---|---|---|---|
| 무료 대역폭 | 100GB/월 | 100GB/월 | 무제한 |
| 빌드 시간 (무료) | 6,000분/월 | 300분/월 | 무제한 |
| 서버리스 함수 | Edge + Node | Node (AWS Lambda) | Workers (V8) |
| 정적 사이트 | ⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ | ⭐⭐⭐⭐⭐ |
| Next.js | ⭐⭐⭐⭐⭐ | ⭐⭐⭐ | ⭐⭐⭐⭐ |
| 가격 (Pro) | $20/멤버 | $19/멤버 | $25 (고정) |
Vercel
특징
Vercel은 Next.js의 제작사입니다. Next.js의 모든 기능을 가장 먼저, 가장 완벽하게 지원합니다.
장점
1. Next.js 완벽 지원
- ISR (Incremental Static Regeneration)
- Server Components
- App Router
- Edge Runtime
- 이미지 최적화
2. 개발자 경험
# 설치 없이 바로 배포
npx vercel
# 프리뷰 배포
git push # PR마다 자동 프리뷰 URL
3. Analytics & Speed Insights
- 실시간 성능 모니터링
- Web Vitals 추적
- 사용자 경험 분석
단점
- 무료 티어 제한 (대역폭, 빌드)
- Pro 이상에서 기능 잠금
- 팀 요금 = 멤버 × $20
가격표
| 플랜 | 가격 | 대역폭 | 빌드 | 함수 실행 |
|---|---|---|---|---|
| Hobby | 무료 | 100GB | 6,000분 | 100GB-hrs |
| Pro | $20/멤버 | 1TB | 24,000분 | 1,000GB-hrs |
| Enterprise | 문의 | 무제한 | 무제한 | 무제한 |
추천 대상
- Next.js 프로젝트 (필수 선택)
- 빠른 배포가 필요한 스타트업
- 프리뷰 기능이 중요한 팀
Netlify
특징
범용 JAMstack 플랫폼입니다. 정적 사이트, Gatsby, Hugo, Astro 등 다양한 프레임워크를 잘 지원합니다.
장점
1. 내장 기능들
<!-- 폼 처리 (서버 필요 없음) -->
<form name="contact" netlify>
<input name="email" type="email" />
<button type="submit">전송</button>
</form>
<!-- 제출된 폼은 Netlify 대시보드에서 확인 -->
2. Identity (인증)
// netlify-identity-widget
import netlifyIdentity from 'netlify-identity-widget'
netlifyIdentity.init()
netlifyIdentity.open() // 로그인 팝업
3. 분할 테스트 (A/B)
# netlify.toml
[[redirects]]
from = "/"
to = "/original"
status = 200
conditions = {Language = ["en"]}
[[redirects]]
from = "/"
to = "/variant-a"
status = 200
force = true
단점
- 무료 빌드 시간 300분 (매우 적음)
- Next.js 지원 불완전
- 함수 실행 제한
가격표
| 플랜 | 가격 | 대역폭 | 빌드 | 폼 제출 |
|---|---|---|---|---|
| Starter | 무료 | 100GB | 300분 | 100/월 |
| Pro | $19/멤버 | 1TB | 25,000분 | 무제한 |
| Business | $99/멤버 | 1.5TB | 25,000분 | 무제한 |
추천 대상
- 정적 사이트 (Hugo, Jekyll, Astro)
- 폼/인증이 필요한 간단한 프로젝트
- 비개발자도 쉽게 쓸 수 있는 팀
Cloudflare Pages
특징
Cloudflare의 거대한 글로벌 네트워크를 활용합니다. 무료 대역폭 무제한이 가장 큰 장점입니다.
장점
1. 무제한 대역폭
무료 플랜에서도 대역폭 무제한!
바이럴 트래픽도 요금 걱정 없음
2. Workers 통합
// functions/api/hello.ts
export const onRequest: PagesFunction = async (context) => {
return new Response(JSON.stringify({
message: 'Hello from Edge!',
country: context.request.cf?.country,
}))
}
3. 생태계
- D1: SQLite 기반 엣지 DB
- R2: S3 호환 스토리지 (이그레스 무료)
- KV: 글로벌 키-값 스토어
- Queues: 메시지 큐
- Durable Objects: 상태 관리
단점
- Next.js 지원 제한적 (일부 기능만)
- Workers 런타임 제약
- 빌드 로그/디버깅 불편
- 생태계 러닝커브
가격표
| 플랜 | 가격 | 대역폭 | 빌드 | Workers |
|---|---|---|---|---|
| Free | 무료 | 무제한 | 500/월 | 100,000req/일 |
| Pro | $25/월 | 무제한 | 5,000/월 | 10M req/월 |
추천 대상
- 대역폭이 중요한 프로젝트
- 글로벌 서비스 (300+ 엣지 노드)
- Cloudflare 생태계 활용
프레임워크별 추천
| 프레임워크 | 1순위 | 2순위 |
|---|---|---|
| Next.js | Vercel | Cloudflare |
| Astro | Cloudflare | Netlify |
| Remix | Cloudflare | Vercel |
| SvelteKit | Cloudflare | Vercel |
| Nuxt | Netlify | Cloudflare |
| Gatsby | Netlify | Vercel |
| Hugo/Jekyll | Cloudflare | Netlify |
실전 시나리오
시나리오 1: 개인 블로그
요구사항:
- 정적 사이트 (Hugo/Astro)
- 트래픽 예측 불가
- 비용 최소화
추천: Cloudflare Pages
- 무료 대역폭 무제한
- 빌드 500회/월 충분
- 글로벌 CDN
시나리오 2: SaaS 프로덕트
요구사항:
- Next.js App Router
- 서버 사이드 렌더링
- 분석/모니터링 필요
추천: Vercel
- Next.js 완벽 지원
- Analytics 내장
- 팀 협업 기능
시나리오 3: 마케팅 사이트
요구사항:
- 다양한 폼
- A/B 테스트
- CMS 연동
추천: Netlify
- 폼 처리 내장
- Split Testing
- CMS 통합 쉬움
시나리오 4: 글로벌 API
요구사항:
- 엣지에서 실행
- 데이터베이스 필요
- 글로벌 사용자
추천: Cloudflare
- 300+ 엣지 노드
- D1 + Workers
- 지연 시간 최소화
마이그레이션 난이도
Vercel → Netlify
# netlify.toml
[build]
command = "npm run build"
publish = ".next"
[[plugins]]
package = "@netlify/plugin-nextjs"
Vercel → Cloudflare
npm install @cloudflare/next-on-pages
# wrangler.toml
name = "my-nextjs-app"
compatibility_date = "2024-01-01"
compatibility_flags = ["nodejs_compat"]
2026년 트렌드
- Edge First: 세 플랫폼 모두 엣지 컴퓨팅 강화
- AI 통합: Vercel AI SDK, Workers AI 등
- 가격 경쟁: Cloudflare가 가격 파괴 주도
- 생태계 확장: DB, 스토리지, 큐 등 풀스택 지원
결론
💰 비용 우선: Cloudflare Pages
⚡ Next.js: Vercel
📝 정적 + 폼: Netlify
🌍 글로벌 엣지: Cloudflare
🎯 DX 우선: Vercel
개인 추천:
- Next.js 프로젝트 → Vercel (의심의 여지 없음)
- 정적 사이트 + 트래픽 불확실 → Cloudflare Pages
- 빠른 프로토타이핑 → Netlify (폼, 인증 내장)
- 비용 절감 필수 → Cloudflare Pages
세 플랫폼 모두 무료 티어가 있으니 직접 테스트해보는 것을 추천합니다.