시리즈: AI와 함께 만든 홈페이지 ccumgol.net · (5/8)
지도로 보는 예수님의 생애는 이 홈페이지에서 가장 공들인 코너 중 하나입니다. 예수님의 생애를 국면별(탄생·초기 사역·갈릴리·물러나심·수난주간·부활 등 8국면) 로 나누고, 각 국면을 실제로 확대·이동할 수 있는 인터랙티브 지도 위에서 따라가도록 만들었습니다. 여기에 사건별 교재 78편이 딸려 있습니다.
문제: 마크다운으로는 표현이 안 된다
성경공부 글이나 동전 도감은 마크다운(글)으로 충분했습니다. 그런데 확대·클릭되는 지도는 글이 아니라 작은 웹 프로그램입니다. Hugo의 마크다운 안에 그대로 넣기 어렵습니다.
해결: ‘자립형 HTML’ + ‘창(iframe)으로 끼워넣기’
그래서 지도를 독립된 HTML 파일로 따로 만들었습니다. 이 지도 파일은 Hugo나 테마와 상관없이 혼자서도 완전히 동작합니다. 그리고 사이트의 각 국면 페이지에서는, 이 지도를 작은 창(iframe)으로 끼워넣기만 합니다.
이걸 편하게 하려고 mapframe이라는 간단한 삽입 명령을 하나 만들었습니다. 글 속에 한 줄만 쓰면, 그 자리에 반응형 지도 창이 나타납니다. 지도(프로그램)와 글(콘텐츠)이 깔끔하게 분리되니, 지도를 고쳐도 글은 그대로고, 글을 고쳐도 지도는 그대로입니다.
지도는 어떻게 만들었나
배경 지도는 위키미디어 공용에 공개된 성경 시대 지도 자료를 바탕으로, 가볍게 다듬고 표시를 더해 사용했습니다. 그 위에 예수님의 이동 경로와 사건 지점을 얹었습니다.
⚠️ 놓치기 쉬운 것: 저작권(라이선스)
여기서 중요한 실전 교훈이 있습니다. 배경 지도는 CC BY-SA라는 라이선스의 자료였는데, 이 라이선스는 “가져다 고쳐 만든 결과물도 같은 조건으로 공개하고, 원저작자를 밝혀야 한다” 는 규칙이 있습니다.
그래서 각 지도 아래에 ① 원저작자·원본 링크, ② 라이선스 링크, ③ 무엇을 바꿨는지, ④ 이 결과물도 같은 라이선스로 제공한다는 문구를 정확히 표기했습니다. AI가 이 라이선스 조건을 확인하고 표기 문구까지 정리해 주었습니다.
남의 자료(지도·사진·폰트)를 쓸 때는 라이선스를 먼저 확인하는 습관이 꼭 필요합니다.
배운 점
마크다운으로 표현하기 어려운 기능은, 자립형 HTML로 따로 만들어 창으로 끼워넣으면 테마·빌드와 충돌 없이 붙일 수 있습니다. 이 패턴은 계산기, 퀴즈, 타임라인 등 어떤 인터랙티브 콘텐츠에도 통합니다.
👉 결과 보기: ccumgol.net/bible-map
다음 글은 데이터를 문서로 자동 변환한 또 하나의 사례, 일년일독성경입니다.
