바이브 코딩2026년 기준으로 홈페이지를 만든다는 말은 예전처럼 워드프레스 테마를 고르거나, 노션 페이지를 공개 링크로 돌리는 일과 점점 달라졌다. AI 코딩 툴이 Next.js 프로젝트 전체를 생성하고, Vercel이 빌드·호스팅까지 맡는 조합이 가장 짧은 경로로 자리 잡았다. Vercel은 Next.js를 만든 팀이 운영하는 배포 플랫폼이고, Hobby(무료) 플랜만으로도 개인·MVP 수준 사이트는 충분히 올릴 수 있다.
이 문서는 「코딩을 몰라도 AI로 홈페이지를 빨리 올리고 싶다」는 흐름을 전제로, 실무에서 반복되는 8단계 루틴을 정리한다. 핵심은 바이브 코딩 툴 → Vercel 가입 → API 토큰 → 환경 변수 전달 → 페이지 생성 → 배포 요청 → URL 수령이며, 처음에는 GitHub 가입·연동을 피하는 보안 원칙도 함께 다룬다. DB가 필요하면 Turso, 회원·관리자 인증이 필요하면 Supabase나 Neon을 붙이면 된다.
핵심 포인트: 워드프레스·노션은 「편집 UI」에 강하지만, AI가 코드를 쓰고 Vercel이 배포하는 방식은 속도·확장·커스터마이즈 면에서 다른 급이다. 한 번 올린 뒤 수십·수백 개의 작은 웹앱을 만들어 보며 감각을 쌓는 것이 장기적으로 더 유리하다.
1. 왜 워드프레스·노션이 아니라 Vercel과 Next.js인가
워드프레스는 플러그인·테마 생태계가 크지만, AI가 생성한 React·TypeScript 코드와는 결이 다르다. 노션은 문서·위키 공유에는 좋으나 도메인·SEO·결제·DB·API를 붙이려면 결국 다른 도구로 넘어가야 한다. 반면 Next.js는 AI 코딩 툴(Cursor, Claude Code, Codex, Bolt 등)의 기본 출력 스택에 가깝고, Vercel은 같은 저장소 없이도 폴더 드래그(Vercel Drop) 나 CLI 배포로 몇 분 안에 URL을 준다.
| 방식 | 장점 | AI·바이브 코딩과의 궁합 |
|---|---|---|
| 워드프레스 | 플러그인·호스팅 업체 풍부 | AI가 PHP·테마 구조를 일관되게 유지하기 어려움 |
| 노션 공개 | 글·표 작성이 빠름 | 커스텀 UI·API·결제 연동 한계 |
| Next.js + Vercel | SSR·API Route·Edge·DB 연동 | AI가 파일 단위로 생성·수정하기 쉬움 |
Next.js 15~16대는 App Router, Server Component, API Route가 한 프로젝트에 들어 있어 랜딩·블로그·간단한 대시보드까지 한 번에 설계하기 좋다. Vercel은 빌드 로그·환경 변수·프리뷰 URL을 대시보드에서 바로 확인할 수 있어, 「배포가 됐는지」를 AI와 함께 디버깅하기도 수월하다.
그림 1. 툴 설치부터 URL 수령·GitHub 보류까지 8단계 한눈에 보기
2. 가장 빠른 8단계 — 한 줄 요약
아래 순서는 현장에서 가장 짧게 반복되는 루틴이다. 각 단계는 다음 절에서 풀어 쓴다.
| 단계 | 할 일 | 결과물 |
|---|---|---|
| 1 | 바이브 코딩 툴 설치 | Cursor·Claude Code·Codex 등 |
| 2 | Vercel 가입 | Hobby 팀·프로젝트 슬롯 |
| 3 | Vercel API 토큰 발급 | 배포·프로젝트 생성 권한 |
| 4 | AI에게 환경 변수로 토큰·DB URL 전달 | 에이전트가 배포 스크립트 실행 가능 |
| 5 | AI와 함께 홈페이지(Next.js) 생성 | 로컬 또는 샌드박스 프로젝트 |
| 6 | 「Vercel에 배포해 달라」고 지시 | 빌드·업로드 |
| 7 | 배포 URL 수령 | `https://프로젝트명.vercel.app` 형태 |
| 8 | 처음에는 GitHub 가입·연동 하지 않음 | 토큰·코드 유출 경로 축소 |
8단계의 「GitHub 보류」는 영구 금지가 아니다. 첫 프로토타입·학습용 1~3개 사이트는 Git 없이 Vercel Drop 또는 CLI로 올리고, 팀 협업·CI가 필요해질 때 private 저장소를 연결하는 편이 안전하다.
3. 바이브 코딩 툴 설치와 역할
3.1. 툴 선택 기준
- IDE 일체형 — Cursor, Windsurf처럼 에디터·에이전트·터미널이 한 창에 있을 때. 파일 diff 검수와 배포 명령을 같은 화면에서 처리한다.
- 터미널·CLI 중심 — Claude Code, Codex CLI, OpenCode처럼 터미널에서
claude,codex명령으로 멀티파일 수정할 때. Vercel CLI(vercel,vc)와 궁합이 좋다. - 브라우저 생성형 — v0, Bolt.new, Lovable 등 UI에서 생성 후 소스 ZIP 내보내기 → Vercel Drop. 로컬 설치 없이 시작할 때.
3.2. Next.js 프로젝트 뼈대
AI에게 「Next.js App Router + TypeScript + Tailwind」로 시작하라고 고정하면, 이후 Vercel 배포 오류가 줄어든다. package.json에 next, react, react-dom이 있고 npm run build가 통과하면 Vercel Hobby에서 대부분 그대로 빌드된다.
4. Vercel 가입과 API 토큰 발급
4.1. 가입
- vercel.com 접속 후 이메일 또는 기존 OAuth로 계정 생성.
- Hobby 플랜(개인·비상업)으로 시작. 신용카드 없이도 Drop·CLI 배포가 가능한 경우가 많다(2026년 기준 — 정확한 한도는 Vercel 요금 페이지에서 재확인).
- 대시보드에서 Team 이름을 정한다. CLI·API 모두 팀 단위로 프로젝트가 묶인다.
4.2. API 토큰
- Account Settings → Tokens (또는 Team Settings → Tokens).
- Create Token — 이름 예:
vibe-coding-deploy, Scope는 Full Account 또는 배포에 필요한 최소 권한. - 생성 직후 표시되는 문자열을 한 번만 복사한다. 채팅·스크린샷·공개 저장소에 넣지 않는다.
- 로컬에서는
.env.local에VERCELTOKEN=...형태로 저장하고, AI 채팅에는 「환경 변수 VERCELTOKEN을 사용해 배포해」 정도만 적는다. 토큰 값 자체를 프롬프트에 붙여넣지 않는다.
| 항목 | 권장 |
|---|---|
| 토큰 저장 | OS 환경 변수 또는 .env.local (gitignore) |
| AI 전달 | 변수 이름만 알려 주고, 값은 로컬·CI 시크릿 |
| 토큰 유출 시 | Vercel 대시보드에서 즉시 Revoke 후 재발급 |
5. AI에게 넘기는 환경 변수
배포·DB 연동에 자주 쓰는 변수 예시는 아래와 같다. 값은 절대 위키·GitHub·채팅 로그에 평문으로 남기지 않는다.
| 변수(예) | 용도 |
|---|---|
VERCEL_TOKEN | CLI·API로 deploy |
TURSODATABASEURL | Turso libSQL 접속 URL |
TURSOAUTHTOKEN | Turso DB 인증 |
DATABASE_URL | Neon PostgreSQL 연결 문자열 |
NEXTPUBLICSUPABASE_URL | Supabase 프로젝트 URL(공개 가능) |
SUPABASESERVICEROLE_KEY | 서버 전용 — 절대 NEXT_PUBLIC 금지 |
AI에게 지시할 때는 「.env.local 예시 테이블을 만들고, 실제 값은 내가 채운다」 또는 「Vercel 대시보드 Environment Variables에 등록하는 목록을 적어 달라」고 요청한다. Next.js는 NEXTPUBLIC 접두사가 붙은 변수만 브라우저에 노출된다.
그림 2. Drop·CLI는 GitHub 없이, 팀 협업은 private Git 연동
6. 홈페이지 만들기와 배포 요청
6.1. 생성
- 랜딩 한 페이지 — 히어로, 소개, CTA, 푸터.
app/page.tsx(또는pages/index.tsx) +layout.tsx+ 기본 메타(metadata).- 로컬에서
npm install후npm run dev로 3000번 포트 확인(가능하면). AI가 터미널을 돌릴 수 없으면npm run build성공 여부만 확인해도 된다.
6.2. 배포 지시 예시 (개념)
- 「이 폴더를 Vercel에 배포해.
VERCEL_TOKEN환경 변수 사용. 프로덕션 alias까지 설정해.」 - 「
vercel --prod실행 후 나온 URL을 알려 줘.」
Vercel CLI가 없으면 AI에게 npm i -g vercel 또는 npx vercel 설치를 시킨다.
6.3. 배포 경로 3가지
| 경로 | GitHub 필요 | 적합한 상황 |
|---|---|---|
| Vercel Drop (vercel.com/drop) | 불필요 | ZIP·폴더 드래그, Bolt/v0 내보내기 |
Vercel CLI (vercel --prod) | 불필요 | 로컬·AI 터미널에서 토큰 배포 |
| Git 연동 | 필요 | 팀 협업, push마다 자동 배포 |
Drop은 Next.js 소스를 올리면 프레임워크를 감지해 빌드한다. 정적 HTML만 있으면 빌드 없이 배포된다. 프로토타입·1회성 데모에 특히 빠르다.
7. 처음에는 GitHub를 쓰지 않는 이유
GitHub는 훌륭하지만 초보·바이브 코딩 초기에는 아래 리스크가 크다.
- 실수로 public 저장소 —
.env, API 키, Vercel 토큰이 커밋되면 즉시 스캔봇 대상이 된다. - AI가
git add -A로 ignore 파일까지 올리는 패턴 —.env.local유출 사고가 커뮤니티에 반복 보고된다. - 학습 단계에서는 버전 관리 이득 < 유출 피해 — Drop·CLI만으로 URL을 받는 편이 단순하다.
나중에 private repo + Vercel Git 연동으로 넘어가면 push마다 자동 배포가 된다. 그때는 GitHub Secret · Vercel Environment Variables에만 비밀값을 두고, 저장소에는 .env.example만 둔다.
그림 3. CRUD는 Turso, 로그인·관리자는 Supabase, Postgres SaaS는 Neon
8. 데이터베이스와 인증 — Turso, Supabase, Neon
8.1. Turso — 가벼운 DB·Edge 읽기
Turso는 libSQL(SQlite 계열) 기반 분산 DB다. Vercel Edge Function·Serverless와 @libsql/client/web 또는 @tursodatabase/serverless(fetch만 사용)로 연결한다. 게시글 목록, 방명록, 간단한 폼 저장, SaaS 멀티테넌트(테넌트별 DB) 에 잘 맞는다. Hobby·Developer 플랜(2026년 기준 약 $4.99/월대부터)으로 시작하는 사례가 많다.
8.2. Supabase — 회원가입·관리자·Auth
관리자 페이지, 이메일·OAuth 로그인, Row Level Security가 필요하면 Supabase가 편하다. PostgreSQL + Auth + Storage + Realtime이 한 패키지다. NEXTPUBLICSUPABASE_URL과 anon key는 클라이언트에 둘 수 있지만, service role key는 서버 API Route에서만 쓴다.
8.3. Neon — PostgreSQL·브랜칭
Neon은 서버리스 PostgreSQL로, 브랜치 DB(개발·스테이징·프로덕션 분리)에 강하다. Prisma·Drizzle과 함께 쓰는 Next.js 풀스택 SaaS에서 자주 선택된다. Auth까지 한 번에 필요하면 Supabase, 순수 Postgres + ORM이면 Neon을 고른다.
| 필요 기능 | 1순위 후보 |
|---|---|
| 간단 CRUD, Edge 지연 최소 | Turso |
| 회원·관리자·소셜 로그인 | Supabase |
| Postgres + CI 브랜치·ORM | Neon |
환경 변수는 Vercel 프로젝트 Settings → Environment Variables에 Production·Preview·Development별로 등록한다. AI에게 「변수 목록과 lib/db.ts 연결 코드를 작성해」라고 하면 된다.
9. 워드프레스·노션에서 벗어난 뒤 — 웹앱을 많이 만들기
한 번의 홈페이지보다 작은 웹앱을 수십·수백 개 만들어 보는 쪽이 실력이 빨리 오른다. 랜딩 1개, TODO 1개, URL 단축 1개, PDF 변환 1개처럼 범위를 작게 쪼개면 AI 출력 품질도 안정된다. 같은 Vercel 계정에 프로젝트만 추가하면 `https://각각-other-name.vercel.app` 형태로 URL이 늘어난다.
반복하면서 익히는 것:
npm run build실패 로그 읽기- 환경 변수 누락 vs CORS vs 404 구분
- Turso 마이그레이션, Supabase RLS 정책 한 줄 수정
- 커스텀 도메인 연결(Vercel DNS)
워드프레스·노션은 글만 올리는 사이트에는 여전히 유효하다. 다만 AI 시대 개인·1인 SaaS는 Next.js + Vercel + (Turso | Supabase | Neon) 조합이 기본값에 가깝다.
10. 상황별 선택표
| 상황 | 추천 스택 |
|---|---|
| 코딩 거의 없음, 1페이지만 | v0/Bolt → Vercel Drop |
| Cursor·Claude로 계속 수정 | Next.js 로컬 → Vercel CLI |
| 팀·자동 배포 | Private GitHub → Vercel Git |
| DB만 필요 | Turso |
| 로그인·관리자 | Supabase Auth |
| Postgres·Prisma SaaS | Neon |
11. 마무리
앞에서 다룬 AI + Vercel + Next.js 홈페이지 루틴의 핵심만 짧게 정리한다.
- 8단계: 바이브 코딩 툴 → Vercel 가입 → API 토큰 → 환경 변수 → 페이지 생성 → 배포 지시 → URL 확인 → 초기 GitHub 보류
- 배포: Drop·CLI는 Git 없이 가능, 협업 단계에서만 private Git 연동
- DB: Turso(가벼움·Edge), Supabase(Auth·관리자), Neon(Postgres·브랜치)
- 워드프레스·노션: 글 중심 사이트용 — 커스텀 웹앱·API는 Next.js 쪽이 유리
- 학습: 작은 웹앱을 많이 만들며 빌드·env·배포 감각을 쌓는다
- 보안: 토큰·DB URL은 채팅·공개 repo에 넣지 않고, 유출 시 즉시 폐기
- 면책: Vercel·Turso·Supabase 요금·한도는 공식 문서 기준으로 수시 변동 — 배포 전 최신 페이지 확인
「바이브 코딩 툴과 Vercel 토큰만 있으면, GitHub 없이도 오늘 URL을 받을 수 있다 — DB·로그인은 필요해질 때 Turso나 Supabase를 붙이면 된다」 — 첫 사이트는 짧게 끝내고, 다음부터 범위를 넓히는 편이 실패 비용이 적다.
자주 묻는 질문
- GitHub 없이 Vercel에 Next.js를 배포할 수 있나요?
가능합니다. Vercel Drop(폴더·ZIP 드래그) 또는 Vercel CLI와 API 토큰으로 배포하면 Git 저장소 없이도 프로덕션 URL을 받을 수 있습니다. 팀 협업이나 push마다 자동 배포가 필요해질 때 private GitHub 연동을 추가하면 됩니다.
- Vercel API 토큰은 AI 채팅에 붙여넣어도 되나요?
안 됩니다. 토큰 값은 OS 환경 변수나 .env.local, Vercel 대시보드 시크릿에만 두고, AI에게는 VERCEL_TOKEN 변수 이름과 배포 명령만 알려 주세요. 채팅·스크린샷·공개 저장소에 노출되면 즉시 Revoke 후 재발급해야 합니다.
- 왜 AI가 WordPress 대신 Next.js를 자주 만들까요?
Next.js는 파일·컴포넌트·API Route 구조가 명확해 AI가 diff 단위로 수정하기 쉽고, Vercel과 공식 통합이 깊습니다. WordPress는 PHP·플러그인·테마 호환성 때문에 AI 출력이 프로덕션과 어긋나는 경우가 더 많습니다.
- DB만 필요하면 Turso와 Supabase 중 무엇을 쓰나요?
단순 CRUD·Edge 지연 최소·SQLite 스타일이면 Turso가 가볍습니다. 이메일·OAuth 로그인, 관리자 화면, Row Level Security까지 한 번에 쓰려면 Supabase Auth가 포함된 Supabase가 편합니다. Postgres·Prisma 중심 SaaS면 Neon도 후보입니다.
- Vercel Drop과 CLI 중 무엇이 더 빠른가요?
이미 로컬에 Next.js 폴더가 있고 CLI·토큰이 준비됐다면 vercel --prod가 반복 배포에 유리합니다. Bolt·v0에서 ZIP만 받은 직후라면 vercel.com/drop에 드래그하는 편이 설치 없이 가장 빠릅니다. 둘 다 GitHub는 필수가 아닙니다.
- 노션 공개 페이지와 비교해 Vercel 방식의 장점은?
노션은 문서 공유·협업 편집에 강하지만 커스텀 도메인·결제·API·DB·SEO 세밀 제어에는 한계가 있습니다. Next.js+Vercel은 코드 수준에서 UI·API·DB를 붙일 수 있어 AI가 만든 웹앱·SaaS 프로토타입에 맞습니다.
- 환경 변수는 어디에 등록해야 하나요?
로컬 개발은 프로젝트 루트 .env.local, 프로덕션은 Vercel 프로젝트 Settings → Environment Variables에 Production·Preview별로 등록합니다. NEXTPUBLIC 접두사가 있는 값만 브라우저에 노출되므로 DB 비밀키·service role은 서버 전용 변수로 둡니다.
- 작은 웹앱을 많이 만드는 것이 왜 도움이 되나요?
범위를 landing·TODO·폼·대시보드처럼 쪼개면 AI 출력과 빌드 오류 패턴을 빠르게 익힙니다. Vercel 계정에 프로젝트만 추가하면 URL이 늘어나므로, 한 번의 거대한 사이트보다 수십 번의 짧은 배포 사이클이 실무 감각을 키웁니다.