사이트 제작기 2부 — 콘텐츠 3구역(Blog·Class·Databank) 대해부

Home /
Class /
정적홈페이지 /
사이트 제작기 2부 — 콘텐츠 3구역(Blog·Class·Databank) 대해부

사이트 제작기 시리즈 · 1부 — 왜 정적 홈페이지인가 / 2부 (이 글) — 콘텐츠 3구역 대해부 / 3부 — 자동화 파이프라인 / 4부 — 커스터마이징과 관리자 패널

1부에서 “우리가 글을 쓰는 곳은 content/ 폴더뿐"이라고 했습니다. 그런데 그 안을 열어 보면 글이 아무렇게나 쌓여 있는 게 아니라, 성격이 뚜렷한 세 개의 구역으로 정돈되어 있습니다. 이번 편에서는 그 세 구역을 하나씩 뜯어봅니다.

content/
├── blog/        ← ① 시의성 콘텐츠 (지금 이 순간의 이야기)
├── class/       ← ② 강의·교육 콘텐츠 (배우고 익히는 자료)
└── databank/    ← ③ 신앙 자료실 (반복해 찾아보는 자산)

1. Blog — “지금 이 순간"을 다루는 구역

Blog 구역은 시의성이 있는, 즉 시간이 지나면 자연스럽게 흘러가는 콘텐츠가 모이는 곳입니다. 하위에는 6개의 카테고리가 있습니다. (괄호 안은 현재 글 수)

카테고리	성격	글 수
매일의 IT뉴스	매일 아침 6시, AI가 정리한 오늘의 IT·AI 소식	자동 누적 중
주간 AI 트렌드	한 주간의 주요 인공지능 동향 요약	22
컨퍼런스 리뷰	IT·기독교·학술 세미나 참관 후기	34
세컨드 브레인	디지털 도구를 활용한 지식 관리·생산성	10
프리젠테이션	효과적인 발표 디자인·스피치 팁	27
특이점	기술적 특이점과 미래 기술 전망	8

여기서 매일의 IT뉴스는 특별합니다. 사람이 쓰는 게 아니라 매일 밤 AI가 자동으로 생성해 올리는 카테고리이기 때문입니다. 이 자동화 이야기는 3부에서 자세히 다룹니다.

각 카테고리 폴더에는 _index.md라는 파일이 하나씩 있는데, 이 파일이 카테고리의 “간판” 역할을 합니다. 예를 들어 IT뉴스 카테고리의 간판은 이렇게 되어 있습니다.

---
title: "매일의 IT뉴스"
description: "매일 아침 6시, 오늘의 IT·AI 주요 소식을 간결하게 정리합니다."
---

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의 딱 한 줄입니다.

---
title: "Class"
type: "blog"      ← 이 한 줄이 "블로그 레이아웃을 상속하라"는 지시
---

type: "blog"이라고 적으면 Hugo가 이 폴더의 목록을 그릴 때 블로그용 레이아웃 파일(layouts/blog/list.html)을 사용합니다. 덕분에 세 구역의 디자인이 저절로 통일되고, 유지보수할 코드도 하나로 줄어듭니다. (코드 재사용의 좋은 예입니다.)

3. Databank — “반복해 찾아보는 신앙 자산” 구역

Databank는 선교·신앙과 관련해 오래 두고 반복해 찾아보는 자료가 쌓이는 구역입니다. 여기에는 이 사이트에서 가장 특별한 콘텐츠가 있습니다.

카테고리	내용	글 수
오늘의 QT	날짜별 성경 묵상 자료 (홈 화면 팝업의 원천)	367
말씀카드	이슬비전도카드 활용·신청 안내	1
성경 자료	성경 연구·공부용 문서와 참고 자료	42
자료실	템플릿·에셋·다운로드 자료	1

오늘의 QT가 무려 367개라는 숫자에 주목하세요. 이건 거의 1년치 매일 묵상이 미리 준비되어 있다는 뜻입니다. 방문자가 사이트에 들어오면 그날 날짜에 해당하는 묵상이 팝업 모달로 자동으로 떠오릅니다. 이 영리한 장치의 작동 원리는 3부의 핵심 주제입니다.

QT 파일 하나를 열어 보면 이렇게 단순합니다.

---
title: "요한복음 3장 16절 (2026년 7월 7일)"
date: 2026-07-07
draft: true          ← 아직 공개되지 않은 날은 draft 상태로 대기
---

## 오늘의 묵상: 세상을 사랑하신 하나님의 사랑
하나님이 세상을 이처럼 사랑하사 독생자를 주셨으니 ...

4. 이 구역들이 상단 메뉴가 되는 방법

세 구역과 그 하위 카테고리는 사이트 상단의 드롭다운 메뉴로 그대로 이어집니다. 이 메뉴 구조는 config/_default/menus.toml 파일 하나로 관리됩니다. 실제 코드 일부를 보겠습니다.

[[main]]
name = "Blog"
url = "/blog/"
weight = 3
hasChildren = true       # 하위 메뉴가 있다는 표시

  [[main]]
  parent = "Blog"        # 부모 메뉴 이름과 정확히 일치해야 함
  name = "매일의 IT뉴스"
  url = "/blog/daily-it-news/"
  weight = 1             # 숫자가 작을수록 앞에 표시

  [[main]]
  parent = "Blog"
  name = "주간 AI 트렌드"
  url = "/blog/weekly-ai-trends/"
  weight = 2

읽는 법은 직관적입니다.

[[main]] 하나가 메뉴 항목 하나입니다.
hasChildren = true이면 마우스를 올렸을 때 하위 메뉴가 펼쳐집니다.
하위 항목은 parent = "부모이름"으로 어느 메뉴에 속하는지 지정합니다.
weight 숫자가 작을수록 왼쪽(위)에 옵니다.

즉 메뉴 순서를 바꾸고 싶으면 weight 숫자만 고치면 됩니다. 코드를 몰라도 숫자만 바꿀 줄 알면 되는 거죠. (참고로 이 메뉴는 4부에서 소개할 관리자 패널에서 브라우저로도 편집할 수 있습니다.)

5. 글은 어떻게 이 구역들을 채우는가 — 세 갈래 경로

이제 가장 흥미로운 질문입니다. 이 많은 글은 대체 어떻게 올라올까요? 이 사이트는 세 가지 서로 다른 경로로 콘텐츠를 채웁니다.

경로 ① 노션(Notion) 데이터베이스 → 자동 변환

Class와 일부 Blog 콘텐츠는 노션에서 작성한 뒤 마크다운으로 자동 변환되어 들어옵니다. 그 흔적은 글의 프론트매터에 남아 있습니다.

---
title: "교회 홈페이지 구축 프로젝트 개요"
created: 2026-05-21
updated: 2026-06-11
notion_url: https://app.notion.com/p/...
notion_id: 367091c2-84f6-8020-...
Status: "Publish"
---

notion_url, notion_id 같은 필드가 바로 “이 글은 노션에서 왔다"는 표시입니다. 노션의 편안한 편집 환경에서 글을 쓰고, 변환 도구가 이를 마크다운 파일로 만들어 content/ 폴더에 떨어뜨립니다.

경로 ② 사람이 직접 마크다운 작성 (수동)

지금 이 글처럼, 마크다운 파일을 직접 써서 올리는 가장 기본적인 방법입니다. 이때 지켜야 할 프론트매터 규칙이 몇 가지 있습니다.

---
title: "글 제목"
date: 2026-07-07T10:00:00+09:00   # 한국 시간(+09:00) 명시 필수
author: "Gihyun Park"
summary: "목록에 표시될 한 줄 요약 (150자 이내 권장)"
tags: ["태그1", "태그2"]
categories: ["정적홈페이지"]
---

⚠️ 초보자가 자주 걸리는 함정
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 팝업이 어떤 원리로 여러분을 맞이하는지를 코드와 함께 파헤쳐 보겠습니다.