이전 글에서 네이버 지도 모듈을 사용하다 속도 관련 이슈를 다뤘었다.
지난 상황
- 네이버 지도를 사용하여 다수의 마커와 폴리라인을 지도에 표시
- 소요되는 시간이 길어져서 나쁜 사용자 경험 유발
- 로딩 스피너를 추가하여 개선
위 과정으로 해결하려 했으나, 마커 수가 더 많아지자 로딩 스피너가 10초 이상동안 표시되었다..
그래서 고심끝에 지도 모듈을 변경하기로 하였다.
찾아본 후보 라이브러리들은 다음과 같다.
1. NaverMapsAPI
2. MapBox
3. GoogleMpasAPI
4. Leaflet
위 4가지를 마커 등록하는 페이지를 기준으로 하나씩 테스트했다.
중점적으로 봤던 부분은
마커의 추가 및 삭제 속도, polyline 화살표 옵션, filtering 옵션
위 세가지이다
가장 먼저 네이버 지도의 테스트 결과이다.
1. NaverMapsAPI
- 성능
- 추가 시간: 10s
- 삭제 시간: 20s 이상
- 특이사항
filtering기능이 없어서 추사 및 삭제에 시간 다수 소요polyline화살표 추가 옵션 제공
언급한 라이브러리들 중에서 속도는 가장 느렸음.
하지만 국내 지도 데이터로써의 정확성은 매우 상세하고 정확함.
국내에서만 사용하는 어플리케이션 용도로 개발한다면 적합.
2. MapBox
- 성능
- 추가 시간 6.5s
- 삭제 시간 1s 이내
- 자체
filtering기능(setFilter)이 있어서 삭제 추가할 필요 없음. polyline화살표 추가 옵션 별도 제공하지 않음
- 특이사항
- WebGL 기반으로, 대량의 데이터 처리와 빠른 렌더링 지원.
- 실시간 위치 추적, 3D 지도 등 고급 기능 제공.
- 높은 사용자 정의 가능성, 유연함
다양한 기능과 커스터마이징이 가능해서 유연하게 사용가능하지만 초보자가 사용하기엔 다소 복잡할 수 있음.(러닝커브)
그 외에는 속도적으로나 기능적으로 우수함.
3. GoogleMapsAPI
- 성능
- 추가 시간 4.5s
- 삭제 시간 1s 이내
- 자체
filtering기능 없음 그러나 특정 조건에 부합한 마커를 숨기거나 표시할 수 있는setVisible함수 사용가능 polyline화살표 추가 옵션 제공
- 특이사항
- 스트리트 뷰 옵션 지원
- 지도 유형 설정 가능(
2D,위성,3D)
전반적으로 우수한 속도 성능을 보였으며, 스트리트 뷰나 지도 유형 설정 기능같은 부가 기능으로 어플리케이션을 좀 더 다양하게 활용할 수 있음.
현재도 꾸준히 업데이트(마커, 2월 21일자로 새로운 버전으로 업데이트)중이며,
한달간 200달러에 해당하는 이용요금을 무료로 제공하고 있다.
4. Leaflet
- 성능(테스트하지 않음)
- 특이사항
- 경량성: 매우 가벼운 JavaScript 라이브러리로, 성능이 우수하고 로딩 시간이 짧음
- 확장성: 다양한 플러그인을 통해 기능을 쉽게 확장할 수 있으며, 사용자 정의가 용이
- 오픈 소스: 무료이며, 오픈 소스 커뮤니티에 의해 지속적으로 개선되고 있음
성능 테스트 결과(마커, 폴리라인 각각 9천개 가량)
위와 같은 결과가 나옴.
변경할 지도 모듈 결정
현재 제작하려는 어플리케이션의 성격에 맞게
구글 지도로 결정하였음.
나중에 또 지도 모듈을 변경할 때 유지보수에 용이하도록 어댑터 패턴을 적용하여 코드 작성할 예정.
고려해야 할 점
구글 지도 라이브러리를 사용해서 마커에 특정 애니메이션을 적용하려고 하니 해당하는 기능을 지원하지 않았음.
그러나 현재까지도 꾸준히 업데이트중이니 나중에는 지원될 것 같음.
어떤 지도 라이브러리가 제일 좋다고는 말 못하지만, 상황에 맞는 1등 라이브러리는 판단하에 결정할 수 있을 것 같다.
참고: 구글 지도 API 마커 새로운 버전(https://developers.google.com/maps/documentation/javascript/reference/advanced-markers?hl=ko)
