사이트 제작기 시리즈 · 1부 — 왜 정적 홈페이지인가 / 2부 — 콘텐츠 3구역 / 3부 (이 글) — 자동화 파이프라인 / 4부 — 커스터마이징과 관리자 패널
2부 마지막에서 “AI가 매일 자동으로 글을 올린다”고 했습니다. 이번 편은 그 무인 자동화 라인을 통째로 열어 봅니다. 사람이 잠든 밤사이 이 사이트에서는 세 개의 톱니바퀴가 맞물려 돌아갑니다.
하나씩 뜯어보겠습니다.
1. 톱니바퀴 ① — AI가 IT뉴스를 쓴다
매일의 IT뉴스(content/blog/daily-it-news/)는 AI가 씁니다. 매일 밤, AI 도구가 그날의 AI·IT 주요 소식을 정리해 마크다운 파일 한 장을 만들어 이 폴더에 떨어뜨립니다.
이때 글이 항상 같은 형식으로 나오도록 틀(템플릿)이 준비되어 있습니다. Hugo에서는 이런 새 글 템플릿을 archetypes/ 폴더에 둡니다. 실제 IT뉴스 전용 템플릿(archetypes/daily-it-news.md)은 이렇게 생겼습니다.
{{ .Date.Format "2006년 1월 2일" }} 부분이 재미있는데, Hugo(Go 언어)에서는 날짜 형식을 “2006년 1월 2일”이라는 기준 날짜로 표기합니다. 이 자리에 실제 오늘 날짜가 자동으로 채워져 “2026년 7월 7일 IT뉴스” 같은 제목이 만들어집니다.
이 틀 덕분에 AI는 매일 “내용”만 채우면 되고, 제목·날짜·카테고리·태그 같은 뼈대는 항상 일관되게 유지됩니다.
2. 톱니바퀴 ② — 밤 11시 30분, 스케줄러가 자동으로 올린다
AI가 파일을 만들어 두어도, 누군가 GitHub에 올려(push) 주지 않으면 사이트에는 반영되지 않습니다. 이 “올리는” 일을 사람 대신 해 주는 것이 macOS의 launchd 스케줄러와 자동 푸시 스크립트입니다.
자동 푸시 스크립트 (scripts/auto_push.sh)
핵심 로직만 추리면 이렇습니다.
똑똑한 점은 “바뀐 게 있을 때만 움직인다”는 것입니다. git status --porcelain으로 변경 사항을 검사해, 새 글이 없으면 조용히 종료합니다. 덕분에 의미 없는 빈 커밋이 쌓이지 않습니다. 또 맨 처음에 git pull --rebase를 먼저 해서, 다른 곳(예: 관리자 패널)에서 생긴 변경과 충돌하는 것도 예방합니다.
이 스크립트를 매일 부르는 스케줄러
이 스크립트를 사람이 매일 밤 실행할 수는 없으니, macOS의 백그라운드 스케줄러인 launchd에 등록해 뒀습니다.
- 등록 파일:
~/Library/LaunchAgents/com.jiwumission.autopush.plist - 실행 시각: 매일 밤 11시 30분(23:30)
- 하는 일:
auto_push.sh를 무인으로 호출
작동 여부는 scripts/auto_push.log에 기록됩니다. 스케줄러를 다시 등록하거나 해제하려면 다음 명령을 씁니다.
정리하면, 밤 11시경 AI가 글을 쓰고 → 11시 30분에 스케줄러가 자동으로 올린다는 흐름입니다. 사람은 아무것도 누르지 않습니다.
3. 톱니바퀴 ③ — 아침 6시, 예약된 글이 스스로 공개된다
여기서 정적 홈페이지 특유의 문제가 하나 생깁니다. 정적 사이트는 “빌드하는 그 순간”의 상태로 굳어집니다. 그래서 미래 날짜로 예약해 둔 글은, 그 날짜가 되어도 사이트를 다시 빌드하지 않으면 계속 숨어 있습니다.
이 문제를 풀기 위해 GitHub Actions에 매일 아침 6시 자동 재빌드 워크플로우(.github/workflows/scheduled-publish.yml)를 두었습니다.
원리는 단순하고 영리합니다. 내용이 텅 빈 커밋(--allow-empty)을 하나 만들어 push합니다. 그러면 Cloudflare Pages가 “저장소에 변화가 생겼다!”고 감지해 사이트를 새로 빌드하고, 그 시점에 날짜가 도래한 예약 글들이 자연스럽게 공개됩니다.
💡
cron: "0 21 * * *"이 왜 아침 6시일까요? GitHub Actions는 세계 표준시(UTC)로 돕니다. 한국은 UTC보다 9시간 빠르므로, UTC 21시는 한국 시간으로 다음 날 오전 6시입니다.
4. 톱니바퀴 ④ — 접속하면 오늘의 QT가 팝업으로
이제 이 사이트에서 가장 눈에 띄는 기능, 오늘의 QT 팝업 모달입니다. 방문자가 첫 페이지에 들어오면 그날 날짜에 해당하는 성경 묵상이 부드럽게 떠오릅니다. 2부에서 봤듯 QT는 367개나 미리 쌓여 있는데, 그중 정확히 오늘 것만 골라 보여주는 겁니다. 어떻게 할까요?
4-1. 각 QT를 “작은 데이터 API”로 만든다
핵심 아이디어는 이렇습니다. QT 글 하나하나를, 보통의 HTML 페이지뿐 아니라 JavaScript가 읽기 좋은 데이터 파일(JSON)로도 함께 출력하는 것입니다. 이를 위해 Hugo의 커스텀 출력 형식을 정의한 템플릿(layouts/databank/daily-bible/single.dailybiblejson.txt)이 있습니다.
이 템플릿 덕분에 예를 들어 2026년 7월 7일 QT는 다음 주소에서 JSON 데이터로 접근할 수 있게 됩니다.
즉, 서버 없이도 각 날짜의 QT가 하나의 “미니 API 엔드포인트”가 되는 셈입니다. 이것이 정적 사이트에서 데이터를 다루는 전형적인 기법입니다.
4-2. 홈 화면 JavaScript가 오늘 것을 불러온다
이제 첫 페이지(layouts/home.html)에 심어 둔 JavaScript가 이 데이터를 이용합니다. 핵심 흐름만 옮기면 이렇습니다.
동작을 말로 풀면:
- 오늘 날짜를 계산한다 (
2026-07-07형태). - localStorage 확인 — 이 방문자가 “오늘 하루 보지 않기”를 눌렀다면 즉시 종료.
- 오늘 날짜의 JSON을 fetch — 파일이 없으면(그날 QT가 준비 안 됐으면) 에러가 나고, 그 에러를 조용히 삼켜서 아무 팝업도 뜨지 않는다.
- 내용이 있고 아직
draft상태가 아니면 → 모달을 띄운다.
4-3. “오늘 하루 보지 않기”의 정체
모달을 닫을 때 “오늘 하루 보지 않기” 체크박스를 켜면, 브라우저의 localStorage에 오늘 날짜를 저장합니다.
그러면 위 ②단계에서 “저장된 날짜 == 오늘”이 되어 다시 뜨지 않습니다. 그리고 날짜가 바뀌면 저장된 값(어제 날짜)과 오늘이 달라지므로 다음 날 다시 정상적으로 등장합니다. 서버도, 로그인도, 데이터베이스도 없이 브라우저 저장소 한 줄로 해결한 겁니다.
🔎 참고로 QT 목록 페이지(
/databank/daily-bible/)에도 비슷한 원리로 “오늘의 묵상 보기” 버튼이 있습니다. 오늘 날짜 페이지가 실제로 존재할 때만 버튼이 나타나도록,fetch(... , { method: "HEAD" })로 파일 존재 여부를 먼저 확인합니다.
5. 네 톱니바퀴를 한 장으로
이 네 가지가 맞물려서, 관리자가 아무 버튼도 누르지 않는 날에도 사이트는 매일 새로운 IT뉴스를 발행하고, 방문자에게 그날의 말씀을 건넵니다.
마치며
3부의 요점:
- IT뉴스는 AI 생성(정해진 archetype 틀) → 밤 11:30 launchd 자동 push → Cloudflare 배포로 이어진다.
- 아침 6시 빈 커밋은 예약 글을 공개하기 위한 정적 사이트 특유의 재빌드 트릭이다.
- 오늘의 QT 팝업은 각 QT를 JSON 엔드포인트로 출력하고, 홈 화면 JS가 오늘 것만 fetch해 모달로 띄우며,
localStorage로 “하루 안 보기”를 처리한다.
마지막 4부에서는 눈에 보이는 껍데기 — 카드 레이아웃, 반응형 디자인, 다크 모드, 그리고 코딩 없이 브라우저에서 설정을 바꾸는 Git 기반 관리자 패널 — 을 다루고, 제작 과정에서 실제로 부딪혔던 대표적인 문제와 해결법도 함께 정리하겠습니다.
