브랜드에 맞춘 사용자 정의 베이스맵 구축 방법

사용자 정의 브랜드 베이스맵은 제품의 위치, 경로, 경계, 실시간 데이터 아래에 표시되는 시각적 기반입니다. 이를 구축하려면 명확한 정보 계층, 읽기 쉬운 라벨, 여러 테마에서의 접근성, 효율적인 렌더링, 올바른 출처 표시가 필요하며 모든 도로에 브랜드 색상을 적용하는 것만으로는 충분하지 않습니다. Kaleidr Studio는 지도 타일, 색상, 타이포그래피, 라벨, 아이콘, 레이어, 지형, 재사용 가능한 프리셋을 지원합니다. Kaleidr SDK를 사용하면 디자인한 베이스맵을 임베드하거나 게시된 스타일을 MapLibre에 직접 불러올 수 있습니다.

아래 섹션에서는 제품 과제와 디자인 토큰부터 레이어 계층, 타이포그래피, 아이콘, 지형, Studio 워크플로, 두 가지 배포 방식, 라이선스, 접근성, 릴리스 검사까지 순서대로 설명합니다. 프로덕션 스타일을 준비한다면 처음부터 진행하고, 디자인이 이미 완료되었다면 옵션 1 또는 옵션 2로 바로 이동하세요.

색상, 타이포그래피, 라벨, 도로 및 제품 오버레이를 통해 일관된 브랜드 베이스맵으로 변형된 중립 벡터 맵입니다.

사용자 정의 브랜드 베이스맵이란 무엇인가요?

basemap은 지도의 제품별 정보 아래의 지리적 캔버스입니다. 베이스맵은 일반적으로 토지 및 물, 도로 및 경로, 건물, 공원 및 토지 사용, 관리 경계, 장소 및 도로 라벨, 지형 또는 언덕, 컨텍스트에 대해 선택된 관심 지점과 같은 참조 기능을 포함합니다. 브랜드 베이스맵은 이러한 기능에 고의적 디자인 시스템을 적용하므로 맵은 주변 제품에 시각적으로 속합니다. 결과는 지리적 가독성을 희생하지 않고 응용 프로그램의 색상, 유형, 간격, 톤 및 정보 우선 순위와 일치해야합니다.

MapLibre 스타일 사양은 지도 스타일을 그릴 데이터, 그릴 순서 및 렌더러가 이를 시각화하는 방법을 제어하는 JSON 문서로 정의합니다. 소스는 사용 가능한 데이터를 식별합니다. 레이어는 이러한 소스를 참조하고 색상, 너비, 불투명도, 아이콘 및 텍스트와 같은 시각적 속성을 정의합니다. 이 모델은 브랜드 베이스맵을 임시 마커 색상 모음이 아닌 재사용 가능한 제품 자산으로 만듭니다.

베이스맵, 오버레이, 애플리케이션 데이터는 어떻게 다른가요?

신뢰할 수 있는 지도는 사용자가 보러 온 정보와 참조 지리를 구분합니다. 베이스맵은 안정적인 지리적 컨텍스트를 제공합니다. 제품 오버레이는 응용 프로그램의 주제를 나타냅니다. 상호 작용 계층은 임시 사용자 또는 시스템 상태를 표시합니다. 인터페이스 레이어는 컨트롤과 설명을 지원합니다. 베이스맵은 일반적으로 제품 오버레이보다 조용해야 운영 데이터가 지배적으로 유지됩니다.

제품 오버레이, 상호 작용 상태 및 인터페이스 정보 아래의 참조 지리를 보여주는 폭발적인 브랜드 맵 스택입니다.

레이어 유형	목적	예제
베이스맵	안정적인 지리적 컨텍스트 공급	도로, 물, 건물, 공원, 라벨, 경계
제품 오버레이	신청서의 주제를 나타냅니다.Represents the application's ject	재산, 상점, 사건, 자산, 서비스 지역, 노선
상호 작용 계층	임시 사용자 또는 시스템 상태 표시	선택한 장소, 호버 상태, AI 결과, 검색 다각형, 경로 미리보기
인터페이스 레이어	컨트롤 및 설명 지원	전설, 필터, 채팅 패널, 도구 설명, 속성, 상태 메시지

부동산 플랫폼은 일반 건물을 음소거 할 수 있으므로 활성 목록이 눈에 드러집니다. 이동성 제품은 관련 없는 관심 지점을 줄이면서 도로 계층을 강조할 수 있습니다. 관광 가이드는 선별된 목적지에 대해 더 강력한 시각적 치료를 사용하는 동안 랜드마크와 보행자 컨텍스트를 보존할 수 있습니다. 브랜딩은 계층 구조를 향상시킬 때 유용합니다. 더 많은 브랜드 색상을 사용하는지도는 읽기가 어려워 질 수 있습니다.

이 가이드에서 구축할 내용

이 가이드는 제품의 실제 맵 작업과 관련된 디자인 개요, 색상, 타이포그래피, 라벨, 라인 및 표면에 대한 제어 토큰 시스템, 응용 프로그램 데이터를 지배적으로 유지하는 계층 구조, 빛, 어두운 및 높은 대조 테스트, OpenStreetMap 속성 및 타일 전달 검사, Kalegidr 호스팅 임베드 옵션, 직접 MapLibre 스타일 옵션 및 릴리스 및 회귀 테스트와 연결된 재사용 가능한 브랜드 베이스맵 워크플로를 생성합니다.

Kaleidr는 현재 kaleidr-morning, kaleidr-afternoon, kaleidr-night, kaleidr-editorial 및 kaleidr-plain와 같은 설계된 베이스맵 제품에 대한 5개의 기본 스타일 식별자를 문서화하고 있습니다.Kaleidr Studio는 사용자 지정 색상, 타이포그래피, 레이블, 아이콘, 데이터 세트, 오버레이, 재사용 가능한 사전 설정, 지형, 3D 건물 및 언덕을 별도로 설명합니다. 공개 개발자 문서는 설계된 스타일을 제공하는 방법을 보여 주지만 조직별 사용자 지정 스타일 ID에 대한 모든 스튜디오 게시 단계를 문서화하지는 않습니다. 프로덕션 배포 전에 현재 Studio 인터페이스 내부의 최종 게시 워크플로 및 식별자를 확인합니다.

제품 과제에서 어떻게 시작해야 하나요?

강력한 베이스맵은 컬러 피커가 아닌 제품 결정으로 시작됩니다. 기본 사용자 작업이 무엇인지, 어떤 지리적 기능이 해당 작업을 완료하는 데 도움이되는지,이 작업은 산만하게하는 기능, 모든 줌에서 읽을 수있는 정보를 유지해야합니다. 이 제품 오버레이는 밀도가 높은 인터페이스 크롬 옆에 나타나거나 전체 화면 경험으로 표시되는지 여부, 동일한 스타일이 데스크톱, 모바일, 스크린 샷 및 임베디드 뷰에 제공되어야하는지 여부, 제품에 야간, 야간 또는 접근성 변형이 필요한지 여부. 매장 로케이터와 물류 대시보드는 로고를 공유하기 때문에 동일한 지리적 강조점을 공유해서는 안 됩니다.

상점 로케이터의 경우 주요 도로 및 지역 도로, 이웃 및 도시 라벨, 인식 가능한 랜드마크, 명확한 상점 마커 및 경로 컨텍스트를 우선시하는 동시에 작은 토지 사용 범주, 관련 없는 비즈니스 라벨, 장식 지형 및 소규모의 세부 건물 강조를 줄입니다. 부동산 발견을 위해 이웃 이름, 대중 교통, 공원 및 물, 거리 계층 구조, 근접 줌으로 건물 발자국, 재산 또는 검색 공간 오버레이의 우선 순위를 정하십시오. 운영 대시보드의 경우 도로, 서비스 영역, 관리 경계 및 자산 컨텍스트의 우선 순위를 지정하고 경고 색상을 지원하는 어두운 또는 낮은 크로마 표면, 선택되지 않은 상태 및 선택되지 않은 상태를 명확하게 지정하고 사고 표시를 가리지 않는 안정적인 레이블을 지정합니다.

지도 디자인 토큰 시스템을 어떻게 정의하나요?

개별 레이어를 편집하기 전에 맵 토큰을 만듭니다. 토큰은 스타일을 일관성있게 유지하고 미래의 변형을 유지 관리하기 쉽게 만듭니다. 실용적인 토큰 세트에는 표면, 네트워크, 레이블 및 작동 악센트가 포함됩니다.

map.background
map.land
map.water
map.park
map.building
map.boundary
map.road.motorway
map.road.primary
map.road.secondary
map.road.local
map.road.casing
map.label.country
map.label.city
map.label.neighborhood
map.label.road
map.label.poi
map.label.halo
map.overlay.primary
map.overlay.secondary
map.selection
map.warning
map.route

모든 토큰을 기업 마케팅 색상에 직접 매핑하지 마십시오. 제품 브랜드 시스템에는 종종 조밀 한 지리적 캔버스에 실패하는 버튼이나 일러스트레이션을 위해 설계된 색상이 포함됩니다. 활성 제품 오버레이, 선택한 기능, 경로, 검색 영역, 기본 행동 호출 및 소수의 의미있는 참조 기능에 브랜드 색상을 선택적으로 사용하십시오. 대부분의 참조 지리에 구속 된 중립 색상을 사용하십시오.

시각적 계층을 어떻게 구축하나요?

MapLibre 스타일 사양은 그리기 순서에 레이어를 나열합니다. 나중에 레이어는 일반적으로 이전 레이어 위에 그려 있으므로 레이어 순서는 정보 아키텍처의 일부입니다. 일반적인 베이스맵 스택은 배경, 토지 덮개 및 지형, 물, 공원 및 토지 사용, 건물, 도로 및 도로 케이스, 경계, 장소 라벨, 도로 라벨 및 제품 오버레이 및 상호 작용 상태 미만의 관심 컨텍스트 지점을 배치합니다. 정확한 순서는 렌더러와 스타일에 따라 다르지만 원칙은 안정적으로 유지됩니다. 큰 지리적 표면은 네트워크, 라벨 및 제품 별 정보 아래에 있습니다.

모든 레이어에 동일한 채도, 불투명도 또는 세부 사항이 필요하지 않습니다. 유용한 컨트롤은 저우선 다각형의 불투명도를 낮추고, 작은 줌에서 사소한 도로 대비를 줄이고, 저가의 관심 지점을 숨기고, 유용한 줌 임계값 후에 만 건물 발자국을 표시하고, 방향을 돕는 척도로 관리 경계를 제한하고, 사용자가 필요할만큼 가까워 질 때까지 지역 거리 레이블을 지연시키는 것입니다. 조용한 베이스맵은 맵을 비우지 않고 애플리케이션 데이터의 인식된 선명도를 높입니다.

도로 스타일링은 일반적으로 계층 구조와 케이싱이 모두 필요합니다. 서비스 클래스를 통해 고속도로를 고려, 줌에 의해 폭, 도로 채우기 아래 라인 케이스, 터널과 다리, 경사로와 분할 도로, 보행자 경로와 자전거 도로, 라벨 밀도. 모든 도로에 적용되는 브랜드 색상은 다른 어떤 것보다 더 중요한 것처럼 보이지 않는 평평한 네트워크를 만듭니다. 너비, 밝기, 케이스 및 제어된 색조 이동을 사용하여 계층 구조를 설정하고 더 가까운 규모로만 로컬 도로를 드러냅니다.

라벨, 아이콘, 대비를 어떻게 설계해야 하나요?

타이포그래피는 지도에서 가장 강력한 브랜드 신호 중 하나이지만 레이블 렌더링에는 기술적 제약이 있습니다. 스타일 문서는 URL 템플릿을 통해 글리프 리소스를 참조할 수 있습니다.MapLibre 스타일 사양은 글리프 URL에 {fontstack} 및 {range} 자리 표시자가 포함되어야 하며, 스프라이트 리소스는 심볼 레이어에서 참조하는 아이콘과 패턴을 제공합니다. 디자인 시스템에 이름이 지정된 글꼴은 맵 렌더러에서 자동으로 사용할 수 없습니다. 글리프 세트는 스타일에 의해 예상되는 형식과 적용 범위로 제공되어야 합니다.

타이포리 계층 구조, 후광, 글리프, 스프라이트, 상호 작용 상태 및 대비 테스트를 보여주는 브랜드 맵 레이블 및 아이콘 시스템.

국가, 지역 또는 주, 도시, 이웃, 도로, 대중 교통, 관심 지점, 수역 및 제품 주석과 같은 글꼴 크기를 모든 곳에 적용하기보다는 라벨 역할을 정의합니다. 계층 구조에 크기와 무게를 사용하고, 문자 간격을 억제하고, 지리를 변경하는 것과 대조되는 후광, 물에 대한 다른 색상, 관리 및 도로 라벨에 대한 다른 색상, 혼잡을 방지하는 줌 임계값, 청중에게 적합한 언어 및 스크립트 적용 범위. 육지에서 올바르게 보이는 레이블이 물, 지형 또는 위성 층 위로 사라질 수 있기 때문에지도의 가장 밝은 지역과 가장 어두운 지역 모두에 라벨을 테스트하십시오.

지도 아이콘은 컴팩트한 심볼 시스템으로 작동해야 합니다.MapLibre 스프라이트 사양은 스프라이트 이미지 및 메타데이터 리소스를 사용하여 아이콘과 패턴을 표시하고 레이어를 채울 수 있도록 합니다. 브랜드 아이콘을 추가하기 전에 일관된 스트로크 및 채우기 스타일, 최소 렌더링 크기, 밝은 및 어두운 변형, 선택 및 선택되지 않은 상태, 의미 의미, 충돌 및 중복 규칙 및 캔버스 외부의 액세스 가능한 텍스트 등가물을 정의하십시오. 기업 로고를 모든 관심 지점 마커에 강요하지 마십시오. 반복은지도 선명도를 줄이고 인터페이스가 기능적이기보다는 홍보를 느낄 수 있습니다.

지형과 3D는 언제 추가해야 하나요?

Kaleidr Studio는 고각, 지형, 언덕 해도 및 압출 건물에 대한 지원을 설명합니다.MapLibre는 또한 3D 건물을위한 지형과 fill-extrusion 레이어를 문서화합니다. 사용자의 공간 이해를 향상시킬 때 이러한 기능을 사용하십시오. 실외, 이동성, 인프라 및 위험 워크 플로우를위한 지형; 지형 컨텍스트를위한 언덕; 긴밀한 도시 방향을위한 3D 건물; 작업에 중요한 높이 또는 부피에 대한 압출. 마커를 가리거나 시각적 노이즈를 증가 시키거나 불필요한 GPU 부하를 생성하거나 레이블을 읽기 어렵게 만들거나 소스 데이터가 지원하지 않는 정밀도를 의미 할 때 3D를 피하십시오. 브랜드 맵은 단순히 더 차원적이기 때문에 더 강하지 않습니다.

베이스맵과 애플리케이션의 데이터는 가능할 때마다 분리되어 있어야 합니다.MapLibre는 맵이 표시해야 할 데이터를 표시하고 계층은 해당 데이터를 렌더링하는 방법을 정의합니다. 동일한 소스는 다각형 채우기, 윤곽선, 선택한 상태 및 레이블과 같은 여러 시각적 레이어를 지원할 수 있습니다. 제품 오버레이의 경우 소스 소유권, 안정적인 식별자, 지오메트로 유형, 업데이트 빈도, 줌 범위, 필터링 규칙, 선택 및 호버 상태, 오류 및 빈 상태 및 개인 정보 보호 제약을 정의합니다. 빨간색 경고가 빨간색 도로와 경쟁하지 않고 파란색 선택 영역이 파란색 물로 사라지지 않도록 기본 맵 색상과 구별되는 작동 색상을 유지하십시오.

Kaleidr Studio에서 어떻게 구축하나요?

Kaleidr Studio는 프롬프트 → 프로세스 → 정제 → 워크플로 배포를 사용하며 사용자 지정 디자인, 콘텐츠, 스타일 및 상호 작용 제어를 설명합니다. 브랜드 베이스맵의 경우 맵 목적을 정의하고 시각적 방향을 선택하고 색상 및 계층 구조를 설정하고 타이포그래피 및 레이블을 구성하고 레이어를 추가하거나 재사용하고 이해력이 향상되고 대표 위치 및 확대/축소가 개선되는 경우에만 지형과 3D를 평가하고, 설계된 베이스맵을 게시하고, 스타일을 삽입하거나 로드합니다.Kaliedr의 공개 스튜디오 페이지는 사용 가능한 디자인 영역을 확인하지만 정확한 조직별 게시 제어가 진화할 수 있습니다. 스크린 샷과 최종 스타일 식별자를 릴리스 프로세스의 일부로 기록합니다.

어떤 배포 방식을 선택해야 하나요?

Kaleidr는 설계된 베이스맵에 대한 두 가지 구현 모델을 문서화합니다. 타일 임베드는 자체 맵 표면을 소유하고 있으며 SDK의 임베드 인터페이스를 통해 카메라 업데이트를 수신합니다.Direct MapLibre 로딩은 게시된 스타일 JSON에서 호스트 소유 맵을 가리키므로 애플리케이션이 자체 소스, 레이어 및 상호 작용을 추가할 수 있습니다. 구현 속도가 중요하고 베이스맵이 표면을 소유할 수 있는 임베드를 선택합니다. 호스트가 전체 렌더러 제어가 필요할 때 MapLibre를 선택합니다.

두 개의 베이스맵 배포 경로: Kaleidr 타일 임베드와 게시된 Kaleidr 스타일 JSON을 사용하여 호스트 제어 MapLibre 맵입니다.

옵션 1: Kaleidr 베이스맵 임베드

다음 예제는 현재 공식 문서에서 조정됩니다. 허용된 출처에 제한되는 게시 가능한 키를 사용합니다. SDK는 짧은 시작 바인딩 세션에 키를 교환합니다. 키는 타일의 maps 기능 범위가 필요합니다.API 키는 현재 Pro 및 Enterprise 계획에 포함되어 있습니다.API 키 가져오기 및 Tiles — 설계된 베이스맵을 참조하십시오.

<script src="https://cdn.kaleidr.com/embed/v1/kaleidr.js"></script>

<kaleidr-map
  product="tile"
  publishable-key="YOUR_PUBLISHABLE_KEY"
  style-id="kaleidr-morning"
  center="-0.12,51.5"
  zoom="11"
  style="height: 480px">
</kaleidr-map>

현재 내장 된 스타일 ID는 kaleidr-morning, kaleidr-afternoon, kaleidr-night, kaleidr-editorial 및 kaleidr-plain입니다. 베이스맵이 자체 맵 표면, 구현 속도 문제를 소유할 수 있고, 애플리케이션이 문서화된 임베드 인터페이스를 통해 통신할 수 있으며, 팀이 모든 렌더러 메서드를 직접 제어할 필요가 없을 때 임베드 옵션을 사용합니다.

옵션 2: MapLibre에서 스타일 직접 불러오기

Kaleidr는 또한 게시된 스타일 JSON을 통해 호스트 소유 MapLibre 맵에서 동일한 베이스맵을 직접 사용하여 문서화합니다. 아래 스타일 URL과 내장 식별자는 Kaleidr의 현재 디자인 된베이스 맵 사용 가이드에서 제공됩니다. 조직별 사용자 지정 스타일의 경우 현재 Studio 워크플로에서 문서화한 게시된 스타일 URL을 대체합니다.

<link
  href="https://unpkg.com/maplibre-gl@6.0.0/dist/maplibre-gl.css"
  rel="stylesheet"
/>

<div id="map" aria-label="Branded interactive map"></div>

<script type="module">
  import * as maplibregl
    from "https://unpkg.com/maplibre-gl@6.0.0/dist/maplibre-gl.mjs";

  const map = new maplibregl.Map({
    container: "map",
    style: "https://cdn.kaleidr.com/styles/kaleidr-morning.json",
    center: [-0.12, 51.5],
    zoom: 11
  });

  map.addControl(new maplibregl.NavigationControl());

  map.on("error", (event) => {
    console.error("Basemap or renderer error:", event.error ?? event);
  });
</script>

호스트 응용 프로그램이 맵 인스턴스에 직접 액세스해야 할 때 직접 MapLibre 옵션을 사용하십시오. 제품 오버레이를 소스 및 레이어로 추가해야 하며 팀은 이벤트, 카메라, 컨트롤 및 런타임 스타일링을 정확하게 제어해야 하거나 베이스맵이 더 큰 대화형 애플리케이션의 한 부분입니다.

통합의 버전 관리와 캐싱은 어떻게 해야 하나요?

Kaleidr는 https://cdn.kaleidr.com/embed/v1/kaleidr.js 및 https://cdn.kaleidr.com/embed/v1/tile.js와 같은 버전 고정 경로를 통해 로더 및 제품 번들을 제공합니다. 뒤로 호환되는 업데이트는 동일한 주요 경로로 배송됩니다.breaking embed 또는 postMessage 변경은 /embed/v2/와 같은 새로운 주요 경로를 사용합니다.Kaleidr는 팀이 특정 빌드를 독립적으로 고정하려는 경우가 없는 한 SDK 번들의 지문 또는 자체 호스팅에 대해 조언합니다.CDN 버전을 참조하십시오.

스타일 자산과 타일은 또한 명시적인 캐시 및 릴리스 전략을 사용해야 합니다. 버전 중요한 스타일 변경, 회귀 테스트 없이 프로덕션 스타일 교체를 피하고, 게시된 스타일 ID 및 날짜를 기록하고, 스프라이트 및 글리프 캐시 무효화 테스트, 롤백 대상 보존, 실패한 스타일, 타일, 스프라이트 및 글리프 요청 모니터링.

출처 표시와 지도 타일에 어떤 규칙이 적용되나요?

OpenStreetMap 데이터는 오픈 데이터이지만 속성이 필요합니다.OpenStreetMap은 사용자가 OpenStreetMap 및 그 기여자에게 크레딧을 제공하는 한 모든 목적으로 데이터를 사용할 수 있다고 명시합니다.Kaleidr의 가격 책정 페이지에는 오픈 베이스맵 데이터가 OpenStreetMap 및 Overture Maps에서 파생되었으며 타일이 나타나는 곳마다 OpenStreetMap 기여자에게 속성이 필요하다고 명시되어 있습니다.OpenStreetMap 저작권 페이지를 참조하십시오. OpenStreetMap Foundation은 또한 대화 형지도 및 기타 제작 된 작품에 대한 속성 지침을 게시합니다.

OpenStreetMap Foundation의 공용 타일 서버를 무제한 사용과 함께 오픈 데이터를 혼동하지 마십시오.OSMF 타일 사용 정책은 공공 래스터 타일 서비스가 기증 용량이 제한되어 있으며 사용 요구 사항을 부과한다고 설명합니다. 생산 제품은 tile.openstreetmap.org를 무료 상업용 CDN으로 취급하기보다는 공급자, 준수 호스팅 타일 서비스 또는 자체 호스팅 인프라를 사용해야 합니다.

모든 릴리스에 대해 속성이 표시되고 읽을 수 있는지 확인하고, 귀속 링크는 필요한 라이선스 또는 저작권 페이지를 가리키고, 추가 데이터 세트 또는 이미지 크레딧이 있으며, 위성 및 하이브리드 이미지는 별도의 상업 라이선스를 따르고, 공급자의 스토리지, 캐싱 및 재배포 조건이 존중됩니다.Kaleidr는 현재 OpenStreetMap 기반 베이스맵 타일이 계획의 월간 지도 로드 허용량 내에서 상업적으로 사용될 수 있다고 명시하고 있습니다. 위성 및 하이브리드 이미지는 별도의 라이센스 레이어이며 오픈 타일 제공에 포함되지 않습니다.

접근성과 성능을 어떻게 테스트하나요?

지도 캔버스가 필수 정보가 나타나는 유일한 장소가 아니어야 합니다. 테스트 라벨은 토지, 물, 도로, 건물 및 지형에 대비합니다. 모든 베이스맵 변형에 대한 오버레이 대비; 색상에만 의존하지 않고 선택 및 선택되지 않은 상태; 일반적인 색상 비전 결함에 대한 경로 및 경계 가시성; 제어 및 결과 목록에 대한 키보드 액세스; 마커 및 선택한 기능에 대한 화면 판독기 등가물; 읽기 가능한 속성 및 제어 레이블; 적절한 경우 카메라 전환을 위한 축소 동작 동작. 일반 인터페이스 대비 검사가 레이블 또는 마커가 교차할 수 있는 모든 배경을 캡처하지 않기 때문에 대표 줌에서 실제 스크린 샷을 사용하십시오.

사용자 지정 스타일은 스타일 JSON 크기, 소스 수, 레이어 수 및 복잡성, 글리프 및 스프라이트 요청, 타일 크기 및 캐시 동작, 지형 및 3D 렌더링, 레이블 충돌 작업, 라이브 또는 자주 업데이트되는 오버레이 및 장치 GPU 제한을 통해 시작 및 상호 작용 성능에 영향을 줄 수 있습니다. 첫 번째 유용한 맵이 나타날 때까지 시간 측정, 스타일로드 시간, 실패한 타일, 글리프 및 스프라이트 요청, 팬 중 프레임 속도, 줌, 피치 및 회전, 대표 모바일 장치의 메모리 사용, 라이브 오버레이의 영향, 세션별 지도 로드 및 타일 사용. 렌더러가 자유롭게 만든다고 가정하는 대신 숨겨진 레이어 또는 중복 레이어를 제거합니다.

릴리스에 포함해야 할 품질 검사

릴리스를 승인하기 전에 지리, 스케일, 테마 및 제품 상태에서 베이스맵을 테스트합니다. 스타일은 하나의 매력적인 도시 스크린 샷을 기반으로 승인되어서는 안됩니다.

시험 차원	필요한 케이스
지리	밀도가 조성 도시, 교외, 시골, 해안, 산악, 국제
줌	지역, 도시, 이웃, 거리, 건물
테마	빛, 어두운, 높은 대비, 브랜드 캠페인 변형
데이터 상태	오버레이 없음, 정상적인 결과, 밀도가 높은 결과, 선택한 결과, 경로, 경고
장치	데스크탑, 태블릿, 저가형 모바일, 고밀도 디스플레이
네트워크	빠른, 느린, 간헐적, 캐시, 콜드 시작
언어	긴 장소 이름, 여러 스크립트, 오른쪽에서 왼쪽으로 지원
접근성	키보드, 스크린 리더, 컬러 비전 시뮬레이션, 확대된 텍스트

다음 이벤트 이름은 자동으로 방출되는 Kalaidr Analytics 이벤트에 대한 주장보다는 편집 권장 사항입니다.

basemap_loaded
basemap_load_failed
basemap_style_selected
basemap_style_changed
basemap_theme_changed
basemap_tile_error
basemap_attribution_opened
map_overlay_added
map_overlay_toggled
map_3d_enabled
map_session_completed

유용한 지표로는 첫 번째 유용한 맵 시간, 성공적인 스타일로드 속도, 타일 오류율, 지도 로드 사용률, 렌더러 프레임 속도, 세션 기간, 오버레이 상호 작용 속도, 선택한 결과 속도, 경로 또는 워크플로 완료, 테마 스위치 주파수, 베이스맵 변형별 전환 및 지도 읽기와 관련된 지원 사고가 있습니다. 베이스맵이 독특해 보이기 때문에 베이스맵을 성공적으로 선언하지 마십시오. 사용자가 제품의 지리적 정보를보다 효과적으로 찾고, 해석하고, 행동하는지 여부를 측정합니다.

팀이 피해야 할 실수

실수	무슨 일이 일어나는지	추천 수정
모든 곳에서 브랜드 색상 적용	지리적 계층 붕괴	선택한 기능 및 제품 오버레이에 대한 강력한 브랜드 색상 예약
작업을 정의하기 전에 베이스맵을 스타일링	지도는 세련되게 보이지만 워크플로를 지원하지 않습니다.	사용자 결정 및 필요한 지리적 컨텍스트로 시작
모든 관심 지점 레이블 유지	중요한 제품 데이터는 관련없는 라벨과 경쟁합니다.	줌 및 카테고리별로 저가 라벨 제거 또는 지연
글리프 지원 없이 기업 글꼴 사용	라벨이 실패하거나 일관되게 뒤로 떨어집니다.	글리프 호스팅, 문자 범위 및 렌더러 호환성 확인
아이콘을 장식으로 취급	기호가 일치하지 않고 모호해집니다.	상태 및 텍스트 등가물로 의미 체계 만들기
기본적으로 3D 추가	성능 및 읽기 가능성 감소	관련 구조를 설명하는 경우에만 지형 및 압출 사용
오버레이 및 베이스맵 색상 믹싱	선택한 상태 또는 경고 상태가 사라집니다.	별도의 참조 및 작동 색상 토큰 유지
속성 제거	지도는 소스 요구 사항을 위반합니다.	필요한 소스 및 라이센스에 연결된 읽기 가능한 속성 유지
퍼블릭 OSM 타일 서버를 프로덕션 CDN으로 사용	사용법이 정책을 위반하거나 차단될 수 있습니다.	준수 공급자, Kaliedr 호스팅 타일 또는 자체 호스팅 인프라 사용
버전 없이 프로덕션 스타일 교체	시각적 회귀는 롤백 없이 사용자에게 도달합니다.	버전 릴리스 및 테스트 이전 스타일 보존

최종 구현 체크리스트

제품 맵 작업 문서화
Basemap, overlay, interaction 및 인터페이스 레이어 분리
지리적 계층 구조 정의
지도 디자인 토큰 승인
줌으로 테스트한 로드 클래스
레이블 계층 구조 및 후광 테스트
Glyph 적용 확인
Sprite 및 아이콘 시스템 문서화
제품 오버레이 색상 별개 유지
사용 사례로 정당화되는 지형 및 3D
대표 글로벌 위치 검토
빛, 어두운, 그리고 접근성 변종 테스트
OpenStreetMap 및 기타 속성 표시
타일 공급자 용어 확인
게시 가능한 키 출처 제한 설정
maps 기능 범위 확인
Embed 또는 Direct MapLibre 경로 선택
스타일 ID 및 릴리스 버전 기록
오류 및 로드 상태 구현
모바일 하드웨어에서 테스트된 성능
지도 로드 및 타일 사용 모니터링
롤백 스타일 보존

최종 평가

사용자 지정 브랜드 베이스맵은 사용자가 필요로 하는 정보의 계층 구조를 개선하면서 맵이 제품에 기본으로 느껴지도록 해야 합니다. 색상, 타이포그래피, 레이블, 아이콘, 지형 및 3D는 목적이 아닌 구현 도구입니다. 가장 강력한 워크플로는 제품 작업으로 시작하여 참조 지리를 작동 오버레이와 분리하고 재사용 가능한 디자인 토큰을 정의하고 여러 위치 및 줌을 테스트하고 소스 속성을 보존하며 버전화된 스타일 및 타일 전달 경로를 통해 배포합니다.

Kaleidr는 product="tile"에 설계된 베이스맵을 포함하거나 게시된 Kaleidr 스타일 JSON을 MapLibre 맵에 직접 로드하는 두 가지 문서화된 구현 모델을 지원합니다. 베이스맵이 표면 및 통합 속도를 사용할 수 있는 경우 임베드를 사용합니다. 호스트 응용 프로그램이 전체 맵 컨트롤이 필요하고 자체 소스, 레이어 및 상호 작용을 추가해야 할 때 직접 MapLibre 경로를 사용합니다.

Kaleidr Studio에서 베이스맵 디자인하기

브랜드 공간 경험을 위해 지도 스타일, 라벨, 레이어, 지형, 3D 건물 및 재사용 가능한 사전 설정을 만듭니다. 제품 작업에서 시작하여 토큰을 선택적으로 적용하고 MapLibre에 포함하거나 로드할 수 있는 스타일을 게시합니다.

Kaleidr Studio 열기

디자인한 베이스맵을 제품에 추가하기

통합 경로를 선택하기 전에 타일 임베드, MapLibre 스타일 URL, 브라우저 키, 원본 제한, 사용 및 CDN 버전 문서를 검토합니다.

Kaleyidr 타일 문서 읽기

자주 묻는 질문

사용자 정의 브랜드 베이스맵이란 무엇인가요?

사용자 정의 브랜드베이스 맵은 색상, 타이포그래피, 레이블, 아이콘, 도로, 표면 및 컨텍스트 레이어가 제품의 시각적 시스템 및 사용자 작업에 맞게 설계된 재사용 가능한 지리적 참조 스타일입니다.basemap은 컨텍스트를 제공합니다. 제품 오버레이는 응용 프로그램의 주제를 전달합니다.

베이스맵은 애플리케이션 데이터와 같은 것인가요?

아니. 베이스맵은 도로, 물, 건물 및 라벨과 같은 지리적 컨텍스트를 제공합니다. 응용 프로그램 데이터는 제품의 속성, 저장소, 자산, 사고, 경로 또는 기타 주제를 나타내며 일반적으로 베이스맵 위에 나타나야 합니다.

벡터 지도에서 브랜드 글꼴을 사용할 수 있나요?

렌더러가 글꼴 및 필요한 문자 범위에 대해 호환되는 글리프 리소스를 로드할 수 있는 경우에만 가능합니다. 서체를 선택하기 전에 라이선스, 글리프 생성, 호스팅, 언어 범위 및 폴백 동작을 확인합니다.

Kaleidr 베이스맵을 MapLibre에서 사용할 수 있나요?

네.Kaleidr는 MapLibre 맵을 만들 때 게시된 Kaleidr 스타일 JSON을 style 값으로 직접 로드합니다. 그런 다음 호스트 응용 프로그램은 해당 스타일 위에 자체 오버레이와 상호 작용을 추가합니다.

MapLibre를 직접 관리하지 않고 Kaleidr 베이스맵을 임베드할 수 있나요?

네.Kaleidr SDK는 스타일 ID별로 설계된 베이스맵을 포함하는 product="tile" 사용자 지정 요소 및 필수 마운트 옵션을 문서화합니다. 임베드는 자체 맵 표면을 소유하고 문서화된 인터페이스를 통해 통신합니다.

현재 문서화된 Kaleidr 베이스맵 스타일은 무엇인가요?

현재 개발자 문서에는 kaleidr-morning, kaleidr-afternoon, kaleidr-night, kaleidr-editorial 및 kaleidr-plain가 나열되어 있습니다. 조직별 스튜디오 스타일은 추가 식별자에 따라 게시할 수 있습니다.

Kaleidr 지도 타일에는 API 키가 필요한가요?

브라우저 타일 임베드는 적절한 맵 기능과 허용된 출처 제한이 있는 게시 가능한 Kaleidr 키를 사용합니다.API 키는 현재 Pro 및 Enterprise 계획에 포함되어 있습니다.

Kaleidr의 오픈 베이스맵 타일을 상업적으로 사용할 수 있나요?

Kaleidr의 현재 가격 책정 페이지에 따르면 상업적 사용은 월간지도로드 허용량 내에서 허용됩니다.Pro에는 더 높은 볼륨의 생산 사용이 포함되어 있으며 Enterprise는 독립 CDN을 통해 사용자 정의 볼륨을 지원합니다. 위성 및 하이브리드 이미지는 별도로 라이센스가 유지됩니다.

OpenStreetMap 출처를 표시해야 하나요?

OpenStreetMap 공개 타일 서버를 상업용 제품에 사용할 수 있나요?

OpenStreetMap 데이터는 열려 있지만 OpenStreetMap Foundation의 공용 타일 서버는 별도의 사용 정책과 기부 용량이 제한되어 있습니다. 프로덕션 애플리케이션은 무제한 CDN 사용을 가정하기보다는 준수 타일 공급자 또는 자체 호스팅 인프라를 사용해야 합니다.

모든 브랜드 지도에 지형과 3D 건물을 사용해야 하나요?

아니. 지형과 3D는 공간 이해를 향상시킬 때 사용해야합니다. 사용자 작업을 지원하지 않을 때 가독성과 성능을 줄일 수 있습니다.

베이스맵의 효과를 어떻게 측정해야 하나요?

스타일로드 신뢰성, 첫 번째 유용한 맵 시간, 타일 오류, 오버레이 상호 작용, 결과 선택, 워크플로 완료, 접근성 문제, 지원 사고 및 전환을 측정합니다. 시각적 독특함만으로는 충분한 성공 척도가 아닙니다.

참고 문헌

Kaleidr. CDN versioning. Kaleidr Developer Docs. Accessed 25 July 2026. https://docs.kaleidr.com/reference/cdn-versioning
Kaleidr. Create Custom Maps with AI Map Maker. kaleidr.com. Accessed 25 July 2026. https://kaleidr.com/studio
Kaleidr. Get an API key. Kaleidr Developer Docs. Accessed 25 July 2026. https://docs.kaleidr.com/get-an-api-key
Kaleidr. Introduction. Kaleidr Developer Docs. Accessed 25 July 2026. https://docs.kaleidr.com
Kaleidr. Pricing & Plans. kaleidr.com. Accessed 25 July 2026. https://kaleidr.com/pricing
Kaleidr. Tiles — embed a designed basemap. Kaleidr Developer Docs. Accessed 25 July 2026. https://docs.kaleidr.com/sdk/tiles
Kaleidr. Use a designed basemap. Kaleidr Developer Docs. Accessed 25 July 2026. https://docs.kaleidr.com/guides/use-tiles
MapLibre. Display buildings in 3D. MapLibre GL JS documentation. Accessed 25 July 2026. https://maplibre.org/maplibre-gl-js/docs/examples/display-buildings-in-3d/
MapLibre. Glyphs. MapLibre Style Specification. Accessed 25 July 2026. https://maplibre.org/maplibre-style-spec/glyphs/
MapLibre. Introduction. MapLibre Style Specification. Accessed 25 July 2026. https://maplibre.org/maplibre-style-spec/
MapLibre. Layers. MapLibre Style Specification. Accessed 25 July 2026. https://maplibre.org/maplibre-style-spec/layers/
MapLibre. Sources. MapLibre Style Specification. Accessed 25 July 2026. https://maplibre.org/maplibre-style-spec/sources/
MapLibre. Sprite. MapLibre Style Specification. Accessed 25 July 2026. https://maplibre.org/maplibre-style-spec/sprite/
MapLibre. 3D Terrain. MapLibre GL JS documentation. Accessed 25 July 2026. https://maplibre.org/maplibre-gl-js/docs/examples/3d-terrain/
OpenStreetMap. Copyright and License. Accessed 25 July 2026. https://www.openstreetmap.org/copyright
OpenStreetMap Foundation. Licence/Attribution Guidelines. Accessed 25 July 2026. https://osmfoundation.org/wiki/Licence/Attribution_Guidelines
OpenStreetMap Foundation. Tile Usage Policy. Accessed 25 July 2026. https://operations.osmfoundation.org/policies/tiles/
OpenStreetMap Foundation. Vector Tile Usage Policy. Accessed 25 July 2026. https://operations.osmfoundation.org/policies/vector/

@misc{kaleidr_tiles,
  title  = {Tiles --- embed a designed basemap},
  author = {{Kaleidr}},
  note   = {Kaleidr Developer Docs; accessed 25 July 2026},
  url    = {https://docs.kaleidr.com/sdk/tiles}
}

@misc{kaleidr_use_tiles,
  title  = {Use a designed basemap},
  author = {{Kaleidr}},
  note   = {Kaleidr Developer Docs; accessed 25 July 2026},
  url    = {https://docs.kaleidr.com/guides/use-tiles}
}

@misc{kaleidr_studio,
  title  = {Create Custom Maps with AI Map Maker},
  author = {{Kaleidr}},
  note   = {Accessed 25 July 2026},
  url    = {https://kaleidr.com/studio}
}

@misc{maplibre_style_spec,
  title  = {MapLibre Style Specification},
  author = {{MapLibre}},
  note   = {Accessed 25 July 2026},
  url    = {https://maplibre.org/maplibre-style-spec/}
}

@misc{osm_copyright,
  title  = {Copyright and License},
  author = {{OpenStreetMap}},
  note   = {Accessed 25 July 2026},
  url    = {https://www.openstreetmap.org/copyright}
}

@misc{osm_tile_policy,
  title  = {Tile Usage Policy},
  author = {{OpenStreetMap Foundation}},
  note   = {Accessed 25 July 2026},
  url    = {https://operations.osmfoundation.org/policies/tiles/}
}

브랜드에 맞춘 사용자 정의 베이스맵 구축 방법

사용자 정의 브랜드 베이스맵이란 무엇인가요?

베이스맵, 오버레이, 애플리케이션 데이터는 어떻게 다른가요?

이 가이드에서 구축할 내용

제품 과제에서 어떻게 시작해야 하나요?

지도 디자인 토큰 시스템을 어떻게 정의하나요?

시각적 계층을 어떻게 구축하나요?

라벨, 아이콘, 대비를 어떻게 설계해야 하나요?

지형과 3D는 언제 추가해야 하나요?

Kaleidr Studio에서 어떻게 구축하나요?

어떤 배포 방식을 선택해야 하나요?

옵션 1: Kaleidr 베이스맵 임베드

옵션 2: MapLibre에서 스타일 직접 불러오기

통합의 버전 관리와 캐싱은 어떻게 해야 하나요?

출처 표시와 지도 타일에 어떤 규칙이 적용되나요?

접근성과 성능을 어떻게 테스트하나요?

릴리스에 포함해야 할 품질 검사

팀이 피해야 할 실수

최종 구현 체크리스트

최종 평가

Kaleidr Studio에서 베이스맵 디자인하기

디자인한 베이스맵을 제품에 추가하기

자주 묻는 질문

사용자 정의 브랜드 베이스맵이란 무엇인가요?

베이스맵은 애플리케이션 데이터와 같은 것인가요?

벡터 지도에서 브랜드 글꼴을 사용할 수 있나요?

Kaleidr 베이스맵을 MapLibre에서 사용할 수 있나요?

MapLibre를 직접 관리하지 않고 Kaleidr 베이스맵을 임베드할 수 있나요?

현재 문서화된 Kaleidr 베이스맵 스타일은 무엇인가요?

Kaleidr 지도 타일에는 API 키가 필요한가요?

Kaleidr의 오픈 베이스맵 타일을 상업적으로 사용할 수 있나요?

OpenStreetMap 출처를 표시해야 하나요?

OpenStreetMap 공개 타일 서버를 상업용 제품에 사용할 수 있나요?

모든 브랜드 지도에 지형과 3D 건물을 사용해야 하나요?

베이스맵의 효과를 어떻게 측정해야 하나요?

참고 문헌

관련 콘텐츠

지도를 비즈니스 성장의 동력으로 바꾸세요