"배포 입문 (4/7) — 무료 배포 1: Vercel로 프론트엔드 자동 배포하기"

-

Vercel이 쉬워 보이는 이유는 배포 자체를 단순화해서가 아니라, 브랜치와 배포 환경의 연결을 자연스럽게 만들어 주기 때문이다.

핵심 요약

  • Vercel은 Git 저장소를 연결하면 브랜치 푸시마다 preview deployment, production branch 머지마다 production deployment를 자동으로 만든다.
  • 공식 문서 기준으로 2026-05-18 현재 Vercel Hobby 플랜은 무료이며, 개인 프로젝트와 소규모 앱용으로 제공된다.
  • 프론트엔드와 현대적 웹 프레임워크에는 특히 강하지만, 장시간 백엔드 프로세스 운영을 대체하는 서비스는 아니다.
  • Vercel의 핵심 학습 포인트는 "한 번 올리기"가 아니라 브랜치 전략과 배포 전략이 연결되는 방식이다.

1. 왜 Vercel이 입문자에게 잘 맞을까

초보자가 가장 힘들어하는 지점은 서버 설정이 아니라 배포 흐름의 추상화다. 어떤 브랜치가 실서비스인지, 테스트용 링크는 어디서 보이는지, 머지 전과 후가 어떻게 달라지는지 감이 잘 오지 않는다.

Vercel은 이 부분을 꽤 깔끔하게 보여 준다.

  • feature branch에 푸시하면 preview 링크 생성
  • PR에서 미리보기 확인 가능
  • main 같은 production branch에 머지하면 production 배포

즉, Git의 흐름을 실제로 보이는 URL 흐름으로 번역해 준다.

2. 기본 배포 구조

공식 Git 배포 문서 기준으로 Vercel은 GitHub, GitLab, Bitbucket, Azure DevOps 저장소를 연결할 수 있다. 일반적인 사용 방식은 GitHub 저장소 import다.

구조는 보통 아래처럼 이해하면 된다.

feature branch push
  -> preview deployment URL 생성

main merge
  -> production deployment 생성

여기서 preview는 "검토용", production은 "사용자용"이다. 이 구분이 있으면 메인 브랜치를 머지하기 전에 실제 동작을 링크로 확인할 수 있다.

3. 무료 플랜에서 어디까지 가능한가

2026-05-18 기준 Vercel 공식 문서와 가격 페이지에 따르면 Hobby 플랜은 free tier다. 기본적인 Git 연동, 자동 CI/CD, preview deployment, HTTPS, 일정 사용량의 함수/로그/전송량이 포함된다.

중요한 포인트는 "무료"가 "무한"은 아니라는 점이다. 취미 프로젝트와 포트폴리오, 작은 서비스 검증에는 충분하지만, 사용량이 커지면 제한을 먼저 이해해야 한다.

즉, Vercel에서의 첫 질문은 "무료인가?"보다 "내 앱의 성격이 Hobby 플랜과 맞는가?"여야 한다.

4. 언제 특히 강한가

Vercel은 아래 상황에서 강하다.

  • 정적 또는 하이브리드 프론트엔드
  • Next.js 같은 프레임워크
  • PR 리뷰 전에 실제 화면을 확인하고 싶을 때
  • 팀이 preview URL을 중심으로 피드백할 때

반대로 아래 상황에서는 다른 선택지가 더 낫다.

  • 장시간 실행되는 백엔드 워커
  • 데이터베이스와 별도 서버 프로세스 중심 구조
  • 인프라 제어권이 더 중요한 경우

5. 자주 틀리는 지점

첫째, preview와 production 환경 변수를 같다고 가정하는 것. 브랜치에 따라 값이 달라질 수 있다.

둘째, 로컬에서는 되는데 Vercel 빌드에서 깨지는 경우를 "플랫폼 문제"로만 보는 것. 실제로는 빌드 커맨드, Node 버전, 경로 대소문자 차이 같은 기본 설정 문제가 많다.

셋째, Vercel을 백엔드 서버 대체재로 과하게 기대하는 것. Vercel은 프론트엔드 배포 경험이 매우 좋지만, 모든 런타임 문제를 해결해 주는 범용 플랫폼은 아니다.

6. 입문자용 최소 운영 규칙

Vercel을 처음 쓸 때는 아래 네 가지만 기억하면 된다.

  1. main은 production branch로 둔다.
  2. 새 작업은 feature branch에서 시작한다.
  3. preview URL에서 먼저 확인한다.
  4. production 환경 변수는 preview와 분리해서 관리한다.

이 네 줄이 바로 다음 편의 Streamlit, 그다음 Railway와 대비되는 기준선이 된다.

참고 자료

  • Vercel Docs, Deploying Git Repositories with Vercel — https://vercel.com/docs/git
  • Vercel Docs, Vercel Hobby Plan — https://vercel.com/docs/accounts/plans/hobby
  • Vercel Pricing — https://vercel.com/pricing

이 글은 배포 입문 시리즈의 4/7 편입니다. 다음 편: Streamlit Community Cloud로 Python 데이터 앱 공개하기.

댓글

댓글 쓰기

이 블로그의 인기 게시물

"LLM 핵심 학습 (1/6) — 기본: 토큰화·임베딩·어텐션·위치 인코딩"

-
이미지
(시리즈 시작) 📚 시리즈 목차 2/6 파인튜닝 → 트랜스포머 한 블록의 데이터 흐름을 문자열 → 토큰 → 임베딩 → 어텐션 → 출력 표현 까지 손으로 풀어 본다. 이번 편이 끝나면 "왜 \(\sqrt{d_k}\)로 나누는가", "RoPE는 무엇을 회전시키는가", "한국어가 영어보다 토큰이 많은 까닭은 무엇인가"가 한 줄로 설명될 수 있다. 0. 학습 목표 이 편을 마치면 다음을 직접 할 수 있다. BPE 토크나이저 가 어휘를 어떻게 학습하고 새 문자열을 어떻게 자르는지 종이 위에서 시뮬레이션한다. 임베딩 행렬 의 모양과 초기화, weight tying의 의미를 한 줄로 설명한다. Scaled Dot-Product Attention 의 식을 차원 단위로 추적하고 PyTorch 30줄로 재현한다. Multi-Head Attention 이 한 헤드와 비교해 무엇이 다른지, 헤드 수가 늘면 어디가 비싸지는지 답한다. Sinusoidal·RoPE·ALiBi 세 위치 인코딩의 식과 외삽 성질을 구분한다. 컨텍스트 확장이 왜 \(O(N^2)\)인지, "Lost in the Middle"이 왜 발생하는지 설명한다. 1. 핵심 요약 트랜스포머의 입력은 문자열 이 아니라 정수 ID 시퀀스 다. 토크나이저가 문자열 → ID로 자른다. 임베딩은 정수 ID를 \(d\)차원 벡터로 lookup하는 학습 가능한 테이블이다. Self-Attention은 \(\text{softmax}(QK^\top / \sqrt{d_k}) V\) 한 줄이 핵심이고, 멀티헤드는 같은 연산을 여러 부분 공간에서 병렬화한 것이다. 위치 정보는 임베딩에 직접 더하거나(Sinusoidal), Q·K에 회전을 가하거나(RoPE), 어텐션 스코어에 거리 패널티를 더해서(ALiBi) 주입한다. 컨텍스트 길이 \(N\)에 대해 표준 어텐션은 \(O(N^2)\) 비용을 갖고, 긴 컨텍스트에서는 중간 위...
Read more »

"LLM 핵심 학습 (2/6) — 파인튜닝: LoRA·QLoRA·증류·Adapter"

-
이미지
← 1/6 기본 📚 시리즈 목차 3/6 디코딩과 생성 → 사전학습된 LLM을 내 데이터 에 적응시키는 방법을 비용·메모리·일반화 관점에서 정리한다. Full FT의 한계 → Adapter → LoRA → QLoRA → Distillation 순으로 같은 그림을 점점 확대해 본다. 0. 학습 목표 Full fine-tuning의 메모리 병목을 옵티마이저 상태·그래디언트·가중치·활성화 의 4분할로 설명한다. Adapter(Houlsby 2019)와 LoRA(Hu 2021)의 식 차이를 한 줄로 적는다. LoRA의 \(A, B\) 행렬이 왜 저랭크 이고, rank \(r\) 선택이 무엇을 결정하는지 답한다. QLoRA(Dettmers 2023)의 NF4·double-quant·paged optimizer를 분리해서 설명한다. Catastrophic Forgetting을 분포 시프트 관점에서 정의하고 완화 기법을 두 개 이상 든다. Hinton 2015의 Knowledge Distillation 식을 손으로 유도한다. 1. 핵심 요약 Full FT는 메모리/디스크/시간 모두 비싸다. 7B 모델 full FT는 V100 8장 + A100 1장으로도 큰 부담이다. PEFT(파라미터 효율 파인튜닝) 일가족은 극히 일부 파라미터만 학습 해 같은 효과를 얻는다. LoRA: \(\Delta W = BA\) (rank \(r \ll \min(d_{\text{in}}, d_{\text{out}})\))로 가중치 업데이트를 저랭크 분해. QLoRA: 베이스 모델을 4-bit(NF4)로 양자화한 채 LoRA만 풀-정밀(BF16)으로 학습. Catastrophic Forgetting: 새 분포에 적응하느라 이전 능력이 무너지는 현상. PEFT 자체가 부분 완화책. Distillation: 큰 교사 모델의 soft target 을 학습 신호로 써서 작은 학생 모델 을 만든다. 2. 직관: 왜 사전학습만으로는 부족한가 사전학습은 일반...
Read more »

"ML 기초 학습 (1/9) — 머신러닝과 sklearn: 학습의 좌표계"

-
이미지
(시리즈 시작) 📚 시리즈 목차 2/9 이웃 알고리즘 → 이 시리즈는 신경망과 로컬 LLM으로 가기 전에 손에 익혀 둬야 할 머신러닝 기초 9편이다. 1편은 모든 ML 코드가 공유하는 공통 문법 을 잡는 데 쓴다. sklearn은 그 문법을 가장 일관되게 보여주는 도구다. 이번 편이 끝나면 어떤 모델을 만나도 fit → predict → score → 평가 흐름이 같다는 것이 손에 잡힌다. 0. 학습 목표 이 편을 마치면 다음을 할 수 있어야 한다. 지도학습·비지도학습·강화학습을 한 문장씩 구분해 설명한다. sklearn의 estimator 인터페이스 ( fit , predict , score , transform )를 코드 한 화면 안에서 쓸 수 있다. train/validation/test 분할을 왜 하는지, 어디서 데이터 누수가 생기는지 식과 그림으로 설명한다. 분류·회귀의 핵심 평가 지표(accuracy, precision, recall, F1, MSE, R²)를 정의에서 직접 계산할 수 있다. k-fold 교차검증 을 코드 한 줄로 돌리고, 결과의 평균과 표준편차를 함께 보고할 수 있다. Pipeline 으로 전처리와 모델을 묶어 데이터 누수를 구조적으로 막는 방법을 설명한다. 1. 핵심 요약 머신러닝은 데이터에서 함수 \(f: X \to Y\)를 찾는 작업 이다. 어떤 모델이든 이 본질은 같다. sklearn은 모든 모델을 같은 인터페이스( fit , predict , score )로 통일해, 모델을 바꿀 때 한 줄만 바꾸면 되게 한다. train/val/test 세 분할이 표준이다. 검증으로 하이퍼파라미터를 고르고, 테스트는 마지막에 한 번만 본다. 데이터 누수 (test 정보가 train에 새는 현상)는 ML 입문자가 가장 자주 만드는 실수이며, Pipeline + cross_val_score 조합으로 구조적으로 막을 수 있다. 평가 지표는 문제 유형 (분류/회귀) 과 클래스 불균형...
Read more »