0 달러/월 비용으로 초고속 웹사이트를 구축했습니다 (Hugo + Cloudflare Pages)
요약
기존의 복잡하고 느린 워드프레스 환경에서 벗어나, 정적 사이트 생성기(SSG)인 Hugo와 Cloudflare Pages를 조합하여 월 $0 비용으로 초고속 웹사이트를 구축한 과정을 기술합니다. 이 아티클은 콘텐츠 중심의 정적 웹사이트를 만들 때 왜 복잡한 프레임워크 대신 Hugo 스택을 선택했는지, 그리고 그 장점과 트레이드오프에 대해 깊이 있게 분석합니다. Hugo는 빌드 속도가 매우 빠르고 단일 바이너리 형태로 배포되어 개발 과정의 효율성을 극대화하며, Cloudflare Pages를 사용해 호스팅 비용 없이 CDN을 활용한 초고속 성능을 확보할 수 있습니다. 이 스택은 데이터베이스나 서버 런타임이 필요 없는 콘텐츠 사이트 구축에 최적화된 솔루션입니다.
핵심 포인트
- 콘텐츠 중심의 정적 웹사이트는 워드프레스보다 SSG(Hugo)를 사용하는 것이 압도적으로 빠르고 안정적이다.
- Hugo는 빌드 속도가 매우 빨라 개발 과정에서 템플릿 수정 및 반복 작업 효율성이 극대화된다 (Eleventy 대비).
- Cloudflare Pages와 Hugo 조합은 호스팅 비용을 $0에 가깝게 유지하면서 CDN 기반의 초고속 성능을 제공한다.
- Next.js나 Gatsby 같은 프레임워크는 애플리케이션(App) 구축에는 적합하지만, 순수 정적 콘텐츠 사이트에는 불필요한 오버헤드를 유발할 수 있다.
저는 공유 호스팅에 워드프레스 사이트를 운영 중이었습니다. 월 $15, 매 다른 화요일마다 업데이트가 필요한 플러그인, 그리고 방문객들에게 죄송하다고 사과하고 싶게 만드는 첫 바이트까지 도달하는 시간 (Time to First Byte). 그 느낌을 아시죠. 느린 워드프레스 사이트를 고치기 위해 캐싱 플러그인을 설치합니다. 그런데 캐싱 플러그인은 설정용 플러그인이 필요합니다. 설정용 플러그인은 SEO 플러그인과 충돌을 일으킵니다. 이제 세 개의 플러그인이 한 일을 제대로 못하고 있으며, 코어 웹 바이탈 (Core Web Vitals) 점수는 참여상처럼 보입니다. 저는 더 이상 참지 못해 모든 것을 처음부터 다시 구축했습니다. 그 결과 laserengraverexpert.com 이 나왔습니다. 레이저 엔그레이버 리뷰 사이트로, Hugo 0.147.0 을 사용하며 Cloudflare Pages 에 호스팅되고 약 25 초 만에 배포되며 호스팅 비용은 정확히 월 $0 입니다. 이 글은 전체 기술 분석입니다. 스택, 설정, 이유, 트레이드오프, 그리고 처음에 잘못해서 디버깅에 2 일이나 걸린 유일한 내용입니다. 콘텐츠 사이트, 제휴 마케팅 사이트, 문서를 만들거나 데이터베이스가 필요 없는 작업을 하고 있다면 이 스택을 진지하게 고려해야 합니다.
스택 한눈에 보기 | 레이어 | 도구/비용 |
|---|---|
| 정적 사이트 생성기 (Static Site Generator) | Hugo 0.147.0 — 무료 |
| 호스팅 + CDN | Cloudflare Pages 무료 티어 — 월 $0 |
| 분석 (Analytics) | Cloudflare Web Analytics — 월 $0 |
| 빌드 설정 (Build Config) | wrangler.toml |
| 이미지 | WebP (소스에서 변환) — 무료 |
| 도메인 | Namecheap — 약 $10/년 |
| 데이터베이스 | 없음 |
| 서버 런타임 (Server runtime) | 없음 |
총 인프라 비용: 약 $10/년. 이는 도메인 비용입니다. 나머지는 모두 무료입니다.
Hugo 를 Eleventy, Next.js, 또는 Gatsby 대신 선택한 이유
이건 제가 구축하기 전에 가장 많이 고민했던 질문입니다. '모든 도구는 서로 다른 용도에 적합하다'는 식의 비정답이 아닌 솔직한 답변을 드리겠습니다.
Next.js — 고려해봤습니다. 생태계가 훌륭하고 React 를 잘 알기 때문입니다. 하지만 Next.js 는 애플리케이션을 위해 설계되었습니다. 정적 내보내기는 작동하지만, 순수 정적 출력을 원할 때마다 프레임워크와 싸우게 됩니다. 콘텐츠 사이트에는 불필요하게 빌드 출력량이 무겁고, 트래픽이 많아지면 Vercel 의 무료 티어 대역폭 제한이 문제가 될 수 있습니다.
Gatsby — 2019 년에는 올바른 선택이었습니다. GraphQL 데이터 계층은 강력하지만, 제가 필요로 하지 않는 오버헤드입니다. 더 큰 사이트에서 빌드 시간이 악명 높게 느려졌고, 생태계가 분열되었습니다. 프로덕션 사이트를 여기에 베팅하고 싶지 않았습니다.
Eleventy (11ty) — 가장 강력한 경쟁자였습니다. Eleventy 는 정말 훌륭합니다. JavaScript 로만 이루어져 있으며, 의견이 없고 매우 컴포사블 (composable) 합니다. Node 생태계에 깊이 빠져 있고 최대 유연성을 원한다면 Eleventy 가 선택입니다. 저는 이를 사용하려고 거의 결정했습니다.
Hugo 를 선택한 이유:
- 속도: 웹사이트 속도가 아니라 빌드 속도입니다. Hugo 빌드는 밀리초 단위로 측정됩니다. 현재 모든 콘텐츠를 가진 사이트는 400ms 미만으로 빌드됩니다. Eleventy 로는 유사한 사이트의 경우 3~5 초가 걸렸습니다. 레이아웃과 템플릿을 수정할 때 이 차이는 개발 중 매우 중요합니다.
- 단일 바이너리: Hugo 는 하나의 바이너리입니다. node_modules 가 없습니다. package.json 이 없습니다. 의존성 지옥 (dependency hell) 이 없습니다. 하나만 설치하면 됩니다.
AI 자동 생성 콘텐츠
본 콘텐츠는 Dev.to AI tag의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기