blevels

Home / AI / AI 바이브코딩 / 바이브코딩 첫 배포 가이드 — Vercel로 10분 만에 앱 올리는 법

VIBE

바이브코딩 첫 배포 가이드 — Vercel로 10분 만에 앱 올리는 법

게시일 2026-04-30수정일 2026-04-30
공식 링크
On this page

바이브코딩으로 앱 프로토타입을 완성했다면, 다음 단계는 세상에 공개하는 것이다. Vercel은 GitHub 리포지토리를 연결하는 것만으로 자동 배포 파이프라인을 구성해 준다. 이 가이드는 Next.js 앱을 기준으로 Vercel 첫 배포부터 커스텀 도메인 연결까지 전체 과정을 단계별로 안내한다.

:::callout type=info 이 튜토리얼은 Next.js 14+ / Vercel CLI 36+ 기준입니다 (2026-04). Vercel 대시보드 UI는 업데이트로 변경될 수 있으니 공식 문서를 병행해서 확인하세요. :::

목표

이 튜토리얼이 끝나면 바이브코딩으로 만든 Next.js 앱이 https://내앱.vercel.app 주소로 인터넷에 공개된다. 이후 커스텀 도메인(예: myblog.com)을 연결하는 방법도 다룬다. 예상 소요 시간은 약 10~15분이다.

준비물

  • Node.js 20 이상이 설치된 개발 환경
  • Next.js 앱 (로컬에서 npm run dev 정상 실행 확인)
  • GitHub 계정 (무료)
  • Vercel 계정 (GitHub 연동 무료)

1단계 — GitHub에 코드 올리기

Vercel은 GitHub 리포지토리를 직접 읽어 배포한다. 로컬 프로젝트를 GitHub에 올리는 것이 첫 단계다.

git init
git add .
git commit -m "initial commit"

GitHub CLI(gh)가 설치된 경우:

gh repo create my-app --public --source=. --push

CLI가 없다면 GitHub 웹에서 새 리포지토리를 만들고, 다음 명령으로 연결한다.

git remote add origin https://github.com/username/my-app.git
git push -u origin main
AD

2단계 — Vercel 프로젝트 생성 및 배포

1. vercel.com 접속 후 GitHub 계정으로 로그인 2. 대시보드에서 Add New Project 클릭 3. 방금 만든 GitHub 리포지토리 선택 후 Import 4. Framework Preset이 Next.js 로 자동 감지되는지 확인 5. Deploy 클릭

배포가 완료되면 https://my-app-xxxx.vercel.app 형태의 URL이 생성된다. main 브랜치에 push 할 때마다 자동으로 재배포(Continuous Deployment)가 트리거된다.

3단계 — 환경변수 설정

API 키, 데이터베이스 URL 같은 비밀 값은 코드에 직접 넣으면 안 된다. Vercel 대시보드에서 환경변수로 관리한다.

1. Vercel 프로젝트 대시보드 → Settings → Environment Variables 2. Name과 Value 입력 후 Save 3. 환경(Production, Preview, Development)을 선택해 적용 범위를 조정

NEXT_PUBLIC_API_URL = https://api.example.com
GEMINI_API_KEY = your-key-here

NEXT_PUBLIC_ 접두사가 붙은 변수는 클라이언트 측 코드에서도 접근 가능하다. API 키처럼 노출되면 안 되는 값은 접두사 없이 서버 측에서만 사용한다. 환경변수를 추가하거나 수정하면 재배포가 필요하다.

AD

4단계 — 커스텀 도메인 연결

Vercel의 기본 URL 외에 직접 구매한 도메인을 연결할 수 있다.

1. Vercel 프로젝트 → Settings → Domains 2. 도메인 입력 후 Add 3. 도메인 등록업체(가비아, 카페24, Namecheap 등) DNS 설정에서 Vercel이 안내하는 CNAME 또는 A 레코드 추가 4. DNS 전파에 수 분~24시간 소요

Vercel은 Let's Encrypt를 통해 SSL 인증서를 자동 발급·갱신한다. 별도 SSL 설정은 필요 없다.

결과 확인

배포된 URL에 접속해 앱이 정상 작동하는지 확인한다. Vercel 대시보드의 Deployments 탭에서 배포 히스토리와 빌드 로그를 확인할 수 있다. 오류가 있으면 Build Logs 탭에서 원인을 찾는다.

다음 단계

  • 분석 도구: Vercel Analytics 또는 Google Analytics 연결
  • 에러 모니터링: Sentry 연동으로 프로덕션 오류 알림 설정
  • Preview 배포: Pull Request마다 자동으로 미리보기 URL 생성

관련 가이드: nextjs-setup · vercel-env-vars · github-actions-deploy

AD