글을 작성하게 된 배경
개인적으로 요새 진행하고있는 사이드 프로젝트에 지도를 활용한 앱을 만들고 있는데 관련해서 R&D 한 내용을 내 식대로 AI도 활용할겸 배우고 짧고 쉽게 포스팅으로 남기면 좋을 것 같아 남긴다.
좀 더 명확하게는 Vector Tile로 우리만의 타일을 만들어 랜더링 시키는 쪽을 진행하다가 잘 모르다보니 이제 여기서 부터는 공부가 필요하겠구나 하는 지점이 생겨서가 이 글의 이유가 될 것 같다.
서론
개발자가 아니라면 지도가 깨지건 말건 알바도 아니고 관심도 없고 어쩌라고 예전엔 느리고 깨졌는데 요샌 좋아졌네 기술의 발전이구나 싶겠지만 지도 앱을 확대하다가 화면이 흐릿해지거나 사각형 타일들이 로딩되는 형태를 경험해봤다면 그건 예전의 지도가 래스터 파일로 이루어졌기 때문이다.
여기서 알아야 할 건 래스터타일은 '이미지'이고 벡터타일은 '데이터' 라는 점이다.
본문
1. 래스터 타일
과거의 지도 데이터는 전국 지도를 퍼즐마냥 짤라놓는거였다 (미리 랜더링된 이미지 파일) / 그래서 확대시 새로운 이미지 세트를 다운로드 해야했고 => 결괒거으로 로딩이 길어지고 지도위에어 움직이면 화면이 깨짐 / png 파일
2. 벡터 타일
벡터 타일은 오픈 스탠다드 (공개된 표준 기술) 이고 벡터타일의 파일안에는 선, 점 , 이 도로는 강변북로 와 같은 메타데이터를 담고 있는 압축된 형식의 구조화된 데이터 덩어리이다.
3. 비유
벡터 타일의 경우 서버에서 다 만들어진 피자를 보내는게 아니고 레시피랑 재료만 보내면 핸드폰이 피자를 구워서 보여주는 형태
4.벡터 타일의 장점
다 만들어진 피자를 보내는게 아니고 레시피랑 재료만 보낸다
이런 이유로 다음의 4가지 장점과 체감이 생긴다.
장점:
1. 동적 스타일링 가능 => 예를들면 다크모드와 같은 형태
2. 크기와 속도 => 이미지였던 래스터 파일에 비해 파일크기가 작음
3.부드러운 상호작용 => 여기서 상호작용은 확대, 축소 , 360도 돌리기등을 말함
4. 동적 쿼리 => 지도 기반 데이터에 직접 접근 가능
체감:
끊김 없는 확대/ 축소 , 모바일 데이터 절약
맵박스의 전 세계 기본 지도인 '맵박스 스트리트'도 전체가 벡터 타일로 만들어짐
사용 AI 툴 Notebook LLM , Gemini
출처 : https://docs.mapbox.com/data/tilesets/guides/vector-tiles-introduction/
Vector tiles introduction | Tilesets | Mapbox Docs
Introductory documentation for Mapbox-maintained vector tilesets.
docs.mapbox.com