Vercel 완전 가이드 — GitHub 연동부터 빌드·배포까지

Vercel 완전 가이드 — GitHub 연동부터 빌드·배포까지

개인 프로젝트나 사이드 프로젝트를 만들 때, 서버 세팅·빌드·배포까지 직접 맞추는 과정이 부담스러우셨나요? Vercel은 Git 저장소에 코드를 push하는 것만으로 웹사이트와 애플리케이션을 자동 빌드·배포해 주는 프론트엔드 클라우드 플랫폼입니다.

이번 글에서는 Vercel이란 무엇인지, GitHub 연동 방법, Repository 연결부터 빌드·배포 흐름(Preview · Production)까지 처음 시작하는 분도 따라 할 수 있게 정리했습니다.

▲ Vercel — Git push 한 번으로 빌드·배포 자동화

핵심 요약
· Vercel — Git 연동 프론트엔드 클라우드 · push마다 자동 배포
· 연동 — GitHub · GitLab · Bitbucket · Azure DevOps 지원
· 흐름 — Repository Import → 빌드 → Preview URL → Production 배포
· Preview — 브랜치·PR마다 고유 URL · Production — main 병합 시 라이브 도메인 갱신
· 대표 프레임워크 — Next.js · React · Vue · Svelte · Astro 등

핵심 동작

Git push → 배포

Preview

브랜치·PR

Production

main 병합

CLI

vercel

 

---

Vercel이란?

Vercel

Vercel은 프론트엔드·풀스택 웹 애플리케이션을 위한 호스팅·배포 클라우드입니다. Next.js를 만든 팀이 운영하며, 정적 사이트부터 서버리스 함수까지 글로벌 CDN 위에서 실행됩니다.

전통적인 방식은 서버를 직접 임대하고, 빌드 스크립트를 작성하고, 배포 파이프라인을 따로 구성해야 했습니다. Vercel은 Git 저장소와 연결해 두면, 코드가 올라올 때마다 빌드 → 배포 → URL 발급을 자동으로 처리합니다.

구분	전통 호스팅	Vercel
서버 관리	직접 설정·패치	플랫폼이 관리
배포	FTP·SSH·수동 스크립트	Git push 자동
미리보기	별도 스테이징 서버	Preview URL 자동 생성
HTTPS	인증서 직접 설정	기본 제공
롤백	수동 복구	이전 배포 즉시 복원

📌 Vercel의 핵심 가치 — 개발자는 코드에 집중하고, 인프라·빌드·배포는 플랫폼에 위임합니다. 특히 프론트엔드·Jamstack·Next.js 프로젝트와 궁합이 좋습니다.

 

---

GitHub 연동 — 사전 준비

Vercel은 GitHub뿐 아니라 GitLab·Bitbucket·Azure DevOps도 지원합니다. 여기서는 가장 많이 쓰는 GitHub 기준으로 설명합니다.

필요한 것

항목	설명
Vercel 계정	vercel.com 가입 (GitHub 계정으로 로그인 가능)
GitHub Repository	배포할 프로젝트 코드가 올라간 저장소
빌드 가능한 코드	package.json·프레임워크 설정 등 로컬에서 빌드 성공 상태
Vercel for GitHub 앱	대시보드에서 Import 시 설치·권한 부여

💡 팁 — 로컬에서 npm run build(또는 프레임워크별 빌드 명령)가 성공한 뒤 Vercel에 연결하면, 배포 실패 원인을 줄일 수 있습니다.

 

---

Repository 연결 — 단계별 가이드

Vercel 대시보드에서 New Project를 누르면 Git 저장소를 Import하는 마법사가 시작됩니다.

1

Vercel 로그인 — vercel.com 접속 후 GitHub 계정으로 로그인합니다.

2

Add New → Project — 대시보드 우측 상단 New Project를 클릭합니다.

3

Git Provider 연결 — Continue with GitHub를 선택하고, Vercel for GitHub 앱 설치·권한을 승인합니다. 전체 저장소 또는 특정 Repository만 허용할 수 있습니다.

4

Repository 선택 — 목록에서 배포할 Repository를 고릅니다. 없으면 GitHub에서 먼저 생성한 뒤 새로고침합니다.

5

프로젝트 설정 — Framework Preset(Next.js·React 등) 자동 감지 · Root Directory · Build Command · Output Directory · Environment Variables를 확인합니다.

6

Deploy — Deploy 버튼을 누르면 첫 빌드·배포가 시작됩니다. 완료 후 *.vercel.app URL이 발급됩니다.

⚠️ 주의 — Repository를 Private으로 두려면 Vercel 플랜·권한 범위를 확인하세요. 빌드 실패 시 Deployments 탭의 Build Logs에서 오류 메시지를 먼저 확인합니다.

 

---

빌드(Build) — Vercel이 하는 일

코드를 push하면 Vercel은 클라우드 환경에서 빌드 파이프라인을 실행합니다. 프레임워크에 따라 과정이 조금씩 다르지만, 흐름은 동일합니다.

단계	내용
1. Clone	GitHub에서 해당 커밋·브랜치 코드를 가져옵니다
2. Install	npm · yarn · pnpm 등으로 의존성 설치
3. Build	npm run build 등 빌드 명령 실행
4. Output	정적 파일·서버리스 함수 번들 생성
5. Deploy	글로벌 Edge Network에 배포·URL 연결

자주 쓰는 빌드 설정

설정	기본값 예시	설명
Framework Preset	Next.js	빌드 명령·출력 경로 자동 추천
Build Command	npm run build	프로젝트에 맞게 수정 가능
Output Directory	.next · dist · out	프레임워크별 빌드 결과 폴더
Install Command	npm install	pnpm · yarn 사용 시 변경
Root Directory	./	모노레포 하위 폴더 지정 시 사용

# 로컬에서 Vercel CLI로 빌드 테스트 (선택)
npm i -g vercel
vercel build

💡 환경 변수 — API 키·DB URL 등은 Project Settings → Environment Variables에 등록합니다. Preview·Production·Development 스코프를 나눠 둘 수 있습니다.

 

---

배포(Deploy) — Preview vs Production

Vercel은 기본적으로 3가지 환경을 구분합니다. Local(로컬 개발) · Preview(테스트·QA) · Production(실서비스)입니다.

Preview브랜치·PR

Preview Deployment

Production 브랜치(보통 main)가 아닌 브랜치에 push하거나, GitHub에서 Pull Request를 열면 자동으로 Preview 배포가 생성됩니다.

· 브랜치 URL — 해당 브랜치 최신 커밋을 가리킴
· 커밋 URL — 특정 커밋 SHA에 고정
· PR 코멘트에 Preview 링크가 달리는 경우가 많음

Production

Production Deployment

main(또는 지정한 Production Branch)에 merge·push하면 Production 배포가 실행됩니다. 성공 시 커스텀 도메인이 새 배포를 가리키도록 갱신됩니다.

트리거	배포 유형	URL
feature 브랜치 push	Preview	프로젝트명-브랜치.vercel.app
Pull Request 생성·업데이트	Preview	PR별 고유 URL
main 브랜치 merge	Production	프로덕션 도메인
vercel --prod (CLI)	Production	프로덕션 도메인

📌 추천 워크플로 — feature 브랜치에서 작업 → Preview URL로 팀·본인 검증 → PR merge → Production 자동 배포. main에 바로 push하지 않는 습관이 안전합니다.

롤백(Rollback)

Production 배포 후 문제가 생기면, Vercel 대시보드 Deployments에서 이전 성공 배포를 Promote하거나 Instant Rollback으로 빠르게 되돌릴 수 있습니다. Git revert와 함께 쓰면 복구가 수월합니다.

 

---

지원 프레임워크·기능

Vercel

Vercel은 Next.js에 최적화되어 있지만, 다양한 프론트엔드 스택을 지원합니다.

분류	예시
프레임워크	Next.js · React · Vue · Nuxt · Svelte · SvelteKit · Astro · Remix
정적 사이트	HTML · Vite · Create React App
서버리스	API Routes · Edge Functions · Serverless Functions
부가 기능	Image Optimization · ISR · Routing Middleware · Analytics

백엔드 API가 필요하면 Vercel Functions로 같은 프로젝트 안에 엔드포인트를 둘 수 있습니다. 별도 서버 없이 API + 프론트를 한 Repository에서 관리하는 구조가 흔합니다.

 

---

CLI로 배포하기 (선택)

대시보드 없이 터미널에서도 배포할 수 있습니다. Git 연동과 병행하는 경우가 많습니다.

# Vercel CLI 설치
npm i -g vercel

# 프로젝트 폴더에서 첫 연결·Preview 배포
vercel

# Production 배포
vercel --prod

GitHub Actions와 Vercel CLI를 조합해 커스텀 CI/CD를 구성할 수도 있습니다. 기본 Git 연동만으로도 대부분의 개인·소규모 프로젝트는 충분합니다.

 

---

자주 묻는 질문 (FAQ)

Q. Vercel은 무료로 쓸 수 있나요?

개인·취미 프로젝트용 Hobby 플랜이 있습니다. 빌드 시간·대역폭·팀 기능 등에 사용 한도가 있으므로, 트래픽이 커지면 Pro 플랜을 검토하세요. 최신 한도는 vercel.com/pricing에서 확인합니다.

Q. GitHub 없이도 배포할 수 있나요?

네. Vercel CLI로 로컬 폴더를 직접 업로드하거나, GitLab·Bitbucket을 연결할 수 있습니다. 다만 push마다 자동 Preview를 쓰려면 Git 연동이 가장 편합니다.

Q. 빌드가 실패하면 어디를 보나요?

Vercel 대시보드 → 해당 Project → Deployments → 실패한 배포 → Building 로그를 확인합니다. 로컬 빌드 오류·환경 변수 누락·Node 버전 불일치가 흔한 원인입니다.

Q. Preview와 Production 환경 변수가 다르나요?

네. Environment Variables 설정에서 Production · Preview · Development 스코프를 나눌 수 있습니다. 테스트 API와 운영 API 키를 분리하는 데 유용합니다.

Q. Netlify와 뭐가 다른가요?

둘 다 Git 연동·Jamstack 호스팅 플랫폼입니다. Vercel은 Next.js·React 생태계와의 통합·Edge Functions에 강점이 있고, Netlify는 폼 처리·Split Testing 등 자체 기능이 풍부합니다. 프로젝트 스택에 맞게 선택하면 됩니다.

 

---

체크포인트

• Vercel = Git push 기반 자동 빌드·배포 프론트엔드 클라우드
• New Project → GitHub 연결 → Repository Import → Deploy
• Preview = 브랜치·PR · Production = main merge
• 배포 전 로컬 npm run build 성공 여부 확인
• 환경 변수는 Preview·Production 스코프 분리
• 실패 시 Deployments → Build Logs 확인

 

---

마무리

Vercel은 「코드만 push하면 배포까지 끝」이라는 경험에 가깝습니다. GitHub Repository를 연결해 두면, 브랜치마다 Preview URL이 생기고 main에 병합하면 Production이 갱신되는 흐름이 자연스럽게 잡힙니다.

처음에는 Hobby 플랜으로 사이드 프로젝트 하나를 올려 보세요. 빌드 설정·환경 변수·도메인 연결을 직접 경험해 보면, 이후 팀 프로젝트에서도 같은 패턴을 그대로 확장할 수 있습니다.

Git에 push하는 것만으로
빌드 · Preview · Production까지 이어지는 흐름.
Vercel로 배포 부담을 줄여 보세요.

Vercel 공식 사이트 → Git 배포 공식 문서 →

📌 한 줄 요약 3가지

① Vercel = GitHub 연동 · push → 자동 빌드·배포 프론트엔드 클라우드

② New Project로 Repository Import → Preview(브랜치·PR) · Production(main)

③ 빌드 실패 시 Build Logs · 환경 변수 Preview·Production 분리

👉 코드 편집과 AI 위임 — Cursor Editor vs Agents 비교 가이드

👉 커서 AI 처음 쓰는 사람을 위한 6가지 필수 설정 (@Web·@Docs·Rules)

 

 

 

 

 

Cursor AI 에이전트 유료 결제 아깝지 않게 쓰는 법 — Pro $20 절약 팁 7가지
https://devtzu.tistory.com/414

Cursor AI 에이전트 유료 결제 아깝지 않게 쓰는 법 — Pro $20 절약 팁 7가지

 

 

 

 

 

자율형 AI 에이전트 업무 자동화 2026 — SAP·세일즈포스 솔루션 총정리
https://devtzu.tistory.com/418

자율형 AI 에이전트 업무 자동화 2026 — SAP·세일즈포스 솔루션 총정리

 

 

 

 

 

#Vercel #버셀 #GitHub #웹배포 #Next.js #프론트엔드 #클라우드 #DevOps #사이드프로젝트 #개발가이드