Vercel이란?
Vercel은 “웹사이트와 앱을 배포하는 가장 쉬운 플랫폼”입니다. 개발자들이 가장 선호하는 호스팅 서비스이며, 2026년 기준 무료로도 충분합니다.
Vercel의 특징
- 무료로 웹사이트 배포 가능
- GitHub과 자동 연동
- 코드 업데이트하면 자동 배포
- 한국까지 빠른 속도 (CDN)
- 이전 버전 관리 가능 (롤백)
Vercel vs 다른 호스팅 서비스
| 항목 | Vercel | Netlify | AWS |
|---|---|---|---|
| 무료 | 있음 | 있음 | 제한적 |
| 설정 난이도 | 매우 낮음 | 낮음 | 높음 |
| 한국 속도 | 매우 빠름 | 빠름 | 보통 |
| 자동 배포 | 가능 | 가능 | 복잡 |
| 커스텀 도메인 | 가능 | 가능 | 가능 |
배포 전 필요한 것
1단계: 파일 준비
웹사이트는 최소한 다음 파일이 필요합니다:
my-website/
├── index.html
├── style.css (선택)
└── script.js (선택)
또는 React/Next.js 프로젝트일 수도 있습니다.
2단계: GitHub 계정
- https://github.com 접속
- 가입 (이메일 주소)
- 이메일 인증
5분 안에 배포하기
단계 1: 파일을 GitHub에 올리기
1-1. Repository 생성
- GitHub 로그인
- 우측 상단 “+” 클릭 → “New repository”
- Repository name: my-website
- Public 선택 (공개)
- “Create repository” 클릭
1-2. 파일 업로드
- “Add file” → “Upload files”
- index.html, style.css 등 선택
- “Commit changes” 클릭
→ GitHub에 파일 업로드 완료
단계 2: Vercel에 배포
- https://vercel.com 접속
- “Sign up” 클릭 → GitHub으로 로그인
- “Import Project” 클릭
- 아까 만든 Repository (my-website) 선택
- “Deploy” 클릭
→ 30초 후 “Congratulations!” 메시지 나타남
자동으로 생성된 URL: https://my-website-xxxxx.vercel.app
배포된 웹사이트 접속하기
생성된 URL을 친구들과 공유하면, 누구나 접속할 수 있습니다.
예: https://my-landing-page.vercel.app
코드 업데이트하고 자동 배포하기
배포 후 코드를 수정하면 자동으로 반영됩니다.
수정 과정
- GitHub에 있는 index.html 파일 수정
- “Commit changes” 클릭
- 1분 후 Vercel이 자동으로 새 버전 배포
→ URL은 같지만, 최신 내용으로 업데이트됨
커스텀 도메인 연결 (선택)
기본 URL (vercel.app)이 싫으면, 자신의 도메인 구입 후 연결 가능.
도메인 구입
GoDaddy, Namecheap, AWS Route53 등에서 도메인 구입 (연 10,000~15,000원)
예: silobust.com
Vercel에 도메인 연결
- Vercel 대시보드 → Project 선택
- “Settings” → “Domains”
- 도메인명 입력 (silobust.com)
- 지시사항 따라 DNS 설정 수정
→ https://silobust.com으로 접속 가능
Vercel 무료 플랜의 한계
| 항목 | 무료 | Pro ($20/월) |
|---|---|---|
| 배포 횟수 | 무제한 | 무제한 |
| 대역폭 | 100GB/월 | 1TB/월 |
| 커스텀 도메인 | 가능 | 가능 |
| 팀 협업 | 불가 | 가능 |
| 우선 지원 | 없음 | 있음 |
→ 개인 프로젝트, 포트폴리오는 무료로 충분
실제 사례: 내 포트폴리오 배포
“박실로 노무사 포트폴리오 웹사이트”
과정:
1. Claude Code로 웹사이트 제작 (30분)
2. GitHub에 업로드 (3분)
3. Vercel 배포 (1분)
4. 커스텀 도메인 연결 (30분, 도메인 구입 포함)
결과:
– URL: https://silobust.com
– 월 1,000명 이상 방문
Vercel 대시보드 활용하기
배포 후, Vercel 대시보드에서:
1. 배포 히스토리 확인
어떤 코드 변경이 언제 배포됐는지 확인 가능.
2. 이전 버전으로 롤백
“배포했는데 에러 발견!” → 이전 버전 클릭해서 복원
3. 환경 변수 설정
API 키 같은 민감한 정보를 안전하게 관리.
프롬프트: “Vercel에 API 키를 환경 변수로 추가해줄래?”
자주 하는 실수
| 실수 | 해결 방법 |
|---|---|
| “배포했는데 보이지 않아” | 1-2분 기다린 후 새로고침 (Ctrl+Shift+R) |
| “GitHub 변경이 반영이 안 됨” | Vercel 대시보드에서 수동으로 “Redeploy” 클릭 |
| “404 에러 나” | index.html 파일이 Repository 최상단에 있는지 확인 |
| “속도가 느려” | 이미지 최적화 (1MB 이하) |
다음 단계
- 웹사이트 또는 앱 완성 (Claude Code 등으로)
- GitHub에 업로드
- Vercel 배포
- 친구들과 공유
- 반복 수정 및 업데이트
당신의 프로젝트는 이제 전 세계에 공개됩니다.
더 궁금한 게 있으신가요?
바이브코딩·AI 활용에 대해 직접 소통하고 싶다면 아래로 연락 주세요.
📞 010-9883-7268
🔗 스레드 팔로우하기
본 글은 개인적인 AI 활용 경험과 공개된 정보를 바탕으로 작성된 정보성 콘텐츠입니다.
🔗 관련 노트
- [[바이브코딩]]
- [[00_AI_Tech_MOC]]
법률 판단은 반드시 전문가에게 확인하세요.