한국 지도에 지하철 역,노선도를 추가해서 지도 UX 개선하기

 

위 이미지는 OSM에서 제공하는 한국 지리 정보를 기반으로 렌더시킨 지도의 수도권 이미지이다. 당장 사용하기에는 불편해보이니 이 지도 위에 철도, 지하철 노선, 역사 데이터를 추가하려고 한다. 

 

아래 파일은 공공 데이터 혹은 서칭을 통해 직접 만든 한국 철도, 지하철 노선, 역사 데이터이다.

korea-subway.osm.pbf

1.61MB

 

 

https://github.com/onthegomap/planetiler

GitHub - onthegomap/planetiler: Flexible tool to build planet-scale vector tilesets from OpenStreetMap data fast

 

 

먼저 한국의 철도 역,철도,지하철 노선 지리 정보가 들어있는 korea-subway.osm.pbf 파일을 지도 위에 렌더시켜보기 위해 planettiler를 사용하여 PMTiles형태의 타일 데이터로 변경하였다.

 

planettiler는 위 깃헙 링크를 참고하면 쉽게 다운받아 사용할 수 있다.

 

java -Xmx1g -jar planetiler.jar --output ./data/sources/korea-subway.pmtiles --osm-path=./data/sources/korea-subway.osm.pbf

 

이후 아래 명령어를 입력해 타일 서버를 실행시켜 결과를 확인해보면 아래 이미지와 같은 모습을 확인할 수 있다.

 

tileserver-gl-light data/sources/korea-subway.pmtiles

 

 

위 이미지는 줌 레벨 8의 이미지이다. 이미지 상에서는 줌레벨 8부터 철도 노선 정보가 보이는 것을 확인할 수 있다. 하지만 한국의 모든 지하철, 철도 노선, 역사 정보라기에는 지도에 보여지는 정보가 너무 적은것을 한 눈에 확인할 수 있다.

 

줌 레벨을 12까지 높여보면 아래 이미지처럼 역사 정보가 노출되는 것을 확인할 수 있다.

 

 

또한 줌 레벨을 14까지 높여야만 지하철 라인 정보가 보여지는 것으로 보여진다.

줌 레벨을 높여야만 확인할 수 있는 정보는, 낮은 줌 레벨에서 한눈에 내가 찾는 장소가 어느 부분인지 파악하기 어렵게 만든다. 아쉽게도 pbf 파일은 각 줌 레벨에서 어떤 지리 정보가 표시될지를 포함하지 않고, 단순히 지리 정보를 바이너리 형식으로 저장할 뿐이다.

 

즉, 화면에서 줌 레벨 8일 때 철도 노선 정보, 12일 때 역사 정보, 14일 때 지하철 노선 정보가 표시되는 방식은 planettiler의 타일 생성 과정에서 결정되며,  planettiler를 통한 타일 생성 시 줌 레벨별 표시 정보를 조정하는 옵션은 제공되지 않는다.

 

물론, planettiler 패키지는 타일 생성 시 미리 각 줌 레벨에 어떤 지리 정보를 표시할지를 설정하여 적절히 타일을 생성하므로 일반적으로는 문제가 없지만, 한국에서는 지하철 정보가 특정 장소를 찾는 데 매우 중요한 요소이기 때문에 이 정보가 누락되면 장소 찾기가 불편해질 수 있다.

 

구글 지도의 사례를 살펴보자.

 

지하철 노선도가 낮은 줌 레벨에서도 일부 표시되지만, 예를 들어 2호선이 보이지 않는 등 전체적으로 다소 미흡한 느낌을 준다. 지리에 익숙하지 않은 사용자라면, 이 지도를 통해 역과 장소의 위치를 한눈에 파악하기 어려울 것이다. 구글은 한국 기업이 아니기 때문에 지도 제작 시 지하철 노선도의 우선순위가 높지 않아, 적정 줌 레벨에서도 지하철 노선이 표시되지 않도록 타일을 생성하는 경우가 많다. 이로 인해 구글 지도가 한국 사용자에게는 다소 불편할 수 있다.

 

반면, 한국인이 사용하기에 적합한 네이버 지도를 살펴보자.

  

구글과 유사한 줌 레벨에서도 네이버 지도는 지하철 노선도가 명확하게 표시된다. 네이버는 아마도 지도에 대한 다양한 피드백을 반영했으며, 내부 개발자들도 한국 사용자의 요구를 잘 인지하고 있을 것이다. 따라서 타일 생성 시 지하철 노선과 역사 정보를 높은 우선순위로 반영하여 낮은 줌 레벨에서도 해당 정보가 제대로 보이도록 제작한 결과를 확인할 수 있다. 카카오 지도 역시 이와 유사한 접근 방식을 취하고 있다.

 

이제 이러한 문제를 해결해보자.

문제 해결을 위한 가장 완벽한 방법은 planettiler를 클론하여 타일 생성 시 railway 정보를 낮은 줌 레벨에서도 표시하도록 직접 코드를 수정하는 것이다. 그러나 코드를 분석하고 수정하는 데 드는 시간이 상당할 것이 뻔하므로, 우회적인 방법을 채택하였다.

 

먼저, .pbf 파일을 geojson 형식으로 변환한다. 이를 위해 두 가지 방법이 있다.

https://mygeodata.cloud/converter/pbf-to-geojson

PBF to GeoJSON Converter Online | MyGeodata Cloud

https://osmcode.org/osmium-tool/

Osmium Tool - osmcode

두 번째 툴 사용시 명령어는 아래와 같다.

osmium export korea-subway.osm.pbf -o korea-subway.geojson

 

 

https://github.com/mapbox/tippecanoe

GitHub - mapbox/tippecanoe: Build vector tilesets from large collections of GeoJSON features.

 

이렇게 생성된 geojson 파일을 이용해, tippecanoe를 사용하여 타일 정보를 생성한다. tippecanoe는 지리 정보를 그대로 타일에 올리는 역할을 하므로, 아래와 같이 줌 레벨을 명시해 주어야 한다.

tippecanoe -o korea-subway.mbtiles korea-subway.geojson --minimum-zoom=8 --maximum-zoom=14

 

생성된 MBTiles 파일을 그대로 사용할 수도 있으나, 현재 PMTiles를 사용하고 있으므로 이를 PMTiles로 변환해준다.

tile-join -o korea-subway.pmtiles korea-subway.mbtiles

 

(tile-join 명령어는 tippecanoe 설치 시 함께 제공된다.)

 

https://docs.protomaps.com/pmtiles/create

Creating PMTiles | Protomaps Docs

 

이제 해당 파일을 사용해 타일 서버를 실행시켜보자

tileserver-gl-light data/sources/korea-subway.pmtiles

 

 

실행 결과, 이전과 달리 낮은 줌 레벨에서도 지하철 정보가 잘 출력되는 것을 확인할 수 있으며, 마우스를 올리면 낮은 줌 레벨임에도 불구하고 역 정보가 함께 표시되는 것을 볼 수 있다. 이처럼 MBTiles 생성 시 줌 레벨을 적절히 조절하면 원하는 줌 레벨에서 해당 정보가 보이도록 설정할 수 있다.

마지막으로, 기존의 한국 타일 파일과 새로 생성한 지하철 노선도 타일 파일을 병합하여 정상 작동하는지 확인한다. 아래 명령어를 사용한다.

tile-join -o merged.pmtiles south_korea.pmtiles korea-subway.pmtiles

 

한국 타일 정보는 planettiler를 사용하여 아래 명령어로 다운받아 PMTiles 형태로 변환하였다.

java -Xmx1g -jar planetiler.jar --download --area=south_korea
 java -Xmx1g -jar planetiler.jar --output ./data/sources/south-korea.pmtiles --osm-path=./data/sources/south_korea.osm.pbf

 

 

서울 지역을 확인하면, 기존 이미지와 비교하여 병합된 이미지에서 분홍색으로 표시된 추가 정보가 확인될 것이다.

[병합 전]

 

[병합 후]

 

 

마지막으로, 지도 렌더링 단계에서 각 노선의 컬러(예: 2호선은 초록색)를 지정하거나, 네이버 지도처럼 역별로 적합한 아이콘을 추가하면 지하철 노선도 표시 작업이 성공적으로 완료된다.