사이트 제작기 시리즈 · 1부 — 왜 정적 홈페이지인가 / 2부 (이 글) — 콘텐츠 3구역 대해부 / 3부 — 자동화 파이프라인 / 4부 — 커스터마이징과 관리자 패널
1부에서 “우리가 글을 쓰는 곳은 content/ 폴더뿐”이라고 했습니다. 그런데 그 안을 열어 보면 글이 아무렇게나 쌓여 있는 게 아니라, 성격이 뚜렷한 세 개의 구역으로 정돈되어 있습니다. 이번 편에서는 그 세 구역을 하나씩 뜯어봅니다.
1. Blog — “지금 이 순간”을 다루는 구역
Blog 구역은 시의성이 있는, 즉 시간이 지나면 자연스럽게 흘러가는 콘텐츠가 모이는 곳입니다. 하위에는 6개의 카테고리가 있습니다. (괄호 안은 현재 글 수)
| 카테고리 | 성격 | 글 수 |
| 매일의 IT뉴스 | 매일 아침 6시, AI가 정리한 오늘의 IT·AI 소식 | 자동 누적 중 |
| 주간 AI 트렌드 | 한 주간의 주요 인공지능 동향 요약 | 22 |
| 컨퍼런스 리뷰 | IT·기독교·학술 세미나 참관 후기 | 34 |
| 세컨드 브레인 | 디지털 도구를 활용한 지식 관리·생산성 | 10 |
| 프리젠테이션 | 효과적인 발표 디자인·스피치 팁 | 27 |
| 특이점 | 기술적 특이점과 미래 기술 전망 | 8 |
여기서 매일의 IT뉴스는 특별합니다. 사람이 쓰는 게 아니라 매일 밤 AI가 자동으로 생성해 올리는 카테고리이기 때문입니다. 이 자동화 이야기는 3부에서 자세히 다룹니다.
각 카테고리 폴더에는 _index.md라는 파일이 하나씩 있는데, 이 파일이 카테고리의 “간판” 역할을 합니다. 예를 들어 IT뉴스 카테고리의 간판은 이렇게 되어 있습니다.
2. Class — “배우고 익히는” 구역
Class 구역은 강의·튜토리얼처럼 학습용 콘텐츠가 모이는 곳입니다. 지금 여러분이 읽고 있는 이 “사이트 제작기” 시리즈도 Class의 정적홈페이지 카테고리 안에 살고 있습니다. Class에는 8개의 카테고리가 있습니다.
| 카테고리 | 주제 | 글 수 |
| Affinity | Affinity Designer·벡터 그래픽 가이드 | 32 |
| 정적홈페이지 | SSG 기반 홈페이지 제작·실무 가이드 | 9 |
| LLM Wiki | 대규모 언어 모델(LLM)의 개념·원리·활용 | 8 |
| 컴퓨터 기초 | 컴퓨터·IT 기본 기술과 사용법 | 12 |
| 청출어람 | 효과적인 AI 활용·학습 방법론 | 16 |
| Gemini Canvas | Gemini Canvas 협업 환경 활용법 | 4 |
| Gemini Gems | 사용자 지정 챗봇 제작 강좌 | 2 |
| Notebook LM | Google NotebookLM 연구·지식 관리 | 준비 중 |
Class와 Blog는 겉보기에 왜 똑같을까
재미있는 점 하나. Class와 Databank의 목록 페이지는 Blog와 똑같은 3열 카드 디자인으로 보입니다. 별도 디자인을 새로 만든 게 아니라, “블로그 레이아웃을 그대로 물려받으라”고 설정해 두었기 때문입니다. 비결은 각 구역 _index.md의 딱 한 줄입니다.
type: "blog"이라고 적으면 Hugo가 이 폴더의 목록을 그릴 때 블로그용 레이아웃 파일(layouts/blog/list.html)을 사용합니다. 덕분에 세 구역의 디자인이 저절로 통일되고, 유지보수할 코드도 하나로 줄어듭니다. (코드 재사용의 좋은 예입니다.)
3. Databank — “반복해 찾아보는 신앙 자산” 구역
Databank는 선교·신앙과 관련해 오래 두고 반복해 찾아보는 자료가 쌓이는 구역입니다. 여기에는 이 사이트에서 가장 특별한 콘텐츠가 있습니다.
| 카테고리 | 내용 | 글 수 |
| 오늘의 QT | 날짜별 성경 묵상 자료 (홈 화면 팝업의 원천) | 367 |
| 말씀카드 | 이슬비전도카드 활용·신청 안내 | 1 |
| 성경 자료 | 성경 연구·공부용 문서와 참고 자료 | 42 |
| 자료실 | 템플릿·에셋·다운로드 자료 | 1 |
오늘의 QT가 무려 367개라는 숫자에 주목하세요. 이건 거의 1년치 매일 묵상이 미리 준비되어 있다는 뜻입니다. 방문자가 사이트에 들어오면 그날 날짜에 해당하는 묵상이 팝업 모달로 자동으로 떠오릅니다. 이 영리한 장치의 작동 원리는 3부의 핵심 주제입니다.
QT 파일 하나를 열어 보면 이렇게 단순합니다.
4. 이 구역들이 상단 메뉴가 되는 방법
세 구역과 그 하위 카테고리는 사이트 상단의 드롭다운 메뉴로 그대로 이어집니다. 이 메뉴 구조는 config/_default/menus.toml 파일 하나로 관리됩니다. 실제 코드 일부를 보겠습니다.
읽는 법은 직관적입니다.
[[main]]하나가 메뉴 항목 하나입니다.hasChildren = true이면 마우스를 올렸을 때 하위 메뉴가 펼쳐집니다.- 하위 항목은
parent = "부모이름"으로 어느 메뉴에 속하는지 지정합니다. weight숫자가 작을수록 왼쪽(위)에 옵니다.
즉 메뉴 순서를 바꾸고 싶으면 weight 숫자만 고치면 됩니다. 코드를 몰라도 숫자만 바꿀 줄 알면 되는 거죠. (참고로 이 메뉴는 4부에서 소개할 관리자 패널에서 브라우저로도 편집할 수 있습니다.)
5. 글은 어떻게 이 구역들을 채우는가 — 세 갈래 경로
이제 가장 흥미로운 질문입니다. 이 많은 글은 대체 어떻게 올라올까요? 이 사이트는 세 가지 서로 다른 경로로 콘텐츠를 채웁니다.
경로 ① 노션(Notion) 데이터베이스 → 자동 변환
Class와 일부 Blog 콘텐츠는 노션에서 작성한 뒤 마크다운으로 자동 변환되어 들어옵니다. 그 흔적은 글의 프론트매터에 남아 있습니다.
notion_url, notion_id 같은 필드가 바로 “이 글은 노션에서 왔다”는 표시입니다. 노션의 편안한 편집 환경에서 글을 쓰고, 변환 도구가 이를 마크다운 파일로 만들어 content/ 폴더에 떨어뜨립니다.
경로 ② 사람이 직접 마크다운 작성 (수동)
지금 이 글처럼, 마크다운 파일을 직접 써서 올리는 가장 기본적인 방법입니다. 이때 지켜야 할 프론트매터 규칙이 몇 가지 있습니다.
⚠️ 초보자가 자주 걸리는 함정
Categories:처럼 대문자로 시작하면 빌드 경고가 납니다. 항상 소문자categories:.- 날짜에 타임존(
+09:00)을 빼면 서버가 UTC로 해석해 날짜가 하루 어긋날 수 있습니다.- 노션에서 온 파일에 딸려 오는
path:필드는 최신 Hugo에서 빌드를 아예 실패시키므로 반드시 제거해야 합니다. (이 문제의 상세 기록은 4부에서)
경로 ③ AI가 매일 자동 생성 (완전 자동)
매일의 IT뉴스와 오늘의 QT는 사람의 손을 거의 거치지 않습니다. AI가 매일 밤 콘텐츠를 만들고, 스케줄러가 알아서 업로드하고, Cloudflare가 알아서 배포합니다. 이 “무인 자동화 라인”이 이 사이트의 가장 독특한 특징이며, 3부 전체가 이 이야기입니다.
마치며
2부를 세 줄로 요약하면:
- 콘텐츠는 Blog(시의성) · Class(교육) · Databank(신앙 자산) 세 구역으로 나뉜다.
_index.md의type: "blog"한 줄로 세 구역이 디자인을 공유하고,menus.toml의weight숫자로 메뉴 순서를 정한다.- 글은 노션 변환 · 수동 작성 · AI 자동 생성 세 갈래로 채워진다.
다음 3부에서는 그 세 번째 경로 — 매일 밤 조용히 돌아가는 자동화 파이프라인 — 의 뚜껑을 열어, IT뉴스가 아침에 어떻게 발행되고, 오늘의 QT 팝업이 어떤 원리로 여러분을 맞이하는지를 코드와 함께 파헤쳐 보겠습니다.