Vercel로 웹사이트 배포, 코딩 모르는 사람도 가능한가 직접 해봤다: 가능한 것과 한계

코드 한 줄 못 짜는 사람이 1시간 만에 웹사이트를 올렸어요. 말이 되는 얘기일까요?

2026년 지금, 이 질문은 단순한 호기심이 아니에요. AI 코딩 도구가 쏟아지면서 ‘비개발자도 웹 배포를 직접 할 수 있다’는 주장이 커뮤니티 곳곳에 올라오고 있거든요. gpters.org의 한 초보자 후기를 보면, Cursor와 Vercel을 조합해 약 1시간 만에 ‘오늘의 칭찬 메시지’ 웹사이트를 실제로 배포했다는 경험이 기록돼 있어요.

가능하긴 한데, 어디까지 가능하고 어디서 벽에 부딪히는지 같이 살펴볼게요.

핵심 요약

• 비개발자도 Vercel CLI 세 줄(npm install -g vercel, vercel login, vercel)로 정적 웹사이트를 1시간 내 배포할 수 있다는 사례가 2026년 현재 여러 커뮤니티에 확인되고 있어요.
• GitHub 연동 방식은 코드를 push하면 자동으로 다시 배포되는 CI/CD 흐름을 지원하며, 별도 서버 설정 없이 공개 URL을 즉시 받을 수 있어요.
• 단순 정적 사이트(HTML/CSS)와 React/Vue 같은 SPA는 배포 난이도가 다르고, SPA는 vercel.json 라우팅 설정을 추가로 건드려야 하는 벽이 있어요.
• Vercel 무료 플랜은 개인 프로젝트 배포에 실질적으로 충분하고, 커스텀 도메인 연결도 DNS 설정 두 줄이면 가능해요.

지금 이 주제가 뜨는 이유

바이브코딩(Vibe Coding)이라는 말, 들어봤을 거예요. Claude Code나 Cursor 같은 AI 도구에 “이런 웹사이트 만들어줘"라고 말하면 코드를 뽑아주는 방식인데, 2026년 들어 비개발자들도 실제 작동하는 결과물을 만들어내기 시작했어요.

그런데 여기서 막히는 지점이 딱 하나 있어요. 바로 배포예요.

코드를 AI가 써줬다 해도, 그걸 세상에 공개하는 방법을 모르면 그냥 내 컴퓨터 폴더 안에서만 돌아가는 파일이에요. ‘로컬에서는 되는데 왜 인터넷으로 못 보냐’는 질문이 커뮤니티에 계속 올라오는 이유가 바로 이거예요.

Vercel은 이 배포 장벽을 낮추겠다는 포지션으로 성장한 플랫폼이에요. 개발자 매튜의 Vercel 배포 가이드 (2026년 1월 기준, CLI v50.5.0 기반)를 보면, Next.js, Vite, Nuxt.js 같은 프레임워크는 Vercel이 자동으로 인식해서 빌드 명령어와 출력 경로까지 스스로 잡아줘요. 설정을 직접 건드릴 일이 없다는 얘기예요.

실제 배포 과정, 단계별로 뜯어봤어요

두 가지 방법, 뭐가 다른가요?

방법 A — GitHub 연동 (추천 방식)

dslyh01.tistory.com의 Vercel 배포 가이드에 따르면 과정은 이래요:

1. Vercel 사이트에서 회원가입 (GitHub 계정 연동 가능)
2. 대시보드에서 Add New → Project 클릭
3. GitHub 저장소 Import
4. 프레임워크 자동 추천 → Deploy 클릭
5. 몇 분 뒤 공개 URL 생성 완료

이 방법의 진짜 강점은 이후 관리예요. GitHub에 코드를 push할 때마다 자동으로 다시 배포돼요. CI/CD라는 말이 낯설어도, “코드 올리면 웹사이트도 자동 업데이트된다"고 이해하면 충분해요.

방법 B — CLI (터미널 세 줄)

npm install -g vercel
vercel login
vercel

gpters.org 초보자 후기에서 검증된 방법이에요. Node.js 설치가 먼저 필요하고, 프로젝트 폴더에서 vercel 명령어를 실행하면 5개 기본값에 Enter를 누르는 것만으로 배포가 끝났다고 해요. vercel --prod로 실제 프로덕션 URL도 받을 수 있어요.

어떤 방법이 나에게 맞을까요?

GitHub 계정이 있고 코드를 저장소에 올린 상태라면 웹 연동 방식이 훨씬 편해요. 그냥 로컬 폴더 파일을 빠르게 올리고 싶다면 CLI가 더 빨라요.

어디서 벽에 부딪히나요?

정적 HTML 파일 하나라면 진짜로 쉬워요. 그런데 React나 Vue로 만든 SPA(Single Page Application)는 얘기가 달라져요.

개발자 매튜 가이드에 따르면, SPA는 /baseball 같은 경로로 직접 URL을 입력하면 404 에러가 뜨는 문제가 있어요. 정적 호스팅은 실제 파일이 있어야 열리는데, SPA는 모든 라우팅을 JS가 처리하기 때문이에요. 해결하려면 프로젝트 루트에 vercel.json 파일을 만들어야 해요.

{
  "rewrites": [
    { "source": "/(.*)", "destination": "/index.html" }
  ]
}

이 파일 하나면 문제가 해결돼요. 그런데 이 과정에서 “JSON 파일이 뭐예요?“라는 질문이 나온다면, 배포보다 기초 개념을 먼저 쌓아야 한다는 신호예요.

비개발자라면 어떤 순서로 접근하면 좋을까요?

gpters.org 후기에 소개된 5단계 로드맵이 실용적이에요:

• Lv.1: 정적 UI만 있는 사이트 (디지털 명함, 랜덤 생성기)
• Lv.2: 사용자 입력에 반응하는 기능 (계산기, 카운터)
• Lv.3: 브라우저 저장소로 데이터 유지 (할 일 목록)
• Lv.4: 외부 API 연결 (날씨 위젯, 비트코인 시세)
• Lv.5: AI API 조합한 복잡한 기능

이 후기의 저자는 처음에 n8n 자동화 같은 복잡한 걸 만들려다 실패했고, Lv.1부터 다시 시작해서 성공했다고 해요. 작게 시작해서 배포 경험을 먼저 쌓는 것, 이게 핵심이에요.

환경변수와 커스텀 도메인은요?

배포 이후 자주 나오는 두 가지 질문이에요.

환경변수(API 키 같은 민감한 정보)는 코드에 직접 넣으면 안 돼요. Vercel 대시보드의 Settings → Environment Variables에서 추가하거나, CLI로 vercel env add VARIABLE_NAME production처럼 설정할 수 있어요. .env 파일은 반드시 .gitignore에 포함해야 해요.

커스텀 도메인은 가비아나 GoDaddy 같은 곳에서 산 도메인을 Vercel의 Domains 탭에서 연결하면 돼요. DNS 설정에서 A 레코드와 CNAME 레코드 두 개만 추가하면 끝이에요. 처음엔 낯설지만 각 서비스 공식 가이드를 따라가면 30분 내로 완료돼요.

그래서, 코딩 모르는 사람도 가능한가요?

Lv.1 수준에서는 가능해요. 조건이 있어요.

• AI 도구(Cursor, Claude Code 등)로 코드를 뽑을 수 있어야 하고
• 터미널에서 명령어 복붙 정도는 해야 하며
• 에러가 떴을 때 AI한테 다시 물어볼 인내심이 있어야 해요

복잡한 SPA나 API 연동이 필요한 단계로 가면, 기초 개념이 없을 때 AI가 뱉는 에러 메시지를 해석하는 데서 막혀요. 코딩 실력보다 에러를 무서워하지 않는 태도가 더 중요하더라고요.

정리하면 이래요:

• ✅ 정적 사이트 1시간 내 배포: 가능
• ✅ GitHub 연동 자동 재배포: 가능
• ⚠️ SPA 라우팅 설정: 한 번은 직접 건드려야 함
• ⚠️ 에러 대응: AI 도움 받더라도 기초 개념 필요

지금 AI 코딩 도구를 쓰고 있다면, 다음 단계로 Vercel 배포를 한 번 직접 시도해보세요. 처음 배포가 성공하는 순간, ‘내 사이트가 인터넷에 올라갔다’는 경험이 그 다음 단계로 넘어가는 가장 강한 동기가 돼요. 어떤 사이트를 처음으로 올려볼 생각이에요?

참고자료

1. Two Ways to Deploy a Website on Vercel in 2026 - DEV Community
2. GitHub - vercel-labs/zerolang: The Programming Language for Agents · GitHub
3. What is Nuxt? A guide to the Vue meta-framework - Vercel

Photo by Microsoft Copilot on Unsplash