시리즈: AI와 함께 만든 홈페이지 ccumgol.net · (3/8)
미국 25센트 동전(Quarter)에는 50개 주, 준주, 국립공원, 미국의 여성들, 건국 250주년까지 — 미국의 역사와 지리가 그림으로 담겨 있습니다. 이걸 동전 도감으로 만들어 미국을 소개하면 재미있겠다 싶었습니다. 그런데 동전이 137종입니다. 페이지를 137개 손으로 만든다고요? 상상만 해도 아득합니다.
핵심 아이디어: 페이지가 아니라 ‘데이터’를 만든다
그래서 접근을 뒤집었습니다. 동전마다 페이지를 만드는 대신, 동전 정보를 하나의 데이터 파일(quarters.json)로 정리했습니다. 각 동전은 이렇게 한 줄로 표현됩니다.
- 발행연도, 이름, 주(州)/시리즈
- 뒷면 도안 설명, 흥미로운 사실
- 출처
그리고 Hugo에게 “이 데이터를 읽어서 137개 페이지를 자동으로 찍어내라” 고 시켰습니다(콘텐츠 어댑터라는 기능). 데이터 137줄 → 페이지 137개가 자동으로 만들어집니다.
이 방식의 진짜 장점은 수정에 있습니다. 동전 설명을 고치고 싶으면 데이터 한 줄만 고치면 됩니다. 디자인을 바꾸고 싶으면 틀(템플릿) 하나만 바꾸면 137개 페이지가 동시에 바뀝니다.
AI가 데이터를 채우다
문제는 137개의 데이터를 채우는 일이었습니다. 여기서 AI가 크게 활약했습니다 — 각 동전의 도안, 발행 배경, 담긴 인물·장소 이야기를 조사해 일관된 형식의 데이터로 정리했습니다. 사람이 137번 검색하고 요약할 일을, 형식을 정해주고 맡길 수 있었습니다.
보는 재미를 더하다
- 동전 그림을 클릭하면 큰 화면(라이트박스) 으로 확대됩니다.
- 모바일에서는 동전 그림이 가운데 정렬되어 보기 좋게.
- 시리즈별(50개 주 / 준주 / 국립공원 / 여성들 / 250주년)로 드롭다운 메뉴를 나눠 탐색하기 쉽게.
배운 점
“항목이 많다 = 노가다”가 아닙니다. 데이터와 틀을 분리하면, 100개든 1000개든 똑같은 노력으로 만들 수 있습니다. 이건 동전뿐 아니라 성경 인물 사전, 선교지 소개, 도서 목록 등 “비슷한 형식이 여러 개” 인 모든 콘텐츠에 그대로 응용할 수 있는 패턴입니다.
👉 결과 보기: ccumgol.net/coins
그런데 이 코너엔 숨은 기능이 하나 더 있습니다. 클릭하면 반응하는 미국 지도입니다. 다음 글에서 그 지도를 어떻게 만들었는지 풀어보겠습니다.
