Vercel vs Netlify vs Cloudflare Pages: 프론트엔드 배포 플랫폼 비교

Prologue: 배포하다 지갑 열었던 순간들

처음엔 Vercel이 전부였다. Next.js 공식 문서에서 "Deploy" 버튼 누르면 끝. 마법 같았다. 그런데 두 번째 프로젝트를 배포하려는데 빌드 시간 제한이 걸렸다. 무료 플랜의 벽이었다. 그때 Netlify를 만났고, 나중엔 Cloudflare Pages까지 쓰게 됐다.

세 플랫폼 모두 "Git push하면 자동 배포"라는 같은 약속을 하지만, 실제로 써보니 전혀 다른 도구들이었다. Vercel은 스위스 아미 나이프처럼 정교했고, Netlify는 레고 블록처럼 확장 가능했고, Cloudflare Pages는 F1 레이싱카처럼 빨랐다.

6개월간 세 플랫폼을 번갈아 쓰면서 깨달았다. "어떤 게 최고냐"가 아니라 "언제 뭘 써야 하냐"가 진짜 질문이었다.

Aha!: 플랫폼마다 DNA가 다르다

처음엔 이해 못 했다. 왜 세 플랫폼이 공존하는지. 다 똑같은 거 아닌가? 프론트엔드 올리고 CDN으로 뿌리는 거 아닌가?

아니었다. 각 플랫폼의 출발점이 완전히 달랐다.

Vercel은 Next.js의 집이다. Next.js를 만든 회사가 만든 플랫폼이니 당연하다. ISR(Incremental Static Regeneration), Edge Runtime, Middleware 같은 Next.js의 고급 기능들이 Vercel에서만 제대로 작동한다. 다른 플랫폼에서도 Next.js를 돌릴 수 있지만, 마치 Mac용 앱을 Windows에서 돌리는 느낌이다.

Netlify는 Jamstack의 본거지다. 정적 사이트 생성기가 대세가 되기 전부터 이 방향을 밀어왔다. 그래서 React, Vue, Svelte, Astro 뭘 쓰든 똑같이 잘 돌아간다. 거기다 Forms, Identity, CMS 같은 부가 기능들이 풍부하다. 마치 종합 쇼핑몰 같다.

Cloudflare Pages는 CDN의 진화형이다. Cloudflare는 원래 세계에서 가장 큰 CDN 회사다. 전 세계 275개 도시에 서버가 있다. Pages는 이 인프라 위에 올라탄 거다. 당연히 속도가 압도적이다. 그리고 Workers와 통합되면서 Edge Computing의 강자가 됐다.

이 차이를 이해하는 순간, 선택이 명확해졌다.

진짜 써보니 보이는 것들 자세히 살펴보기

1. 무료 플랜의 현실

무료로 뭘 할 수 있는지가 사이드 프로젝트에선 가장 중요하다. 표로 정리하면 이렇다.

항목	Vercel	Netlify	Cloudflare Pages
빌드 시간	100시간/월	300분/월	500빌드/월 (시간 무제한)
대역폭	100GB/월	100GB/월	무제한
Serverless 실행	100GB-hours	125,000 요청/월	100,000 요청/일
팀 멤버	1명	무제한	무제한
동시 빌드	1개	1개	1개

처음엔 Vercel이 빌드 시간이 압도적으로 많아 보였다. 100시간이면 충분하지 않나? 근데 이게 함정이었다. 빌드 시간이 아니라 "GB-hours"라는 이상한 단위를 쓴다. 큰 프로젝트는 빌드 한 번에 몇 GB씩 먹는다. 실제로는 Netlify가 더 넉넉했다.

Cloudflare Pages의 "시간 무제한"은 정말 신선했다. 빌드가 1시간 걸리든 2시간 걸리든 상관없다. 대신 빌드 횟수로 제한한다. 하루에 20번 이상 배포하지 않으면 문제없다.

그리고 대역폭 무제한. 이게 진짜 게임 체인저다. 사이드 프로젝트가 갑자기 입소문 타서 트래픽이 폭증하면? Vercel이나 Netlify는 청구서 폭탄이다. Cloudflare는 신경 쓸 필요 없다.

// Vercel의 대역폭 초과 시나리오
// 100GB 무료 → 1TB = $40 추가 → 10TB = $400 추가
// 해커뉴스 프론트 찍히면 바로 이 정도 나온다

// Cloudflare는 1TB든 100TB든 추가 비용 없음

2. Next.js를 쓴다면 Vercel이 답인가?

Next.js 프로젝트를 Vercel에 배포하면 마법 같다. git push하면 끝. 환경 변수 설정도 GUI로 뚝딱. Preview 배포도 자동. Analytics도 기본 제공.

근데 세금이 있다. Success Tax라고 부르는 것.

Vercel의 Pro 플랜은 월 $20부터다. 괜찮아 보인다. 근데 팀원 1명 추가하면 +$20. 3명 팀이면 월 $60. 대역폭 초과하면 또 청구서 나온다. 프로젝트가 성공할수록 비용이 기하급수로 늘어난다.

그래서 요즘은 Next.js도 다른 곳에 배포하는 사람들이 많다. Netlify도 Next.js를 지원하고, Cloudflare도 Next.js 13+ 버전을 잘 돌린다. 완벽하진 않지만 80-90%는 문제없다.

// next.config.js
// Cloudflare Pages용 설정
module.exports = {
  output: 'export', // 정적 export
  images: {
    unoptimized: true, // Image Optimization은 안 됨
  },
}

// Vercel에서는 이런 설정 필요 없음
// 그냥 push하면 알아서 최적화

차이가 느껴진다. Vercel은 설정 없이 모든 게 작동한다. 다른 플랫폼은 타협이 필요하다. Image Optimization, ISR, Middleware 같은 고급 기능을 포기하거나 우회해야 한다.

내 기준은 이렇게 정리됐다.

• ISR이나 Edge Runtime이 필수면 Vercel
• 정적 사이트로 충분하면 Cloudflare Pages (빠르고 공짜)
• SSR이 필요하지만 비용이 부담되면 별도 호스팅 (Railway, Render 등)

3. Netlify의 숨은 강점

Netlify를 쓰다가 깨달았다. 이건 단순 배포 플랫폼이 아니었다. All-in-One 웹 개발 플랫폼이었다.

Netlify Forms는 진짜 편하다. HTML form에 data-netlify="true" 속성 하나만 추가하면 끝. 백엔드 없이 form 데이터를 받을 수 있다. Contact form, 뉴스레터 구독, 설문조사 같은 거 만들 때 엄청 빠르다.

<!-- Netlify Forms 예시 -->
<form name="contact" method="POST" data-netlify="true">
  <input type="text" name="name" />
  <input type="email" name="email" />
  <textarea name="message"></textarea>
  <button type="submit">보내기</button>
</form>

<!-- 이게 끝. 백엔드 코드 0줄 -->

Netlify Identity는 인증 시스템이다. Google, GitHub 로그인을 5분 만에 추가할 수 있다. JWT 토큰도 자동 발급. 작은 프로젝트에서 Auth0나 Clerk 쓰기 부담스러울 때 딱이다.

Netlify CMS는 Git 기반 CMS다. 마크다운 파일을 GUI로 편집할 수 있게 해준다. 블로그나 문서 사이트에 비개발자 에디터를 추가하고 싶을 때 좋다.

이런 기능들 때문에 Netlify는 스타트업의 MVP나 랜딩 페이지에 완벽하다. 빠르게 만들어서 검증하고, 필요하면 나중에 마이그레이션하면 된다.

4. Cloudflare Pages + Workers의 조합

Cloudflare Pages를 처음 썼을 때는 "그냥 빠른 정적 호스팅"이라고 생각했다. 근데 Workers와 결합하는 순간 차원이 달라졌다.

Workers는 Edge에서 돌아가는 서버리스 함수다. V8 엔진으로 돌아가서 콜드 스타트가 거의 없다(0-5ms). Node.js 런타임보다 훨씬 빠르다.

// Cloudflare Workers 예시
export default {
  async fetch(request: Request): Promise<Response> {
    const url = new URL(request.url);

    // API 요청을 가로채서 캐싱
    if (url.pathname.startsWith('/api/')) {
      const cache = caches.default;
      let response = await cache.match(request);

      if (!response) {
        response = await fetch(request);
        // 1시간 캐싱
        const cacheResponse = new Response(response.body, response);
        cacheResponse.headers.set('Cache-Control', 'max-age=3600');
        await cache.put(request, cacheResponse);
      }

      return response;
    }

    return fetch(request);
  }
}

이걸로 할 수 있는 게 많다.

• A/B 테스팅: Edge에서 사용자를 그룹별로 분기
• 지역별 콘텐츠: 요청 국가에 따라 다른 페이지 제공
• API 캐싱: 외부 API 호출을 Edge에서 캐싱
• 인증 레이어: JWT 검증을 Edge에서 처리

가장 인상적이었던 건 속도였다. Vercel Edge Functions도 빠르지만, Cloudflare는 다른 레벨이다. 전 세계 어디서든 20-50ms 응답 시간이 나온다. 이유는 간단하다. Cloudflare의 네트워크가 지구상에서 가장 촘촘하기 때문이다.

5. 환경 변수와 시크릿 관리

세 플랫폼 모두 환경 변수를 GUI로 관리할 수 있다. 근데 세부 동작이 다르다.

Vercel은 Preview, Development, Production을 구분한다. 같은 변수를 환경별로 다르게 설정할 수 있다. 그리고 CLI로 로컬에서 가져올 수도 있다.

# Vercel 환경 변수 로컬에서 가져오기
vercel env pull .env.local

Netlify는 Context별로 나뉜다. Production, Deploy Preview, Branch Deploy 각각 다른 값을 쓸 수 있다. 그리고 .toml 파일로 관리할 수도 있어서 Git에 커밋할 수 있다(비밀 아닌 것만).

# netlify.toml
[build.environment]
  NODE_VERSION = "18"
  NEXT_PUBLIC_API_URL = "https://api.example.com"

[context.production.environment]
  NEXT_PUBLIC_API_URL = "https://api.production.com"

[context.deploy-preview.environment]
  NEXT_PUBLIC_API_URL = "https://api.staging.com"

Cloudflare Pages는 Workers Secrets와 통합된다. KV, Durable Objects, R2 같은 Cloudflare 스토리지에 바로 연결할 수 있다. 근데 UI가 좀 복잡하다. Wrangler CLI를 써야 할 때가 많다.

팁: 민감한 API 키는 절대 클라이언트에 노출하지 마라. NEXT_PUBLIC_ 같은 prefix가 붙으면 번들에 포함된다. 대신 서버리스 함수나 Edge Function에서 처리하라.

6. 프리뷰 배포와 협업

세 플랫폼 모두 PR마다 자동으로 Preview URL을 생성한다. 이게 없던 시절로 돌아갈 수 없다. 디자이너나 PM한테 "localhost:3000 확인해주세요" 대신 URL 하나만 던지면 된다.

Vercel의 Preview는 프로덕션과 완전히 동일한 환경이다. Environment Variables도 별도로 설정할 수 있다. 댓글 기능도 있어서 디자인 피드백받기 좋다.

Netlify는 Deploy Preview마다 별도 로그를 볼 수 있다. 빌드가 왜 실패했는지 추적하기 편하다. 그리고 Branch Deploy라는 기능이 있어서 특정 브랜치를 계속 배포 상태로 유지할 수 있다.

Cloudflare Pages의 Preview는 기본 기능만 있다. URL 생성하고 끝. 댓글이나 고급 기능은 없다. 심플하다는 장점이자 단점.

팀으로 일한다면 Vercel이나 Netlify가 낫다. 혼자 하거나 작은 팀이면 Cloudflare도 충분하다.

7. 성공했을 때의 비용 (Success Tax)

사이드 프로젝트가 성공해서 트래픽이 폭증하면? 이때부터 진짜 차이가 난다.

Vercel의 가격 정책은 공격적이다. Pro 플랜($20/user)까지는 괜찮은데, Enterprise로 넘어가면 협상이 필요하다. 중간 단계가 없다. 월 방문자 100만 정도면 최소 월 $200-500은 각오해야 한다.

Netlify도 비슷하다. Pro 플랜이 $19/user. 대역폭 추가는 $55/100GB. 트래픽 많으면 금방 비싸진다.

Cloudflare Pages는 다르다. Pro 플랜이 월 $20인데 팀 전체에 대한 가격이다. 대역폭은 무제한. Workers 호출만 과금된다(무료 10만 요청/일 초과 시). 스타트업이 Scale up할 때 가장 부담 없다.

// 월 방문자 100만, 평균 페이지 크기 2MB 가정

// Vercel
// 100GB 무료 → 1TB 사용 시 약 $200-400 청구

// Netlify
// 100GB 무료 → 1TB 사용 시 약 $495 청구 ($55 × 9)

// Cloudflare Pages
// 무제한 대역폭 → $0 추가 비용
// Workers 호출 300만 건 → $15 정도

이 차이를 알고 나면 선택이 명확해진다. 트래픽 예측이 어려우면 Cloudflare. 확실히 성장 가능성이 보이고 투자받았으면 Vercel이나 Netlify.

8. 커스텀 도메인과 SSL

세 플랫폼 모두 커스텀 도메인 연결은 쉽다. DNS 레코드 하나 추가하면 끝. SSL 인증서도 자동 발급(Let's Encrypt).

차이는 도메인이 어디 있느냐다.

Cloudflare에 도메인이 있으면 Pages 연결이 즉시 완료된다. 같은 시스템이라 당연하다. 다른 곳(Namecheap, GoDaddy)에 있으면 CNAME 추가해야 한다.

Vercel이나 Netlify는 도메인 위치 상관없이 똑같다. CNAME이나 A 레코드 추가.

팁: 도메인을 Cloudflare로 옮기는 걸 추천한다. 무료고, DNS가 빠르고, 방화벽 기능도 있다. 그리고 Pages, Workers, R2 같은 서비스들과 통합이 매끄럽다.

9. 프레임워크 지원 범위

Vercel:

• Next.js (당연히 최고)
• React, Vue, Angular, Svelte
• Astro, Nuxt, SvelteKit, Remix

Netlify:

• 거의 모든 정적 사이트 생성기
• Next.js (Essential Next.js plugin 필요)
• Gatsby, Hugo, Jekyll, 11ty
• Astro, Nuxt, SvelteKit

Cloudflare Pages:

• Next.js (정적 export만)
• React, Vue, Svelte
• Astro, SvelteKit, Remix
• Hugo, Jekyll, 11ty

프레임워크 선택이 이미 됐다면 거기에 맞춰 플랫폼을 고르면 된다. Next.js의 고급 기능을 쓴다면 Vercel 외에는 선택지가 없다. Astro나 SvelteKit처럼 정적 생성이 주라면 Cloudflare가 최고다.

Summary: 프로젝트별 선택 가이드

6개월간 세 플랫폼을 번갈아 쓰면서 내린 결론은 이렇다.

Vercel을 선택해야 할 때

• Next.js 13+ App Router 쓰고 ISR, Edge Runtime 필요할 때
• 팀 협업이 많고 Preview 기능 중요할 때
• DX(Developer Experience)가 최우선일 때
• 비용 부담 없을 때 (투자받았거나 회사 프로젝트)

Netlify를 선택해야 할 때

• Forms, Identity, CMS 같은 부가 기능 필요할 때
• 다양한 프레임워크 혼용할 때
• 스타트업 MVP 빠르게 만들 때
• 정적 사이트 + 약간의 서버리스 함수면 충분할 때

Cloudflare Pages를 선택해야 할 때

• 속도가 가장 중요할 때
• 트래픽 예측이 어렵고 비용 걱정될 때
• Workers로 Edge Computing 활용하고 싶을 때
• 정적 사이트나 SPA(Single Page App)일 때
• 글로벌 서비스라 지연 시간이 critical할 때

내 현재 전략은 이렇다.

• 개인 블로그, 포트폴리오: Cloudflare Pages (무료, 빠름)
• Next.js 토이 프로젝트: Vercel (DX 최고)
• 클라이언트 랜딩 페이지: Netlify (Forms, CMS 편함)
• 성장 가능성 있는 SaaS: Cloudflare Pages + Workers (비용 예측 가능)

선택이 어렵다면? 일단 Cloudflare Pages로 시작하라. 무료고 빠르고 마이그레이션도 쉽다. 나중에 필요하면 옮기면 된다. 반대로 Vercel에서 Cloudflare로 옮기는 건 좀 귀찮다. 특히 Next.js 고급 기능 쓰고 있었다면.

결국 "완벽한 플랫폼"은 없다. 상황에 맞는 플랫폼이 있을 뿐이다. 내 프로젝트의 우선순위를 정하고, 거기 맞춰 고르면 된다. 그게 지난 6개월간 배운 가장 중요한 교훈이다.

---