Vercel 개요 실습 예시

"내가 만든 걸 어디에, 어떻게 올릴지" 정하는 의사결정 중심 시나리오  |  ← 레퍼런스로 돌아가기

이 파일의 목적개요 레퍼런스를 보완하는 의사결정·오리엔테이션 시나리오
레퍼런스 문서Overview_Manual.html
작성일2026년 6월 13일
● 초급 방향 잡기 아직 아무것도 안 깔았을 때, 큰 그림부터
O-1초급AI가 만들어 준 웹앱, 어디에 올릴까
Claude에게 부탁해 간단한 웹앱(또는 정적 페이지) 코드를 받았습니다. 내 컴퓨터에서는 보이는데, 다른 사람에게 링크로 보여 주려면 인터넷 어딘가에 "배포"해야 합니다. 그런데 Vercel·Netlify·GitHub Pages… 선택지가 너무 많습니다. 무엇을 기준으로 고를지 정합니다.
판단 순서
  1. 먼저 "내 앱에 서버 로직이 있나?"를 본다

    로그인, 결제, 데이터베이스 저장, 서버에서 AI 호출 같은 게 있으면 "동적", 화면만 보여 주면 "정적"입니다. AI에게 "이 앱에 서버 사이드 기능이 있어?"라고 물어보면 알려 줍니다.

  2. 아래 의사결정 표에 대입한다
    내 상황은?
    순수 정적(문서·포트폴리오·랜딩)GitHub Pages 또는 Vercel — 둘 다 무료. 완전 무료·초단순을 원하면 GitHub Pages
    Next.js·React 앱(서버 기능 포함)Vercel — 추가 설정 없이 가장 매끄러움 (이 핸드북의 기본 경로)
    상시 백엔드 서버·DB·크론이 필요Render / Railway
    트래픽이 매우 크고 대역폭 비용이 걱정Cloudflare
  3. 입문 단계라면 Vercel로 시작한다

    대부분의 AI 생성 앱은 Next.js·React·정적이라 Vercel이 가장 마찰이 적습니다. 나중에 필요가 분명해지면 위 표대로 옮겨 가면 됩니다.

"어느 게 더 좋냐"가 아니라 "내 앱이 무엇을 필요로 하느냐"가 기준입니다. 정적이면 어디든 잘 되고, 서버 기능이 끼는 순간 선택지가 좁아집니다.
관련 문서: 종합 비교표 · 왜 Vercel이 표준인가
O-2초급Vercel 계정 만들고 대시보드 둘러보기
Vercel로 가기로 정했습니다. 첫 배포(②·③ 섹션)에 들어가기 전에, 가입하고 대시보드의 주요 위치를 익혀 둡니다. 길을 알면 이후 모든 설명이 쉬워집니다.
단계별
  1. vercel.com/signup에서 가입

    GitHub 계정으로 가입하는 것을 권장합니다. 나중에 GitHub 연동 배포(② 섹션)를 쓸 때 그대로 이어집니다.

  2. 대시보드의 4개 영역을 눈에 익힌다
    위치무엇을 하는 곳
    Overview / Projects내 프로젝트 목록. 각 프로젝트의 최신 배포·도메인이 보임
    Add New ▾새 프로젝트 추가(Git 저장소 Import 등)의 출발점
    프로젝트 → Deployments그 프로젝트의 모든 배포 이력. 여기서 롤백·승격
    프로젝트 → Settings도메인·환경 변수·빌드 설정·Git 연결 관리
  3. 아직 아무것도 배포하지 않아도 괜찮다

    지금은 "어디에 무엇이 있는지" 지도만 그려 둔 상태입니다. 실제 배포는 ② GitHub 연동 또는 ③ MCP·CLI 섹션에서 합니다.

가입은 무료 Hobby 플랜으로 시작됩니다. 학습·포트폴리오에는 카드 등록 없이 충분합니다.
다음: GitHub 연동 첫 배포 → 또는 CLI·MCP 직접 배포 →
● 중급 상황에 맞게 정하기 경로·비용을 내 케이스에 맞춰 판단
O-3중급두 배포 경로 중 내 상황에 맞는 것 고르기
Vercel에 올리는 방법이 GitHub 연동과 MCP·CLI 직접, 두 가지라는 걸 알았습니다. 지금 내 상황에서 어느 쪽으로 시작할지 정합니다.
선택 기준
지금 내 상황은?
혼자 빠르게 결과만 보고 싶다MCP·CLI 직접 — "배포해줘" 한마디 또는 vercel 한 줄
코드가 이미 GitHub에 있다GitHub 연동 — Import 한 번이면 이후 push마다 자동
팀과 협업·리뷰가 필요하다GitHub 연동 — PR 미리보기·변경 이력
AI와 대화하며 만들고 즉시 확인하는 반복MCP·CLI 또는 v0
대부분의 학습자는 "③ CLI/MCP로 빠르게 띄워 감 잡기 → ② GitHub 연동으로 정착" 순서로 자연스럽게 옮겨 갑니다. 둘은 경쟁이 아니라 단계입니다.
두 방식의 자세한 장단점 표는 ④ 두 방식 비교에 있습니다. 지금은 "빠른 1회성이면 직접, 지속·협업이면 GitHub" 정도로 충분합니다.
O-4중급"무료로 되나?" — 상업 사용 함정 점검
포트폴리오로 만든 사이트가 반응이 좋아, 여기에 광고를 붙이거나 유료 상품을 팔까 고민됩니다. 지금 쓰는 무료 Hobby 플랜으로 계속 가도 되는지 확인합니다.
점검 순서
  1. "이 사이트로 돈을 버는가?"를 자문한다

    광고 수익, 상품·구독 판매, 고객에게 제공하는 상업 서비스 — 이 중 하나라도 해당하면 상업적 사용입니다.

  2. 상업적이면 Pro 이상으로 전환한다

    Vercel Hobby(무료)는 개인·비상업 용도로만 허용됩니다. 상업 서비스는 Pro(월 $20부터)가 필요합니다. 공식 Fair Use 가이드에 명시된 규칙입니다.

  3. 학습·포트폴리오·취미라면 그대로 무료

    이 핸드북 같은 교육 자료, 이력서용 포트폴리오, 개인 실험은 Hobby로 충분합니다.

무료 Hobby 플랜은 한도를 넘겨도 종량제로 자동 과금되지 않습니다. 대신 해당 항목의 사용이 차단·제한되고, 보통 다음 청구 주기에 리셋됩니다. 구체적 동작과 기간은 항목마다 다르니 대시보드 Usage와 공식 한도 문서를 확인하세요. 실서비스라면 이 점만으로도 Pro 전환 이유가 됩니다.
관련: 가격 플랜 · Fair Use Guidelines ↗
● 고급 경계 판단 Vercel이 더 이상 최선이 아닐 때를 분별
O-5고급Vercel을 떠나야 할 때 — 대안 선택
서비스가 커지면서 Vercel이 어색해지는 신호가 보입니다(대역폭 비용 급증, 상시 백엔드 필요 등). 무엇이 신호이고 어디로 옮길지 판단합니다.
신호별 대안
이런 신호가 보이면고려할 대안이유
월 대역폭(트래픽)이 커서 비용이 급증Cloudflare Pages/Workers정적 자산 대역폭이 무료·무제한
24시간 떠 있어야 하는 소켓·워커 서버, 관리형 DB, 크론이 필요Render / Railway서버리스로는 어색한 상시 워크로드를 네이티브 지원
조직이 이미 AWS 표준이고 백엔드와 강결합AWS AmplifyCognito·AppSync·S3 등과 통합
Next.js가 아닌 임의 스택을 Docker로 전 세계 배포Fly.io컨테이너 자유도
순수 정적인데 비용 0를 원함GitHub Pages완전 무료·초단순
대부분은 옮기지 않아도 됩니다. "막연히 더 싸 보여서"가 아니라 구체적 병목(비용·워크로드 종류)이 실제로 나타났을 때만 이전을 검토하세요. 이전에는 마이그레이션 비용이 따릅니다.
프론트엔드만 보면 대안들이 Vercel의 개발자 경험·미리보기·Next.js 최적화를 따라오지 못하는 경우가 많습니다. "더 싸다"의 이면에 "설정·운영 부담이 늘어난다"가 있는지 함께 보세요.
관련: 대안별 요약 · ④ 비교 & 운영 →

다음 문서: ② GitHub 연동 배포 매뉴얼 →