블로그를 운영하다 보면 반복적인 작업이 쌓이기 마련입니다. 포스트를 쓰고, 파일을 정리하고, git에 커밋하고, 배포 상태를 확인하는 과정이 매번 반복됩니다. 거기에 SEO를 고려한 제목과 태그를 붙이는 작업까지 더하면 글쓰기 자체보다 운영에 쏟는 시간이 더 많아질 수 있습니다.
이 시리즈는 그 문제를 해결하기 위해 만든 블로그 완전 자동화 시스템의 설계와 구현 과정을 기록한 것입니다. 단순히 “자동화해봤습니다"로 끝나는 글이 아니라, 실제로 이 블로그를 운영하면서 사용하는 코드와 설정을 그대로 공개합니다.
이 시스템을 만들게 된 계기 #
처음에는 Hugo만 사용해서 글을 쓰고 있었습니다. 로컬에서 마크다운을 작성하고 git push를 하면 배포되는 단순한 구조였습니다. 그러다 두 가지 문제가 생겼습니다.
첫째, 글쓰기에 걸리는 시간이 너무 길었습니다. 기술 포스트 하나를 제대로 쓰려면 34시간이 기본이었습니다. 주 12편 이상을 꾸준히 발행하는 것이 현실적으로 어려웠습니다.
둘째, PC가 아닌 환경에서 글을 수정하고 싶을 때 불편했습니다. 태블릿이나 스마트폰에서 오탈자 하나를 고치려면 결국 PC 앞으로 가야 했습니다.
이 두 문제를 동시에 해결하는 방법을 찾다가 지금의 구조가 완성되었습니다.
전체 아키텍처 개요 #
시스템은 크게 네 개의 레이어로 구성됩니다.
콘텐츠 생성 레이어: Gemini 2.5 Flash API를 활용한 Python 스크립트(generate_post.py)가 담당합니다. 주제를 입력하면 SEO 최적화된 마크다운 포스트를 자동으로 생성해 content/posts/ 디렉토리에 저장합니다.
편집 및 관리 레이어: Sveltia CMS가 담당합니다. /admin 경로에 접속하면 GitHub OAuth로 인증한 뒤 웹 브라우저에서 직접 포스트를 작성하거나 수정할 수 있습니다. 서버가 필요 없는 완전한 헤드리스 CMS입니다.
버전 관리 레이어: GitHub 저장소(up21001/blog)가 담당합니다. 로컬 편집이든 CMS 편집이든 모든 변경사항은 GitHub main 브랜치에 커밋됩니다.
빌드 및 배포 레이어: Cloudflare Pages가 담당합니다. GitHub에 push가 발생하는 순간 자동으로 Hugo 빌드를 실행하고, 완성된 정적 파일을 전 세계 CDN 엣지 서버에 배포합니다.
왜 Hugo인가 #
Hugo를 선택한 가장 큰 이유는 빌드 속도입니다. Hugo는 Go 언어로 작성된 정적 사이트 생성기로, 수백 개의 포스트도 1초 이내에 빌드됩니다. Gatsby나 Next.js 기반의 블로그와 비교하면 체감 속도 차이가 극명합니다.
두 번째 이유는 의존성이 없다는 점입니다. Hugo는 단일 바이너리 파일 하나로 동작합니다. Node.js, Python, Ruby 같은 런타임이 필요 없습니다. CI/CD 파이프라인에서 설치하는 것도 간단하고, 버전 충돌 문제도 없습니다.
세 번째는 테마 생태계입니다. Blowfish 테마는 다크모드, 반응형 디자인, 태그/카테고리 분류, 검색 기능을 기본으로 제공합니다. 프론트엔드 작업 없이도 전문적인 블로그를 운영할 수 있습니다.
Hugo의 단점도 있습니다. 템플릿 문법이 Go 템플릿 기반이라 처음에는 낯설 수 있습니다. 동적 기능(댓글, 검색)은 외부 서비스를 연동해야 합니다. 하지만 블로그 특성상 이런 단점은 큰 문제가 되지 않습니다.
왜 Cloudflare Pages인가 #
Cloudflare Pages를 선택한 이유는 단순합니다. 무료이면서 성능이 좋습니다.
무료 플랜 기준으로 월 500회 빌드, 무제한 사이트, 무제한 대역폭을 제공합니다. 포스트를 매일 발행해도 한 달에 30회 빌드면 충분하니 무료 한도가 사실상 의미 없습니다.
성능 측면에서는 전 세계 300개 이상의 엣지 로케이션을 통해 콘텐츠를 제공합니다. 한국에서 접속하든 미국에서 접속하든 가까운 서버에서 응답하기 때문에 응답 시간이 매우 빠릅니다.
GitHub 연동도 매우 간단합니다. Cloudflare Pages 대시보드에서 저장소를 선택하고 빌드 명령어를 지정하면 끝입니다. 이후로는 push가 발생할 때마다 자동으로 빌드와 배포가 진행됩니다.
왜 Gemini 2.5 Flash인가 #
AI 글쓰기 도구를 선택할 때 비용이 가장 중요한 기준이었습니다. ChatGPT API나 Claude API도 고려했지만, Gemini 2.5 Flash는 입력 토큰과 출력 토큰 비용이 상대적으로 저렴하면서 품질이 충분히 좋습니다.
실제로 포스트 한 편 생성에 드는 비용을 계산해보면, 시스템 프롬프트(약 500토큰) + 사용자 입력(약 100토큰) + 출력(약 2000토큰) 기준으로 $0.01 미만입니다. 한 달에 30편을 생성해도 $0.30 이하입니다.
Gemini 2.5 Flash의 또 다른 장점은 긴 컨텍스트 윈도우입니다. 최대 1백만 토큰까지 처리할 수 있어, 참고 자료나 기존 포스트 스타일을 프롬프트에 포함시켜도 여유가 있습니다.
왜 Sveltia CMS인가 #
Sveltia CMS는 Decap CMS(구 Netlify CMS)의 드롭인 대체제입니다. 완전히 동일한 설정 파일(config.yml)을 사용하면서도 성능이 더 빠르고 UI가 더 깔끔합니다.
서버가 전혀 필요 없다는 점이 핵심입니다. static/admin/ 디렉토리에 두 개의 파일(index.html, config.yml)만 추가하면 됩니다. 인증은 GitHub OAuth를 통해 처리하고, 데이터는 GitHub 저장소에 직접 커밋됩니다.
덕분에 추가 서버 비용이 없습니다. Cloudflare Pages Functions를 이용해 OAuth 콜백 처리만 하면 되는데, 이것도 무료 플랜 범위 안에 들어갑니다.
각 컴포넌트의 역할 정리 #
| 컴포넌트 | 역할 | 비용 |
|---|---|---|
| Hugo | 정적 사이트 생성 | 무료 |
| Blowfish 테마 | UI/UX 디자인 | 무료 |
| Gemini 2.5 Flash | AI 포스트 생성 | 포스트당 ~$0.01 |
| GitHub | 버전 관리 및 소스 저장 | 무료 |
| Cloudflare Pages | 자동 빌드 및 CDN 배포 | 무료 |
| Sveltia CMS | 웹 기반 편집 인터페이스 | 무료 |
| Cloudflare Pages Functions | OAuth 인증 처리 | 무료 |
월 운영 비용은 사실상 Gemini API 사용량뿐입니다. 포스트를 30편 발행해도 $1 미만이고, 적게 발행하면 거의 무료에 가깝습니다.
두 가지 워크플로우 #
이 시스템은 두 가지 방식으로 사용할 수 있습니다.
CLI 워크플로우: 개발 환경이 갖춰진 PC에서 작업할 때 사용합니다. python generate_post.py "주제" 명령어로 포스트를 생성하고, 내용을 확인한 뒤 git push로 배포합니다. 주로 기술적인 내용이나 길고 상세한 포스트를 작성할 때 활용합니다.
CMS 워크플로우: PC가 없는 환경이나 간단한 수정을 할 때 사용합니다. 브라우저에서 /admin에 접속해 GitHub 계정으로 로그인하면 바로 편집을 시작할 수 있습니다. 저장 버튼을 누르면 자동으로 GitHub에 커밋되고 배포가 시작됩니다.
두 워크플로우는 서로를 보완합니다. AI로 초안을 생성하고 CMS에서 다듬는 하이브리드 방식도 자연스럽게 가능합니다.
이 시리즈에서 다룰 내용 #
- 1편 (현재): 전체 아키텍처 설계 및 컴포넌트 선택 이유
- 2편: Hugo 설치부터 Cloudflare Pages 연동까지 단계별 가이드
- 3편: Gemini API를 활용한 포스트 자동 생성 스크립트 구현
- 4편: Sveltia CMS + GitHub OAuth로 웹 관리자 패널 구축
- 5편: 전체 파이프라인 완성 및 실전 운영 팁
각 편은 독립적으로 읽어도 이해할 수 있도록 작성했습니다. 필요한 부분만 골라서 참고해도 됩니다.
시작하기 전에 필요한 것들 #
이 시스템을 구축하려면 다음이 필요합니다.
- GitHub 계정
- Cloudflare 계정 (무료)
- Google AI Studio 계정 (Gemini API 키 발급용)
- Python 3.8 이상 (포스트 생성 스크립트용)
- Hugo 설치 (로컬 미리보기용, 선택사항)
모두 무료로 가입할 수 있습니다. Gemini API는 Google AI Studio에서 발급하며, 무료 티어에서도 충분한 할당량을 제공합니다.
다음 편에서는 Hugo를 설치하고 Cloudflare Pages에 연동하는 전체 과정을 단계별로 살펴보겠습니다.