비개발자 웹앱 배포 가이드
Vercel·Netlify 완전 정복
드래그앤드롭부터 커스텀 도메인 연결까지 — 만든 사이트를 세상에 공개하는 가장 쉬운 방법
📋 이 글에서 알 수 있는 것
- Vercel과 Netlify가 무엇이고 언제 쓰는지
- GitHub 없이 드래그앤드롭만으로 배포하는 법 (Netlify)
- GitHub 연동으로 자동 배포 설정하는 법 (Vercel)
- 커스텀 도메인을 무료로 연결하는 법
- 내 프로젝트 유형별 어떤 플랫폼을 선택해야 하는지
배포란? 왜 Vercel·Netlify를 쓰나
AI로 랜딩페이지를 만들었거나, v0·Replit으로 웹앱을 완성했다면 이제 배포(Deploy)가 필요합니다. 배포란 내 컴퓨터에만 있는 파일을 인터넷에 올려서 누구나 URL로 접속할 수 있게 만드는 과정입니다.
예전에는 배포를 하려면 서버를 직접 구매하거나 임대하고, 복잡한 서버 설정을 해야 했습니다. 지금은 Vercel과 Netlify 같은 플랫폼이 이 과정을 거의 자동으로 처리해줍니다. 둘 다 무료 플랜이 있고, 비개발자도 몇 분 안에 배포를 완료할 수 있습니다.
🌐 Vercel · Netlify가 특히 좋은 이유
- 무료 플랜으로 실제 서비스 운영 가능: 개인 프로젝트·포트폴리오·소규모 서비스에 충분
- HTTPS 자동 적용: 보안 인증서(SSL)를 별도 설정 없이 자동 제공
- 전 세계 CDN: 서울에서도, 뉴욕에서도 빠르게 로딩되도록 자동 최적화
- 커스텀 도메인 무료 연결: 내가 산 도메인을 무료로 연결 가능
- 자동 배포: GitHub에 코드를 올리면 자동으로 사이트가 업데이트됨
배포 방법 두 가지
| 방법 A (초보자 추천) | Netlify 드래그앤드롭 — GitHub 없이 파일만으로 배포 |
| 방법 B (자동화 추천) | Vercel + GitHub 연동 — 코드 수정 시 자동 재배포 |
| 소요 시간 | 방법 A: 3분 / 방법 B: 10~15분 |
| 비용 | 둘 다 무료 플랜으로 시작 가능 |
Netlify로 드래그앤드롭 배포하기
Netlify는 정적 사이트(HTML·CSS·JS 파일) 배포에 강점이 있는 플랫폼입니다. GitHub 없이 파일 폴더를 그냥 끌어다 놓기만 해도 배포가 됩니다. AI가 생성해준 랜딩페이지 HTML 파일을 처음 올릴 때 가장 빠른 방법입니다.
Netlify 가입
netlify.com에 접속해 구글 또는 GitHub 계정으로 가입합니다. 신용카드 없이 무료로 시작할 수 있습니다.
배포할 파일 준비
배포할 파일들을 하나의 폴더에 모아둡니다. 최소한 index.html 파일이 있어야 합니다. AI가 생성한 HTML 파일 하나라면 그것이 index.html입니다.
폴더를 드래그앤드롭
Netlify 대시보드 하단에 "Want to deploy a new site without connecting to Git? Drag and drop your site output folder here"라는 영역이 있습니다. 준비한 폴더를 이 영역에 끌어다 놓으면 업로드가 시작됩니다.
배포 완료 — URL 확인
몇 초 후 random-name-123.netlify.app 형태의 URL이 생성됩니다. 클릭하면 내 사이트가 인터넷에 공개된 것을 확인할 수 있습니다. 이 URL을 바로 공유해도 됩니다.
드래그앤드롭 방식은 수정할 때마다 다시 폴더를 끌어다 놓아야 합니다. 자주 업데이트할 사이트라면 아래 PART 03의 GitHub 연동 방식이 훨씬 편합니다. 처음 테스트용으로는 드래그앤드롭이 가장 빠릅니다.
AI로 랜딩페이지 만들기: 비개발자 실전 제작기를 먼저 읽어보세요.
Vercel로 GitHub 연동 자동 배포하기
Vercel은 Next.js·React 같은 프레임워크 기반 프로젝트에 최적화된 배포 플랫폼입니다. GitHub 저장소와 연동하면, 코드를 수정해서 GitHub에 올리는 순간 사이트가 자동으로 업데이트됩니다. v0나 Replit으로 만든 React·Next.js 앱을 배포할 때 가장 좋은 선택입니다.
GitHub는 코드를 저장하고 관리하는 클라우드 저장소입니다. 무료로 사용할 수 있으며, github.com에서 가입할 수 있습니다. Vercel 연동을 위해 프로젝트 파일을 GitHub에 올려두는 과정이 필요합니다.
GitHub에 프로젝트 업로드
github.com에서 New repository를 만들고, 프로젝트 파일을 업로드합니다. 코드를 직접 드래그해서 올리거나, GitHub Desktop 앱을 사용하면 터미널 없이도 업로드할 수 있습니다.
Vercel 가입 및 GitHub 연동
vercel.com에 접속해 GitHub 계정으로 가입합니다. 대시보드에서 Add New → Project를 클릭하면 GitHub 저장소 목록이 나타납니다.
저장소 선택 및 배포
배포할 저장소를 선택하고 Import를 클릭합니다. Vercel이 프레임워크를 자동으로 감지하고 빌드 설정을 제안합니다. 대부분의 경우 기본 설정 그대로 Deploy를 누르면 됩니다.
배포 완료 — 이후 자동 업데이트
1~2분 후 project-name.vercel.app 형태의 URL이 생성됩니다. 이후 GitHub 저장소에 파일을 수정·업로드하면 Vercel이 자동으로 감지해 재배포합니다. 별도 작업 없이 항상 최신 버전이 유지됩니다.
Vercel 무료(Hobby) 플랜은 상업적 목적 사용에 제한이 있습니다. 개인 프로젝트·포트폴리오·사이드프로젝트는 무료 플랜으로 충분하지만, 실제 비즈니스 목적으로 운영하려면 유료 Pro 플랜이 필요합니다. 정확한 플랜 정책은 vercel.com에서 확인하세요.
커스텀 도메인 연결하기
배포 후 생성되는 xxx.vercel.app이나 xxx.netlify.app URL 대신, mybrand.com처럼 내 도메인을 연결할 수 있습니다. 둘 다 커스텀 도메인 연결 자체는 무료입니다. 도메인 구매 비용(연 1~3만 원 수준)만 발생합니다.
도메인 구매처 추천
한국에서는 가비아(gabia.com), 해외 서비스 기준으로는 Namecheap, Google Domains(현 Squarespace Domains)이 많이 사용됩니다. .com 도메인 기준 연 $10~15 수준입니다.
Netlify 커스텀 도메인 연결 방법
Netlify 대시보드 → Domain settings
배포된 사이트 선택 → Domain management → Add custom domain에서 구매한 도메인을 입력합니다.
DNS 설정 변경
도메인 구매처(가비아 등) 관리 페이지에서 DNS 설정을 Netlify가 안내하는 값으로 변경합니다. Netlify는 네임서버(Nameserver) 방식과 CNAME 방식 두 가지를 지원합니다. 네임서버 방식이 더 간단합니다.
HTTPS 자동 적용 확인
DNS 변경 후 최대 48시간 내에 도메인이 연결됩니다(보통 1~2시간). Netlify가 Let's Encrypt SSL 인증서를 자동으로 발급해 HTTPS가 자동 적용됩니다.
Vercel은 대시보드 → 프로젝트 선택 → Settings → Domains에서 도메인을 추가하면 됩니다. Netlify와 마찬가지로 DNS 설정 변경 후 자동으로 HTTPS가 적용됩니다.
Vercel vs Netlify: 내 프로젝트엔 뭐가 맞을까
둘 다 훌륭한 플랫폼이고 무료로 쓸 수 있습니다. 프로젝트 유형에 따라 선택하면 됩니다.
| 항목 | Vercel | Netlify |
|---|---|---|
| 최적화 프레임워크 | Next.js, React | 정적 사이트, Gatsby, Hugo |
| GitHub 없이 배포 | 불편함 | 드래그앤드롭 지원 ✅ |
| 자동 재배포 | GitHub 연동 시 ✅ | GitHub 연동 시 ✅ |
| 무료 플랜 빌드 시간 | 월 6,000분 | 월 300분 |
| 커스텀 도메인 | 무료 ✅ | 무료 ✅ |
| HTTPS | 자동 ✅ | 자동 ✅ |
| 상업적 사용 (무료) | 제한 있음 | 가능 |
*2026년 4월 기준. 각 플랫폼 정책은 변동될 수 있으니 공식 사이트에서 확인하세요.
상황별 추천
GitHub도 모르고 일단 사이트만 올리고 싶다면
→ Netlify 드래그앤드롭. 가입 → 폴더 끌어다 놓기 → 완료. 3분이면 끝납니다.
Next.js나 React 기반 프로젝트를 배포하고 싶다면
→ Vercel. Next.js를 만든 회사가 Vercel이라 최적화가 뛰어납니다. GitHub 연동 후 자동 배포가 편합니다.
상업적으로 운영할 정적 사이트가 필요하다면
→ Netlify. 무료 플랜에서도 상업적 사용이 허용되며, 폼 수신·A/B 테스트 등 부가 기능도 제공합니다.
AI 챗봇 만들어 내 사이트에 달기 (무료로 시작)도 함께 읽어보세요.
자주 묻는 질문
Vercel·Netlify 무료 플랜으로 실제 서비스를 운영할 수 있나요?
포트폴리오, 랜딩페이지, 개인 블로그, 소규모 사이드프로젝트는 무료 플랜으로 충분합니다. 다만 트래픽이 많아지거나 고급 기능(팀 협업, 더 많은 빌드 시간, 비밀번호 보호 페이지 등)이 필요하면 유료 플랜을 고려해야 합니다. Vercel의 경우 상업적 프로젝트는 Pro 플랜이 권장됩니다.
배포 후 사이트가 느리게 로딩됩니다. 어떻게 하나요?
Vercel·Netlify 모두 CDN을 통해 전 세계에 배포하므로 기본적으로 빠릅니다. 느리다면 ①이미지 파일 크기가 너무 큰 경우, ②불필요한 외부 스크립트가 많은 경우, ③코드 최적화가 안 된 경우가 대부분입니다. 이미지를 WebP 형식으로 압축하고, 사용하지 않는 스크립트를 제거하면 대부분 개선됩니다.
배포한 사이트를 내리거나 삭제하고 싶으면 어떻게 하나요?
Vercel은 대시보드 → 프로젝트 → Settings → Delete Project에서, Netlify는 Site settings → Danger zone → Delete this site에서 삭제할 수 있습니다. 삭제하면 해당 URL로 접속이 불가능해집니다. 커스텀 도메인을 연결했다면 도메인 구매처에서도 DNS 설정을 원복해야 합니다.
WordPress 사이트도 Vercel·Netlify에 배포할 수 있나요?
WordPress는 PHP 기반의 동적 사이트라 Vercel·Netlify의 일반 정적 배포 방식으로는 배포할 수 없습니다. WordPress는 별도의 웹호스팅(카페24, 호스팅KR 등)을 사용하는 것이 일반적입니다. 단, WordPress를 Headless CMS로 쓰고 Next.js 프론트엔드를 Vercel에 배포하는 고급 구성은 가능하지만 초보자에게는 권장하지 않습니다.
도메인 연결 후 며칠이 지났는데도 접속이 안 됩니다.
DNS 변경은 전파에 최대 48시간이 걸릴 수 있습니다. 48시간이 지났는데도 접속이 안 된다면 ①도메인 구매처에서 네임서버 또는 CNAME 설정이 정확히 입력됐는지 확인하고, ②Vercel/Netlify 대시보드에서 도메인 상태 메시지를 확인하세요. 오류 메시지가 있다면 AI에게 그대로 붙여넣어 해결 방법을 물어보면 됩니다.
만든 것을 세상에 공개하는 일, 이제 어렵지 않습니다.
Netlify 드래그앤드롭 3분이면 오늘 만든 페이지가 내일 누군가에게 보입니다.
배포까지 마쳐야 진짜 완성입니다.
VibeLab이었습니다.