지금 보고 계신 이 블로그(blog.mhub.uk) 자체가 이 시리즈의 소재입니다. Hugo 정적 사이트 생성기와 PaperMod 테마로 시작해서, 최근에는 카테고리 사이드바·추천글·전체 글 목록으로 이루어진 3분할 홈 화면으로 직접 레이아웃을 손봤습니다.

왜 Hugo인가

Hugo는 빌드마다 서버 자원을 거의 쓰지 않는 정적 사이트 생성기입니다. 휴대폰처럼 자원이 넉넉하지 않은 환경에서는 매 요청마다 서버 사이드 렌더링을 하는 방식보다, 미리 HTML을 만들어 두고 Caddy가 그냥 파일을 서빙하는 쪽이 훨씬 가볍습니다. 글을 쓰거나 설정을 바꿀 때만 hugo --minify로 다시 빌드하면 끝입니다.

PaperMod를 통째로 바꾸지 않은 이유

PaperMod는 미니멀한 단일 컬럼 블로그 테마라 사이드바·추천글 같은 3분할 레이아웃을 기본으로 지원하지 않습니다. 테마를 통째로 바꾸는 대신, layouts/ 아래에 필요한 템플릿만 오버라이드하는 방식을 택했습니다. Hugo는 프로젝트 루트의 layouts/가 테마의 같은 경로 파일보다 우선하기 때문에, baseof.html과 index.html만 새로 작성하면 글 목록·개별 글·태그 페이지 등 나머지는 PaperMod가 이미 만들어둔 템플릿을 그대로 쓸 수 있습니다.

홈 화면 개편 과정

사이드바를 모든 페이지에 유지하기

처음에는 홈 화면에만 사이드바를 넣었는데, 개별 글을 읽을 때 사이드바가 사라지는 게 아쉬워서 baseof.html 자체를 오버라이드해 모든 페이지 공통으로 사이드바를 배치했습니다. 이렇게 하면 홈·글·카테고리 페이지 어디서든 좌측 카테고리 목록으로 바로 이동할 수 있습니다. 카테고리 집계는 Hugo의 기본 categories 택소노미를 그대로 활용했고, 글 프런트매터에 categories = ["개발 일지"]처럼 한 줄만 추가하면 자동으로 사이드바·추천글에 반영됩니다.

작은 함정: 대문자 카테고리가 사라지는 문제

Hugo가 택소노미 term 키를 만들 때 소문자로 정규화하기 때문에, categories = ["개발 일지"]가 사이드바에는 “it"으로 표시되는 문제를 겪었습니다. 글의 원본 카테고리 문자열을 따로 모아 표시용 이름으로 쓰는 식으로 해결했는데, 택소노미 기반 UI를 만들 때 한 번쯤 마주칠 만한 함정이라 기록해둡니다.

핵심 요약

🤖 이 포스팅은 AI의 도움을 받아 작성되었습니다.