시리즈: AI와 함께 만든 홈페이지 ccumgol.net · (4/8)
동전 코너에는 미국 지도가 하나 있습니다. 그냥 그림이 아니라, 주(州)를 클릭하면 그 주의 동전이 나타나는 인터랙티브 지도입니다. 이런 건 대개 지도 서비스나 유료 도구를 붙여야 할 것 같지만, 실제로는 가벼운 방법으로 만들었습니다.
SVG — 클릭할 수 있는 그림
비결은 SVG라는 그림 형식입니다. 일반 사진(jpg, png)은 픽셀 덩어리라 “이 부분이 텍사스”라고 알 수 없습니다. 반면 SVG는 각 주(州)가 이름표가 붙은 도형으로 그려져 있습니다. 그래서 “캘리포니아 도형을 클릭하면 캘리포니아 동전을 보여줘”라고 코드로 연결할 수 있습니다.
- 마우스를 올리면 주가 하이라이트
- 클릭하면 옆에 그 주의 동전과 설명이 뜸
- 확대해도 깨지지 않음(SVG는 벡터라 무한 확대 가능)
AI와 함께 풀어간 실전 문제들
그림이 살아 움직이게 하는 과정에서 몇 가지 자잘한 문제를 만났고, AI와 함께 하나씩 잡았습니다.
1) 알래스카 위에 떠 있던 정체불명의 도형
지도 SVG를 뜯어보니, 알래스카 위에 엉뚱한 도형 하나가 겹쳐 있었습니다. AI가 SVG 내부를 분석해 그 도형만 찾아 제거했습니다.
2) 뒤로 가기 하면 큰 동전 그림이 사라지지 않던 버그
확대해서 본 동전 그림이, 브라우저 “뒤로 가기”를 하면 화면에 남아 있었습니다. 브라우저가 페이지를 캐시(bfcache)하며 생긴 문제였는데, 페이지가 다시 보일 때 확대 상태를 초기화하도록 처리해 해결했습니다.
3) 모바일에서의 오작동
지도의 동전 이미지에는 “확대 클릭”을 끄고, 상세 화면의 큰 이미지에만 확대를 켜는 식으로 상황에 맞게 동작을 구분했습니다.
왜 이 방식이 좋은가
이 지도는 외부 서비스에 의존하지 않습니다. 지도 API 키도, 월 사용료도 없습니다. SVG 파일 하나와 약간의 코드만으로 동작하니, 정적 홈페이지 철학(빠르고, 무료고, 걱정 없음)과 완벽히 맞습니다.
배운 점
“인터랙티브”가 반드시 무거운 기술을 뜻하진 않습니다. 이름표가 붙은 그림(SVG) + 약간의 연결 코드만으로도 충분히 살아 있는 화면을 만들 수 있습니다. 선교지 지도, 순회 경로, 조직도 등에 그대로 응용할 수 있습니다.
👉 결과 보기: ccumgol.net/coins
다음 글은 한 걸음 더 나아간 지도 — “지도로 보는 예수님의 생애” 의 진짜 지도 이야기입니다.
