코드는 다 짰는데, 이제 어디에 올리죠?
AI 코딩 도구 덕분에 웹서비스 하나를 만드는 데 걸리는 시간은 확 줄었습니다. 그런데 막상 완성하고 나면 많은 분이 같은 자리에서 멈춥니다. "이걸 어디에 올려야 하지?" 서버를 빌려서 직접 세팅하자니 부담스럽고, 아무 데나 올렸다가 트래픽이 조금 늘면 요금 폭탄을 맞을까 걱정됩니다.
다행히 요즘은 깃허브 저장소만 연결하면 커밋할 때마다 알아서 빌드하고 배포해 주는 서비스가 많습니다. 이 글은 혼자서 랜딩 페이지, 블로그, 작은 SaaS를 운영하는 사람을 기준으로 프론트엔드 배포 서비스 세 곳과, 백엔드가 따로 필요할 때 살펴볼 선택지를 정리합니다. 서버 관리 경험이 없어도 이해할 수 있게, 기능 나열보다 고르는 기준에 집중했습니다.
고르기 전에 먼저 정할 네 가지
- 어떤 프레임워크인가: Next.js처럼 서버 기능(API 라우트, 서버 렌더링)을 쓰는지, 아니면 빌드하면 HTML 파일만 남는 정적 사이트인지에 따라 맞는 곳이 달라집니다.
- 무료로 어디까지 버틸 수 있나: 대부분 무료 플랜이 있지만 대역폭, 빌드 시간, 함수 실행 횟수에 한도가 있습니다. 그리고 상업적 이용을 무료 플랜에서 허용하는지도 서비스마다 다릅니다. 광고나 결제를 붙일 계획이라면 약관을 꼭 확인하세요.
- 한국 사용자에게 빠른가: 세 곳 모두 전 세계 CDN을 쓰지만, 서버 함수가 어느 지역에서 실행되는지에 따라 체감 속도가 달라집니다. 데이터베이스를 서울·도쿄 리전에 두었다면 함수 실행 지역도 가까운 곳으로 맞추는 게 좋습니다.
- 나중에 옮기기 쉬운가: 특정 서비스 전용 기능을 많이 쓸수록 이사가 어려워집니다. 처음부터 표준 방식으로 짜 두면 요금 정책이 바뀌어도 부담이 적습니다.
요금과 한도는 자주 바뀌니, 이 글에서는 정확한 숫자 대신 감각과 기준만 다룹니다. 결제 전에는 반드시 각 서비스의 공식 요금표를 확인하세요.
1. Vercel — Next.js라면 가장 먼저 떠올릴 곳
개요 및 특징
Vercel은 Next.js를 만든 회사가 운영하는 배포 서비스입니다. 그래서 Next.js의 새 기능이 가장 먼저, 가장 매끄럽게 동작합니다. 깃허브 저장소를 연결하면 메인 브랜치에 머지할 때마다 운영 사이트가 바뀌고, PR을 열면 미리보기 주소가 자동으로 만들어져서 수정 사항을 링크 하나로 확인할 수 있습니다.
이미지 최적화, 서버리스 함수, 환경 변수 관리, 커스텀 도메인 연결까지 대시보드에서 클릭 몇 번이면 끝납니다. 처음 배포하는 사람에게 가장 헤맬 일이 적은 곳입니다.
장단점
- 장점: Next.js 호환성이 가장 좋고, PR 미리보기 배포가 편하며, 설정이 거의 필요 없습니다.
- 단점: 무료 플랜(Hobby)은 개인·비상업용으로 안내되어 있어서, 수익화를 시작하면 유료 플랜을 고려해야 합니다. 트래픽이나 함수 사용량이 크게 늘면 비용이 빠르게 오를 수 있으니 사용량 알림을 켜 두세요.
추천 용도
Next.js로 만든 SaaS, AI 도구, 대시보드처럼 서버 기능을 적극적으로 쓰는 서비스. "일단 빨리 올려서 반응을 보고 싶다"는 단계에 특히 잘 맞습니다.
2. Netlify — 정적 사이트와 폼 처리에 강한 원조
개요 및 특징
Netlify는 "깃허브에 푸시하면 사이트가 바뀐다"는 흐름을 대중화한 서비스입니다. Astro, Hugo, Gatsby 같은 정적 사이트 생성기와 궁합이 좋고, Next.js도 지원합니다. HTML 폼에 속성 하나만 붙이면 별도 서버 없이 문의 접수를 받을 수 있는 폼 기능, 간단한 서버리스 함수, 리다이렉트 설정 등 작은 사이트 운영에 필요한 것들이 기본으로 들어 있습니다.
장단점
- 장점: 정적 사이트 배포가 단순하고, 폼·리다이렉트 같은 잔기능이 잘 갖춰져 있습니다. 프레임워크를 가리지 않는 편입니다.
- 단점: Next.js의 최신 기능은 Vercel보다 반영이 늦거나 동작 방식이 조금 다를 수 있습니다. 무료 한도를 넘었을 때의 과금 방식은 미리 확인해 두는 게 좋습니다.
추천 용도
포트폴리오, 블로그, 문서 사이트, 이벤트 랜딩처럼 대부분이 정적인 사이트. 문의 폼 하나 받자고 백엔드를 만들기 싫을 때 특히 편합니다.
3. Cloudflare Pages — 넉넉한 무료 구간과 빠른 전송
개요 및 특징
Cloudflare Pages는 세계적인 CDN 회사 Cloudflare의 배포 서비스입니다. 정적 파일 전송에 강하고, 무료 플랜에서도 대역폭을 넉넉하게 주는 편이라 트래픽이 갑자기 튀어도 비용 걱정이 적습니다. 서버 기능은 Workers라는 엣지 런타임으로 처리하는데, 사용자와 가까운 곳에서 코드가 실행되어 응답이 빠릅니다. 도메인 등록과 DNS까지 같은 곳에서 관리할 수 있다는 점도 편합니다.
장단점
- 장점: 무료 구간이 넉넉하고, 정적 전송이 빠르며, DNS·보안 기능과 한 곳에서 관리할 수 있습니다.
- 단점: 엣지 런타임은 일반 Node.js 환경과 달라서, 일부 라이브러리가 그대로 동작하지 않을 수 있습니다. Next.js를 올릴 때는 어댑터 설정이 필요하고, 기능에 따라 제약이 생길 수 있습니다.
추천 용도
트래픽이 많을 수 있는 정적 사이트, 이미 Cloudflare로 도메인을 관리하는 경우, 비용을 최대한 아끼고 싶은 사이드 프로젝트.
한눈에 고르는 법
| 상황 | 먼저 볼 곳 | | --- | --- | | Next.js로 만든 SaaS·AI 도구 | Vercel | | 블로그·포트폴리오·문서 사이트 | Netlify 또는 Cloudflare Pages | | 트래픽이 크게 튈 수 있는 정적 사이트 | Cloudflare Pages | | 서버 없이 문의 폼만 받고 싶을 때 | Netlify | | 도메인·DNS를 이미 Cloudflare에서 관리 중 | Cloudflare Pages |
정답이 하나는 아닙니다. 다만 처음에는 프레임워크와 가장 잘 맞는 곳으로 가고, 비용이나 제약이 실제로 문제가 될 때 옮기는 편이 시간을 아낍니다.
백엔드가 따로 필요하다면
위 세 곳은 프론트엔드와 가벼운 서버 함수에 최적화되어 있습니다. 오래 도는 작업(영상 처리, 크롤링, 큐 처리)이나 상시 켜져 있어야 하는 서버가 필요하면 다른 선택지를 함께 봐야 합니다.
- Supabase·Firebase 같은 BaaS: 데이터베이스, 로그인, 파일 저장소를 한 번에 제공합니다. 1인 메이커라면 백엔드 서버를 직접 짜기 전에 여기서 해결되는지 먼저 확인해 보세요.
- Railway·Render·Fly.io 같은 컨테이너 호스팅: Node.js, Python 서버나 백그라운드 워커를 그대로 올릴 수 있습니다. 서버를 직접 관리하지 않아도 되지만, 사용한 만큼 과금되는 구조가 많아 예산 알림 설정이 필수입니다.
- 국내 클라우드: 개인정보 처리 위치나 국내 결제·세금계산서가 중요하다면 국내 클라우드 사업자도 후보에 넣을 만합니다.
흔한 조합은 프론트엔드는 Vercel·Netlify·Cloudflare Pages, 데이터와 로그인은 Supabase, 무거운 작업만 컨테이너 호스팅입니다. 처음부터 전부 갖출 필요는 없고, 필요해질 때 하나씩 붙이면 됩니다.
배포할 때 놓치기 쉬운 실무 팁
- 환경 변수는 저장소에 올리지 마세요. API 키는 각 서비스 대시보드의 환경 변수 설정에 넣고,
.env파일은.gitignore에 포함시키세요. 미리보기 배포와 운영 배포에 서로 다른 키를 쓰면 더 안전합니다. - 커스텀 도메인과 HTTPS를 첫날 연결하세요. 기본 제공 주소로 홍보를 시작하면 나중에 도메인을 바꿀 때 검색 노출과 링크를 다시 쌓아야 합니다.
- 사용량 알림을 켜 두세요. 대부분 서비스가 사용량이나 결제 한도 알림을 지원합니다. 봇 트래픽이나 무한 루프 하나로 청구서가 커지는 일은 생각보다 흔합니다.
- 배포 실패 알림을 받으세요. 빌드가 깨져도 기존 버전이 계속 떠 있어서 모르고 지나가기 쉽습니다. 메일이나 슬랙 알림을 연결해 두면 마음이 편합니다.
- 되돌리기 방법을 미리 익혀 두세요. 세 곳 모두 이전 배포로 즉시 되돌리는 기능이 있습니다. 급할 때 찾지 말고, 한가할 때 한 번 눌러 보세요.
- 사이트맵과 검색 등록까지가 배포입니다. 올리기만 하면 아무도 모릅니다. 구글 서치 콘솔과 네이버 서치어드바이저에 사이트를 등록하고, 웹서비스 디렉토리에도 소개해 두면 첫 방문자를 만나기가 훨씬 쉬워집니다.
정리
혼자 만드는 웹서비스라면 서버를 직접 세팅하는 것보다 깃허브 연결형 배포 서비스로 시작하는 쪽이 압도적으로 효율적입니다. Next.js를 쓴다면 Vercel, 정적 사이트와 폼이 중심이라면 Netlify, 넉넉한 무료 구간과 빠른 전송이 중요하다면 Cloudflare Pages부터 살펴보세요. 백엔드는 필요해질 때 Supabase 같은 BaaS나 컨테이너 호스팅을 하나씩 붙이면 됩니다.
배포까지 마쳤다면 이제 사람들에게 알릴 차례입니다. 만든 서비스를 오픈웹사이드에 등록하면 새로운 웹서비스를 찾는 사람들에게 소개할 수 있습니다.