[FE] 프론트엔드 클라이언트 배포 비교

프론트엔드 배포를 할 때 AWS EC2, Vercel, Netlify를 비교해보자.

 

Vercel : https://vercel.com/

Vercel: Build and deploy the best web experiences with the Frontend Cloud – Vercel

Netlify : https://www.netlify.com/

Scale & Ship Faster with a Composable Web Architecture | Netlify

 

---

1. 비교 개요

 

	EC2	Vercel	Netlify
배포 방식	가상 서버에서 직접 배포	서버리스 배포 (CDN 기반)	서버리스 배포 (CDN 기반)
설정 난이도	어렵고 복잡함	매우 쉬움	쉬움
성능	서버 성능에 따라 다름	CDN 활용하여 빠름	CDN 활용하여 빠름
비용	유료 (트래픽, 서버 사양에 따라 다름)	무료 플랜 있음 (트래픽 제한)	무료 플랜 있음 (트래픽 제한)
CI/CD 지원	수동으로 설정해야 함	기본 제공	기본 제공
백엔드 연동	유연하게 가능	제한적 (서버리스 함수 사용)	제한적 (서버리스 함수 사용)

---

2. 상세 비교

🔹 EC2 (AWS Elastic Compute Cloud)

✅ 장점

• 직접 서버를 설정하고 운영할 수 있어 유연성이 높음
• 백엔드와 프론트엔드를 같은 서버에서 운영 가능
• 서버 성능을 직접 조절할 수 있음

❌ 단점

• 설정이 복잡 (도메인 연결, SSL, 배포 자동화 등)
• CI/CD를 직접 구축해야 함 (GitHub Actions, CodePipeline 등 활용 가능)
• 비용이 발생 (무료 티어 있지만, 장기적으로 운영하면 비용 증가)

🔹 적합한 경우

• 커스텀 설정이 필요한 경우 (예: Nginx 커스텀 설정, 독립적인 배포 환경)
• 대규모 서비스 운영 (고객 맞춤형 서버 설정이 필요할 때)

---

🔹 Vercel

✅ 장점

• GitHub 연동하면 자동 배포 (Zero Config)
• Next.js와 최적화되어 있음 (ISR, SSR 지원)
• 무료 플랜 제공 (기본적인 배포 가능)
• 글로벌 CDN 활용하여 빠른 배포 가능

❌ 단점

• 서버리스 환경이므로 커스텀 설정 제한적
• 트래픽이 많아지면 유료 플랜 필요
• 복잡한 백엔드 서버 연동이 어려움

🔹 적합한 경우

• Next.js 프로젝트 배포
• 빠르고 간단한 배포가 필요한 경우
• 작은 프로젝트나 MVP 개발

---

🔹 Netlify

✅ 장점

• GitHub, GitLab, Bitbucket 연동하여 자동 배포 가능
• CDN 제공으로 빠른 로딩 속도
• Netlify Functions로 간단한 서버리스 API 구현 가능

❌ 단점

• 서버리스 환경이라 커스텀 설정 제한적
• Next.js 지원은 Vercel보다 약함
• API 요청이 많아지면 요금 증가 가능

🔹 적합한 경우

• React, Vue.js, Svelte 등 정적 사이트 배포
• JAMstack 기반 사이트 (정적 사이트 + API)
• 간단한 프로젝트 및 포트폴리오 사이트

---

3.  어떤 걸 선택할까? 3줄 요약

• EC2 → 커스텀 서버 세팅이 필요한 경우 (유연하지만 복잡함)
• Vercel → Next.js 프로젝트 배포할 때 최적 (간편하고 빠름)
• Netlify → 정적 사이트(React, Vue) 배포할 때 적합 (간단하고 편리함)

🎯 개인 프로젝트나 포트폴리오는 Vercel 또는 Netlify 추천!
📢 기업 서비스 운영은 EC2나 Vercel Pro 플랜 고려!

 

4. 무료로 쓰고 싶어! Vercel, Netlify는 어느 정도까지 사용할 수 있을까?

vercel과 netfliy는 모두 대역폭 제한이 100GB/월 이다.

월 100GB 대역폭이 어느 정도인지 계산해보자.

🔹 1. 기본 개념

• 대역폭 = 서버에서 클라이언트(사용자)로 전송되는 데이터 총량
• 트래픽 = 방문자가 웹사이트를 이용하면서 발생하는 데이터 사용량

🔹 2. 일반적인 웹사이트의 데이터 크기

대략적인 웹사이트 한 페이지(HTML + CSS + JS + 이미지 등)의 평균 크기를 기준으로 계산해볼게요.

콘텐츠 유형 평균 크기

HTML	50KB
CSS	100KB
JavaScript	300KB
이미지 (3~5개)	500KB
기타 리소스 (폰트, API 호출 등)	100KB
총합 (1페이지 평균)	1MB (1,000KB)

---

🔹 3. 방문자 수에 따른 대역폭 소비량

가정:

• 웹사이트 1페이지 평균 크기 = 1MB
• 1명의 방문자가 평균적으로 3페이지 방문

일일 방문자 수 일일 트래픽 월간 트래픽

1,000명	3GB	90GB
2,000명	6GB	180GB
5,000명	15GB	450GB

✅ 즉, 월 100GB 대역폭이면:

• 일일 약 1,100~1,200명 방문 가능 (평균 3페이지 뷰 기준)
• 만약 방문자당 5페이지 이상 본다면, 트래픽 소모가 더 많아짐

---

🔹 4. 트래픽 줄이는 방법 (최적화)

✅ 이미지 압축 (WebP 사용) → 기존 대비 70~80% 절약
✅ CSS, JS 최소화 (Minify & Gzip 적용)
✅ CDN 활용 (Cloudflare, Netlify CDN 등) → 정적 파일 빠른 로딩
✅ 캐싱 적용 → 사용자 반복 방문 시 트래픽 절감

---

🔹 결론: 월 100GB 대역폭이 충분한가?

• 소규모 웹사이트(포트폴리오, 블로그, 랜딩 페이지) → 충분
• 중형 규모(스타트업 서비스, 커뮤니티 사이트) → 부족할 수도 있음
• 대형 서비스 (일 방문자 5,000명 이상) → 100GB로는 부족, 추가 대역폭 필요

👉 일일 1,000명 이하 방문 예상된다면 충분
👉 그 이상이면 Pro 플랜으로 업그레이드 고려해야 함! 🚀