Vercel 개요 & 대안 비교

Vercel이 무엇이고 어떤 개념으로 동작하는지, 그리고 유사 서비스와 어떻게 다른지 정리한 레퍼런스 | 공식 문서: vercel.com/docs

대상 플랫폼Vercel 플랫폼 (Hobby / Pro / Enterprise)

참조 문서 URLvercel.com/docs · vercel.com/pricing

문서 수집일2026년 6월 13일

가격·한도 주의모든 가격·사용 한도는 수집일 기준값입니다. 변동이 잦으니 출판 시점에 위 가격 페이지에서 다시 확인하세요.

이 핸드북은 AI로 코드를 만들고 바로 웹에 올리는 "바이브코딩" 학습자를 위한 것입니다. 어려운 인프라 지식 없이 만든 결과물을 가장 적은 마찰로 배포하는 것이 목표이며, 그 표준 도구로 Vercel을 다룹니다.

1. Vercel이란

Vercel은 웹 애플리케이션을 빌드·배포·운영하도록 돕는 클라우드 플랫폼입니다. 가장 널리 쓰이는 React 프레임워크인 Next.js를 만든 회사가 직접 운영하며, 공식 문서는 스스로를 "the AI Cloud" — AI 기반 애플리케이션을 빌드·확장·보호하기 위한 통합 플랫폼으로 소개합니다.

핵심 가치는 한 문장으로 요약됩니다. "코드를 올리면 나머지는 알아서 처리한다." 서버를 직접 빌리거나 설정하지 않아도, 코드를 연결하면 Vercel이 빌드하고, 전 세계 CDN에 배포하고, 자동으로 HTTPS 주소까지 발급합니다.

용어 먼저: 빌드는 내 코드를 브라우저가 읽을 수 있는 결과물로 변환하는 단계, 서빙은 그 결과물을 방문자 요청에 응답해 전달하는 단계, 배포는 빌드한 결과물을 인터넷 서버에 올려 누구나 링크로 접속하게 만드는 전체 과정을 뜻합니다. 즉 내 컴퓨터에만 있던 코드가 남에게 보이게 되는 일 전체가 배포입니다.

어떤 앱을 올릴 수 있나

공식 문서의 프레임워크 지원 목록에는 별도 설정 없이(zero-config) 동작하는 대표 프레임워크가 명시되어 있습니다.

풀스택·프론트엔드 프레임워크: Next.js, SvelteKit, Nuxt, Remix, Astro, Vite 등 (Create React App은 React 팀이 신규 프로젝트에 권장하지 않으므로, React 단일 페이지 앱은 Vite를 권장)
정적 사이트(Static): HTML/CSS/JS로만 이루어진 사이트도 그대로 배포
프레임워크가 아닌 프로젝트도 Build Output API 규격(.vercel/output)을 따르면 동일한 기능 사용 가능

AI 도구(Claude, Cursor, v0 등)가 만들어 주는 웹앱은 대부분 Next.js·React·정적 사이트입니다. 이 셋은 Vercel에서 추가 설정 없이 가장 매끄럽게 배포되며, 그래서 바이브코딩의 사실상 기본값으로 쓰입니다.

2. 핵심 개념

Vercel을 이해하려면 아래 6개 용어만 잡으면 됩니다. 이후 모든 섹션이 이 용어 위에서 설명됩니다.

개념	핵심 동작
Project (프로젝트)	하나의 애플리케이션 단위입니다. 자체 Git 저장소 연결, 환경 변수, 배포 이력을 가집니다. 보통 코드 저장소 1개 = 프로젝트 1개입니다.
Deployment (배포)	프로젝트가 한 번 성공적으로 빌드된 결과물입니다. 배포할 때마다 고유 URL이 생기므로, 과거 배포도 그대로 살아 있어 언제든 되돌릴 수 있습니다.
Production (프로덕션 배포)	실제 사용자에게 보이는 라이브 버전입니다. 보통 `main` 브랜치에 합쳐지거나 CLI에서 `vercel --prod`로 만듭니다.
Preview (프리뷰 배포)	프로덕션에 영향을 주지 않고 변경을 미리 확인하는 임시 배포입니다. main이 아닌 브랜치에 push하거나 PR을 열면 자동으로 생깁니다.
Domains (도메인)	배포에 연결되는 주소입니다. 모든 배포는 기본 `*.vercel.app` 주소를 받고, 내 커스텀 도메인을 연결하면 자동 HTTPS까지 설정됩니다.
Environments (환경)	기본 3종 — Development(로컬), Preview, Production. 환경마다 다른 환경 변수를 둘 수 있어, 테스트용 키와 실서비스용 키를 분리합니다.

그림. 핵심 개념의 관계 — Project·Deployment·Domain·Environments

그리고 Build & Output: 빌드가 끝나면 결과물이 특정 폴더(Output Directory)에 출력되고, Vercel은 그 폴더의 내용만 사용자에게 서빙합니다. 프레임워크를 자동 감지하면 이 설정은 대부분 자동으로 채워집니다.

3. 두 가지 배포 경로 (이 핸드북의 핵심 축)

같은 결과(라이브 사이트)에 도달하는 길은 크게 둘입니다. 이 핸드북은 두 길을 각각 한 섹션씩 깊게 다루고, 마지막에 장단점을 비교합니다.

그림. 두 배포 경로 — 같은 라이브 사이트로 가는 두 갈래

경로 A — GitHub(Git) 연동 배포
  코드 저장소를 Vercel에 한 번 연결
  → 이후 git push 할 때마다 자동 빌드·배포
  → PR을 열면 미리보기 URL이 자동으로 댓글에 달림
  → main 브랜치에 합치면 프로덕션 반영
  표준적인 협업 워크플로우. 변경 이력·되돌리기가 Git에 남음.

경로 B — MCP · CLI · v0 직접 배포
  AI 도구(Claude 등)에 Vercel MCP를 연결하거나, 터미널에서 CLI 사용
  → "이 프로젝트 배포해줘" 한마디 / vercel 한 줄로 즉시 배포
  → v0(v0.app)는 AI가 만든 앱을 버튼 하나로 배포
  Git 설정 없이 빠르게. AI 반복 개발과 궁합이 좋음.

두 경로는 배타적이지 않습니다. 실무에서는 처음엔 CLI/MCP로 빠르게 띄워 보고, 협업·운영 단계에서 GitHub 연동으로 옮겨 가는 식으로 함께 씁니다. 자세한 장단점 비교는 ④ 두 방식 비교 & 운영에서 다룹니다.

4. Preview 배포 — Vercel의 대표 기능

Git을 연결해 두면 모든 push마다 프로덕션과 분리된 미리보기 배포가 생깁니다. 각 미리보기는 고유 주소를 받아, 합치기 전에 실제로 동작하는 화면을 팀과 공유하고 검토할 수 있습니다.

미리보기 URL에는 두 종류가 있습니다.

브랜치 기준 URL — 해당 브랜치의 최신 변경을 항상 가리킵니다. 새 commit을 올려도 주소가 바뀌지 않아, 리뷰 중 공유하기에 좋습니다.
커밋 기준 URL — 특정 commit의 그 순간 배포를 가리킵니다. "이 시점 버전"을 정확히 공유할 때 씁니다.

GitHub·GitLab·Bitbucket 연동에 동일하게 적용되며, PR을 열면 Vercel 봇이 미리보기 URL을 자동으로 댓글에 남깁니다.

5. 함수 & 엣지 한눈에

정적 화면만이 아니라 서버 로직(로그인, 결제, DB 조회, AI 호출)도 Vercel에서 돌릴 수 있습니다. 입문 단계에서는 "이런 게 있다" 정도만 알면 충분하며, 상세는 ④ 운영 섹션에서 다룹니다.

"서버리스"란? 내가 서버를 직접 빌리거나 켜 두지 않고, 요청이 들어올 때만 Vercel이 알아서 코드를 잠깐 실행해 주는 방식입니다. 평소엔 꺼져 있다가 필요할 때만 돌기 때문에 관리 부담과 대기 비용이 줄어듭니다.

구분	핵심
Vercel Functions (Node.js 런타임)	서버사이드 코드를 실행하는 권장 방식입니다. 완전한 Node.js 환경에서 인증·DB 쿼리·AI 호출 등을 처리합니다.
Routing Middleware (구 Edge Middleware)	요청이 처리되기 전에 먼저 실행되어 응답을 개인화·리다이렉트합니다. 캐시보다 앞단에서 동작합니다.
Fluid Compute	서버리스의 편의성과 서버의 성능을 결합한 실행 모델로, 2025년 4월 23일부터 신규 프로젝트에 기본 활성화됩니다. AI 호출처럼 대기 시간이 긴 작업에서 비용을 크게 줄입니다.

과거의 Edge Functions는 현재 deprecated(권장 중단) 상태입니다. 새 코드는 Node.js 런타임의 Vercel Functions를 쓰세요. (수집일 기준 — 상태는 변할 수 있으니 공식 문서 확인)

6. 가격 플랜 (2026년 6월 13일 기준)

플랜	대상	핵심 내용
Hobby (무료)	개인·학습·포트폴리오	무료. 자동 HTTPS, 모든 push마다 미리보기 배포, CLI·개인 Git 연동 포함. 비상업적·개인 용도로만 제한됩니다.
Pro	전문 개발자·팀·비즈니스	월 $20부터. 팀 권한, 고급 분석, 우선 지원, 더 넉넉한 한도. 상업 서비스는 이 플랜 이상이 필요합니다.
Enterprise	대규모 조직	커스텀 한도, SSO(SAML), SLA, 전담 지원, 강화된 보안·로깅.

가장 흔한 함정: 무료 Hobby 플랜은 상업적 사용이 금지되어 있습니다. 학습·포트폴리오는 무료로 충분하지만, 광고·결제·실제 고객 서비스로 수익을 내려면 Pro 이상으로 전환해야 합니다. 교육용으로 만든 사이트라면 문제없습니다.

한도를 넘기면? 무료 Hobby는 포함 한도를 넘겨도 종량제로 자동 과금되지 않고, 대신 해당 사용이 차단·제한됩니다(서비스가 멈출 수 있음). 반면 Pro 이상은 포함 한도 초과분을 종량제(On-Demand)로 과금하므로 서비스가 멈추지 않습니다. 비교표의 "대역폭 과금"은 이 Pro 이상의 종량제를 가리킵니다. 정확한 단위·금액은 가격 페이지에서 확인하세요.

7. 종합 비교표 — Vercel vs 대안

입문자가 가장 많이 마주치는 5개 플랫폼을 비교합니다. 한도·가격은 수집일(2026-06-13) 기준이며 각 공식 페이지에서 변동 여부를 확인하세요.

항목	Vercel	Netlify	Cloudflare Pages/Workers	GitHub Pages	Render
주 용도	프론트엔드·Next.js 풀스택	JAMstack·프론트엔드	엣지 정적+풀스택	정적 사이트 전용	풀스택·백엔드+DB
Next.js 지원	★ 최상(자체 제작)	양호(공식 어댑터)	제한적(OpenNext 어댑터 필요)	정적 export만, SSR 불가	Node SSR 가능, 최적화 제한
서버리스/엣지	함수+엣지	함수+엣지	엣지(Workers) 중심	없음(정적만)	상시 구동 서버
Git 자동배포	O	O	O	O(같은 repo)	O
Preview 배포	O(자동 PR 미리보기)	O(무료 포함 무제한)	O(브랜치 미리보기)	기본 없음	O(유료 유의)
무료 플랜	O(Hobby, 비상업)	O(크레딧제)	O(정적 대역폭 무제한)	O(완전 무료)	O(정적 무료, 슬립)
대표 강점	Next.js DX·미리보기·표준성	프레임워크 중립	대역폭 무료·무제한	완전 무료·초단순	백엔드·DB·크론
대표 약점	대역폭 과금·무료 상업 불가	무료 한도 빡빡	Next.js 설정 까다로움	동적 기능 전무	무료 슬립·프론트 DX 약함

그림. 서비스 포지셔닝 개념도 (이해용 배치, 절대 평가가 아님)

8. 대안별 한 줄 요약

Netlify — 가장 직접적인 경쟁자

Vercel과 가장 닮은 프론트엔드·JAMstack 호스팅입니다. 프레임워크에 중립적이고 미리보기 배포가 강점이지만, Next.js 최신 기능 추종은 Vercel보다 한 박자 느릴 수 있습니다.

Cloudflare Pages / Workers — 엣지 + 가격

전 세계 엣지망 위에서 동작하며, 정적 자산의 대역폭이 무료·무제한이라 트래픽 비용 폭탄 위험이 구조적으로 없습니다. 대신 Next.js 풀스택을 돌리려면 OpenNext 어댑터가 필요해 설정이 까다롭습니다.

GitHub Pages — 정적 전용, 가장 단순

GitHub 저장소에서 정적 사이트를 완전 무료로 호스팅합니다. 서버 로직·SSR은 불가하지만, 문서·포트폴리오·랜딩처럼 백엔드가 필요 없는 사이트에는 최선입니다. 이 핸드북 자체도 GitHub Pages에 배포되어 있습니다.

Render / Railway — 백엔드·DB 포함

상시 구동 서버, 관리형 데이터베이스, 크론잡 같은 워크로드를 네이티브로 지원합니다. 서버리스 모델로는 어색한 작업이 필요할 때 선택합니다.

AWS Amplify / Fly.io

Amplify는 이미 AWS를 쓰는 조직에, Fly.io는 Docker 기반 임의 스택을 전 세계에 띄우려는 경우에 적합합니다. 둘 다 입문자에게는 학습 곡선이 가파릅니다.

9. 바이브코딩에서 왜 Vercel이 표준인가

AI가 만드는 앱의 다수가 Next.js·React입니다. Vercel은 Next.js 제작사라, AI가 만든 코드가 추가 설정 없이 "그냥 배포"되는 경우가 가장 많습니다.
제로 설정: Git push → 자동 빌드 → URL 발급 → PR마다 미리보기가 인프라 지식 없이 동작합니다.
무료로 시작: Hobby 플랜으로 학습·포트폴리오를 0원에, 커스텀 도메인+SSL까지 자동으로 받습니다.
빠른 피드백 루프: 에러 로그·미리보기 URL 공유가 빨라 AI 반복 개발과 잘 맞습니다.
생태계 표준: v0 등 AI 도구가 Vercel을 기본값으로 가정해, 막혔을 때 찾을 자료가 가장 많습니다.

그래도 대안을 고려할 때: 순수 정적이면 GitHub Pages, 트래픽·대역폭 비용이 핵심이면 Cloudflare, 상시 백엔드·DB가 끼면 Render/Railway, 상업 서비스로 수익을 낼 계획이면 Vercel Pro로 전환합니다.

참고 링크

다음 문서: 개요 실습 예시 → · GitHub 연동 배포 매뉴얼 →