지도 한 장에 포함된 세 가지

Leaflet을 설치했다고 배경 지도 이용 조건까지 해결되는 것은 아닙니다. 화면을 그리는 라이브러리, 지도 데이터의 라이선스, 타일을 전송하는 서버의 이용 정책을 각각 확인해야 합니다. 바쿠오 로컬 demo의 지도 컴포넌트에서도 Leaflet과 별도 타일 설정을 사용합니다.

이 글은 Leaflet 1.9.4와 공식 OSM 안내를 기준으로 한 개발 점검 절차입니다. 로컬 소스의 존재만으로 현재 공개 서비스의 정책 준수나 특정 프레임 속도를 입증하지는 않습니다.

OSM 출처 표시 확인하기

OSM 데이터는 ODbL로 제공됩니다. 지도에 출처를 표시하고 이용자가 라이선스 정보를 확인할 수 있게 해야 합니다. 구체적인 의무는 사용하는 데이터와 결과물 형태에 따라 확인해야 합니다. OSM 저작권 안내에서 라이선스와 표시 지침으로 이동할 수 있습니다.

지도 모서리의 작은 출처 글자를 실제 화면에서도 읽고 눌러봅니다. 모바일 하단 버튼이 가리거나 색 대비가 낮으면 코드에 attribution 값이 있어도 이용자가 보기 어렵습니다. 다른 기관에서 얻은 매장 목록은 그 자료의 출처와 이용 조건도 따로 기록합니다.

공개 타일 서버를 사용할 때

OSM 공개 타일 서버는 무제한 배포용 CDN이 아닙니다. 공식 타일 정책의 HTTPS 주소, 출처 표시, 캐시와 요청 식별 조건을 확인해야 합니다. 대량 다운로드나 미리 받아두기 기능을 붙이지 않습니다.

개발자 도구의 Network에서 타일 요청을 확인하고, 페이지를 이동하거나 확대할 때 무엇이 요청되는지 봅니다. 트래픽이 커지거나 공개 서버의 조건을 충족할 수 없는 경우에는 적합한 제공자를 선택합니다. 데이터가 공개됐다는 사실과 특정 서버를 계속 이용할 수 있다는 사실은 별개입니다.

작은 지도로 렌더링 확인하기

다음은 Leaflet 1.9.4를 이미 로드한 페이지에서 쓰는 초기화 코드입니다. map 요소에 높이가 있어야 하며 예제 중심 좌표는 화면 확인용입니다. 라이브러리 불러오기와 컨테이너 설정은 Leaflet 빠른 시작 안내에서 확인할 수 있습니다.

// Requires Leaflet 1.9.4 CSS/JS and <div id="map"> with a nonzero height.
const map = L.map('map').setView([37.5, 127], 12);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

빈 영역만 보이면 먼저 컨테이너 높이와 CSS 로딩을 확인합니다. 타일이 회색으로 남으면 Network의 HTTP 상태와 콘솔 오류를 봅니다. 버튼으로 숨겼다가 다시 보여주는 지도는 크기를 다시 읽어야 할 수 있으므로 invalidateSize의 사용 조건을 확인합니다.

내 데이터와 지도 요청 나눠 보기

매장 목록을 브라우저에서 검색하더라도 배경 지도 요청은 타일 제공자에게 나갈 수 있습니다. “검색은 로컬에서 한다”는 설명을 “외부 통신이 전혀 없다”는 설명으로 확대하지 않습니다. 실제 위치나 주소를 외부 지도에 전달하는 기능도 별도 확인 대상입니다.

게시 전에는 출처 표시, 지도 로딩 실패 시 이용 가능한 목록, 확대·이동 조작, 작은 화면에서 가려지는 컨트롤을 확인합니다. 마커가 많다면 렌더링 방식을 바꾸기 전에 실제 병목을 측정합니다. 검증하지 않은 FPS 수치를 제품 성과로 적지 않습니다.