SVG로 세계 지도 만들기
HTML5 환경에서 세계 지도를 구현하려면 SVG(Scalable Vector Graphics)를 활용하는 것이 가장 효과적입니다. SVG는 벡터 기반 그래픽이므로 화면을 확대하거나 축소해도 이미지 품질이 저하되지 않아, 지도처럼 다양한 크기로 표시해야 하는 콘텐츠에 특히 적합합니다.
여기에 자바스크립트 라이브러리인 Raphael.js를 함께 사용하면 브라우저 호환성 문제 없이 지도를 손쉽게 그릴 수 있고, 클릭이나 마우스 오버 같은 이벤트 처리까지 간편하게 구현할 수 있습니다.
Raphael.js 시작하기
먼저 Raphael.js를 프로젝트에 추가하는 방법부터 살펴보겠습니다. CDN을 이용하면 간단하게 라이브러리를 로드할 수 있습니다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.3.0/raphael.min.js"></script>
라이브러리를 로드한 뒤에는 간단한 원(circle)을 하나 그려 보며 기본 사용법을 익히는 것이 좋습니다.
// Raphael 객체 생성: x 좌표 10, y 좌표 50, 너비 320, 높이 200
var paper = Raphael(10, 50, 320, 200);
// 원 그리기: 중심 x 50, 중심 y 40, 반지름 10
var circle = paper.circle(50, 40, 10);
// 스타일 지정
circle.attr("fill", "#f00");
circle.attr("stroke", "#fff");위 코드에서 paper는 실제 도형을 그리는 영역 역할을 하는 Raphael 객체입니다. circle() 메서드의 인자는 순서대로 중심점의 x 좌표, y 좌표, 반지름을 의미하며, attr() 메서드로 채우기 색상(fill)과 선 색상(stroke)을 지정할 수 있습니다.
세계 지도 그리기
기본 도형 그리기의 원리를 이해했다면, 이제 path 요소를 활용해 각 국가의 윤곽선을 그려 세계 지도를 완성할 수 있습니다. 각 국가는 복잡한 path 데이터로 표현되며, Raphael.js의 paper.path() 메서드를 사용해 렌더링합니다.
var country = paper.path("M ..."); // 국가별 path 데이터
country.attr({
fill: "#3498db",
stroke: "#fff",
"stroke-width": 1
});
// 마우스 오버 시 색상 변경 예시
country.hover(function () {
this.animate({ fill: "#e74c3c" }, 200);
}, function () {
this.animate({ fill: "#3498db" }, 200);
});국가별 path 데이터는 공개된 GeoJSON 또는 SVG 소스를 변환해 얻을 수 있으며, 이를 활용하면 국가별로 클릭·하이라이트가 가능한 대화형(interactive) 세계 지도를 비교적 쉽게 구축할 수 있습니다.
정리
- SVG는 벡터 기반이므로 어떤 해상에서도 선명하게 표시됩니다.
- Raphael.js를 사용하면 구형 브라우저까지 지원하는 호환성 좋은 지도를 만들 수 있습니다.
- 각 국가를 개별 요소로 다룰 수 있어 인터랙션 구현이 매우 용이합니다.