Vercel (버셀) | KAITRUST AI 백과사전

📖 상세 설명

Vercel은 프론트엔드 개발자를 위한 클라우드 플랫폼으로, Git 저장소 연결만으로 자동 배포, 프리뷰 환경, 엣지 네트워크 배포를 제공합니다. Next.js를 만든 회사로, React 기반 프레임워크와의 통합이 특히 뛰어납니다.

Vercel의 핵심 가치는 DX(Developer Experience)입니다. 푸시하면 자동 배포, PR마다 프리뷰 URL 생성, 글로벌 CDN 배포가 기본 제공됩니다. 서버리스 함수, Edge Functions, ISR(Incremental Static Regeneration) 등 Next.js의 고급 기능을 완벽 지원합니다.

Vercel의 Edge Network는 전 세계 수십 개 지역에 분산되어 있어, 사용자와 가까운 곳에서 콘텐츠를 제공합니다. Edge Functions는 V8 isolate 기반으로 콜드 스타트가 거의 없어, API 엔드포인트도 빠르게 응답합니다.

실무에서 Vercel은 스타트업과 개인 프로젝트에 인기입니다. 무료 티어로 시작할 수 있고, 팀 협업 기능, Analytics, Speed Insights 등 프로덕션에 필요한 도구를 제공합니다. 다만, 트래픽이 많으면 비용이 빠르게 증가할 수 있어 AWS/GCP 대비 비용 비교가 필요합니다.

💻 코드 예제

# Vercel CLI로 배포하기

# 1. Vercel CLI 설치
npm i -g vercel

# 2. 프로젝트 루트에서 배포
vercel

# 3. 프로덕션 배포
vercel --prod

# vercel.json - 프로젝트 설정
{
  "framework": "nextjs",
  "buildCommand": "npm run build",
  "outputDirectory": ".next",
  "regions": ["icn1"],  // 서울 리전 우선
  "headers": [
    {
      "source": "/api/(.*)",
      "headers": [
        { "key": "Cache-Control", "value": "no-store" }
      ]
    }
  ],
  "rewrites": [
    { "source": "/api/proxy/:path*", "destination": "https://api.example.com/:path*" }
  ],
  "env": {
    "DATABASE_URL": "@database-url"  // Vercel 환경변수 참조
  }
}

# Edge Function 예제 (app/api/hello/route.ts)
export const runtime = 'edge';  // Edge Runtime 사용

export async function GET(request: Request) {
  return new Response(JSON.stringify({
    message: 'Hello from Edge!',
    region: process.env.VERCEL_REGION
  }), {
    headers: { 'Content-Type': 'application/json' }
  });
}

🗣️ 실무에서 이렇게 말하세요

💬 인프라 논의에서

"저희 프론트엔드는 Vercel에 배포하고 있어요. Git 푸시하면 자동 배포되고, PR마다 프리뷰 URL이 생기니까 QA가 편해요. 백엔드 API는 별도 서버에 있고, Vercel의 리라이트로 프록시하고 있습니다."

💬 면접에서

"Vercel은 Next.js와 최적 통합된 배포 플랫폼입니다. ISR을 완벽 지원해서 정적 페이지와 동적 데이터의 이점을 모두 누릴 수 있고, Edge Functions로 지연 시간이 중요한 API를 글로벌하게 배포할 수 있습니다."

💬 비용 회의에서

"Vercel Pro가 월 20달러인데, 대역폭 1TB까지 포함이에요. 그 이상 트래픽이 나오면 GB당 비용이 붙으니까, 트래픽이 예측 가능하면 Vercel이 편하고, 대규모면 AWS CloudFront 직접 구성이 저렴할 수 있어요."

⚠️ 흔한 실수 & 주의사항

❌

무제한 무료라고 착각

Hobby 플랜은 개인 비상업용입니다. 상업 프로젝트는 Pro 이상 플랜이 필요하고, 대역폭/함수 실행 시간 초과 시 추가 비용이 발생합니다.

❌

환경변수 노출

NEXT_PUBLIC_ 접두사 환경변수는 클라이언트에 노출됩니다. API 키 같은 민감한 값은 서버 사이드에서만 사용하세요.

✅

올바른 활용법

프리뷰 배포로 PR 리뷰 효율화, Analytics로 성능 모니터링, Edge Config로 기능 플래그 관리를 활용하세요. Vercel의 강점을 최대한 활용하는 것이 핵심입니다.

🔗 관련 용어

📚 더 배우기

📄 Vercel 공식 문서 🎓 Vercel 템플릿 갤러리 📖 Vercel 공식 블로그