안녕하세요! 오늘은 제가 팀 프로젝트에서 지도 API를 이용해 개발하였는데 그때의 기억을 기반으로, 지도 API 중 어떤 지도 API를 선택하였고, 그 이유에 대해 다뤄보려합니다.
국내에서 가장 많이 사용되는 지도 API로 네이버와 카카오 이 두개가 대표적으로 사용됩니다.
그 이유는 구글은 해외 지도가 필요한 서비스에는 적합할지 모르지만, 현재 한국 지도는 비교적 제한적으로 서비스하고 있기에 국내 서비스만을 계획하고 있을 때는 구글 맵 지도는 좋은 조건이 아니라고 생각이 들었기 때문입니다.
맵의 용도가 다른 만큼 제작하는 서비스에 따라 잘 비교해보고 사용하시길 바랍니다 !
따라서, 저는 web을 통해 국내 지도 서비스를 제공하는 프로젝트를 만들기 때문에 네이버 지도와 카카오 지도를 비교하게 되었습니다.
Naver Maps API vs Kakao Maps API
네이버 맵과 카카오 맵은 웹과 애플리케이션 플랫폼으로 제공되며, 안드로이드와 ios 모두 지원하고 있습니다.
둘 중 저는 Kakao Maps API를 사용하였습니다 🗺️ !
그 이유는 제가 프로젝트에 활용할 용도를 가장 우선으로 생각하였는데요.
제가 제작했던 프로젝트를 간략하게 말하자면 제주도의 관광지를 소개하는 서비스를 만들었고, 검색을 통해 추천 관광지가 나오면 찜 기능을 이용하여 찜 목록을 제시하는 서비스를 구현했어요! 그 찜 목록 중에는 아이템을 나열하는 목록창과 지도에 마커를 이용한 화면 두가지를 서비스로 제안하였어요.
화면 구성입니다.
지도 서비스를 제공해야겠다 생각을 하고 난 뒤에는 지도 API에 대해서 많은 서칭을 해보았습니다.
제가 만드는 서비스에서 지도의 가장 중요한 포인트는 화면에 보여지는 첫 로딩속도가 빠르게 하여 시각적으로 서비스를 빠르게 제공하는 것이라고 생각하였어요.
따라서, 직접 네이버 지도 API와 카카오 맵 API를 이용해 화면에 출력하여 크롬 브라우저 개발자 도구를 이용한 웹페이지 속도 테스트 해보았습니다.
각각 화면에 같은 크기의 지도를 놓았을 때, 페이지를 표시하는 데 전체 소요시간을 확인해 보았을 때,
- Kakao map API
- DOMContentLoaded : 88 ms / Load : 139ms
- Naver map API
- DOMContentLoaded : 108ms / Load : 215ms
이와 같이 테스트 값이 나왔어요.
HTML이 모두 파싱되고 이미지 등 모든 자원이 다운로드 되어 페이지가 완전히 로드 된 상태인 Load 값을 비교해 보았을 때,
Kakao map이 비교적 빠르다는 것을 알 수 있었기에 카카오맵 API를 이용하여 개발하게 되었어요!
1. 카카오 맵 API https://apis.map.kakao.com/
카카오 맵 API를 선택하게 된 또 다른 이유 중 하나는, 카카오맵 API 웹 문서에 상당히 여러가지 기능과 인터페이스 관련한 Sample code를 잘 정리해두어 활용하기 좋았기 때문에 선택했어요.
그리고 지도 API를 선택할 때 최대 이용 한도도 고려해야 할 부분이라고 생각하는데,
카카오 맵 API 는 위 사진에 나와있다 시피 1일 300,000회 사용 가능하며, 토이 프로젝트를 진행하면서 1일 300,000회라면 진행하는데 무리 없을 것으로 판단되었어요!
하지만, 개발을 하면서 또 다른 문제에 직면하게 되었어요..
저는 관광지를 지도에 마커로 표시하고 마커를 클릭하면 오버레이를 띄워주는 화면을 만들었는데, 지도 위 단일 오버레이로 관리하고 싶었어요. 마커를 클릭하여 오버레이가 떠 있을 때, 다른 마커를 클릭하면 떠 있던 오버레이는 닫아주고 클릭한 다른 마커의 오버레이를 띄워주는 기능이죠. 이 기능을 생각하게 된 이유는, 사용자 경험을 바탕으로 하였을 때 지도 위에 많은 오버레이들이 계속해서 떠있으면 보는데 불편함을 줄 수 있다고 생각하였기 때문이에요!
관련된 기능에 대한 카카오에 많은 문의들이 있었지만, 저는 결국은 직접 코드로 만들어보기로 하였어요!
만든 코드를 간략하게 보여드리자면,
//customOverlay 다른 마커 클릭했을 때 초기화 시켜주는 변수
let selectOverlay = null;
class CustomContent {
...
//오버레이 생성 메소드
createOverlay() {
//마커를 클릭하였을 때 오버레이 작동 클릭 이벤트
kakao.maps.event.addListener(this.contentMarker, "click", () => {
console.log('clickablue', this.contentOverlay.clickable);
//선택된 overlay가 있으면 해당 overlay를 지우고 새로운 overlay를 띄우는 조건
if (selectOverlay != null) {
selectOverlay.setMap(null);
}
//현재 클릭된 마커의 overlay 띄움
this.contentOverlay.setMap(map);
selectOverlay = this.contentOverlay;
//overlay안 상세설명 보러가기 옵션
document.querySelectorAll('.sDetailEx').forEach(v => {
console.log(v);
v.addEventListener('click', () => {
showPopUp(this.contentTitle, this.wishBest, this.wishAddr, this.wishMemo, this.wishSite, this.wishImg);
document.querySelector('.hIntroPopupWrap').style.transform = "scale(1)";
})
})
//오버레이의 닫기 버튼 작동
document.querySelectorAll(".closeBtn").forEach((v) => {
console.log(document.querySelectorAll(".closeBtn"));
v.addEventListener("click", () => {
this.controllCloseOverlay();
})
})
})
}
}이렇게 Class 외부에서는 변수에 담아둔 오버레이를 null값으로 지정해 준 다음, Class 내부안에 오버레이 띄워주는 생성 Method에서 지도 위에 오버레이가 있으면 null값으로 초기화 시켜주어 지도 위에 오버레이를 지워줬어요!
이렇게 작업하니 단일 오버레이로 관리할 수 있었습니다!
처음엔 이런 저런 많은 방법을 꽈서 생각을 하다보니 코드가 산으로 가는 상황을 마주했었는데, 다른 기능을 구현하다가 다시 풀려했을 때 쉽게 해결되었던,, 경험이였습니다!
2. 네이버 맵 API https://www.ncloud.com/product/applicationService/maps
네이버 맵 API는 동적 모바일 맵(Mobile Dynamic Map) 이용 시 월관 100,000,000건 이하는 무료로 이용할 수 있으며, 동적 웹 맵(Web Dynamic Map)을 이용 시 월관 최대 10,000,000건 이용할 수 있습니다. 이후 10,000,000건이 초과 될 경우 요금이 부과된다고 합니다.
네이버 맵 API 문서도 겹침 마커 처리하기 등 다양한 예제가 많아서 다른 서비스 개발시 활용해 보기에도 좋을 것 같습니다!
위의 포스터는 제 개인적인 견해이므로, 부족한 부분이나 틀린 부분이 있다면 언제든지 편하게 댓글로 남겨주시면 감사하겠습니다 🙇🏻♀️ :)
'Etc' 카테고리의 다른 글
| [Notion] 스터디 전용 노션 페이지를 만들고 싶은데.. (0) | 2024.05.31 |
|---|---|
| [Review] Hello World24 컨퍼런스 회고 (0) | 2024.04.01 |
| 쿠키(Cookie)와 세션(Session) (0) | 2024.03.29 |
| [Etc] Kakao Maps 단일 오버레이 관리하기 (0) | 2024.03.29 |
| [npm] ERROR : EACCES: permission denied, mkdir (0) | 2024.03.20 |
