DevFinance
테크·9 min read

Vercel 무료 배포 실전 가이드 2026 — Hobby 플랜으로 사이드 프로젝트 운영하기

Vercel Hobby 플랜으로 Next.js 사이드 프로젝트를 무료 배포하는 방법을 단계별로 정리했습니다. 커스텀 도메인, 환경 변수, 성능 최적화, 무료 한도 관리까지 포함합니다.

Vercel Hobby 플랜으로 충분한가

Vercel 무료 배포는 개인 개발자와 사이드 프로젝트에 최적화된 환경입니다. 월 수천~수만 PV 규모의 정적 사이트나 소규모 서버리스 앱은 무료로 운영 가능합니다.

무엇이 무료이고 어디서 한계가 오는지 정확히 이해하면, 비용 없이 상당한 규모까지 운영할 수 있습니다.

Hobby 플랜은 약관상 비상업적 프로젝트 전용입니다. 수익이 발생하는 서비스는 Pro 플랜($20/월)이 필요합니다.

Hobby 플랜 스펙 (2026년 기준)

항목무료 한도
배포 수무제한
대역폭100GB/월
서버리스 함수 실행 시간10초/요청 (Pro: 60초)
빌드 시간6,000분/월
빌드 동시 실행1개
Edge 함수500,000 호출/월
커스텀 도메인무제한
SSL자동 (무료)
프리뷰 배포PR당 자동 생성
Analytics2,500 이벤트/월
Vercel KV (Redis)256MB, 30,000 요청/일
Vercel Postgres256MB, 60 시간 컴퓨트/월

대역폭 100GB로 얼마나 운영할 수 있나

정적 페이지 평균 크기 200KB 기준:

  • 100GB ÷ 0.2MB = 약 500,000 페이지뷰/월

실제로는 이미지 최적화(next/image)와 CDN 캐싱 덕분에 수백만 PV까지도 한도 내에서 가능합니다.

배포 방법

방법 1: GitHub 연동 (권장)

1. vercel.com → GitHub 계정으로 가입
2. "Add New Project" → Import Git Repository
3. GitHub 리포 선택 (프레임워크 자동 감지)
4. Build Settings 확인 후 "Deploy"

이후 git push만 하면 자동 배포됩니다.

Branch 전략:

  • main → Production 배포
  • develop, feature/* → Preview 배포 (PR당 고유 URL 생성)

방법 2: Vercel CLI 배포

# CLI 설치
npm i -g vercel

# 로그인
vercel login

# 배포 (현재 디렉토리)
vercel --prod

# 또는 프리뷰 배포
vercel

CLI는 CI 파이프라인이나 서버에서 배포할 때 유용합니다.

커스텀 도메인 연결

가비아·카페24 도메인 연결 방법

1. Vercel 대시보드 → 프로젝트 → Settings → Domains
2. 도메인 입력: yoursite.kr
3. DNS 설정 방법 확인 (Vercel이 안내)

A 레코드 방식 (루트 도메인):

타입: A
이름: @ (또는 루트)
값: 76.76.21.21
TTL: Auto

CNAME 방식 (서브도메인):

타입: CNAME
이름: www
값: cname.vercel-dns.com
TTL: Auto

SSL은 자동 발급됩니다 (Let's Encrypt, 수 분~1시간 소요).

환경 변수 설정

Vercel 대시보드에서 설정

Settings → Environment Variables → Add

환경별로 다르게 설정 가능:

환경용도
Production실제 서비스 (main 브랜치)
PreviewPR 프리뷰 배포
Development로컬 개발 (vercel env pull)

주요 환경 변수 예시

# Analytics
NEXT_PUBLIC_GA_MEASUREMENT_ID=G-XXXXXXXXXX

# AdSense
NEXT_PUBLIC_ADSENSE_PUB_ID=ca-pub-XXXXXXXXXXXXXXXX

# 데이터베이스
DATABASE_URL=postgresql://...

# API 키 (서버 사이드 전용)
OPENAI_API_KEY=sk-...

NEXT_PUBLIC_ 접두사가 붙은 변수는 클라이언트에 노출됩니다. API 키는 절대 NEXT_PUBLIC_으로 설정하지 마세요.

로컬에서 Vercel 환경 변수 사용

vercel env pull .env.local

Vercel에 설정된 환경 변수를 로컬 .env.local로 가져옵니다.

성능 최적화

1. 이미지 최적화

next/image를 사용하면 Vercel이 WebP 변환과 크기 조정을 자동 처리합니다.

import Image from 'next/image';

<Image
  src="/hero.png"
  width={1200}
  height={630}
  alt="히어로 이미지"
  priority  // LCP 이미지에 추가
/>

무료 플랜 최적화 이미지 처리: 1,000개/월 (초과 시 원본 서빙)

2. Edge Functions 활용

지역별 지연 시간을 줄이는 Edge Functions는 무료 플랜에서도 사용 가능합니다.

// app/api/hello/route.ts
export const runtime = 'edge';  // 엣지에서 실행

export async function GET() {
  return Response.json({ message: 'Hello from the edge!' });
}

3. ISR (Incremental Static Regeneration)

정적 빌드의 장점을 유지하면서 콘텐츠를 주기적으로 갱신합니다.

// 60초마다 재생성
export const revalidate = 60;

export default async function Page() {
  const data = await fetch('https://api.example.com/data', {
    next: { revalidate: 60 },
  });
  // ...
}

4. 빌드 캐시 최적화

Vercel은 node_modules와 .next/cache를 자동 캐싱합니다. 빌드 시간을 크게 줄여줍니다.

무료 티어 부가 서비스

Vercel Analytics

Core Web Vitals를 실사용자 데이터로 모니터링합니다.

npm install @vercel/analytics

// app/layout.tsx
import { Analytics } from '@vercel/analytics/react';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Analytics />
      </body>
    </html>
  );
}

무료 플랜: 2,500 이벤트/월 (소규모 사이트에 충분)

Vercel Speed Insights

npm install @vercel/speed-insights

import { SpeedInsights } from '@vercel/speed-insights/next';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <SpeedInsights />
      </body>
    </html>
  );
}

Edge Config (무료)

전역 설정 저장소. 배포 없이 값을 변경할 수 있습니다.

npm install @vercel/edge-config

import { get } from '@vercel/edge-config';

const isMaintenanceMode = await get('maintenanceMode');

활용 예: A/B 테스트 플래그, 기능 토글, 차단 IP 목록

GitHub Actions와 통합

Vercel CLI를 GitHub Actions에서 사용해 배포를 제어할 수 있습니다.

# .github/workflows/deploy.yml
name: Deploy to Vercel

on:
  push:
    branches: [main]

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Install Vercel CLI
        run: npm install -g vercel

      - name: Deploy to Production
        run: vercel --prod --token=${{ secrets.VERCEL_TOKEN }}
        env:
          VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
          VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}

Hobby → Pro 플랜 업그레이드 시점

다음 상황이 되면 Pro 플랜($20/월) 전환을 고려하세요.

상황설명
수익 발생Hobby는 약관상 상업적 사용 제한
서버리스 타임아웃10초 제한으로 느린 API 처리 어려움
팀 협업 필요Pro부터 팀 멤버 추가 가능
빌드 대기 줄어야 할 때동시 빌드 수 제한 해소
Analytics 더 필요무제한 이벤트

실제로 Hobby 플랜이 부족한 경우는 생각보다 드뭅니다. 월 수만 PV 규모까지는 Hobby로 충분합니다.

Vercel vs 다른 무료 호스팅 비교

항목Vercel HobbyNetlify FreeGitHub PagesCloudflare Pages
Next.js 최적화최고보통제한적보통
서버리스 함수O (10초)O (10초)XO (Workers)
커스텀 도메인무제한무제한1개무제한
대역폭100GB100GB100GB무제한
빌드 시간6,000분300분제한 없음500회/월
프리뷰 배포자동자동X자동

Next.js 프로젝트라면 Vercel이 가장 최적화되어 있습니다. 빌드 시간이 중요하다면 Cloudflare Pages도 고려할 만합니다.

핵심 정리

배포 흐름:
git push → GitHub → Vercel 자동 빌드 → CDN 배포
소요 시간: 1~3분 (캐시 활용 시 30초 이하)

무료 운영 가능 규모:
- 정적 사이트: 월 수십만 PV
- API 사용 사이트: 월 수만 PV (서버리스 한도 주의)

필수 설정 체크리스트:
- [ ] GitHub 연동 완료
- [ ] 커스텀 도메인 연결
- [ ] 환경 변수 설정 (NEXT_PUBLIC_* 주의)
- [ ] Analytics 설치
- [ ] next/image 사용으로 이미지 최적화

관련 글: Next.js SSG 완전 가이드 · GitHub Actions CI/CD 가이드

DF

DevFinance 편집팀

현직 소프트웨어 엔지니어가 운영합니다. IT 업계 종사자에게 필요한 재테크·기술 정보를 공식 데이터와 실무 경험을 바탕으로 정리합니다.

더 알아보기

관련 글