1. 서버를 직접 운영하지 않아도 되는 경우
지금까지 서버를 직접 만들고 관리하는 방법을 배웠습니다. 하지만 모든 웹사이트가 서버를 직접 운영해야 할 필요는 없습니다.
포트폴리오 사이트, 회사 소개 페이지, 프로젝트 문서, 간단한 랜딩 페이지라면 서버 없이 훨씬 간편하게 배포할 수 있습니다. 비용도 없고, 서버 보안 걱정도 없으며, 배포 방법도 훨씬 단순합니다.
2. 정적 사이트란 무엇인가?
**정적 사이트(Static Site)**는 서버에서 데이터를 조회하거나 연산을 수행하지 않고, 미리 만들어둔 HTML, CSS, JavaScript 파일을 그대로 전달하는 사이트입니다.
모든 사용자에게 동일한 내용이 보입니다. 데이터베이스가 필요 없습니다. 서버 사이드 코드가 실행되지 않습니다.
정적 사이트의 예로는 포트폴리오, 회사 소개, 제품 랜딩 페이지, 기술 블로그(Hugo, Jekyll, Gatsby 등으로 생성), 프로젝트 문서 사이트가 있습니다.
반면 로그인, 댓글, 결제, 실시간 데이터가 필요하다면 동적 서버가 필요합니다.
3. GitHub Pages – 가장 간단한 시작점
GitHub Pages는 GitHub 저장소의 파일을 그대로 웹사이트로 서빙하는 무료 서비스입니다.
핵심 특징 GitHub 계정만 있으면 추가 가입 없이 사용 가능합니다. 저장소 이름을 사용자명.github.io로 만들면 해당 주소로 자동 접속됩니다. HTML, CSS, JS를 main 브랜치에 올리면 자동으로 배포됩니다. 커스텀 도메인을 연결할 수 있습니다.
사용 방법 GitHub에서 사용자명.github.io 이름으로 새 저장소를 만듭니다. 웹 파일(index.html 등)을 저장소에 push합니다. 몇 분 후 https://사용자명.github.io로 접속하면 됩니다.
기존 저장소도 Settings > Pages에서 배포 브랜치를 선택하면 GitHub Pages로 배포할 수 있습니다.
주의 사항 서버 사이드 코드 실행 불가, 비공개 저장소는 GitHub Pro 이상에서만 지원, Jekyll 이외의 빌드 도구는 GitHub Actions를 별도로 설정해야 합니다.
4. Netlify – 자동 배포와 폼 처리까지
Netlify는 정적 사이트 호스팅에 특화된 플랫폼으로, 단순 파일 서빙을 넘어 다양한 부가 기능을 제공합니다.
핵심 특징 GitHub/GitLab/Bitbucket 저장소와 연동하면 코드를 push할 때마다 자동 빌드 및 배포됩니다. 이전 배포로 즉시 롤백이 가능합니다. Pull Request 단위로 미리보기 URL을 자동 생성합니다. 서버 코드 없이 폼 제출(Contact Form)을 처리하는 기능이 내장됩니다. 서버리스 함수(Functions)를 지원합니다.
무료 플랜 제공 내용 월 100GB 대역폭, 300분 빌드 시간, 서버리스 함수 125,000회 실행이 무료입니다.
배포 방법 netlify.com에서 GitHub으로 로그인합니다. 배포할 저장소를 선택합니다. 빌드 명령어와 배포 폴더를 설정합니다(예: React는 npm run build와 build 폴더). Deploy 버튼을 클릭합니다. 이후 git push만 하면 자동으로 재배포됩니다.
5. Vercel – Next.js에 최적화된 플랫폼
Vercel은 Next.js를 만든 회사(Vercel Inc.)가 운영하는 배포 플랫폼입니다. Next.js와의 궁합이 가장 좋습니다.
핵심 특징 Next.js를 포함한 React, Vue, Svelte 등 다양한 프레임워크를 자동 감지합니다. 전 세계 엣지 네트워크를 통해 어디서든 빠른 속도를 제공합니다. 브랜치마다 자동으로 고유한 미리보기 URL이 생성됩니다. API Routes, Edge Functions 같은 서버리스 기능을 기본 지원합니다.
무료 플랜 제공 내용 개인 프로젝트 무제한, 월 100GB 대역폭, Edge Function 실행이 무료입니다.
배포 방법 vercel.com에서 GitHub으로 로그인합니다. New Project를 클릭하고 저장소를 선택합니다. 프레임워크를 자동 감지하고 설정이 자동 완성됩니다. Deploy를 클릭하면 수십 초 내에 배포됩니다.
6. 세 서비스 한눈에 비교
| 항목 | GitHub Pages | Netlify | Vercel |
|---|---|---|---|
| 가격 | 완전 무료 | 무료 플랜 | 무료 플랜 |
| 자동 배포 | 기본 지원 | 강력한 지원 | 강력한 지원 |
| 빌드 기능 | 제한적 | 다양 | 다양 |
| PR 미리보기 | 미지원 | 지원 | 지원 |
| 서버리스 함수 | 미지원 | 지원 | 지원 |
| Next.js 최적화 | 제한적 | 지원 | 최상 |
| 폼 처리 | 미지원 | 내장 지원 | 미지원 |
| 사용 난이도 | 가장 쉬움 | 중간 | 중간 |
7. 내 상황에 맞는 서비스 고르는 법
GitHub Pages 추천 상황 순수 HTML/CSS/JS로 만든 사이트, GitHub 저장소와 연동해 문서나 포트폴리오를 만드는 경우, 가장 간단하게 시작하고 싶을 때입니다.
Netlify 추천 상황 연락 폼이 있는 랜딩 페이지, React/Vue/Gatsby 기반 사이트, PR 단위로 팀원에게 미리보기를 공유해야 하는 경우입니다.
Vercel 추천 상황 Next.js 프로젝트, API Routes 같은 서버리스 기능이 필요한 경우, 최고의 빌드 속도와 엣지 성능이 필요할 때입니다.
8. 정리 및 마무리
오늘 배운 핵심을 정리합니다.
- 포트폴리오, 랜딩 페이지 같은 정적 사이트는 서버 없이 무료로 배포할 수 있습니다.
- GitHub Pages는 가장 단순하고 GitHub과 완벽히 통합됩니다.
- Netlify는 자동 배포, PR 미리보기, 폼 처리 등 편리한 기능이 많습니다.
- Vercel은 Next.js와의 완벽한 호환성과 빠른 엣지 네트워크가 강점입니다.
- 세 서비스 모두 HTTPS와 커스텀 도메인을 무료로 지원합니다.
이것으로 서버 기초부터 보안, 자동화, 배포까지 이 시리즈를 모두 읽으셨다면 서버를 혼자 운영할 수 있는 기초 실력을 갖추셨습니다!