안녕하세요 오늘은 웹사이트에 지도를 넣을 때 가장 많이 사용하는 카카오 지도 API 활용법을 정리해보려 합니다 단순히 위치만 보여주는 것이 아니라 사용자가 마커에 마우스를 올렸을 때 상세 정보가 뜨는 기능을 구현했습니다 디자인은 부트스트랩 5를 적용하여 PC와 모바일 모두에서 깔끔하게 보이도록 만들었습니다

주요 기능과 구현 원리

이번에 구현한 지도는 크게 세 가지 핵심 기능을 담고 있습니다

첫째 부트스트랩 5 기반의 깔끔한 반응형 디자인입니다 기존의 지도는 모바일 환경을 고려하지 않으면 화면을 벗어나거나 비율이 깨지는 경우가 많습니다 하지만 이번 소스에서는 부트스트랩의 카드 컴포넌트와 그림자 효과를 사용하여 지도를 감쌌습니다 또한 미디어 쿼리를 활용해 PC 화면에서는 넓게 모바일 화면에서는 적당한 높이로 자동 조절되도록 설정하여 어떤 기기에서 접속해도 최적화된 화면을 제공합니다

둘째 여러 개의 마커를 효율적으로 관리합니다 지도에 표시할 장소가 한두 곳이 아니라면 코드가 길어지고 복잡해지기 쉽습니다 이 문제를 해결하기 위해 배열 데이터 형식을 사용했습니다 장소 이름과 위도 경도 그리고 클릭 시 이동할 링크 주소를 하나의 객체로 묶어서 배열에 담았습니다 이렇게 하면 장소가 늘어나더라도 데이터 부분만 수정하면 되므로 유지 보수가 매우 간편해집니다 반복문을 통해 이 데이터를 순차적으로 읽어 들여 지도 위에 마커를 생성하는 방식입니다

셋째 마우스 이벤트와 인포윈도우 기능입니다 사용자가 지도 위의 핀에 마우스를 올렸을 때 해당 장소의 이름이 말풍선처럼 뜨게 만들었습니다 이를 인포윈도우라고 부릅니다 자바스크립트의 이벤트 리스너를 사용하여 마우스가 마커 위로 올라가는 순간인 mouseover 이벤트에는 설명창을 열어주고 마우스가 밖으로 나가는 moment인 mouseout 이벤트에는 설명창을 닫도록 처리했습니다 덕분에 지도가 지저분해지지 않고 필요한 정보만 직관적으로 전달할 수 있습니다

넷째 스마트한 지도 범위 재설정 기능입니다 마커가 서울과 부산처럼 멀리 떨어져 있다면 초기 화면에서 지도의 중심을 어디로 잡아야 할지 고민이 됩니다 이번 코드에서는 LatLngBounds 라는 기능을 사용했습니다 생성된 모든 마커의 위치를 이 객체에 담으면 지도가 알아서 모든 마커가 화면에 다 들어오는 최적의 비율과 중심점을 계산해 줍니다 일일이 줌 레벨을 맞출 필요가 없어 매우 편리한 기능입니다

마무리하며

이 기능을 활용하면 회사 위치 안내나 여행지 소개 페이지 등 다양한 곳에 활용할 수 있습니다 특히 부트스트랩을 사용하고 있어 기존 웹사이트 디자인과도 이질감 없이 잘 어울립니다 코드를 복사해서 여러분의 프로젝트에 적용해 보시기를 바랍니다