[Vercel] Next.js 배포 설치방법 - 프론트엔드 배포 자동화 시작하기 [1편]

 

안녕하세요!

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

 

오늘은 프론트엔드 개발자라면 한 번쯤 들어봤을 Vercel에 대해 이야기해보려 합니다.

Next.js 프로젝트를 만들었는데, 이걸 어떻게 세상에 공개할지 고민이신가요?

GitHub에 푸시만 하면 자동으로 배포되는 마법 같은 경험, Vercel이 바로 그 해답입니다.

이 글에서는 Vercel의 개념부터 실제 Next.js 프로젝트 배포까지, 입문자도 따라할 수 있도록 단계별로 안내해드리겠습니다.

 

 

---

 

1. Vercel이란 무엇인가?

 

Vercel은 프론트엔드 애플리케이션을 위한 클라우드 배포 플랫폼입니다.

Next.js를 만든 회사이기도 하며, 정적 사이트부터 서버사이드 렌더링(SSR) 애플리케이션까지 원클릭으로 배포할 수 있는 환경을 제공합니다. 2020년 ZEIT에서 Vercel로 사명을 변경한 이후, 프론트엔드 배포의 사실상 표준 플랫폼으로 자리잡았습니다.

 

등장 배경: 기존 배포의 고통

 

Vercel이 등장하기 전, 프론트엔드 배포는 다음과 같은 문제들로 개발자를 괴롭혔습니다.

 

첫째, 서버 인프라 관리의 부담입니다. EC2 인스턴스를 띄우고, Nginx를 설정하고, SSL 인증서를 발급받고, 로드밸런서를 구성하는 일련의 과정이 프론트엔드 개발자에게는 과도한 요구였습니다.

React 앱 하나 배포하려고 리눅스 서버 관리까지 학습해야 하는 상황이 빈번했습니다.

 

둘째, CI/CD 파이프라인 구축의 복잡성입니다. Jenkins나 GitHub Actions를 직접 설정하고, 빌드 스크립트를 작성하고, 배포 자동화를 구성하는 데 프로젝트 초기 세팅만 며칠이 소요되기도 했습니다.

특히 프리뷰 환경을 브랜치별로 만들려면 추가적인 인프라 비용과 설정이 필요했습니다.

 

셋째, 글로벌 성능 최적화의 어려움입니다. CDN 설정, 캐시 전략 수립, 에지 로케이션 관리 등을 직접 처리해야 했고, AWS CloudFront나 Cloudflare를 올바르게 설정하는 것만으로도 상당한 전문 지식이 요구되었습니다.

 

넷째, 환경 변수와 시크릿 관리의 혼란입니다. 개발, 스테이징, 프로덕션 환경별로 환경 변수를 다르게 관리해야 하는데, .env 파일이 실수로 커밋되거나, 팀원 간 환경 변수 동기화가 안 되는 문제가 잦았습니다.

 

Vercel은 이 모든 문제를 Git 리포지토리 연결 한 번으로 해결합니다.

 

 

---

 

2. 핵심 특징 & 기능 분석

 

2-1. Zero Configuration 배포

 

Vercel의 가장 큰 강점은 설정 없이 바로 배포가 된다는 점입니다.

Next.js, React, Vue, Svelte 등 주요 프레임워크를 자동으로 감지하고, 최적의 빌드 설정을 적용합니다. next build를 실행할 필요도, Dockerfile을 작성할 필요도 없습니다.

GitHub 리포지토리를 연결하면 프레임워크 프리셋이 자동 적용되어 빌드부터 배포까지 한 번에 처리됩니다.

 

2-2. Preview Deployments (프리뷰 배포)

 

Pull Request를 생성할 때마다 고유한 URL로 프리뷰 환경이 자동 생성됩니다.

예를 들어 feature/login 브랜치에서 PR을 올리면, my-app-git-feature-login-username.vercel.app 같은 URL이 자동으로 만들어집니다.

디자이너나 PM이 별도의 개발 환경 없이도 변경사항을 바로 확인할 수 있어, 코드 리뷰 효율이 크게 향상됩니다.

 

2-3. Edge Network & 글로벌 CDN

 

Vercel은 전 세계 수십 개 에지 로케이션에 콘텐츠를 배포합니다.

한국 사용자가 접속하면 서울 리전에서, 미국 사용자가 접속하면 가장 가까운 미국 리전에서 응답합니다.

정적 자산은 물론, Edge Functions를 통해 서버사이드 로직까지 에지에서 실행할 수 있어 TTFB(Time to First Byte)를 50ms 이하로 줄일 수 있습니다.

 

2-4. Serverless & Edge Functions

 

Vercel에서 Next.js의 API Routes는 자동으로 Serverless Function으로 배포됩니다.

트래픽이 없을 때는 비용이 0이고, 갑작스러운 트래픽 증가에도 자동으로 스케일링됩니다.

또한 Edge Functions를 활용하면 미들웨어 로직을 에지에서 실행하여 인증, 리다이렉트, A/B 테스트 등을 지연 없이 처리할 수 있습니다.

 

2-5. 통합 Analytics & Web Vitals 모니터링

 

Vercel은 자체 Analytics 대시보드를 통해 Core Web Vitals(LCP, FID, CLS)를 실시간으로 모니터링할 수 있습니다.

별도의 모니터링 도구를 설치하지 않아도 배포된 사이트의 성능 지표를 한눈에 확인할 수 있으며, 특정 배포 버전별 성능 비교도 가능합니다.

 

 

---

 

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

 

핵심 구성 요소

 

구성 요소	역할	기술 기반
Build Pipeline	소스 코드를 빌드하고 최적화된 아티팩트 생성	Turbopack / Webpack
Edge Network	전 세계 에지 로케이션에서 콘텐츠 서빙	Anycast DNS + CDN
Serverless Functions	API Routes를 AWS Lambda 기반으로 실행	AWS Lambda (커스텀 런타임)
Edge Functions	미들웨어를 에지에서 실행	V8 Isolates (Chromium 엔진)
Image Optimization	next/image 컴포넌트의 이미지를 실시간 변환	Sharp + CDN 캐시
ISR Engine	Incremental Static Regeneration 처리	Stale-While-Revalidate

 

배포 흐름 이해하기

 

Vercel의 배포 프로세스를 코드로 표현하면 다음과 같습니다.

 

# Vercel 내부 배포 파이프라인 (개념적 흐름)

# 1단계: Git Push 감지 → Webhook 트리거
git push origin main
# → Vercel이 GitHub Webhook으로 push 이벤트 수신

# 2단계: 빌드 환경 준비
# - Node.js 버전 감지 (.nvmrc 또는 package.json engines)
# - 패키지 매니저 감지 (npm/yarn/pnpm lock 파일 확인)
# - 의존성 설치 (캐시 활용으로 재설치 최소화)

# 3단계: 프레임워크별 빌드 실행
next build
# → .next/ 디렉토리에 빌드 결과물 생성
# → 정적 페이지는 HTML로, 동적 페이지는 Serverless Function으로 분류

# 4단계: 결과물 분배
# → 정적 자산(.html, .css, .js, images) → Edge Network (CDN)
# → API Routes, SSR 페이지 → Serverless Functions
# → middleware.ts → Edge Functions

# 5단계: DNS 전환 (Atomic Deployment)
# → 이전 배포와 새 배포가 동시에 존재
# → 새 배포가 준비되면 트래픽을 원자적으로 전환
# → 롤백 시 이전 배포로 즉시 전환 가능

 

설계 원칙 4가지

 

1. Immutable Deployments: 모든 배포는 불변(immutable)입니다. 한 번 배포된 아티팩트는 수정되지 않으며, 새로운 배포가 생성될 뿐입니다. 이 덕분에 어떤 시점의 배포든 즉시 롤백이 가능합니다.
2. Atomic Deployments: 배포 전환은 원자적으로 이루어집니다. 빌드 중에 사용자가 반쯤 배포된 상태를 보는 일은 없습니다. 모든 파일이 준비된 후 한 번에 트래픽이 전환됩니다.
3. Framework-Aware: Vercel은 프레임워크의 출력 구조를 이해합니다. Next.js의 getStaticProps, getServerSideProps 등 렌더링 전략에 따라 배포 방식을 자동으로 최적화합니다.
4. Edge-First Architecture: 가능한 한 모든 것을 사용자와 가까운 에지에서 처리합니다. 정적 자산은 물론, 미들웨어 로직까지 에지에서 실행하여 응답 지연을 최소화합니다.

 

---

 

4. 실무 활용 가이드

 

Next.js 프로젝트를 Vercel에 배포하기

 

아래는 Next.js 프로젝트를 생성하고 Vercel에 배포하는 전체 과정입니다.

 

# 1. Next.js 프로젝트 생성
npx create-next-app@latest my-blog --typescript --tailwind --app
cd my-blog

# 2. 로컬에서 개발 및 테스트
npm run dev
# http://localhost:3000 에서 확인

# 3. GitHub 리포지토리 생성 및 푸시
git init
git add .
git commit -m "Initial commit: Next.js blog project"
git remote add origin https://github.com/username/my-blog.git
git push -u origin main

# 4. Vercel CLI로 배포 (선택사항 - 웹 대시보드에서도 가능)
npm i -g vercel
vercel login
vercel
# → 프로젝트 설정 자동 감지
# → 빌드 & 배포 진행
# → https://my-blog-xxxxx.vercel.app 형태의 URL 발급

# 5. 프로덕션 배포
vercel --prod
# → 커스텀 도메인이 설정되어 있다면 해당 도메인으로 배포

# 6. 환경 변수 설정
vercel env add DATABASE_URL production
# → 프롬프트에서 값 입력
# → production/preview/development 환경별 분리 관리

 

기존 프로젝트에 Vercel 도입하기 (4단계)

 

단계	작업	상세 내용	소요 시간
1단계	Vercel 계정 연결	vercel.com에서 GitHub 계정으로 가입 → "Import Project" → 리포지토리 선택	2분
2단계	빌드 설정 확인	Framework Preset 자동 감지 확인 → 필요시 Build Command, Output Directory 수정 → Root Directory 지정 (모노레포인 경우)	3분
3단계	환경 변수 이전	기존 .env.production 값을 Vercel Dashboard → Settings → Environment Variables에 등록 → 환경별(Production/Preview/Development) 분리 설정	5분
4단계	도메인 연결	Settings → Domains에서 커스텀 도메인 추가 → DNS 레코드 설정 (A 레코드: 76.76.21.21 또는 CNAME: cname.vercel-dns.com) → SSL 인증서 자동 발급 확인	10분

 

팀 활용 팁

 

• 프리뷰 배포에 댓글 기능 활성화: Vercel의 댓글 기능을 켜면 프리뷰 URL에서 디자이너가 직접 UI 위에 피드백을 남길 수 있습니다.
• GitHub Checks 연동: PR에서 빌드 상태, Lighthouse 점수, 번들 사이즈 변화를 자동으로 확인할 수 있습니다.
• vercel.json으로 팀 규칙 코드화: 리다이렉트, 헤더, 리라이트 규칙을 vercel.json에 정의하여 Git으로 관리합니다.

 

// vercel.json 예시
{
  "redirects": [
    {
      "source": "/old-blog/:slug",
      "destination": "/blog/:slug",
      "permanent": true
    }
  ],
  "headers": [
    {
      "source": "/api/(.*)",
      "headers": [
        { "key": "Cache-Control", "value": "s-maxage=60, stale-while-revalidate=300" }
      ]
    }
  ],
  "functions": {
    "api/heavy-task.ts": {
      "memory": 1024,
      "maxDuration": 30
    }
  }
}

 

---

 

5. 경쟁 기술 비교 분석

 

주요 배포 플랫폼 비교표

 

항목	Vercel	Netlify	AWS Amplify	Cloudflare Pages
Next.js 지원	최적 (공식)	부분 지원 (플러그인 필요)	지원 (일부 기능 제한)	부분 지원
SSR/ISR	네이티브 지원	어댑터 필요	지원	Workers 통합 필요
Edge Functions	V8 Isolates	Deno 기반	Lambda@Edge	Cloudflare Workers
빌드 속도	빠름 (캐시 최적화)	보통	느림	빠름
무료 플랜 대역폭	100GB/월	100GB/월	15GB/월	무제한
Serverless 함수 실행 시간	10초 (Hobby) / 300초 (Pro)	10초 / 26초	15초	30초 (Workers)
프리뷰 배포	자동 (PR당)	자동 (PR당)	자동 (브랜치당)	자동 (브랜치당)
가격 (Pro)	$20/멤버/월	$19/멤버/월	사용량 기반	$5/월
모노레포 지원	Turborepo 통합	제한적	제한적	제한적

 

선택 가이드

 

• Next.js 프로젝트라면 → Vercel: Next.js를 만든 회사답게 App Router, Server Components, ISR 등 모든 기능을 100% 지원합니다. 다른 플랫폼에서는 일부 기능이 제한되거나 추가 설정이 필요합니다.
• 정적 사이트 + 폼/인증이 필요하다면 → Netlify: Netlify Forms, Identity 등 내장 기능이 풍부하여 간단한 웹사이트에는 Netlify가 더 편리할 수 있습니다.
• AWS 생태계를 이미 쓰고 있다면 → AWS Amplify: Cognito, DynamoDB, S3 등 AWS 서비스와의 통합이 필요한 경우 Amplify가 유리합니다.
• 비용 최적화가 최우선이라면 → Cloudflare Pages: 대역폭 무제한 무료 플랜은 트래픽이 많은 정적 사이트에 최적입니다.

 

---

 

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

 

5가지 핵심 원칙

 

원칙 1: 환경 변수는 반드시 Vercel Dashboard에서 관리하세요.

.env 파일을 Git에 커밋하는 실수를 방지할 수 있고, Production/Preview/Development 환경별로 다른 값을 설정할 수 있습니다.

Vercel CLI의 vercel env pull로 로컬에 동기화도 가능합니다.

 

원칙 2: vercel.json은 최소한으로 유지하세요.

Vercel의 자동 감지 기능이 대부분의 설정을 처리합니다. vercel.json에 과도한 설정을 넣으면 오히려 자동 최적화를 방해할 수 있습니다.

리다이렉트, 헤더, 함수 설정 등 꼭 필요한 것만 추가하세요.

 

원칙 3: Preview 배포를 적극 활용하세요.

모든 PR에 프리뷰 배포가 자동 생성됩니다.

코드 리뷰 시 프리뷰 URL에서 직접 동작을 확인하는 습관을 들이면, 프로덕션 배포 후 발견되는 버그를 크게 줄일 수 있습니다.

 

원칙 4: Serverless Function의 콜드 스타트를 고려하세요.

Hobby 플랜에서 Serverless Function의 실행 시간 제한은 10초입니다.

무거운 연산이나 외부 API 호출이 많은 경우 Edge Functions로 전환하거나, Pro 플랜(300초)으로 업그레이드를 고려하세요.

 

원칙 5: 모노레포라면 Turborepo를 함께 사용하세요.

Vercel은 Turborepo와 긴밀하게 통합됩니다. turbo.json으로 빌드 캐시를 공유하면, 변경된 패키지만 빌드하여 CI/CD 시간을 대폭 줄일 수 있습니다.

 

흔한 실수와 해결 방법

 

실수	증상	해결 방법
next.config.js에 output: 'standalone' 설정	Vercel에서 빌드 실패 또는 비정상 동작	Vercel 배포 시에는 output 설정을 제거 — Vercel이 자동으로 최적 출력 모드를 결정합니다
API Route에서 파일 시스템 접근 (fs.readFileSync)	로컬에서는 작동하지만 배포 후 에러	Serverless Function에서는 /tmp만 쓰기 가능 — 정적 데이터는 빌드 타임에 처리하거나 외부 저장소 사용
이미지를 public/ 폴더에 대량 배치	빌드 시간 증가 + 번들 사이즈 비대	next/image 컴포넌트 + 외부 이미지 호스팅(S3, Cloudinary) 활용
환경 변수에 NEXT_PUBLIC_ 접두사 누락	클라이언트에서 환경 변수가 undefined	브라우저에서 접근해야 하는 변수는 반드시 NEXT_PUBLIC_ 접두사 추가
node_modules를 Git에 커밋	빌드 충돌 + 배포 시간 급증	.gitignore에 node_modules/ 추가, Vercel이 npm install을 자동 실행

 

---

 

7. 향후 전망 & 발전 방향

 

발전 방향 4가지

 

1. Turbopack의 프로덕션 안정화

Vercel이 개발 중인 Turbopack은 Webpack 대비 최대 10배 빠른 빌드 성능을 목표로 합니다.

현재 Next.js 15에서 개발 서버용으로 안정화되었으며, 프로덕션 빌드 지원이 완성되면 대규모 프로젝트의 빌드 시간이 획기적으로 단축될 것입니다.

 

2. AI 기반 개발 도구 통합

Vercel은 v0(AI 기반 UI 생성 도구)를 출시하며 AI와 프론트엔드 개발의 융합을 선도하고 있습니다.

자연어로 UI 컴포넌트를 생성하고, 이를 바로 Vercel에 배포하는 워크플로우가 점점 고도화되고 있습니다.

AI SDK를 통해 LLM 기반 애플리케이션의 스트리밍 응답도 쉽게 구현할 수 있습니다.

 

3. Edge Computing 확장

Edge Middleware, Edge Config, Edge Functions 등 에지 컴퓨팅 기능이 지속적으로 확장되고 있습니다.

데이터베이스까지 에지에서 처리하는 시대가 오면, 전통적인 서버 아키텍처와의 성능 격차는 더욱 벌어질 것입니다.

 

4. 풀스택 플랫폼으로의 진화

Vercel Postgres, Vercel KV(Redis), Vercel Blob(파일 스토리지) 등 백엔드 인프라 서비스를 지속적으로 추가하고 있습니다.

프론트엔드 배포 플랫폼에서 출발했지만, 점차 풀스택 애플리케이션을 위한 통합 플랫폼으로 진화하고 있습니다.

 

개발자에게 주는 시사점

 

프론트엔드 개발자의 역할이 UI 구현에서 제품 전체 배포 및 운영으로 확장되고 있습니다.

Vercel 같은 플랫폼 덕분에 서버 관리 없이도 풀스택 제품을 만들 수 있게 되었고, 이는 개발자 개인의 생산성과 영향력을 크게 높여줍니다.

인프라를 몰라도 배포는 할 수 있지만, 인프라를 이해하면 더 나은 아키텍처 결정을 내릴 수 있다는 점도 기억해주세요.

 

---

 

마무리

 

지금까지 Vercel을 활용한 Next.js 배포 방법을 알아보았습니다.

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

 

• Vercel은 Git Push만으로 프론트엔드 애플리케이션을 자동 배포하는 클라우드 플랫폼입니다
• Next.js와의 네이티브 통합으로 SSR, ISR, Edge Functions 등 모든 기능을 설정 없이 사용할 수 있습니다
• Preview Deployments로 PR마다 자동으로 테스트 환경이 생성되어 팀 협업 효율이 크게 향상됩니다
• 글로벌 Edge Network를 통해 별도의 CDN 설정 없이도 세계 어디서든 빠른 응답 속도를 보장합니다

 

다음 편에서는 Vercel의 고급 기능인 Edge Functions, ISR 심화, 모노레포 배포 전략 등을 다뤄보겠습니다.

궁금한 점이 있으시면 댓글로 남겨주세요!

이 글이 도움이 되셨다면 공유도 부탁드립니다.

감사합니다!