바이브코딩 배포 방법: Vercel 무료 배포 완전 가이드 (2026)

글쓴이 /

바이브코딩으로 앱을 만들었다면, 이미 절반은 성공한 겁니다. 하지만 내 컴퓨터의 localhost:3000에서만 돌아가는 앱은 나만 볼 수 있습니다. 친구에게 자랑하려면, 포트폴리오로 쓰려면, 누군가에게 보여주려면 — 인터넷에 “배포”해야 합니다. 바이브코딩 배포 방법 중 가장 쉬운 것이 바로 Vercel입니다. 이 글에서는 GitHub에 코드를 올리는 것부터 Vercel 배포, 환경 변수, 커스텀 도메인까지 전 과정을 비전공자도 따라 할 수 있도록 안내합니다.

이 글이 도움이 되는 분
• 바이브코딩으로 앱을 만들었지만 배포를 해본 적이 없는 분
• localhost에서만 결과물을 확인하고 있는 분
• Vercel이라는 이름은 들었지만 어떻게 쓰는지 모르는 분
• 무료로 내 앱에 URL을 부여하고 싶은 분
목차

 

🌍 바이브코딩 배포 방법, Vercel을 추천하는 이유

배포라는 단어가 어렵게 느껴질 수 있지만, 쉽게 말해 “내 앱을 인터넷에 올리는 것”입니다. 카페에서 커피를 만들었으면 손님에게 내놓는 단계라고 생각하면 됩니다. 바이브코딩 도구(Cursor, Claude Code 등)로 만든 프로젝트는 대부분 Next.js 기반인데, Vercel은 바로 이 Next.js를 만든 회사에서 운영하는 호스팅 플랫폼입니다. 만든 회사가 직접 운영하니 호환성이 가장 좋고, 설정할 것도 적습니다.

Vercel의 무료 플랜(Hobby)은 개인 프로젝트를 운영하기에 충분한 수준입니다. 월 100GB 대역폭, 자동 SSL 인증서, 커스텀 도메인까지 지원합니다. 클릭 몇 번이면 전 세계 누구나 접속할 수 있는 https://내프로젝트.vercel.app URL을 얻을 수 있습니다.

 

🤔 왜 하필 Vercel인가

AWS, Google Cloud 같은 대형 클라우드도 있지만, 비전공자가 이런 서비스를 다루려면 서버 설정, 네트워크, 보안 그룹 같은 개념을 추가로 학습해야 합니다. Vercel은 이런 복잡한 인프라를 전부 알아서 처리해주기 때문에 “GitHub에 코드 올리기 → Vercel에 연결 → 배포 버튼 클릭”이라는 3단계로 끝납니다. 바이브코딩으로 앱을 만들 수 있었던 것처럼, 배포도 최대한 단순한 방법을 선택하는 것이 핵심입니다.

 

📋 배포 전에 반드시 확인할 것

배포를 시작하기 전에 아래 항목을 확인하세요. 하나라도 빠지면 배포 과정에서 에러가 발생하고, 에러 메시지만으로는 원인을 찾기 어렵습니다.

 

💻 필수 준비물 점검

항목 확인 방법 비고
Node.js 18 이상 node --version 18 미만이면 업그레이드 필요
Git git --version 버전 번호가 출력되면 정상
GitHub 계정 github.com 로그인 무료 계정으로 충분
Vercel 계정 vercel.com 가입 GitHub으로 가입 권장
로컬 빌드 성공 npm run build 빌드 에러 시 배포도 실패

Git이나 Node.js가 아직 설치되어 있지 않다면, 먼저 바이브코딩 Git 설치 가이드와 Node.js 설치 가이드를 따라 설치를 완료하세요.

 

🔨 로컬 빌드 테스트가 먼저인 이유

Vercel에 코드를 올리면 Vercel 서버에서 빌드 과정을 거칩니다. 이 빌드 과정은 내 컴퓨터에서 npm run build를 실행하는 것과 동일합니다. 로컬에서 빌드가 실패하면 Vercel에서도 반드시 실패하기 때문에, 배포 전에 한 번 테스트하는 것이 시간을 아끼는 가장 확실한 방법입니다.

npm run build

빌드가 성공하면 .next 폴더가 생성되고, 터미널에 “Compiled successfully” 또는 페이지별 경로 목록이 출력됩니다. 이 메시지가 보이면 배포 준비가 된 것입니다. 빌드 에러가 발생하면, 에러 메시지를 Cursor 채팅에 붙여넣고 “이 빌드 에러 해결해줘”라고 요청하면 대부분 빠르게 해결됩니다.

실수 패턴: 빌드 테스트 없이 바로 배포
빌드 에러가 있는 상태로 Vercel에 연결하면, 배포가 실패합니다. Vercel 로그에서 에러를 찾아야 하는데, 로컬보다 로그가 길고 읽기 어렵습니다. 반드시 로컬에서 npm run build가 성공한 뒤에 배포하세요.

 

📤 GitHub에 코드 올리기

Vercel은 GitHub 저장소와 연결해서 동작합니다. 내 컴퓨터에만 있는 코드는 Vercel이 가져갈 수 없으니, GitHub이라는 중간 창고에 코드를 먼저 올려야 합니다.

 

📌 GitHub 저장소 만들기

  1. github.com에 로그인합니다.
  2. 오른쪽 상단의 + 버튼 → “New repository”를 클릭합니다.
  3. Repository name에 프로젝트 이름(예: my-vibe-app)을 입력합니다.
  4. Public 또는 Private을 선택합니다. Private으로 설정해도 Vercel 배포에 문제없습니다.
  5. “Create repository”를 클릭하면 완료입니다.

 

📌 로컬 코드를 GitHub에 올리기(Push)

저장소를 만들면 GitHub이 안내 명령어를 보여줍니다. 터미널에서 프로젝트 폴더로 이동한 뒤, 아래 명령어를 순서대로 실행하면 됩니다.

git init
git add .
git commit -m "feat: 초기 버전 배포 준비"
git branch -M main
git remote add origin https://github.com/사용자이름/my-vibe-app.git
git push -u origin main

git push가 성공하면 GitHub 저장소 페이지를 새로고침했을 때 파일 목록이 나타납니다. 이것이 정상 완료 신호입니다. 만약 git push에서 인증 오류가 발생한다면, GitHub 계정 설정에서 Personal Access Token을 생성해 비밀번호 대신 사용하세요.

 

🛡️ .gitignore 확인이 중요한 이유

.gitignore 파일은 GitHub에 올리지 않을 파일 목록입니다. create-next-app으로 프로젝트를 만들었다면 기본값이 들어가 있지만, 직접 확인하는 습관이 중요합니다.

node_modules/
.next/
.env.local
.env

node_modules 폴더를 올리면 저장소 용량이 수백 MB로 커지고, .env 파일을 올리면 API 키 같은 비밀 정보가 공개됩니다. 한 번 GitHub에 올라간 비밀 정보는 커밋 히스토리에 남아 삭제하기가 까다로우니, 올리기 전에 .gitignore를 꼭 점검하세요.

.env 파일이 이미 올라갔다면
GitHub 저장소에서 .env 파일이 보인다면, 해당 파일에 포함된 API 키를 즉시 재발급받으세요. Git 히스토리에 흔적이 남기 때문에 파일만 삭제하는 것으로는 충분하지 않습니다.

 

🚀 Vercel에 프로젝트 배포하기

GitHub에 코드를 올렸다면, 이제 Vercel에서 그 코드를 가져와 배포하는 단계입니다. 처음 한 번만 설정하면, 이후에는 코드를 푸시할 때마다 자동으로 배포됩니다.

 

📌 Vercel 계정 만들기

  1. vercel.com에 접속합니다.
  2. “Sign Up”을 클릭합니다.
  3. “Continue with GitHub”를 선택하면 GitHub 계정과 자동 연결됩니다.

GitHub 계정으로 가입하면 저장소 접근 권한이 자동으로 설정되어 가장 간편합니다. 이메일로 가입하면 나중에 GitHub 연결을 별도로 해야 하므로, GitHub 가입을 권장합니다.

 

📌 프로젝트 가져오기(Import)

  1. Vercel 대시보드에서 “Add New…” → “Project”를 클릭합니다.
  2. “Import Git Repository” 화면에서 방금 올린 저장소를 찾습니다.
  3. 저장소가 보이지 않으면 “Adjust GitHub App Permissions”를 클릭해 Vercel이 해당 저장소에 접근할 수 있도록 권한을 부여합니다.
  4. 저장소를 선택하고 “Import”를 클릭합니다.

 

📌 빌드 설정 확인과 배포

Vercel이 프로젝트를 분석해서 자동으로 설정을 채웁니다. Next.js 프로젝트라면 Framework Preset이 “Next.js”로 잡히고, Build Command는 next build, Output Directory는 .next로 설정됩니다. 대부분의 바이브코딩 프로젝트는 이 기본 설정 그대로 두면 됩니다.

설정 항목 기본값 변경이 필요한 경우
Framework Preset Next.js 자동 감지, 수정 불필요
Build Command next build pnpm 사용 시 pnpm build
Output Directory .next 수정 불필요
Install Command npm install pnpm 사용 시 pnpm install

“Deploy” 버튼을 클릭하면 Vercel이 코드를 가져와 빌드하고 배포합니다. 실시간 로그가 표시되므로 진행 상황을 확인할 수 있습니다. 보통 1~3분이면 완료되고, 성공하면 축하 화면과 함께 https://프로젝트이름.vercel.app 형태의 URL이 부여됩니다. 이 주소를 브라우저에서 열어 화면이 정상적으로 표시되면 배포 성공입니다.

배포 성공 확인 방법
Vercel 대시보드에 초록색 “Ready” 표시가 나오고, 부여된 URL에 접속했을 때 앱 화면이 보이면 정상입니다. 스마트폰에서도 같은 URL로 접속해보세요 — 반응형이 제대로 동작하는지 함께 확인할 수 있습니다.

 

⚙️ 환경 변수 설정 방법

바이브코딩으로 만든 앱이 외부 API(OpenAI, Supabase, Firebase 등)를 사용한다면, 로컬의 .env.local 파일에 API 키를 넣어두었을 겁니다. 이 값들은 GitHub에 올라가지 않기 때문에, Vercel에도 따로 등록해야 합니다. 등록하지 않으면 빌드는 되지만 기능이 동작하지 않는 현상이 발생합니다.

 

📌 Vercel에 환경 변수 추가하기

  1. Vercel 대시보드에서 프로젝트를 선택합니다.
  2. “Settings” 탭으로 이동합니다.
  3. 왼쪽 메뉴에서 “Environment Variables”를 클릭합니다.
  4. Key에 변수 이름(예: OPENAI_API_KEY), Value에 실제 값을 입력합니다.
  5. Environment(Production, Preview, Development) 중 적용할 환경을 선택합니다. 세 개 다 체크하는 것이 안전합니다.
  6. “Save”를 클릭합니다.

 

📌 NEXT_PUBLIC_ 접두사의 의미

변수 접두사 접근 가능 위치 사용 예시
NEXT_PUBLIC_ 브라우저 + 서버 Google Analytics ID, 공개 API URL
접두사 없음 서버만 OpenAI API Key, DB 비밀번호

NEXT_PUBLIC_ 접두사가 붙은 변수는 브라우저 코드에 포함되어 누구나 볼 수 있습니다. API 키처럼 노출되면 안 되는 값은 반드시 접두사 없이 저장하고, 서버 측 코드(API Routes, Server Components)에서만 사용하세요. 환경 변수를 추가하거나 수정한 뒤에는 “Deployments” 탭에서 최신 배포의 오른쪽 점 3개 메뉴 → “Redeploy”를 클릭해야 변경 사항이 반영됩니다.

비밀 키를 NEXT_PUBLIC_으로 저장하면 위험합니다
NEXT_PUBLIC_OPENAI_API_KEY처럼 비밀 키에 공개 접두사를 붙이면, 브라우저 개발자 도구에서 누구나 키를 볼 수 있습니다. 비밀 정보는 접두사 없이 저장하고, 서버 코드를 통해서만 접근하세요.

 

🔄 자동 배포와 프리뷰 배포 활용

Vercel의 가장 편리한 기능은 GitHub과 연동된 자동 배포입니다. 처음 한 번 연결하면, 이후에는 코드를 GitHub에 푸시하기만 하면 Vercel이 알아서 빌드하고 배포합니다.

 

📌 main 브랜치에 푸시하면 자동 배포

main 브랜치에 코드를 푸시하면 프로덕션 환경에 자동으로 배포됩니다. 바이브코딩으로 기능을 추가하거나 버그를 수정한 뒤, 아래 세 줄만 실행하면 됩니다.

git add .
git commit -m "fix: 오타 수정"
git push origin main

푸시 후 1~3분이면 변경 사항이 프로덕션 URL에 반영됩니다. “배포”라는 별도의 작업이 사라지고, 코드를 올리는 것 자체가 배포가 되는 구조입니다.

 

📌 프리뷰 배포로 미리 확인하기

main이 아닌 브랜치에 푸시하거나 Pull Request를 생성하면, Vercel이 별도의 프리뷰 URL을 만들어줍니다. 이 URL로 변경 사항을 미리 확인한 뒤 문제가 없으면 main에 합치는 방식입니다.

git checkout -b feature/new-page
# 바이브코딩으로 새 페이지 추가
git add .
git commit -m "feat: 소개 페이지 추가"
git push origin feature/new-page

혼자 작업할 때도 프리뷰 배포를 활용하면, 프로덕션에 바로 반영하기 전에 “이 변경이 실제로 괜찮은지” 확인할 수 있어 안전합니다.

 

🌐 커스텀 도메인 연결하기

Vercel이 부여하는 my-app.vercel.app 주소로도 충분하지만, 포트폴리오나 개인 프로젝트라면 자신만의 도메인(예: myportfolio.com)을 연결하면 훨씬 전문적으로 보입니다.

 

📌 도메인은 어디서 사나

서비스 특징 연간 가격대
Namecheap 해외, 저렴한 가격 $8~15
가비아 국내, 한국어 지원 1~2만 원
Cloudflare Registrar 원가 수준 판매, DNS 통합 $8~12

.com 도메인이 가장 무난하지만, 원하는 이름이 이미 등록된 경우가 많습니다. .dev, .io, .site 같은 대안도 개발자 프로젝트에 잘 어울립니다.

 

📌 Vercel에 도메인 연결하는 순서

  1. Vercel 대시보드에서 프로젝트 선택 → “Settings” → “Domains”로 이동합니다.
  2. 구매한 도메인(예: myportfolio.com)을 입력하고 “Add”를 클릭합니다.
  3. Vercel이 DNS 설정 안내를 보여줍니다. 도메인을 구매한 서비스의 DNS 관리 페이지에서 아래 레코드를 추가합니다.
타입: A      | 이름: @    | 값: 76.76.21.21
타입: CNAME  | 이름: www  | 값: cname.vercel-dns.com

DNS 변경은 전파에 최대 48시간이 걸릴 수 있지만, 대부분 30분~2시간 내에 반영됩니다. Vercel 대시보드의 Domains 페이지에서 “Valid Configuration”으로 상태가 바뀌면 정상입니다. SSL 인증서(HTTPS)는 Vercel이 자동으로 발급하므로 별도 설정이 필요 없습니다.

 

✅ 배포 완료 후 점검 목록

배포가 끝났다고 안심하기 전에, 아래 항목을 하나씩 확인하세요. 로컬에서 잘 되던 것이 배포 환경에서는 다르게 동작하는 경우가 있습니다.

  • 배포 URL(*.vercel.app)에 접속이 되는지
  • 모든 페이지가 정상적으로 로딩되는지
  • API 연동 기능이 동작하는지 (환경 변수가 등록되어 있는지)
  • 모바일에서 레이아웃이 깨지지 않는지
  • 이미지가 정상적으로 표시되는지
  • 커스텀 도메인 설정 시 HTTPS가 적용되었는지
  • 브라우저 개발자 도구(F12) 콘솔에 에러가 없는지

모든 항목이 정상이라면, 축하합니다 — 이제 전 세계 누구나 내 앱에 접속할 수 있습니다.

 

🔍 배포 실패 시 진단 순서

배포가 실패하면 당황하기 쉽지만, 원인은 대부분 몇 가지로 좁혀집니다. 아래 순서대로 확인하면 불필요한 시행착오를 줄일 수 있습니다.

 

🚫 빌드 에러가 가장 흔한 원인

Vercel 대시보드의 “Deployments” 탭에서 실패한 배포를 클릭하면 빌드 로그를 확인할 수 있습니다. 로그 하단에 에러 메시지가 나오는데, 주요 유형별 해결 방법은 다음과 같습니다.

에러 유형 원인 해결 방법
Module not found 패키지 미설치 npm install 후 다시 push
Type error TypeScript 타입 오류 로컬 npm run build로 에러 확인
ESLint error 린트 규칙 위반 npm run lint로 확인 후 수정
Out of memory 빌드 메모리 초과 불필요한 의존성 제거

 

🚫 환경 변수 누락

빌드는 성공했는데 앱 기능이 동작하지 않는다면, 환경 변수가 Vercel에 등록되지 않았을 가능성이 높습니다. 로컬의 .env.local 파일에 있는 변수를 하나씩 Vercel Settings → Environment Variables와 대조해보세요. 변수를 추가한 뒤에는 반드시 Redeploy를 해야 반영됩니다.

 

🚫 이미지 경로 대소문자 문제

로컬에서 잘 보이던 이미지가 배포 후 깨진다면, 파일 경로의 대소문자를 확인하세요. Windows와 macOS는 대소문자를 구분하지 않지만, Vercel 서버(Linux)에서는 Profile.jpg와 profile.jpg가 완전히 다른 파일입니다. 파일명을 소문자로 통일하면 이 문제를 예방할 수 있습니다.

 

🚫 404 에러

특정 페이지에서 404가 나온다면, Next.js App Router의 파일 구조를 확인하세요. app/about/page.tsx 파일이 있어야 /about 경로가 동작합니다. 파일명이 page.tsx가 아니면 Next.js가 페이지로 인식하지 않습니다.

에러 해결이 막힐 때
Vercel 빌드 로그의 에러 메시지를 복사해서 Cursor나 Claude Code 채팅에 붙여넣고 “이 에러 해결해줘”라고 요청하면, 대부분 빠르게 원인과 해결 방법을 안내받을 수 있습니다. 바이브코딩의 장점은 에러 해결에도 AI를 활용할 수 있다는 점입니다.

 

⚖️ Vercel vs Netlify vs GitHub Pages 비교

Vercel 외에도 무료 배포가 가능한 서비스가 있습니다. 상황에 따라 다른 선택이 나을 수 있으니, 주요 차이점을 비교해보겠습니다.

항목 Vercel Netlify GitHub Pages
Next.js SSR 지원 완벽 지원 부분 지원 미지원 (정적만)
자동 배포 Git Push 연동 Git Push 연동 GitHub Actions 필요
프리뷰 배포 자동 생성 자동 생성 없음
무료 대역폭 100GB/월 100GB/월 100GB/월
커스텀 도메인 지원 + 자동 SSL 지원 + 자동 SSL 지원 + 자동 SSL
추천 대상 Next.js 프로젝트 정적 사이트, Gatsby 단순 HTML/CSS/JS

바이브코딩으로 만든 프로젝트가 Next.js 기반이라면 Vercel이 가장 자연스러운 선택입니다. 서버 기능(API Routes, Server Components) 없이 정적 사이트만 만들었다면 GitHub Pages도 충분합니다. Netlify는 Next.js를 지원하지만 일부 서버 기능에서 제약이 있을 수 있습니다.

 

💡 배포 후 운영 팁

 

📊 Vercel Analytics로 방문자 확인

Vercel 대시보드에서 “Analytics” 탭을 활성화하면, 방문자 수와 페이지별 로딩 속도(Core Web Vitals)를 확인할 수 있습니다. 무료 플랜에서도 기본 분석 기능을 사용할 수 있어서 별도의 분석 도구를 붙이지 않아도 됩니다.

 

⏪ 문제가 생기면 즉시 롤백

새 버전을 배포했는데 문제가 발견되면, 코드를 수정하고 다시 배포하는 것보다 롤백이 빠릅니다. “Deployments” 탭에서 이전에 정상 작동하던 배포를 찾고, 오른쪽 점 3개 메뉴에서 “Promote to Production”을 클릭하면 즉시 이전 버전으로 돌아갑니다.

 

📈 무료 플랜 한계를 알고 시작하기

항목 Hobby (무료) Pro ($20/월)
대역폭 100GB/월 1TB/월
빌드 시간 6,000분/월 24,000분/월
서버리스 함수 실행 100GB-시간/월 1,000GB-시간/월
팀 멤버 1명 무제한
상업적 사용 비상업적 개인만 상업적 가능

개인 프로젝트, 포트폴리오, 학습용이라면 무료 플랜으로 충분합니다. 서비스가 성장하거나 팀으로 작업한다면 Pro 플랜으로 전환하면 됩니다.

 

⚠️ 면책조항

이 글은 2026년 4월 기준으로 작성되었습니다. Vercel의 가격 정책, 무료 플랜 제한, 대시보드 인터페이스는 변경될 수 있습니다. 배포 전 Vercel 공식 문서에서 최신 정보를 확인하시기 바랍니다. Git 명령어와 Next.js 빌드 과정도 버전에 따라 달라질 수 있으므로, 에러 발생 시 해당 도구의 공식 문서를 우선 참고하세요.

여기까지 따라오셨다면, 이제 바이브코딩으로 만든 앱을 세상에 내놓을 준비가 된 것입니다. 처음 배포가 어렵게 느껴졌다면 정상입니다. 두 번째부터는 git push 한 줄이면 끝나니까요. 읽어주셔서 감사합니다.

 

❓ FAQ

질문을 누르면 답변이 펼쳐집니다.

Q. Vercel 무료 플랜으로 상용 서비스를 운영해도 되나요?
Vercel Hobby 플랜은 비상업적 개인 프로젝트를 위한 플랜입니다. 수익을 발생시키는 서비스에 사용하려면 Pro 플랜($20/월) 이상이 필요합니다. 포트폴리오나 학습용 프로젝트는 무료 플랜으로 충분합니다.
Q. Next.js가 아닌 React나 Vue 프로젝트도 Vercel에 배포할 수 있나요?
가능합니다. Vercel은 React(CRA), Vue, Nuxt, Svelte, Astro 등 다양한 프레임워크를 지원합니다. 프로젝트를 Import할 때 Framework Preset을 올바르게 선택하면 됩니다. 다만 Next.js와의 호환성이 가장 좋기 때문에, Next.js 프로젝트에서 Vercel의 장점이 극대화됩니다.
Q. GitHub 대신 GitLab이나 Bitbucket을 사용해도 되나요?
Vercel은 GitHub, GitLab, Bitbucket 세 가지 Git 제공자를 모두 지원합니다. 회원가입 시 또는 Settings → Git에서 원하는 제공자를 연결할 수 있습니다. 다만 GitHub과의 연동이 가장 매끄럽고 자료도 많아서, 특별한 이유가 없다면 GitHub을 추천합니다.
Q. 배포 후 도메인을 변경할 수 있나요?
기본 *.vercel.app 도메인은 Vercel 대시보드에서 프로젝트 이름을 변경하면 바뀝니다. 커스텀 도메인은 Settings → Domains에서 언제든 추가하거나 제거할 수 있습니다. 이전 도메인으로 접속하는 사용자가 있다면 리다이렉트 설정도 가능합니다.
Q. 환경 변수를 잘못 설정하면 어떻게 되나요?
환경 변수가 누락되면 빌드 시 에러가 발생하거나, 빌드는 되지만 런타임에서 기능이 동작하지 않을 수 있습니다. 로컬의 .env.local 파일과 Vercel의 환경 변수를 하나씩 대조하는 것이 가장 확실한 진단 방법입니다. 변수를 수정한 뒤에는 반드시 Redeploy를 해야 반영됩니다.
Q. 배포된 앱의 HTTPS는 자동으로 적용되나요?
Vercel은 모든 배포에 SSL 인증서를 자동으로 발급하고 적용합니다. 커스텀 도메인을 연결해도 HTTPS가 자동으로 설정되므로, 별도의 SSL 인증서 구매나 설정이 필요 없습니다. HTTP로 접속하면 HTTPS로 자동 리다이렉트됩니다.
Q. 배포 속도를 더 빠르게 하려면 어떻게 해야 하나요?
불필요한 패키지를 package.json에서 제거하고, 이미지를 next/image 컴포넌트로 최적화하면 빌드 시간이 줄어듭니다. Vercel은 빌드 캐시를 자동으로 관리하므로, 두 번째 배포부터는 첫 배포보다 빠릅니다. 의존성이 변경되지 않은 배포는 특히 빠르게 완료됩니다.
Q. Vercel에서 백엔드 서버도 운영할 수 있나요?
Vercel은 서버리스(Serverless) 방식을 사용합니다. Next.js의 API Routes나 Server Actions으로 간단한 백엔드 로직을 처리할 수 있지만, 상시 가동되는 서버가 필요한 경우(WebSocket, 장시간 작업 등)에는 Railway나 Render 같은 별도 서비스가 필요합니다.
Q. 배포 중 에러가 발생하면 기존 사이트가 내려가나요?
아닙니다. Vercel은 새 배포가 성공한 뒤에만 프로덕션 URL을 새 버전으로 전환합니다. 빌드가 실패하면 이전에 성공한 배포가 그대로 유지되므로, 사이트가 내려가는 일은 없습니다. 이 방식 덕분에 안심하고 코드를 푸시할 수 있습니다.
Q. 무료 플랜의 100GB 대역폭은 어느 정도 수준인가요?
일반적인 Next.js 앱 기준으로, 페이지 하나의 용량이 약 200KB~500KB라고 가정하면 월 20만~50만 페이지뷰를 감당할 수 있는 수준입니다. 개인 프로젝트나 포트폴리오라면 이 한도를 넘기기 어렵습니다. 대역폭 사용량은 Vercel 대시보드의 Usage 탭에서 확인할 수 있습니다.

🚀 바이브코딩, 직접 해보고 싶다면?
Git, Node.js, VS Code 설치부터 첫 배포까지 — 복사 붙여넣기만으로 끝.
VibeStart에서 무료로 시작하기 →

 

🔗 관련 글

 

📑 참고 자료

Post Views: 186

관련 게시물

위로 스크롤