지난 10년간 Google Maps, OpenStreetMap, 또는 현대 웹 지도를 사용했다면, 보신 모든 도로와 건물은 아마 벡터 타일로 로드됐을 거예요. 이 포맷은 현대 웹 카르토그래피의 숨은 영웅입니다. 웹 지도가 빠르게 로드되고, 어떤 화면에서도 선명하게 보이며, 디자이너들이 전 세계를 다시 렌더링하지 않고도 아름다운 스타일 지도를 출시할 수 있게 해주는 바로 그것이에요.
이 가이드는 벡터 타일이 무엇인지, 어떻게 작동하는지, 대부분의 사용 사례에서 래스터 타일을 대체한 이유, 그리고 MapAtlas가 프로덕션에서 어떻게 서빙하는지 설명합니다.
한 문장 정의
벡터 타일은 특정 줌 레벨에서 지도 한 타일의 지리 피처를 사전 렌더링된 이미지가 아닌 데이터로 인코딩한 작은 바이너리 파일입니다.
"이미지가 아닌 데이터"가 핵심입니다. 래스터 타일에서는 서버가 이미 각 픽셀이 어떻게 보일지 결정했습니다. 벡터 타일에서는 클라이언트가 기본 지오메트리(선, 폴리곤, 포인트)와 레이블을 받아, 사용자가 선택한 스타일로 즉석에서 렌더링합니다.
웹 지도가 타일을 사용하는 방법
사용해본 모든 웹 지도는 세계를 타일 그리드로 나눕니다. 줌 0에서는 전 세계가 하나의 타일에 들어갑니다. 줌 1에서는 4개 타일, 줌 2에서는 16개, 이런 식으로 늘어나요. 각 타일은 줌(z), 열(x), 행(y)의 세 숫자로 식별됩니다. 패닝하거나 줌할 때 지도 라이브러리는 보이는 타일만 가져오고, 캐싱한 뒤 뷰포트를 벗어난 것들을 버립니다.
래스터 타일에서는 서버가 모든 (z, x, y)에 대해 PNG를 사전 렌더링합니다. 작동하기는 하지만 제한이 있어요. 스타일이 렌더링 시점에 고정되고, 스타일을 바꾸려면 전 세계를 다시 렌더링해야 하며, 레티나 화면에서 선명하게 보이려면 1x와 2x 해상도 이미지를 모두 제공해야 합니다.
벡터 타일은 이 모델을 뒤집습니다. 서버는 지오메트리를 보내고, 클라이언트가 렌더링합니다. 하나의 타일셋이 무한한 수의 스타일을 지원하고, 어떤 DPI에서도 선명하며, 전송량은 작습니다.
MVT 포맷
사실상 표준 포맷은 Mapbox Vector Tile 명세인 MVT입니다. MVT는 피처를 이름 있는 레이어로 구성하는 Protocol Buffers 인코딩으로, 보통 다음 레이어들을 포함합니다:
transportation(도로, 철도)buildings(건물 풋프린트)places(이름 있는 도시, 동네)landuse(공원, 주거지, 상업지)water(바다, 호수, 강)boundaries(행정 구역)
각 레이어의 피처는 지오메트리(포인트, 선, 폴리곤)와 속성(이름, 타입, 중요도, 언어 변형) 세트를 가집니다. 지오메트리 좌표는 0에서 4096 사이의 타일-로컬 좌표 공간의 정수로, 이것이 MVT의 컴팩트한 크기를 만들어냅니다.
MVT는 완전히 오픈이고 벤더 중립적이며, Mapbox GL JS, MapLibre GL JS, OpenLayers, deck.gl, iOS/Android Mapbox SDK 등 모든 주요 렌더링 엔진에서 지원됩니다.
벡터 타일이 래스터 타일을 대체한 이유
현대 웹 지도가 베이스 레이어에 벡터 타일을 거의 보편적으로 사용하는 이유는 다섯 가지입니다:
스타일 유연성. 하나의 타일셋으로 라이트 테마, 다크 테마, 인쇄 최적화 스타일, 위성 오버레이 스타일, 마케팅용 브랜드 색상 스타일을 모두 렌더링할 수 있습니다. 서버 재렌더링 없이요.
어떤 DPI에서도 선명함. 1x 래스터 타일은 레티나 화면에서 흐릿하게 보입니다. 벡터 타일은 디바이스 기본 해상도에서 클라이언트가 새로 렌더링하기 때문에 항상 선명해요.
작은 페이로드. 복잡한 도시 타일이 gzip 압축하면 고품질 PNG보다 MVT로 더 작은 경우가 많습니다.
런타임 인터랙티비티. 클라이언트가 모든 픽셀이 무엇을 나타내는지 알기 때문에, 호버 시 특정 도로를 하이라이트하거나, 사용하지 않는 레이어를 페이드아웃하거나, 전환 애니메이션을 추가하거나, 피처 클릭에 반응할 수 있습니다.
부드러운 줌과 회전. 벡터 지오메트리는 앨리어싱 없이 회전하고 크기를 조정합니다. 래스터 타일은 정수 줌 레벨 사이에서 줌하거나 축에서 벗어나 회전할 때 픽셀화됩니다.
비용은 클라이언트 CPU와 GPU 작업인데, 지난 10년간 만들어진 어떤 기기에서도 문제가 없습니다.
런타임에 스타일링하는 것
스타일 문서(보통 Mapbox Style Spec의 JSON, MapLibre도 채택)는 각 레이어를 어떻게 그릴지 설명합니다. 타일 데이터를 건드리지 않고 변경할 수 있는 것들의 예:
- 모든 도로 클래스의 색상
- 줌에 따라 달라지는 도로 선의 너비
- 어떤 줌에서 어떤 장소 레이블이 표시될지
- 모든 텍스트 레이블의 폰트, 크기, 테두리
- 전체 레이어의 표시 여부(하나의 토글로 모든 행정 경계 숨기기)
- 패턴 채우기, 점선, 그라디언트, 블러 효과
이것이 브랜드 지도를 가능하게 하는 것입니다. 디자인팀이 Mapbox 스타일 JSON, MapLibre 스타일 JSON, 또는 MapAtlas 스타일 프리셋을 제공하면 동일한 타일셋이 브랜드 아이덴티티로 렌더링됩니다.
캐싱과 성능
세계의 지오메트리는 매 분 바뀌지 않기 때문에 벡터 타일은 캐싱이 매우 잘 됩니다. CDN 엣지 캐시는 보통 MVT 타일을 수 시간 또는 수 일 동안 보관합니다. 지도 라이브러리는 사용자가 패닝할 것 같은 방향으로 타일을 미리 가져오고, 최근에 본 타일을 메모리에 유지합니다. 덕분에 도시를 패닝하는 사용자는 부드러운 경험을 하게 됩니다. 다음 뷰포트의 타일이 이미 로드되어 있는 경우가 많기 때문이에요.
프로덕션 타일 서비스는 보통 /{z}/{x}/{y}.pbf 경로로 타일을 노출합니다(PBF는 protobuf 바이너리 확장). 현대 HTTP/2 또는 HTTP/3 연결은 수십 개의 타일 요청을 병렬로 다중화합니다.
MapAtlas의 역할
MapAtlas는 Dynamic Maps 제품을 위해 EU 전용 호스팅, 예측 가능한 가격, 다운스트림 스타일링 및 AI 어노테이션을 위해 설계된 타일 스키마로 MVT 호환 벡터 타일을 서빙합니다. 가시적 지도를 구동하는 것과 동일한 데이터 레이어(장소, 교통, 건물, 관심 지점)가 Geocoding 및 Search API를 통해 구조화된 데이터로도 노출됩니다. 덕분에 지도에서 보이는 피처를 자신만의 로직을 위한 타입화된 JSON 레코드로 가져올 수 있습니다.
렌더링 레이어를 더 깊이 살펴보려면 커스텀 지도 스타일링 가이드에서 브랜드에 맞는 벡터 타일 스타일을 처음부터 끝까지 만드는 방법을 확인하세요.
자주 묻는 질문
벡터 타일이란 무엇인가요?
벡터 타일은 특정 줌 레벨에서 웹 지도의 한 타일에 대한 지리 피처(도로, 건물, 관심 지점, 레이블)를 담은 작은 바이너리 파일입니다. 사전에 렌더링된 PNG나 JPG 이미지인 래스터 타일과 달리, 벡터 타일은 기본 지오메트리와 속성을 데이터로 보관합니다. 브라우저나 모바일 클라이언트가 런타임에 그 데이터를 사용자가 선택한 스타일대로 픽셀로 렌더링하기 때문에, 동일한 타일을 다르게 스타일링하거나, 회전시키거나, 어떤 픽셀 밀도에서도 선명하게 렌더링할 수 있습니다.
벡터 타일과 래스터 타일의 차이는 무엇인가요?
래스터 타일은 서버에서 고정 스타일로 사전 렌더링된 PNG 또는 JPG 이미지(보통 256x256 또는 512x512픽셀)입니다. 벡터 타일은 지오메트리와 속성을 담은 바이너리 파일로, 클라이언트가 픽셀로 렌더링합니다. 벡터 타일은 전송량이 적고, 런타임 스타일 변경을 지원하며, 어떤 줌과 DPI에서도 선명하게 보이고, 재다운로드 없이 레이어를 켜고 끌 수 있습니다. 대신 클라이언트가 렌더링 작업을 해야 하지만, 요즘 기기에서는 문제가 되지 않습니다.
MVT 포맷이란 무엇인가요?
MVT는 벡터 타일의 사실상 표준 포맷인 Mapbox Vector Tile 명세입니다. 하나의 타일에 대한 지리 피처를 이름 있는 레이어(도로, 건물, 장소 등)로 구성한 Protocol Buffers(protobuf) 인코딩입니다. 포맷은 오픈이고 벤더 중립적이며, 모든 현대 지도 렌더러(Mapbox GL, MapLibre, OpenLayers, deck.gl)에서 지원됩니다. MapAtlas는 동적 지도 엔드포인트를 통해 MVT 호환 타일을 서빙합니다.
벡터 타일은 얼마나 작나요?
줌 14에서 전형적인 도시 벡터 타일은 전송 시 50KB에서 200KB이고, gzip 압축 후에는 30~100KB로 줄어듭니다. 크기는 해당 지역의 데이터 밀도에 따라 다릅니다. 파리 중심부를 담은 타일은 대서양 해역 타일보다 훨씬 무겁습니다. 대부분의 프로덕션 지도가 부드럽게 패닝되고 줌되는 것은 타일이 공격적으로 캐싱되고, 사용자의 예상 패닝 방향으로 미리 가져와지고, GPU에서 렌더링되기 때문입니다.
