본 보고서는 현대 웹 기반 3D 지도 애플리케이션 구축을 위한 오픈소스 기술 생태계에 대한 심층적이고 종합적인 분석을 제공한다. 기술 리더 및 아키텍트가 전략적 의사결정을 내리는 데 필요한 핵심 정보를 제공하는 것을 목표로, 주요 오픈소스 라이브러리인 CesiumJS, Mapbox GL JS(및 그 포크인 MapLibre GL JS), OpenLayers, Deck.gl을 다각도로 비교 평가한다.
분석 결과, 각 라이브러리는 뚜렷한 철학과 강점을 가지고 있으며, 특정 사용 사례에 따라 최적의 선택이 달라짐을 확인했다. CesiumJS는 WGS84 기반의 고정밀 3D 지구본 시각화와 대용량 3D 타일 데이터셋 스트리밍에 독보적인 성능을 보여, 디지털 트윈, 스마트 시티, 국방 및 항공우주 분야에 가장 적합한 솔루션으로 평가된다. Mapbox GL JS는 미려한 벡터 지도 렌더링과 풍부한 2D 지도 제작 기능에 강점을 보이지만, v2부터 도입된 상용 라이선스 정책은 중요한 고려사항이다. 이에 대한 대안으로 등장한 MapLibre GL JS는 완전한 오픈소스의 자유를 제공하며, Mapbox의 생태계에서 벗어나고자 하는 조직에게 매력적인 선택지이다. OpenLayers는 전통적인 GIS 데이터 형식과 OGC 표준에 대한 광범위한 지원을 바탕으로, 2D 중심의 GIS 애플리케이션에 3D 기능을 점진적으로 추가하고자 할 때 ol-cesium 라이브러리를 통해 강력한 확장성을 제공한다. 마지막으로 Deck.gl은 지도 라이브러리가 아닌 데이터 시각화 계층으로서, 대규모 데이터셋의 GPU 가속 렌더링에 특화되어 있어 데이터 분석 대시보드 구축에 필수적인 도구이다.
특히 대한민국 시장을 고려할 때, 국가공간정보 플랫폼인 브이월드(VWorld)와의 연동은 핵심적인 요구사항이다. 본 보고서는 브이월드 데이터의 특성과 API 제공 현황을 분석하고, 특정 플랫폼에 종속되지 않는 유연하고 안정적인 시스템 아키텍처 구축 방안을 제시한다. 이는 과거 VWorld의 API 변경 이력을 고려할 때, 장기적인 프로젝트 안정성을 위한 필수적인 전략이다.
결론적으로, 본 보고서는 단순한 기술 비교를 넘어, 각 플랫폼의 라이선스 모델, 생태계, 그리고 총소유비용(TCO)까지 고려한 전략적 청사진을 제시한다. 이를 통해 개발팀은 프로젝트의 목표, 예산, 기술적 요구사항에 가장 부합하는 기술 스택을 선정하고, 성공적인 3D 지도 애플리케이션을 구축하기 위한 명확한 방향성을 수립할 수 있을 것이다.
이 파트에서는 3D 웹 매핑 환경의 기본 개념과 주요 기술들을 소개하여, 이어지는 상세 비교 분석에 필요한 배경지식을 제공한다. 특히 대한민국 데이터 생태계와의 통합이라는 중요한 요구사항을 중점적으로 다룬다.
1.1. 3D 웹 지도의 구조: GPU에서 지구본까지
아키텍처 개요
현대의 3D 웹 매핑 애플리케이션은 원시 데이터가 사용자의 브라우저에서 상호작용 가능한 3D 장면으로 렌더링되기까지 여러 단계를 거치는 복잡한 시스템이다. 이 전체 워크플로우를 이해하는 것은 특정 라이브러리를 선택하는 것 이상의 전략적 중요성을 가진다. 전체 아키텍처는 데이터 수집 및 처리, 데이터 타일링 및 스트리밍, 클라이언트 측 렌더링 엔진, 그리고 그래픽 API의 네 가지 핵심 계층으로 나눌 수 있다.
이처럼 3D 웹 지도는 단순히 하나의 라이브러리를 선택하는 문제가 아니라, 데이터 처리부터 최종 렌더링까지 이어지는 전체 파이프라인을 고려한 아키텍처 설계의 문제이다. 특정 라이브러리가 3D Tiles와 같은 개방형 표준을 얼마나 잘 지원하는지는 자체 데이터셋을 활용하고자 할 때 프로젝트의 실현 가능성과 비용에 직접적인 영향을 미친다. 따라서 렌더링 라이브러리 선택은 전체 데이터 생태계 전략과 맞물려 이루어져야 하는 핵심적인 의사결정이다.
1.2. 오픈소스 3D 매핑의 네 가지 기둥
ol-cesium이라는 강력한 통합 라이브러리를 통해 3D 시각화를 구현할 수 있다.15 이 라이브러리는 OpenLayers 지도 위에 Cesium 기반의 3D 뷰를 추가하고, 2D와 3D 뷰 간의 지도 컨텍스트, 래스터, 벡터 데이터를 동기화하는 기능을 제공한다.161.3. 대한민국의 필수 과제: VWorld 국가 데이터 플랫폼 연동
VWorld 개요
VWorld는 대한민국 국토교통부가 운영하는 공식 공간정보 오픈 플랫폼으로, 국내 시장을 대상으로 하는 애플리케이션 개발에 있어 핵심적인 데이터 소스이다. VWorld는 고품질 2D/3D 지도, 위성 및 항공 영상, 수치표고모델(DEM), 연속지적도와 같은 행정 정보를 포함한 광범위한 국가 데이터를 제공한다.23
API 제공 현황
VWorld는 개발자들이 이러한 데이터를 활용할 수 있도록 다양한 OpenAPI를 제공한다. 여기에는 WebGL 기반의 3D 지도 API, 모바일 환경을 위한 API, 그리고 WMS(Web Map Service) 및 WMTS(Web Map Tile Service)와 같은 국제 표준 인터페이스가 포함된다.23
제공 데이터의 특징
VWorld는 전국을 대상으로 하는 3D 건물 모델을 제공하며, 이를 LoD2(Level of Detail 2) 수준 이상으로 고도화할 계획을 가지고 있다. 또한 고해상도 영상과 연속지적도와 같은 상세한 행정 레이어를 제공하여, 부동산, 도시 계획, 재난 관리 등 다양한 분야에서 활용 가치가 높다.23
통합 전략과 잠재적 리스크
VWorld 데이터를 애플리케이션에 통합하는 가장 안정적이고 유연한 전략은 VWorld가 제공하는 특정 JavaScript API에 종속되기보다는, WMTS나 3D Tiles와 같은 표준 프로토콜을 통해 데이터를 소비하는 것이다. 예를 들어, CesiumJS나 OpenLayers와 같은 개방형 클라이언트 라이브러리를 사용하여 VWorld의 WMTS 서비스로부터 배경 이미지를 가져오고, 3D Tiles 서비스로부터 건물 데이터를 스트리밍하는 방식이다.
이러한 아키텍처가 중요한 이유는 VWorld의 API 제공 정책이 과거에 불안정성을 보인 사례가 있기 때문이다. 2019년에는 3D 데이터 API가 폐쇄되었다는 보고가 있었으며, 이는 특정 API에 강하게 결합된 애플리케이션에 심각한 리스크를 초래할 수 있음을 시사한다.30 이러한 이력은 VWorld를 단일 데이터 소스로 의존하는 것의 위험성을 명확히 보여준다. 따라서 장기적인 안정성을 확보하기 위해서는, VWorld의 특정 API가 변경되거나 중단되더라도 다른 데이터 소스(예: 다른 VWorld API 또는 자체 구축 타일셋)로 쉽게 전환할 수 있는 유연한 아키텍처를 채택하는 것이 현명하다. 이는 특정 데이터 제공업체의 정책 변화로부터 애플리케이션의 생존성을 보장하는 핵심적인 전략적 고려사항이다.
이 파트에서는 주요 라이브러리들을 핵심적인 기술 및 비즈니스 차원에서 직접 비교하여, 데이터 기반의 기술 선정 과정을 지원한다.
2.1. 핵심 렌더링 및 3D 기능
CesiumJS: 3D 시각화의 정밀도와 충실도 면에서 타의 추종을 불허한다. CesiumJS는 고정밀 WGS84 지구본 위에서 대규모 지리 공간 데이터를 시각화하는 데 특화되어 있다. 사진측량 모델, BIM/CAD 데이터, 포인트 클라우드와 같은 방대한 데이터셋을 효율적으로 스트리밍하기 위한 3D Tiles를 네이티브로 지원하며, 사실적인 지형 렌더링, 동적 조명 효과, 그리고 시간의 흐름에 따른 데이터 변화를 시각화하는 기능이 매우 강력하다.11 또한, 완전한 3D 뷰, 2.5D 콜럼버스 뷰, 그리고 전통적인 2D 맵 뷰를 런타임에 전환할 수 있는 유연성을 제공한다.11
Mapbox GL JS / MapLibre GL JS: 강력한 2D 및 2.5D 지도 제작 능력에 중점을 둔다. 3D 기능은 주로 건물 외곽선 데이터를 입체적으로 돌출시키거나 기본적인 3D 지형을 표현하는 데 초점이 맞춰져 있다.8 three.js와 같은 외부 라이브러리를 사용하여 커스텀 레이어 형태로 3D 모델을 렌더링할 수는 있지만, CesiumJS처럼 대규모 3D 데이터셋을 네이티브로, 그리고 효율적으로 처리하는 기능은 부족하다.32 이 라이브러리의 진정한 강점은 아름답고 유려한 2D 지도 디자인과 빠른 벡터 타일 렌더링 성능에 있다.
OpenLayers: 본질적으로 2D 라이브러리이다. 3D 기능은 내장되어 있지 않으며, ol-cesium이라는 통합 라이브러리를 통해 구현된다.16 이 접근 방식은 애플리케이션의 주된 기능이 2D 지도이지만, 부가적으로 3D 뷰를 제공하고자 할 때 매우 효과적이다.
ol-cesium은 OpenLayers의 지도 컨텍스트, 래스터 및 벡터 데이터를 Cesium의 3D 뷰와 동기화하여, 두 라이브러리의 장점을 모두 활용할 수 있게 해준다.16 이 방식은 두 개의 라이브러리를 동시에 사용해야 하는 오버헤드가 있지만, 특정 시나리오에서는 최상의 솔루션이 될 수 있다. OpenLayers 공식 예제들을 살펴보면 대부분이 2D 또는 2.5D 기능에 집중되어 있어, 이 라이브러리의 정체성이 2D에 있음을 다시 한번 확인할 수 있다.33
Deck.gl: 기본 지도 엔진이 아닌 데이터 시각화 레이어이다. Deck.gl의 3D 기능은 3D 세계 자체를 렌더링하는 것이 아니라, 지도 위에 데이터를 3차원으로 표현하는 데(예: 3D 막대그래프, 아크, 포인트 클라우드 등) 집중되어 있다.19 GPU 가속을 통해 대규모 포인트 데이터셋이나 유동 데이터를 시각화하는 데 있어 탁월한 성능을 발휘한다.21
표: 3D 기능 및 성능 비교
이 표는 각 라이브러리의 3D 관련 강점과 약점을 한눈에 파악할 수 있도록 요약하여, 프로젝트 요구사항에 가장 적합한 기술을 신속하게 식별하는 데 도움을 준다. 의사결정의 핵심 기준이 되는 현실적인 세계 표현, 대용량 데이터 처리 능력, 그리고 성능을 중심으로 비교한다.
| 라이브러리 | 주요 초점 | 3D 지형 렌더링 | 3D 빌딩 렌더링 (네이티브) | 포인트 클라우드 렌더링 | 시간 기반 동적 시각화 | 대용량 데이터셋 성능 |
|---|---|---|---|---|---|---|
| CesiumJS | 3D | 최상급 (동적 조명 포함) | 최상급 (3D Tiles) | 최상급 (3D Tiles) | 최상급 (CZML) | 매우 우수 |
| Mapbox GL JS | 2D/2.5D | 기본 | 제한적 (돌출형) | 제한적 (커스텀 레이어) | 기본 | 보통 |
| MapLibre GL JS | 2D/2.5D | 기본 | 제한적 (돌출형) | 제한적 (커스텀 레이어) | 기본 | 보통 |
| OpenLayers (ol-cesium) | 2D | 우수 (Cesium 엔진 사용) | 우수 (Cesium 엔진 사용) | 우수 (Cesium 엔진 사용) | 우수 (Cesium 엔진 사용) | 우수 |
| Deck.gl | 데이터 시각화 | 해당 없음 (기본 지도에 의존) | 제한적 (돌출형) | 최상급 (GPU 가속) | 우수 | 매우 우수 |
2.2. 데이터 형식 지원 및 상호운용성
CesiumJS: 3D 및 지리 공간 표준에 대한 포괄적인 지원을 자랑한다. 3D Tiles, glTF, CZML과 같은 핵심 3D 데이터 형식을 네이티브로 처리하며, KML, GeoJSON과 같은 전통적인 GIS 형식도 지원한다.11 Cesium 생태계 전체가 개방형 표준을 중심으로 구축되어 있어 강력한 상호운용성을 보장한다.12
Mapbox GL JS / MapLibre GL JS: 기본 지도에 대해서는 Mapbox Vector Tiles (MVT) 형식에 크게 의존한다. 데이터 소스로는 GeoJSON, 래스터 타일, 비디오 등을 지원한다.8 3D 모델(glTF)은 커스텀 레이어를 통해 표시할 수 있지만, 이는 핵심 기능이라기보다는 확장 기능에 가깝다.32
OpenLayers: 데이터 형식 지원의 “스위스 군용 칼”이라 할 수 있다. WMS, WFS와 같은 OGC 표준을 완벽하게 지원하며, GeoJSON, TopoJSON, KML, GML 등 다양한 벡터 및 래스터 형식을 처리하는 데 탁월하다.15 이 라이브러리의 강점은 다양한 전통적 GIS 소스로부터 데이터를 통합하는 능력에 있다.
Deck.gl: 유연한 데이터 입력을 지원한다. 표준 JavaScript 객체 배열, GeoJSON, 그리고 다양한 바이너리 데이터 형식을 소비할 수 있다.20 특히
loaders.gl 라이브러리와의 통합을 통해 광범위한 데이터 형식을 지원한다.20
각 라이브러리가 네이티브로 지원하는 데이터 형식은 그 라이브러리의 설계 철학을 반영한다. CesiumJS는 사전 처리된 대규모 3D 콘텐츠를 스트리밍하기 위해, OpenLayers는 다양한 2D GIS 서비스와 통합하기 위해, Mapbox/MapLibre는 빠르고 멋진 벡터 지도를 위해, 그리고 Deck.gl은 이들 지도 위에 대규모의 추상 데이터를 시각화하기 위해 설계되었다.
2.3. 라이선스, 생태계, 그리고 총소유비용(TCO)
CesiumJS: 핵심 라이브러리는 Apache 2.0 라이선스하에 완전히 무료로 제공된다.11 Cesium의 비즈니스 모델은
Cesium ion이라는 SaaS 플랫폼을 중심으로 구축되어 있다. Cesium ion은 3D 데이터의 타일링, 호스팅, 스트리밍 서비스를 제공하며, 전 세계 지형 및 건물 데이터와 같은 큐레이션된 데이터셋을 포함한다.39 따라서 총소유비용(TCO)은 내부 개발 비용에 더해, Cesium ion을 사용할 경우 발생하는 선택적인 구독료로 구성된다.
Mapbox GL JS: v2 이상 버전은 독점 상용 라이선스를 따른다.14 라이브러리를 사용하기 위해서는 Mapbox 계정과 유효한 토큰이 필수적이다. 비즈니스 모델은 지도 로드, API 요청 횟수 등에 기반한 종량제(Pay-as-you-go)이다.13 TCO는 서비스 사용량에 직접적으로 연동되며, 대규모 서비스의 경우 비용이 상당히 증가할 수 있다.14
MapLibre GL JS: BSD-3 라이선스를 따르는 완전한 오픈소스 프로젝트다.14 Mapbox GL JS v1의 커뮤니티 주도 포크로서 사용에 아무런 제약이 없다. 하지만 지도 타일이나 검색, 라우팅과 같은 부가 서비스는 MapTiler, Stadia Maps와 같은 제3자 제공업체를 이용하거나 직접 구축해야 한다. TCO는 주로 개발 인력과 데이터 호스팅 인프라 비용으로 구성된다.
OpenLayers: 2-clause BSD 라이선스하에 완전히 무료로 제공되는 오픈소스 라이브러리다.15 TCO는 개발 및 데이터 호스팅 비용이 전부다.
Deck.gl: MIT 라이선스를 따르는 완전한 오픈소스 라이브러리다.21 TCO는 개발 비용으로 한정된다.
이러한 라이선스와 비즈니스 모델의 차이는 단순한 기술 선택을 넘어선 전략적 결정의 핵심이다. Mapbox는 고도로 통합되고 세련된 플랫폼을 제공하지만, 이는 벤더 종속성과 사용량 기반의 비용 증가라는 대가를 수반한다. 반면 Cesium은 완전한 오픈소스 코어를 제공하면서 부가 가치가 높은 플랫폼을 통해 수익을 창출하는 ‘오픈 코어’ 모델을 따른다. MapLibre는 순수한 커뮤니티 기반의 대안으로, 완전한 자유를 보장하지만 솔루션을 완성하기 위한 더 많은 노력을 요구한다. 이는 예산, 리스크 관리, 그리고 기술 통제권에 대한 조직의 우선순위에 따라 최적의 선택이 달라짐을 의미한다.
표: 라이선스 및 생태계 비교
이 표는 라이브러리 선택에 따른 비즈니스 및 전략적 영향을 명확히 하여, 기술적 차이점만큼이나 중요한 의사결정 기준을 제공한다.
| 라이브러리 | 핵심 라이선스 | 비즈니스 모델 | 주요 플랫폼/생태계 | 일반적인 비용 요인 |
|---|---|---|---|---|
| CesiumJS | Apache 2.0 | 오픈 코어 (SaaS 플랫폼) | Cesium ion (타일링, 호스팅) | 개발 비용 + (선택적) ion 구독료 |
| Mapbox GL JS | 상용 (Proprietary) | 플랫폼 종량제 (PaaS) | Mapbox Platform (지도, 검색, 내비) | 개발 비용 + 지도 로드/API 사용량 |
| MapLibre GL JS | BSD-3 | 커뮤니티 기반 | 제3자 타일 제공업체 (MapTiler 등) | 개발 비용 + 데이터/타일 호스팅 비용 |
| OpenLayers | 2-clause BSD | 커뮤니티 기반 | OGC 표준, 다양한 데이터 소스 | 개발 비용 + 데이터 호스팅 비용 |
| Deck.gl | MIT | 커뮤니티 기반 | vis.gl (데이터 시각화 도구 모음) | 개발 비용 |
2.4. 개발자 경험 및 프레임워크 통합
문서 및 예제: 모든 라이브러리는 방대한 문서와 예제를 제공하여 개발자들의 학습을 돕는다. Cesium은 실시간 코딩 환경인 Sandcastle을 제공하며 31, Mapbox는 상세한 가이드와 예제를 제공한다.8 OpenLayers 역시 방대한 예제 컬렉션을 자랑하며 33, Deck.gl은 쇼케이스와 API 문서를 통해 다양한 활용 사례를 보여준다.20
React 통합: 현대 웹 개발에서 React와의 통합은 매우 중요하다.
CesiumJS: Resium 라이브러리를 통해 React와 통합하는 것이 일반적이다. Resium은 Cesium의 객체들을 React 컴포넌트로 추상화하여 선언적으로 사용할 수 있게 해준다.45 다만 Cesium이 자체적으로 필요로 하는 에셋(웹 워커, 위젯 스타일 등) 때문에 설정이 다소 복잡할 수 있으며, 이를 해결하기 위해
craco-cesium과 같은 도구가 사용되기도 한다.47
Mapbox GL JS / MapLibre GL JS: react-mapbox-gl과 같은 래퍼(wrapper) 라이브러리를 통해 쉽게 통합할 수 있다.49
Deck.gl: React를 최우선으로 지원하며, react-map-gl과 같은 기본 지도 래퍼와 완벽하게 통합되어 매끄러운 개발 경험을 제공한다.20
커뮤니티: Cesium 7, Mapbox 13, OpenLayers 50 모두 활발한 커뮤니티 포럼을 운영하며 개발자들의 질문에 답변하고 있다. MapLibre의 커뮤니티는 오픈소스라는 사명 아래 빠르게 성장하고 있다. Deck.gl은 OpenJS Foundation 산하의 vis.gl 프로젝트의 일부로서, 안정적인 거버넌스와 강력한 커뮤니티 지원을 받고 있다.20
이 파트에서는 정교한 3D 매핑 애플리케이션을 구축하는 데 필요한 핵심 워크플로우에 대한 실용적이고 구체적인 구현 가이드를 제공한다.
3.1. 3D 타일 파이프라인: 원시 데이터에서 글로벌 스트리밍까지
필요성: 왜 타일링이 필수적인가?
수십 기가바이트에 달하는 CityGML, IFC, 또는 포인트 클라우드와 같은 원시 3D 데이터를 웹 브라우저에 직접 로드하는 것은 현실적으로 불가능하다. 브라우저의 메모리 한계와 네트워크 대역폭 제약 때문이다. 3D Tiles 형식은 이 문제를 해결하기 위해 고안되었다. 원시 데이터를 계층적 상세 수준(HLOD) 구조를 가진 작은 타일들로 분할함으로써, 클라이언트는 현재 시점에서 보이는 영역에 필요한 데이터만 스트리밍하여 렌더링할 수 있다. 이는 사용자가 거대한 3D 세계를 원활하게 탐색할 수 있도록 하는 핵심 기술이다.5
구성 요소: 3D Tiles의 구조
3D Tiles 데이터셋은 크게 두 가지 요소로 구성된다. 첫째는 tileset.json 파일로, 전체 타일셋의 구조와 메타데이터를 정의하는 일종의 목차(manifest) 역할을 한다. 둘째는 실제 3D 모델 데이터를 담고 있는 타일 파일 자체다. 초기에는 b3dm(Batched 3D Model), i3dm(Instanced 3D Model), pnts(Point Cloud) 등의 형식이 사용되었으나, 최신 3D Tiles 1.1 사양에서는 렌더링에 최적화된 개방형 표준인 glTF를 기본 타일 형식으로 채택하였다.5
구축 방법: 실용적인 데이터 변환 워크플로우
자체 데이터를 3D Tiles로 변환하는 과정은 여러 단계를 거친다.
좌표계 변환 (Vector Data): Shapefile과 같은 2D 벡터 데이터는 대부분의 글로벌 3D 뷰어가 사용하는 WGS84 (EPSG:4326) 좌표계로 변환해야 한다. 이는 GDAL 라이브러리의 ogr2ogr 커맨드라인 도구를 사용하여 쉽게 수행할 수 있다.53
# SHP 파일을 WGS84 좌표계의 GeoJSON 파일로 변환
ogr2ogr -f "GeoJSON" -t_srs EPSG:4326 output_wgs84.geojson input_source.shp
3D 모델 변환 및 타일링 (3D Models): IFC나 CityGML과 같은 복잡한 3D 모델은 먼저 glTF와 같은 렌더링 친화적인 형식으로 변환한 후 타일링을 진행하는 것이 일반적이다.
py3dtiles 라이브러리나 JavaScript 기반의 citygml-to-3dtiles와 같은 오픈소스 도구를 활용할 수 있다.63서버 아키텍처: 생성된 tileset.json과 타일 파일들은 웹 서버를 통해 클라이언트에 제공되어야 한다. 간단한 프로젝트의 경우 정적 파일 서버로도 충분하지만, 대규모 데이터 처리 및 호스팅을 위해서는 AWS S3와 같은 객체 스토리지와 CDN을 결합하는 것이 효율적이다. 더 나아가, 데이터 변환 파이프라인 전체를 자동화하기 위해 AWS Lambda와 같은 서버리스 컴퓨팅을 활용한 아키텍처를 고려할 수 있다. Cesium ion 플랫폼은 이러한 복잡한 데이터 파이프라인을 관리형 서비스(SaaS) 형태로 제공하여 개발자가 인프라 구축의 부담을 덜 수 있게 해준다.71
결론적으로, 대규모 3D 매핑 프로젝트의 성공은 클라이언트 측 렌더링 라이브러리 선택만큼이나, 견고하고 확장 가능하며 자동화된 데이터 처리 파이프라인을 구축하는 데 달려있다. 이 파이프라인의 결과물을 얼마나 효율적으로 소비할 수 있는지가 라이브러리 선택의 중요한 기준이 되어야 한다.
3.2. 세계에 생명을 불어넣다: CZML을 이용한 시간 기반 동적 시각화
CZML 소개
CZML(Cesium Markup Language)은 시간에 따라 변화하는 동적인 장면을 기술하기 위해 설계된 JSON 기반의 스키마이다. 이는 위치, 방향, 색상, 크기 등 객체의 속성이 시간에 따라 변하는 시나리오를 표현하는 데 최적화되어 있으며, CesiumJS에서 이러한 데이터를 처리하는 네이티브 형식이다.75 항공기나 위성의 궤적, 차량의 이동 경로, 시계열 데이터 시각화 등에 널리 사용된다.
코드 예제: 항공기 비행 경로 추적
다음은 항공기의 비행 경로를 3D 모델과 함께 시각화하는 완전한 CZML 및 JavaScript 예제이다.
CZML 문서는 패킷(packet)들의 배열로 구성되며, 각 패킷은 장면의 한 객체를 정의한다.
},
"orientation": {
"velocityReference": "#position"
},
"model": {
"gltf": "path/to/your/aircraft.gltf",
"scale": 20.0,
"minimumPixelSize": 128
},
"path": {
"material": {
"solidColor": {
"color": {
"rgba":
}
}
},
"width": 3,
"trailTime": 120,
"leadTime": 0
}
}
]
document 패킷: 전체 장면에 대한 시간 설정(시작/종료 시간, 현재 시간, 재생 속도)을 정의한다.Vehicle 패킷: 항공기 객체를 정의한다.
availability: 객체가 존재하는 시간 범위를 지정한다.position: cartographicDegrees 속성을 사용하여 [시간_오프셋(초), 경도, 위도, 고도,...] 형식으로 시간에 따른 위치를 정의한다. epoch는 시간 오프셋의 기준 시간을 설정한다.orientation: velocityReference 속성을 #position으로 설정하면, Cesium이 위치 데이터의 속도 벡터를 기반으로 모델의 방향을 자동으로 계산하여 비행 방향을 바라보게 한다.model: 항공기를 표현할 3D 모델(glTF 형식)과 크기 등을 지정한다.path: 항공기가 지나온 경로를 시각적으로 표시한다. trailTime은 과거 경로를 얼마나 오랫동안 보여줄지를 초 단위로 설정한다.JavaScript 코드는 위에서 정의한 CZML 파일을 로드하고 뷰어를 설정한다.
// Cesium ion 토큰 설정 (필요 시)
// Cesium.Ion.defaultAccessToken = 'YOUR_CESIUM_ION_TOKEN';
const viewer = new Cesium.Viewer('cesiumContainer', {
shouldAnimate: true, // 애니메이션 자동 재생 활성화
});
// CZML 데이터 소스 로드
const czmlDataSource = Cesium.CzmlDataSource.load('path/to/flight.czml');
viewer.dataSources.add(czmlDataSource).then(dataSource => {
// 데이터 로드가 완료되면 항공기 객체를 찾아서 카메라로 추적
const vehicleEntity = dataSource.entities.getById('Vehicle');
if (vehicleEntity) {
viewer.trackedEntity = vehicleEntity;
}
});
이 예제는 43의 개념들을 종합하여 구성되었다. 이처럼 CZML을 활용하면 복잡한 시간 기반 시나리오도 선언적인 방식으로 쉽게 구현할 수 있다.
3.3. 3D 데이터와의 상호작용: 피킹과 하이라이팅
과제: 특정 객체 식별하기
수백만 개의 건물이나 수십억 개의 포인트로 구성된 대규모 3D 타일셋에서 사용자가 마우스로 클릭한 특정 객체를 식별하고 상호작용하는 것은 중요한 기능이다.
CesiumJS의 피킹(Picking) 메커니즘
원리: CesiumJS는 scene.pick(movement.endPosition) 함수를 통해 마우스 커서 위치에 있는 객체를 식별한다. 이 함수는 렌더링된 객체의 정보를 담은 객체를 반환하며, 3D 타일셋의 경우 이는 Cesium3DTileFeature 또는 Cesium3DTilePointFeature 객체가 된다.77
속성 정보 접근: 반환된 feature 객체의 getProperty('propertyName') 메서드를 호출하여 해당 객체가 가지고 있는 메타데이터(예: 건물 ID, 높이, 주소 등)에 접근할 수 있다. 이 메타데이터는 3D 타일의 배치 테이블(Batch Table)에 저장되어 있다.77
하이라이팅: feature.color = Cesium.Color.YELLOW;와 같이 color 속성을 직접 변경하여 선택된 객체를 시각적으로 강조할 수 있다.
코드 예제 (React/Resium): 다음은 Resium을 사용하여 3D 타일셋에서 특정 건물을 클릭했을 때 색상을 변경하는 예제이다.
import React, { useRef, useCallback } from "react";
import { Viewer, Cesium3DTileset, ScreenSpaceEventHandler, ScreenSpaceEvent } from "resium";
import { Cesium3DTileFeature, Color } from "cesium";
function TilesetInteraction() {
const highlightedRef = useRef({ feature: undefined, originalColor: new Color() });
const handleClick = useCallback((movement) => {
const { feature: pickedFeature } = viewer.scene.pick(movement.position);
// 이전에 하이라이트된 피처의 색상을 원래대로 복원
const { feature: highlightedFeature, originalColor } = highlightedRef.current;
if (highlightedFeature instanceof Cesium3DTileFeature) {
highlightedFeature.color = originalColor;
}
// 새로 선택된 피처를 하이라이트
if (pickedFeature instanceof Cesium3DTileFeature) {
highlightedRef.current = {
feature: pickedFeature,
originalColor: Color.clone(pickedFeature.color)
};
pickedFeature.color = Color.YELLOW;
// 속성 정보 출력
const propertyNames = pickedFeature.getPropertyIds();
console.log("Picked Feature Properties:");
propertyNames.forEach(name => {
console.log(`${name}: ${pickedFeature.getProperty(name)}`);
});
}
},);
return (
<ScreenSpaceEventHandler>
<ScreenSpaceEvent action={handleClick} type={Cesium.ScreenSpaceEventType.LEFT_CLICK} />
</ScreenSpaceEventHandler>
);
}
function App() {
return (
<Viewer full>
<Cesium3DTileset url={/* 3D Tileset URL */} />
<TilesetInteraction />
</Viewer>
);
}
이 코드는 77와 151의 개념을 기반으로 작성되었다.
Deck.gl의 하이라이팅 메커니즘
pickable: true와 autoHighlight: true를 설정하는 것만으로 자동 하이라이팅 기능이 활성화된다. 하이라이트 색상은 highlightColor 속성으로 쉽게 변경할 수 있다.823.4. 데이터 보안: 인증 및 접근 제어
문제 상황: 무단 접근 및 스크래핑 방지
독점적인 3D Tiles 데이터나 기타 민감한 지리 공간 데이터를 웹으로 스트리밍할 때, 허가되지 않은 사용자의 접근을 막고 대규모 데이터 스크래핑을 방지하는 것은 매우 중요한 과제이다.
토큰 기반 인증 (Token-Based Authentication)
가장 표준적인 접근 방식은 토큰 기반 인증이다. 클라이언트는 서버에 데이터를 요청할 때 유효한 토큰을 함께 제시해야 하며, 서버는 이 토큰을 검증한 후에만 데이터를 전송한다.
스크래핑 방지 기술
완벽한 방어는 어렵지만, 다음과 같은 기술들을 조합하여 대규모 자동 스크래핑을 효과적으로 억제할 수 있다.
데이터 스트림의 보안은 프로젝트 후반에 추가할 수 있는 기능이 아니라, 데이터 호스팅 및 전송 아키텍처를 설계하는 초기 단계부터 반드시 고려해야 할 핵심 요소이다. Cesium ion과 같은 관리형 플랫폼을 사용하면 이러한 복잡성의 상당 부분을 위임할 수 있지만, 자체 호스팅 솔루션을 선택할 경우 전담 보안 구현이 필수적이다.
이 마지막 파트에서는 앞선 분석 내용을 종합하여 실제 적용 가능한 아키텍처 청사진을 제시하고, 해당 분야의 미래를 형성할 신기술 동향을 조망한다.
4.1. 주요 사용 사례별 아키텍처 청사진
이 섹션은 중립적인 비교를 넘어, 명확하고 전문적인 의견을 바탕으로 다양한 프로젝트 유형에 맞는 구체적인 기술 스택을 추천한다.
청사진 A: 고충실도 디지털 트윈 (스마트 시티, 국방, 부동산)
청사진 B: 데이터 집약적 분석 대시보드 (물류, 기상, 통신)
청사진 C: 3D 뷰를 갖춘 전통적 GIS (자산 관리, 환경 계획)
권장 기술: OpenLayers + ol-cesium 라이브러리
근거: 이러한 프로젝트들은 대부분 2D 지도를 중심으로 하며, WMS, WFS와 같은 다양한 기존 GIS 데이터 소스 및 OGC 표준과의 통합이 매우 중요하다.15 OpenLayers는 이 분야에서 가장 강력하고 성숙한 라이브러리다.
ol-cesium 라이브러리를 사용하면, 기존의 2D 중심 아키텍처를 크게 변경하지 않으면서도 강력한 Cesium 기반의 3D 뷰를 저비용으로 추가할 수 있다. 2D와 3D 모드 간의 부드러운 전환과 데이터 레이어 동기화 기능은 기존 2D GIS 애플리케이션을 3D로 확장하는 가장 실용적인 경로를 제공한다.16
4.2. 프로덕션급 지리 공간 파이프라인 구축 (CI/CD & MLOps)
지리 공간 애플리케이션을 위한 CI/CD
git push), 파이프라인이 자동으로 코드 린팅, 단위 테스트, 애플리케이션 빌드를 수행하고, 테스트가 통과하면 스테이징 환경에 자동으로 배포한다.데이터를 위한 CI/CD (지리 공간의 특수성)
지리 공간 딥러닝을 위한 MLOps
지리 공간 분석에 AI/ML이 깊숙이 통합됨에 따라, 전통적인 ETL 파이프라인은 완전한 MLOps 워크플로우로 진화할 것이다. 이는 단순히 데이터를 처리하는 것을 넘어, 데이터를 생성하고 분석하는 모델 자체의 전체 수명 주기를 관리하는 패러다임의 전환을 요구한다.
4.3. 새로운 지평: 신기술과 미래 전망
| 3D Geospatial Data Analysis with Open Source Tools | by Abhinav Bhaskar - Medium, accessed July 5, 2025, https://medium.com/@animagun/3d-geospatial-data-analysis-with-open-source-tools-e024654c766e |
| 3D Tiles Standard | OGC Publications, accessed July 5, 2025, https://www.ogc.org/standards/3dtiles/ |
| Mapbox GL JS | Mapbox - Mapbox Documentation, accessed July 5, 2025, https://docs.mapbox.com/mapbox-gl-js/guides/ |
| Ol-Cesium | OpenLayers - Cesium integration library, accessed July 5, 2025, https://openlayers.org/ol-cesium/ |
| 2023 | State of the OL-Cesium library - Guillaume Beraudo - YouTube, accessed July 5, 2025, https://www.youtube.com/watch?v=0PZ-IqdWRtU |
| Home | deck.gl, accessed July 5, 2025, https://deck.gl/ |
| 국토교통부_3D모바일 API | 공공데이터포털, accessed July 5, 2025, https://www.data.go.kr/data/15140370/openapi.do?recommendDataYn=Y |
| 국토교통부_웹지엘 3D 지도 API | 공공데이터포털, accessed July 5, 2025, https://www.data.go.kr/data/3073144/openapi.do?recommendDataYn=Y |
| Examples | Mapbox GL JS, accessed July 5, 2025, https://docs.mapbox.com/mapbox-gl-js/example/ |
| Showcase | deck.gl, accessed July 5, 2025, https://deck.gl/showcase |
| Guide | Resium - Re:Earth, accessed July 5, 2025, https://resium.reearth.io/guide |
| Installation | Resium - Re:Earth, accessed July 5, 2025, https://resium.reearth.io/installation |
| Plugins and frameworks | Mapbox GL JS, accessed July 5, 2025, https://docs.mapbox.com/mapbox-gl-js/plugins/ |
| Serverless Architecture: What It Is & How It Works | Datadog, accessed July 5, 2025, https://www.datadoghq.com/knowledge-center/serverless-architecture/ |
| Picking | deck.gl, accessed July 5, 2025, https://deck.gl/docs/developer-guide/custom-layers/picking |
| Automatic, GPU-based object highlighting in deck.gl Layers | by Ravi Akkenapally - Medium, accessed July 5, 2025, https://medium.com/vis-gl/automatic-gpu-based-object-highlighting-in-deck-gl-layers-7fe3def44c89 |
| Photorealistic 3D Tiles | Google Maps Tile API - Google for Developers, accessed July 5, 2025, https://developers.google.com/maps/documentation/tile/3d-tiles |
| Using container images to run PyTorch models in AWS Lambda | Artificial Intelligence, accessed July 5, 2025, https://aws.amazon.com/blogs/machine-learning/using-container-images-to-run-pytorch-models-in-aws-lambda/ |
| Understanding CRDTs and Their Role in Distributed Systems | TiDB, accessed July 5, 2025, https://www.pingcap.com/article/understanding-crdts-and-their-role-in-distributed-systems/ |