왜 이 도구가 필요한가
Hugo로 글을 쓰다 보면 “대표 이미지(커버/OG 이미지)”를 매번 만들기가 귀찮습니다.
- 글의 품질이 아니라 디자인 작업에 시간을 쓰게 됨
- 대표 이미지 스타일이 글마다 달라져 사이트 일관성이 깨짐
- 소셜 공유(OG)에서 글이 덜 눈에 띔
그래서 이 레포에는 JSON 스펙 기반으로 대표 이미지를 생성하는 스크립트를 추가했습니다.
- 생성기:
script/hero_infographic_generator.py - 샘플 스펙:
script/hero_infographic_example_spec.json
결과물 예시
아래 이미지는 실제로 생성기가 만든 결과물입니다(1920×1080).

빠른 시작
1) 기본 생성(스펙 없이)
| |
스펙을 주지 않으면 기본 템플릿으로 생성합니다(기존과 호환).
2) JSON 스펙으로 생성(추천)
| |
3) 옵션 오버라이드
| |
스펙(JSON) 구조 설명
스펙 파일은 크게 다음 블록으로 구성됩니다.
canvas:{ width, height }header:{ lines: string[], subtitle?: string }cards: 카드 배열(제목/부제/불릿/강조색)footer:{ text?: string, brand?: string }layout:{ cols }카드 열 수(카드 개수에 따라 행은 자동)typography:{ bullet_prefix }글머리 접두어(폰트 깨짐 방지용)
스펙 예시 3개(바로 복사해 쓰기)
아래 예시들은 모두 --spec <file.json> 형태로 사용할 수 있습니다.
예시 1) 비교 2-카드(기본형)

| |
예시 2) 3-카드(privacy/anonymity/pseudonymity)

| |
예시 3) 포스트 템플릿(빈 카드 2개: 빠르게 채우기)

| |
자주 겪는 문제(트러블슈팅)
폰트가 깨져 보인다
- 아이콘/특수문자는 폰트에 없을 수 있습니다.
- 그래서
typography.bullet_prefix는 기본값을-로 두었습니다(일부 폰트에서•가 깨짐 방지). - 한글 폰트를 강제하고 싶으면
--font <ttf>를 사용하세요.
텍스트가 박스를 뚫고 나간다
- 공백이 적은 문자열(한글/긴 토큰)은 줄바꿈이 어려울 수 있습니다.
- 생성기는 단어 래핑 + 문자 단위 강제 분할 fallback이 있어 오버플로우를 줄입니다.
Hugo에 붙이는 패턴
이 글처럼 frontmatter의 image:를 생성된 이미지 파일로 지정하면 됩니다.
| |
![Featured image of post [Python] Hugo 대표 이미지 자동 생성기(hero infographic) 사용법](/post/2025-12-23-hero-infographic-generator-usage/image01_hu_fce9647be8009ab6.png)
![[PowerShell] Frontmatter Description 누락 파일 찾기](/post/2025-12-20-find-frontmatter-missing-description-powershell/wordcloud_hu_a552c882c683b111.png)
![[Python] PyInstaller를 사용한 Python 프로그램 배포 완전 가이드](/post/2025-08-04-pyinstaller-python-executable-deployment-guide/wordcloud_hu_a33dd52f5be667a7.png)
![[Hugo] Hugo Archetypes 완전 가이드: 콘텐츠 템플릿 시스템 마스터하기](/post/2025-08-06-hugo-archetypes-complete-guide/wordcloud_hu_475612129f033319.png)
![[Torrent] 토렌트 다운로드 완료 후 자동 파일 정리 스크립트](/post/2025-05-22-automatic-file-organization-script-after-torrent-download-completion/ui-classic-bd3481be0133059729c5a937070f8b69_hu_79078709908ef174.png)
![[Markdown] 마크다운 제목 정리를 위한 정규식 가이드](/post/2025-10-29-markdown-heading-regex-guide/wordcloud_hu_cf7d8abb6419b666.png)