[Vercel vs Cloudflare] 2026년 웹 배포 플랫폼 비교 - 어떤 걸 선택해야 할까

 

안녕하세요!

재아군의 관찰인생입니다.

 

2026년 현재, 웹 애플리케이션을 배포할 때 가장 많이 언급되는 두 플랫폼이 있습니다.

바로 Vercel과 Cloudflare입니다.

Next.js 생태계를 이끄는 Vercel과 글로벌 엣지 네트워크의 강자 Cloudflare — 둘 다 뛰어난 플랫폼이지만 철학과 강점이 완전히 다릅니다.

오늘은 실무 관점에서 이 두 플랫폼을 깊이 비교해보겠습니다.

 

 

---

 

1. Vercel vs Cloudflare란 무엇인가?

 

Vercel은 2020년 ZEIT에서 리브랜딩한 프론트엔드 클라우드 플랫폼입니다.

Next.js의 개발사로 유명하며, Git 기반 자동 배포와 서버리스 함수 실행 환경을 제공합니다. 2026년 기준 시리즈 D 펀딩까지 완료하며 기업 가치 약 50억 달러를 인정받았습니다.

 

Cloudflare는 원래 CDN과 DDoS 방어 서비스로 시작한 회사입니다. 2019년 Cloudflare Workers를 출시하면서 엣지 컴퓨팅 플랫폼으로 확장했고, 이후 Pages, R2, D1, Queues 등을 잇따라 출시하며 풀스택 배포 플랫폼으로 변모했습니다.

 

이 비교가 필요한 배경

 

기존 웹 배포 환경에서 개발자들이 겪던 문제는 크게 4가지였습니다.

 

1. 복잡한 인프라 설정: AWS EC2나 ECS를 직접 구성하려면 VPC, 로드밸런서, Auto Scaling 등 수십 가지 설정이 필요했습니다. 간단한 웹앱 하나 배포하는 데 인프라 엔지니어의 도움이 필수였습니다.
2. 느린 배포 사이클: 전통적인 CI/CD 파이프라인에서 Docker 빌드 → 이미지 푸시 → 롤링 업데이트까지 평균 15~20분이 소요되었습니다. 핫픽스 하나에도 긴 대기 시간이 발생했습니다.
3. 글로벌 성능 격차: 단일 리전에 서버를 두면 해외 사용자의 TTFB(Time to First Byte)가 500ms를 넘기기 일쑤였습니다. 멀티 리전 배포는 비용이 기하급수적으로 증가했습니다.
4. 예측 불가능한 비용: 트래픽 스파이크 시 오토스케일링 비용이 갑자기 치솟거나, 예상치 못한 데이터 전송 요금(egress fee)이 청구되는 문제가 빈번했습니다.

 

Vercel과 Cloudflare는 이 문제들을 각자의 방식으로 해결하며 2026년 웹 배포의 양대 산맥이 되었습니다.

 

 

---

 

2. 핵심 특징 & 기능 분석

 

2-1. 빌드 & 배포 파이프라인

 

Vercel은 프레임워크 자동 감지 기능이 핵심입니다.

Git 저장소를 연결하면 Next.js, Nuxt, SvelteKit, Astro 등을 자동으로 인식하고 최적의 빌드 설정을 적용합니다. vercel.json 없이도 대부분의 프로젝트가 즉시 배포됩니다.

 

Cloudflare Pages는 빌드 속도에서 강점을 보입니다. 2025년 도입된 빌드 캐시 v2와 병렬 빌드 파이프라인 덕분에, 동일 프로젝트 기준 Vercel 대비 평균 30~40% 빠른 빌드 시간을 기록합니다.

 

2-2. 엣지 컴퓨팅 모델

 

Vercel의 Edge Functions는 V8 Isolate 기반으로 동작하며 Node.js API의 상당 부분을 지원합니다. 2025년부터는 Edge Middleware에서 node:crypto, node:buffer 등 핵심 Node.js 모듈을 사용할 수 있게 되었습니다.

 

Cloudflare Workers는 V8 Isolate의 원조입니다.

콜드 스타트가 거의 없으며(평균 0~5ms), 전 세계 300개 이상의 데이터센터에서 실행됩니다.

Workers AI를 통해 엣지에서 직접 LLM 추론도 가능합니다.

 

2-3. 데이터 플랫폼

 

Vercel은 KV(Key-Value), Postgres(Neon 기반), Blob Storage를 자체 제공합니다.

Vercel Postgres는 서버리스 환경에 최적화된 커넥션 풀링을 기본 지원합니다.

 

Cloudflare는 KV, R2(S3 호환 오브젝트 스토리지), D1(SQLite 기반 분산 DB), Durable Objects, Queues, Hyperdrive(외부 DB 프록시)까지 훨씬 폭넓은 데이터 인프라를 제공합니다.

특히 R2는 egress 비용이 무료라는 파격적인 정책으로 주목받고 있습니다.

 

2-4. 프레임워크 호환성

 

Vercel은 당연히 Next.js와의 궁합이 최고입니다.

App Router, Server Actions, PPR(Partial Prerendering) 등 최신 기능을 가장 먼저, 가장 안정적으로 지원합니다.

 

Cloudflare는 프레임워크 중립적 접근을 취합니다.

Remix, Astro, Nuxt, SvelteKit, Hono 등 다양한 프레임워크를 공식 지원하며, 2025년 말 출시된 Workers Runtime for Next.js(OpenNext 기반)를 통해 Next.js도 Cloudflare에서 실행할 수 있게 되었습니다.

 

2-5. 관측성 & 분석

 

Vercel은 Web Analytics, Speed Insights, Log Drains를 제공합니다.

특히 Speed Insights는 실제 사용자 데이터(RUM)를 기반으로 Core Web Vitals를 실시간 모니터링할 수 있어 매우 실용적입니다.

 

Cloudflare는 Workers Analytics Engine을 통해 커스텀 메트릭을 수집할 수 있고, Logpush로 외부 시스템(Datadog, Splunk 등)에 로그를 실시간 전송할 수 있습니다.

 

 

---

 

3. 기술 아키텍처 & 동작 원리

 

두 플랫폼의 아키텍처 차이를 이해하면 어떤 상황에 어떤 플랫폼이 적합한지 명확해집니다.

 

구성 요소 비교

 

구성 요소	Vercel	Cloudflare
실행 환경	AWS Lambda + V8 Isolate (Edge)	V8 Isolate (Workers Runtime)
정적 자산 CDN	Vercel Edge Network (Fastly 기반)	Cloudflare CDN (자체 네트워크)
서버리스 함수	Serverless Functions (Node.js)	Workers (V8 Isolate)
엣지 미들웨어	Edge Middleware	Workers Routes
데이터베이스	Vercel Postgres (Neon)	D1 (SQLite), Hyperdrive
오브젝트 스토리지	Vercel Blob	R2 (S3 호환)
KV 저장소	Vercel KV (Upstash)	Workers KV
DNS	외부 DNS 사용	Cloudflare DNS (내장)
보안	기본 DDoS 방어	WAF, DDoS, Bot Management 통합

 

동작 흐름 비교

 

Vercel의 요청 처리 흐름을 살펴보겠습니다.

 

// Vercel: Next.js App Router 기반 배포 흐름
// vercel.json - 최소 설정으로 배포 가능
{
  "framework": "nextjs",
  "regions": ["icn1", "hnd1"],  // 서울, 도쿄 리전
  "functions": {
    "app/api/**/*.ts": {
      "memory": 1024,
      "maxDuration": 30
    }
  }
}

// middleware.ts - Edge Middleware에서 실행
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const country = request.geo?.country || 'KR';
  const locale = country === 'KR' ? 'ko' : 'en';
  
  // 지역 기반 라우팅 - 엣지에서 0ms 지연으로 처리
  if (request.nextUrl.pathname === '/') {
    return NextResponse.rewrite(
      new URL(`/${locale}/home`, request.url)
    );
  }
  
  // 응답 헤더에 캐시 제어 추가
  const response = NextResponse.next();
  response.headers.set('X-Edge-Region', request.geo?.region || 'unknown');
  return response;
}

export const config = {
  matcher: ['/((?!_next/static|_next/image|favicon.ico).*)'],
};

 

다음은 동일한 기능을 Cloudflare Workers로 구현한 예시입니다.

 

// Cloudflare Workers: wrangler.toml 기반 설정
// wrangler.toml
// name = "my-app"
// main = "src/worker.ts"
// compatibility_date = "2026-03-01"
// [vars]
// ENVIRONMENT = "production"
// [[d1_databases]]
// binding = "DB"
// database_name = "my-app-db"
// database_id = "xxxx-xxxx-xxxx"

// src/worker.ts - Workers 엔트리포인트
import { Hono } from 'hono';
import { cache } from 'hono/cache';

type Bindings = {
  DB: D1Database;
  ASSETS: Fetcher;
  MY_KV: KVNamespace;
};

const app = new Hono<{ Bindings: Bindings }>();

// 정적 자산 서빙 (Pages와 통합)
app.get('/assets/*', cache({ cacheName: 'assets', cacheControl: 'max-age=31536000' }));

// API 엔드포인트 - D1 데이터베이스 직접 접근
app.get('/api/posts', async (c) => {
  const { results } = await c.env.DB.prepare(
    'SELECT id, title, created_at FROM posts ORDER BY created_at DESC LIMIT 20'
  ).all();
  
  // KV에 캐시 저장 (60초 TTL)
  await c.env.MY_KV.put('posts:latest', JSON.stringify(results), {
    expirationTtl: 60,
  });
  
  return c.json({ posts: results });
});

// 지역 기반 라우팅 - cf 객체에서 국가 정보 직접 접근
app.get('/', (c) => {
  const country = c.req.raw.cf?.country || 'KR';
  const locale = country === 'KR' ? 'ko' : 'en';
  return c.redirect(`/${locale}/home`);
});

export default app;

 

설계 원칙의 차이

 

1. Vercel: "프레임워크 퍼스트" — 프레임워크(특히 Next.js)의 기능을 100% 활용할 수 있도록 인프라가 프레임워크에 맞춰져 있습니다.
2. Cloudflare: "프리미티브 퍼스트" — Workers, KV, R2, D1 등 기본 빌딩 블록을 제공하고, 개발자가 원하는 대로 조합하게 합니다.
3. Vercel: 중앙 집중형 컴퓨팅 — 서버리스 함수는 특정 리전에서 실행되고, Edge는 미들웨어 수준으로 제한됩니다.
4. Cloudflare: 완전 분산형 컴퓨팅 — 모든 코드가 전 세계 엣지에서 실행됩니다. 리전이라는 개념 자체가 없습니다.

 

---

 

4. 실무 활용 가이드

 

프로젝트 초기 설정

 

Vercel로 시작하기:

 

# Next.js 프로젝트 생성 및 Vercel 배포
npx create-next-app@latest my-app --typescript --tailwind --app
cd my-app

# Vercel CLI 설치 및 배포
npm i -g vercel
vercel login
vercel --prod

# 환경 변수 설정
vercel env add DATABASE_URL production
vercel env add API_SECRET production

# 도메인 연결
vercel domains add mydomain.com

 

Cloudflare로 시작하기:

 

# Cloudflare Pages + Workers 프로젝트 생성
npm create cloudflare@latest my-app -- --framework=hono
cd my-app

# D1 데이터베이스 생성
npx wrangler d1 create my-app-db
# wrangler.toml에 자동 추가됨

# R2 버킷 생성
npx wrangler r2 bucket create my-app-assets

# 로컬 개발
npx wrangler dev

# 배포
npx wrangler deploy

 

기존 환경에서 마이그레이션

 

단계	Vercel 마이그레이션	Cloudflare 마이그레이션
1단계	Git 저장소 연결 → 자동 감지	wrangler.toml 설정 작성
2단계	환경 변수 이전 (vercel env pull)	Secrets 등록 (wrangler secret put)
3단계	서버리스 함수 API 라우트 전환	Workers 엔드포인트로 API 전환
4단계	DNS 레코드 변경 + SSL 자동	DNS를 Cloudflare로 이전 + SSL 자동

 

팀 규모별 활용 팁

 

• 1~3인 스타트업: Vercel의 Hobby/Pro 플랜으로 시작하세요. 설정이 거의 필요 없어 제품 개발에 집중할 수 있습니다.
• 5~20인 성장기 팀: 비용 효율이 중요해지는 시점입니다. Cloudflare의 Workers Paid 플랜($5/월)이 압도적 가성비를 제공합니다.
• 20인 이상 조직: 두 플랫폼 모두 Enterprise 플랜에서 SLA, 전담 지원, SSO를 제공합니다. 기존 인프라와의 통합성을 기준으로 선택하세요.

 

---

 

5. 경쟁 기술 비교 분석

 

Vercel과 Cloudflare만 놓고 비교하면 시야가 좁아집니다.

주요 경쟁 플랫폼까지 함께 살펴보겠습니다.

 

항목	Vercel	Cloudflare	Netlify	AWS Amplify	Fly.io
주력 영역	프론트엔드 클라우드	엣지 컴퓨팅 + CDN	정적 사이트 + 서버리스	AWS 통합 풀스택	컨테이너 엣지 배포
서버리스 런타임	Node.js + Edge	V8 Isolate	Node.js (Deno)	Node.js	Docker 컨테이너
콜드 스타트	50~200ms (Lambda)	0~5ms (Isolate)	100~300ms	100~500ms	50~150ms
무료 티어 대역폭	100GB/월	무제한	100GB/월	15GB/월	160GB/월
빌드 시간 무료	6,000분/월	500회/월	300분/월	1,000분/월	N/A
데이터베이스	Postgres, KV	D1, KV, DO	Blob	DynamoDB 연동	Postgres (Fly)
오브젝트 스토리지	Blob	R2 (egress 무료)	Blob	S3 연동	Tigris
프레임워크 최적화	Next.js 최고	프레임워크 중립	범용	범용	범용
월 비용 (Pro)	$20/멤버	$5 (Workers Paid)	$19/멤버	사용량 과금	$0 + 사용량
엣지 로케이션	~100개	300개+	~100개	30개+	35개+

 

상황별 선택 가이드

 

• Next.js 풀스택 앱 → Vercel: App Router, Server Actions, ISR 등 Next.js의 모든 기능을 완벽하게 지원하는 유일한 플랫폼입니다.
• 비용 최적화가 핵심 → Cloudflare: Workers Paid $5/월로 하루 1000만 요청 처리가 가능합니다. R2의 egress 무료 정책은 미디어가 많은 서비스에 획기적입니다.
• 정적 사이트 + 간단한 폼 → Netlify: Netlify Forms, Identity 등 노코드 기능이 강점입니다.
• AWS 인프라 통합 → Amplify: 이미 AWS를 쓰고 있다면 가장 자연스러운 선택입니다.
• Docker 기반 백엔드 → Fly.io: Workers의 V8 제약이 불편하고, 풀 Node.js/Python 런타임이 필요하다면 Fly.io가 적합합니다.

 

---

 

6. 도입 시 베스트 프랙티스

 

5가지 핵심 원칙

 

원칙 1: 프로젝트 특성에 맞는 렌더링 전략 선택

 

Vercel에서는 페이지별로 SSG, SSR, ISR, PPR을 세밀하게 선택할 수 있습니다.

블로그 같은 콘텐츠는 SSG, 대시보드는 SSR, 상품 페이지는 ISR로 구성하세요.

Cloudflare에서는 정적 자산은 Pages로, 동적 API는 Workers로 분리하는 패턴이 효과적입니다.

 

원칙 2: 환경 변수 관리 체계화

 

두 플랫폼 모두 Preview/Production 환경을 분리할 수 있습니다.

시크릿은 반드시 플랫폼의 환경 변수 관리 기능을 사용하고, .env 파일을 Git에 커밋하지 마세요.

 

원칙 3: 캐싱 전략을 의식적으로 설계

 

Vercel의 Data Cache와 Cloudflare의 Cache API는 동작 방식이 다릅니다.

Vercel은 revalidate 옵션으로 ISR 캐시를 제어하고, Cloudflare는 Cache API로 Workers 레벨에서 직접 캐시를 관리합니다.

어느 쪽이든 캐시 무효화 전략을 미리 설계해야 합니다.

 

원칙 4: 모니터링과 알림 즉시 설정

 

배포 직후 반드시 모니터링을 붙이세요.

Vercel은 Speed Insights + Sentry 통합, Cloudflare는 Workers Analytics + Logpush를 활용하면 됩니다.

 

원칙 5: 비용 알림 임계값 설정

 

Vercel은 Usage 페이지에서 Spend Management를 활성화하고, Cloudflare는 Billing 알림을 설정하세요.

트래픽 스파이크로 인한 예상치 못한 청구를 방지할 수 있습니다.

 

흔한 실수와 해결 방법

 

실수	증상	해결 방법
Vercel에서 API Route에 무거운 연산 배치	10초 타임아웃 에러 발생	Background Functions 사용 또는 큐 기반 비동기 처리로 전환
Cloudflare Workers에서 Node.js 전용 패키지 사용	require is not defined 에러	Workers 호환 패키지로 교체하거나 nodejs_compat 플래그 활성화
Vercel 무료 플랜에서 상용 서비스 운영	대역폭 초과 시 사이트 다운	Pro 플랜 전환 또는 이미지/영상은 외부 CDN 사용
Cloudflare D1에 대용량 데이터 저장	쿼리 속도 저하 + 500MB 제한	대용량 데이터는 Hyperdrive로 외부 Postgres 연결
두 플랫폼 모두에서 캐시 미설정	매 요청마다 오리진 히트 → 비용 증가	Cache-Control 헤더와 stale-while-revalidate 패턴 적용

 

---

 

7. 향후 전망 & 발전 방향

 

4가지 핵심 발전 방향

 

1. AI 워크로드의 엣지 통합

 

Cloudflare는 Workers AI를 통해 엣지에서 직접 LLM 추론을 실행하는 방향으로 발전하고 있습니다.

Vercel도 AI SDK를 통해 스트리밍 AI 응답을 최적화하고 있습니다. 2026년 하반기에는 두 플랫폼 모두 엣지 AI 추론이 기본 기능으로 자리잡을 것으로 보입니다.

 

2. 컨테이너 기반 워크로드 지원 확대

 

Cloudflare는 2025년 말 Workers for Containers를 발표했고, Vercel도 Docker 기반 배포를 실험 중입니다.

V8 Isolate의 제약(CPU 시간 제한, 메모리 128MB)을 넘어서는 워크로드를 엣지에서 처리할 수 있는 시대가 열리고 있습니다.

 

3. 통합 개발 경험(DX)의 진화

 

Vercel의 v0(AI 코드 생성)와 Cloudflare의 Workers Playground가 진화하면서, 코드 작성 → 테스트 → 배포의 전체 사이클이 브라우저 안에서 완결되는 환경이 강화되고 있습니다.

 

4. 멀티 클라우드 & 포터빌리티

 

OpenNext 프로젝트가 성숙하면서 Next.js 앱을 Vercel 외의 플랫폼에서도 원활하게 실행할 수 있게 되었습니다.

WinterCG 표준 덕분에 Workers에서 작성한 코드를 Deno Deploy나 Bun에서도 실행할 수 있는 호환성이 높아지고 있습니다.

 

개발자에게 주는 시사점

 

• 락인(Lock-in) 최소화: 특정 플랫폼의 독점 API에 과도하게 의존하지 마세요. 표준 Web API를 우선 사용하고, 플랫폼 특화 기능은 추상화 레이어를 통해 사용하는 것이 안전합니다.
• 하이브리드 전략 고려: 프론트엔드는 Vercel, API 및 데이터는 Cloudflare라는 조합도 충분히 실용적입니다. 각 플랫폼의 강점만 취하는 전략이 2026년의 트렌드입니다.
• 비용 구조 이해 필수: 무료 티어로 시작하되, 서비스 성장 시 비용이 어떻게 스케일되는지 미리 시뮬레이션하세요. Vercel은 멤버 수 기반, Cloudflare는 요청 수 기반으로 과금됩니다.

 

---

 

마무리

 

지금까지 Vercel vs Cloudflare 두 플랫폼을 실무 관점에서 깊이 비교해보았습니다.

핵심을 정리하면 다음과 같습니다.

 

• Next.js 중심 프로젝트라면 Vercel이 DX와 기능 완성도 면에서 최고의 선택입니다.
• 비용 효율과 글로벌 성능이 핵심이라면 Cloudflare의 엣지 퍼스트 아키텍처가 압도적입니다.
• 둘 중 하나만 고르는 것이 아니라, 프로젝트 특성에 따라 두 플랫폼을 조합하는 것도 훌륭한 전략입니다.
• 어떤 플랫폼을 선택하든, 표준 Web API 기반 코드 작성과 캐싱 전략 설계는 반드시 선행되어야 합니다.

 

Vercel vs Cloudflare, 여러분은 어떤 플랫폼을 사용하고 계신가요?

실제 운영 경험이나 마이그레이션 후기가 있다면 댓글로 공유해주세요!

이 글이 도움이 되셨다면 주변 개발자에게도 공유 부탁드립니다.

감사합니다!