For Fun/DIY

Jㅐ둥이 2025. 7. 10. 01:45

이번에 프로젝트를 진행하면서 클라이언트도 직접 개발하고, 지도도 그려보는 흥미로운 경험을 할 수 있었습니다.

그 중에서 1) 오픈 스트리트 맵(Open Street Map, OSM)을 이용해서 지도 데이터를 직접 호스팅 했던 경험과 2) 구글 Gemini 앱을 이용해서 클라이언트를 개발했던 경험을 기록하려고 합니다.

0. 프로젝트 개요

오픈 스트리트 맵을 이용해서 지도 데이터를 직접 호스팅 했던 경험을 정리하기에 앞서서 어떤 프로젝트였는지 간단하게 설명드립니다.

다음과 같이 웹앱을 이용하여 실외에서 로봇을 모니터링 및 제어할 수 있어야 합니다.

조금 더 구체적으로는 다음 기능들이 필요합니다.

로봇에게 주행/정지 명령을 전달할 수 있어야 합니다.
- 현재 이동 중인 목적지가 보여야 합니다.
- 이동 중일 때, 정지 명령을 보낼 수 있어야 합니다.
로봇의 동선을 관리할 수 있어야 합니다.
- 목적지를 추가할 수 있어야 합니다.
- 목적지 간의 동선을 추가/삭제 할 수 있어야 합니다.
로봇의 상태를 모니터링 할 수 있어야 합니다.
- 로봇의 위치를 지도에서 확인할 수 있어야 합니다.

1. 웹앱에서 지도를 사용하는 방법

이제부터 본격적인 내용입니다. 웹앱에서 지도를 어떻게 사용할 수 있을까요?

장점

단점

장점

단점

Open Street Map을 사용하기 위해서는 1) 원하는 해상도를 제공할 수 있는지 2) 지도가 충분히 정확한지 검증이 필요했습니다.

그렇지만 다음 내용들을 고려한 결과

1) 프로젝트 초기 단계라는 점

2) 상용 지도 서비스를 사용하기 위해 필요한 인터넷 통신비 + USIM 관리와 같은 추가 작업을 고려한 결과

Open Street Map과 leaflet을 온디바이스 호스팅 하기로 결정했습니다.

지도 데이터의 다운로드 방법과 사용 방법을 확인할 수 있습니다.

위의 페이지에 접속하면 지도 데이터를 다운 받을 수 있는 링크를 확인할 수 있습니다.

그런데 leaflet에서 바로 사용할 수 있는 png 파일이 아니라 pbf 파일입니다…?

순간 당황했지만 스크롤을 내려보니 pbf 파일을 png로 바꿀 수 있는 방법이 나옵니다.

pbf 파일을 이용해서 png 파일을 제공해주는 Open Street Map 타일 서버를 이용해서 png 파일을 생성할 수 있습니다.

+++

지도 타일을 조금 더 쉽게 다운로드 받을 수 있는 스크립트를 준비했습니다.

지도 다운로드가 필요하시다면 다음 레포지토리를 참고해보세요!

직접 호스팅 한 지도 타일을 사용하는 방법은 간단했습니다.

leaflet 라이브러리를 사용하실 때 다음과 같은 코드를 작성하실텐데요.

L.tileLayer(
    'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png',
    {
    	/* ... */
    },
 ).addTo(map);

여기서 지도 타일의 URL 부분을 디바이스가 라우팅하고 있는 URL로 바꿔주시면 됩니다.

예를 들어, 웹앱엔드포인트/public/map_tiles/{z}/{x}/{y}.png URL을 통해서 지도 타일을 다운로드 할 수 있다면 다음과 같이 수정하면 됩니다.

L.tileLayer(
    'public/map_tiles/{z}/{x}/{y}.png',
    {
    	/* ... */
    },
 ).addTo(map);