웹에서의 수치지도 표현 및 상호작용
지리 정보 시스템(Geographic Information System, GIS)은 지리적 위치에 기반한 데이터를 수집, 관리, 분석 및 시각화하는 통합된 프레임워크를 지칭한다.1 GIS의 본질은 단순히 지도를 제작하는 행위를 넘어, 공간적 패턴, 관계, 그리고 맥락을 이해함으로써 과학적 탐구와 합리적 의사결정을 지원하는 데 있다. 이 기술은 오늘날 소매업의 최적 입지 선정, 물류 시스템의 경로 최적화부터 정부 기관의 긴급 재난 대응, 기후 변화 모델링에 이르기까지 사실상 모든 산업 분야에 깊숙이 통합되어 있다.1 GIS는 공간적 과업을 해결하기 위한 일련의 도구가 담긴 ‘도구상자(toolbox)’로 비유될 수 있으며, 이를 통해 사용자는 복잡한 세상의 데이터를 해석하고 숨겨진 통찰을 발견한다.1
공간 분석의 역사는 19세기로 거슬러 올라간다. 1854년 영국의 의사 존 스노우(John Snow)가 런던의 콜레라 발병 지역과 오염된 우물의 위치를 지도에 표시하여 수인성 전파 경로를 밝혀낸 사례는 공간 분석의 효시로 꼽힌다.3 그러나 현대적 의미의 GIS는 1960년대 컴퓨터 기술의 발전과 함께 본격적으로 태동했다. 캐나다에서 국토 자원 관리를 위해 처음 개발된 이후, Esri와 같은 선구적인 기업들의 등장과 1970년대 더 빠르고 저렴해진 컴퓨터의 보급, 그리고 위성 및 원격 탐사 기술의 발전은 GIS 기술의 확산을 가속화했다.3
전통적인 데스크톱 GIS 환경은 강력한 분석 기능을 제공했지만, 몇 가지 본질적인 한계를 내포하고 있었다. 고가의 소프트웨어, 전문적인 지식을 갖춘 인력, 그리고 방대한 데이터의 초기 구축 비용은 GIS 기술의 접근성을 제한하는 높은 장벽으로 작용했다.4 또한, 분석 결과물인 지도는 대부분 정적인 형태로 공유되어 협업과 실시간 정보 반영에 어려움이 있었다. 이러한 한계는 인터넷 기술의 발전과 함께 새로운 패러다임의 등장을 촉발시켰다.
웹 GIS(Web GIS)는 이러한 데스크톱 GIS의 한계를 극복하기 위해 등장한 개념으로, 인터넷을 통해 공간 데이터를 교환, 분석, 처리할 수 있는 시스템을 의미한다.6 웹 GIS는 기존의 GIS 기능들을 클라이언트-서버 아키텍처 모델로 이전시켜, 사용자가 특별한 소프트웨어 설치 없이 웹 브라우저만으로 지리 정보에 접근하고 상호작용할 수 있도록 한다.5 이로써 GIS는 소수의 전문가를 위한 폐쇄적인 도구에서 누구나 쉽게 접근하고 활용할 수 있는 개방적이고 민주적인 플랫폼으로 진화했다.
이러한 패러다임 전환의 핵심은 기술적 이전을 넘어선 개념적 변화에 있다. 전통적인 GIS가 특정 프로젝트를 위해 데이터를 수집, 분석하여 정적인 지도라는 ‘산출물(product)’을 생성하는 데 중점을 두었다면, 웹 GIS는 지속적이고 상호작용이 가능한 데이터 접근성을 ‘서비스(service)’ 형태로 제공하는 데 초점을 맞춘다. 이는 소프트웨어 산업 전반의 데스크톱 애플리케이션에서 서비스형 소프트웨어(SaaS)로의 전환과 궤를 같이한다. “웹 매핑(Web Mapping)”이 주로 사용자에게 보이는 지도의 표현과 상호작용에 집중하는 용어라면, “웹 GIS”는 데이터 저장, 서버 측 처리, 아키텍처를 포함한 전체 시스템을 포괄하는 더 넓은 개념이다.8
결론적으로 웹 GIS의 핵심 가치는 향상된 접근성, 확장성, 협업, 그리고 개방형 표준을 통한 상호운용성에 있다.7 이 패러다임의 전환은 지리 정보를 단순한 분석 대상에서 실시간으로 공유되고 소비되는 동적인 자원으로 변모시켰으며, 이는 현대 위치 기반 서비스와 디지털 경제의 근간을 이루는 핵심적인 변화라 할 수 있다.1
현실 세계의 복잡한 지리적 현상을 디지털 환경에서 표현하기 위해, GIS는 두 가지 핵심적인 데이터 모델, 즉 벡터(Vector)와 래스터(Raster) 모델을 사용한다.4 이 두 모델은 세상을 추상화하는 근본적으로 다른 방식을 제시하며, 이는 데이터의 저장, 분석, 시각화 방식 전반에 영향을 미친다. 어떤 모델을 선택하는가는 단순히 기술적인 문제가 아니라, 표현하고자 하는 현상의 본질과 분석 목적에 따라 결정되는 근본적인 모델링의 문제이다.
벡터 데이터 모델은 세상을 명확한 경계를 가진 이산적인 객체(discrete objects)의 집합으로 간주한다. 이러한 객체들은 기하학적 원시 요소(primitive)인 점, 선, 면을 사용하여 표현된다.3
- 점 (Point): 하나의 x,y 좌표 쌍으로 정의되며, 크기를 갖지 않는 특정 위치를 나타낸다. 도시, 나무, 센서 위치, 교통 표지판 등 개별적인 지점을 표현하는 데 사용된다.3
- 선 (Line 또는 Polyline/LineString): 두 개 이상의 점(정점, vertex)을 연결한 순서열로, 도로, 강, 파이프라인, 등고선과 같은 선형(linear) 객체를 표현한다.3
- 면 (Polygon): 셋 이상의 선으로 둘러싸인 닫힌 공간으로, 면적을 가진 객체를 나타낸다. 건물, 공원, 호수, 행정 구역 등이 이에 해당한다.3
벡터 모델의 가장 큰 강점은 각 기하학적 객체에 풍부한 속성 데이터(attribute data)를 연결할 수 있다는 점이다.4 속성 데이터는 이름, 인구, 면적, 주소 등 객체를 설명하는 부가 정보로, 일반적으로 관계형 데이터베이스 테이블 형태로 저장된다. 이처럼 기하 정보와 속성 정보의 강력한 결합은 “이 공원의 이름은 무엇인가?” 또는 “인구 100만 이상의 모든 도시를 찾아라”와 같은 복잡한 공간 질의(spatial query)와 분석을 가능하게 하는 기반이 된다.
또한 벡터 모델은 3차원으로 확장이 가능하다. 대표적인 예로 삼각 불규칙망(Triangulated Irregular Network, TIN)이 있으며, 이는 x,y,z 좌표를 가진 점들을 불규칙한 삼각형 네트워크로 연결하여 지형이나 해저면과 같은 연속적인 표면을 효율적으로 모델링하는 데 사용된다.4
벡터 모델과 대조적으로, 래스터 데이터 모델은 세상을 연속적인 표면(continuous surface)으로 간주한다. 이 모델은 공간을 일정한 크기의 격자(grid) 셀, 즉 픽셀(pixel)의 배열로 나누고 각 셀에 특정 속성 값을 할당하여 데이터를 표현한다.4
래스터 모델은 위성 이미지, 항공 사진, 디지털 고도 모델(DEM), 기상 데이터(온도, 강수량 분포)와 같이 공간적으로 연속성을 가지며 점진적으로 변화하는 현상을 표현하는 데 매우 적합하다.3 각 픽셀 값은 해당 위치의 고도, 온도, 반사율 또는 특정 색상 값을 나타낼 수 있다. 이러한 구조는 이미지 처리나 표면 분석(예: 경사도, 향 분석)에 강점을 보인다.
실제 웹 지도 애플리케이션은 단일 데이터 모델만으로 구성되지 않는다. 일반적으로 여러 종류의 데이터를 ‘레이어(layer)’라는 개념을 통해 중첩하여 사용한다.10 레이어는 특정 주제(예: 도로망, 건물, 녹지)에 따라 분류된 데이터의 집합이다. 예를 들어, 사용자가 보는 하나의 지도 화면은 위성사진 래스터 레이어 위에 행정구역 폴리곤 레이어, 그 위에 도로 라인 레이어, 그리고 마지막으로 주요 지점 포인트 레이어가 순서대로 겹쳐져 렌더링된 결과물이다.4 이처럼 데이터를 논리적인 레이어로 분리하고 조직화하는 방식은 복잡한 지리 정보를 체계적으로 관리하고, 다양한 데이터셋을 결합하여 다각적인 분석과 시각화를 수행하는 GIS의 핵심적인 작동 원리이다.
웹 환경에서 벡터 데이터를 효율적으로 교환하고 표현하기 위해 여러 표준 포맷이 개발되었다. 이들은 각각 다른 구조적 특징과 장단점을 가지며, 애플리케이션의 목적에 따라 선택적으로 사용된다. 개발자와 아키텍트는 포맷 선택이 애플리케이션의 성능, 개발 편의성, 그리고 기능적 풍부함에 미치는 영향을 이해해야 한다. 이 섹션에서는 가장 대표적인 세 가지 포맷인 GeoJSON, TopoJSON, KML을 비교 분석한다.
GeoJSON은 다양한 지리 데이터 구조를 인코딩하기 위한 개방형 표준 포맷으로, 웹 개발자에게 친숙한 JSON(JavaScript Object Notation)을 기반으로 한다.12 그 구조는 단순하고 직관적이며 사람이 직접 읽고 수정하기 용이하여 웹 환경에서 폭넓은 인기를 얻고 있다.12 GeoJSON은 Feature와 FeatureCollection이라는 핵심 객체를 통해 지리적 형상(geometry: Point, LineString, Polygon 등)과 비공간적 속성(properties)을 함께 표현한다.13
이러한 단순성과 자바스크립트와의 높은 호환성 덕분에, GeoJSON은 웹 매핑 라이브러리에서 데이터를 오버레이하거나 API를 통해 공간 데이터를 교환하는 데 가장 보편적으로 사용되는 포맷이다. 예를 들어, Leaflet과 같은 라이브러리는 GeoJSON 데이터를 지도에 추가하고, 각 피처의 속성 정보를 이용해 팝업을 표시하는 기능을 손쉽게 구현할 수 있도록 지원한다.13 그러나 GeoJSON은 인접한 폴리곤의 공통 경계선과 같이 중복되는 좌표 정보를 그대로 저장하기 때문에 파일 크기가 커질 수 있다는 단점이 있다.
TopoJSON은 GeoJSON의 확장 포맷으로, 단순한 기하학적 형상이 아닌 위상(topology)을 인코딩하는 데 중점을 둔다.12 이 포맷의 핵심 아이디어는 중복을 제거하여 파일 크기를 획기적으로 줄이는 것이다. 예를 들어, 두 국가가 맞대고 있는 국경선은 개별 국가의 폴리곤에 각각 저장되는 대신, ‘아크(arc)’라는 공유 선분으로 단 한 번만 저장된다. 그리고 각 국가 폴리곤은 이 공통 아크를 참조하는 방식으로 표현된다.15
이러한 위상적 구조화와 더불어, 좌표를 부동소수점 대신 정수로 변환하고 양자화된 델타 인코딩(quantized delta-encoding)을 적용함으로써 TopoJSON은 원본 GeoJSON 대비 80% 이상의 파일 크기 감소 효과를 보이는 경우가 많다.15 이는 대용량의 복잡한 폴리곤 데이터를 웹으로 전송해야 하는 경우(예: 전 세계 국가 경계, 행정구역도)에 막대한 성능 이점을 제공한다.16 하지만 이러한 효율성은 복잡성이라는 대가를 수반한다. TopoJSON은 클라이언트 측에서 렌더링하기 전에 일반적으로 전용 라이브러리를 통해 다시 GeoJSON 형태로 디코딩하는 과정이 필요하다.16
KML은 본래 구글 어스(Google Earth)에서 지리 정보를 표현하기 위해 개발된 XML 기반의 마크업 언어이다.19 현재는 OGC(Open Geospatial Consortium)의 공식 표준으로 채택되어 널리 사용되고 있다.20 KML의 가장 큰 특징은 단순한 데이터 표현을 넘어 풍부한 시각화와 주석(annotation) 기능을 제공한다는 점이다.
KML 문서는 Placemark(지점), Polygon(폴리곤), Path(경로), 3D 모델과 같은 지리적 객체뿐만 아니라, 해당 객체의 스타일(아이콘, 색상, 두께), 카메라 시점(뷰), 그리고 팝업 창에 표시될 HTML 콘텐츠까지 상세하게 정의할 수 있다.19 KML 파일은 종종 관련 이미지, 아이콘, 3D 모델 등의 자산을 함께 압축한 .kmz 파일 형태로 배포된다.20
KML은 구글 어스와 같은 플랫폼에서 데이터를 시각적으로 표현하고 공유하는 데 매우 강력한 도구이다.22 그러나 주된 목적이 시각화에 있기 때문에, 대규모 속성 데이터를 체계적으로 관리하거나 복잡한 공간 분석을 수행하는 데는 한계가 있다.21
다음 표는 세 가지 주요 벡터 데이터 포맷의 핵심적인 특징을 비교하여 애플리케이션의 요구사항에 가장 적합한 포맷을 선택하는 데 도움을 준다.
표 3: 웹 벡터 데이터 포맷 비교
| 포맷 |
기본 구조 |
핵심 장점 |
핵심 단점 |
주요 사용 사례 |
| GeoJSON |
JSON |
단순성, 가독성, 자바스크립트 환경과의 높은 호환성 |
데이터 중복으로 인한 파일 크기 증가 |
일반적인 웹 매핑, API를 통한 데이터 교환, 동적 데이터 오버레이 |
| TopoJSON |
JSON (위상 구조) |
위상 인코딩을 통한 높은 압축률 및 파일 크기 감소 |
클라이언트 측 디코딩 필요, 상대적으로 높은 복잡도 |
행정구역도, 등치지역도(Choropleth map) 등 인접 폴리곤 데이터 전송 |
| KML |
XML |
풍부한 시각화 및 스타일링, 3D 객체 및 카메라 뷰 정의 |
장황한 구조, 제한적인 속성 데이터 및 분석 기능 지원 |
구글 어스 데이터 공유, 간단한 지도 주석 및 시각적 프레젠테이션 |
웹 GIS의 핵심은 분산된 데이터와 기능을 네트워크를 통해 서비스로 제공하는 클라이언트-서버 아키텍처에 있다. 이러한 서비스가 서로 다른 시스템과 애플리케이션 간에 원활하게 통신하기 위해서는 표준화된 규약, 즉 프로토콜이 필수적이다. 이 장에서는 웹 GIS의 근간을 이루는 OGC(Open Geospatial Consortium)의 웹 서비스 표준들을 살펴보고, 성능 향상을 위해 등장한 타일링 기술, 그리고 최신 웹 개발 패러다임을 반영한 OGC API의 등장 배경과 특징을 심층적으로 분석한다.
OGC는 지리공간 정보 기술의 상호운용성을 증진시키기 위한 국제 표준화 기구이다.24 OGC의 목표는 서로 다른 벤더가 개발한 GIS 컴포넌트들이 표준 인터페이스를 통해 마치 ‘플러그 앤 플레이’처럼 연동될 수 있는 환경을 구축하는 것이다.25 2000년대 초반에 정립된 고전적인 OGC 웹 서비스(OWS) 스위트는 서비스 지향 아키텍처(SOA)에 기반하며, 주로 XML과 SOAP(Simple Object Access Protocol)을 사용하여 통신한다.27 이는 데스크톱 GIS의 핵심 기능들을 네트워크를 통해 접근 가능한 개별 서비스로 분해한 것으로, 웹 기반의 분산형 GIS 시스템을 구축하는 표준적인 방법을 제시했다.
WMS는 지리적으로 참조된 지도 이미지를 생성하여 제공하는 서비스이다.28 클라이언트는 특정 좌표 범위(bounding box), 레이어, 스타일 등을 지정하여 서버에 지도를 요청하고, 서버는 해당 조건에 맞게 지도를 렌더링하여 PNG, JPEG 같은 이미지 파일 형태로 응답한다. WMS의 핵심적인 연산(Operation)은 다음과 같다 28:
GetCapabilities: 서비스가 제공하는 레이어, 스타일, 좌표계 등 메타데이터 정보를 XML 문서로 제공한다.
GetMap: 명시된 파라미터에 따라 실제 지도 이미지를 요청한다.
GetFeatureInfo (선택 사항): 지도 이미지의 특정 픽셀 좌표를 클릭했을 때, 해당 위치에 있는 피처(feature)의 속성 정보를 조회하는 기능을 제공한다.
WMS는 클라이언트 측에서 복잡한 렌더링 없이 지도를 빠르게 시각화할 수 있고, 원본 데이터를 노출하지 않아 보안에 유리하다는 장점이 있다.28 따라서 주로 배경 지도나 정적인 주제도를 시각화하는 데 사용된다.29
WFS는 이미지 대신 원시 벡터 데이터 자체를 제공하는 서비스이다.28 클라이언트는 WFS를 통해 서버에 저장된 피처의 기하 정보(geometry)와 속성 정보를 GML(Geography Markup Language)이나 GeoJSON과 같은 벡터 형식으로 직접 요청하고 수신할 수 있다. 주요 연산은 다음과 같다 28:
GetCapabilities: 서비스의 기능과 제공 범위를 조회한다.
DescribeFeatureType: 특정 데이터의 스키마(구조)를 조회한다.
GetFeature: 지정된 조건(공간 필터, 속성 필터 등)에 맞는 공간 데이터를 반환한다.
Transaction (WFS-T): WFS의 트랜잭션 프로파일로, 피처의 생성(Create), 수정(Update), 삭제(Delete)를 지원한다.31
WFS는 클라이언트가 데이터를 직접 다룰 수 있게 하므로, 동적인 스타일 변경, 공간 분석, 데이터 편집 등 고도의 상호작용이 필요한 애플리케이션에 필수적이다.28 하지만 원본 데이터를 전송하므로 WMS에 비해 데이터 전송량이 많고, 클라이언트 측의 처리 부담이 커서 성능 저하가 발생할 수 있다.33
이 WMS와 WFS의 근본적인 차이는 렌더링의 주체가 누구인가에 있다. WMS는 서버가 모든 렌더링을 수행하고 결과물인 이미지만을 클라이언트에 전달하는 서버 측 렌더링(Server-Side Rendering) 방식이다. 이는 클라이언트의 부담을 최소화하는 ‘씬 클라이언트(thin client)’ 모델에 해당한다. 반면, WFS는 서버가 원시 데이터를 전달하면 클라이언트가 직접 데이터를 해석하고 렌더링하는 클라이언트 측 렌더링(Client-Side Rendering) 방식이다. 이는 클라이언트에 더 많은 기능과 유연성을 부여하는 ‘씩 클라이언트(thick client)’ 모델에 해당한다. 이러한 아키텍처 선택은 애플리케이션의 요구사항과 당시의 기술적 제약을 반영한 결과이며, 웹 기술의 발전에 따라 그 무게중심이 변화해왔다.
WCS는 래스터 데이터의 원본 셀 값을 제공하는 서비스이다.24 WMS가 래스터 데이터를 시각적인 이미지로 반환하는 것과 달리, WCS는 특정 지역의 고도, 온도, 강우량 등 실제 데이터 값을 GeoTIFF와 같은 형식으로 반환한다.29 이는 과학적 분석이나 모델링과 같이 시각화 이상의 데이터 처리가 필요한 애플리케이션에서 사용되며, 데이터의 일부를 추출(subsetting)하거나 리샘플링(resampling), 재투영(reprojection)하는 기능을 지원한다.24
WMTS는 사전에 정의된 축척 레벨에 따라 미리 렌더링된 지도 타일(tile)을 제공하기 위한 OGC 표준이다.11 동적으로 지도를 생성하는 WMS와 달리, WMTS는 캐시된 타일을 제공하므로 매우 빠른 응답 속도를 자랑한다.36 이는 구글맵이나 오픈스트리트맵과 같은 대규모 웹 지도 서비스에서 사용하는 타일링 방식을 표준화한 것으로, 고성능 배경 지도 서비스의 핵심 기술이다.37
WPS는 버퍼링, 오버레이 분석 등 서버 측에 구현된 지리공간 처리 및 분석 기능을 웹 서비스 형태로 호출할 수 있는 표준 인터페이스를 제공한다.24 클라이언트는 분석에 필요한 데이터를 WPS 서버로 전송하고, 서버는 지정된 연산을 수행한 후 그 결과를 반환한다. 이를 통해 클라이언트가 직접 복잡한 분석 알고리즘을 구현하거나 대용량 데이터를 다운로드할 필요 없이 강력한 공간 분석 기능을 활용할 수 있다.24
아래 표는 고전적 OGC 웹 서비스들의 역할과 특징을 명확히 구분하여 보여준다. 이는 각 서비스의 목적을 이해하고 아키텍처 설계 시 올바른 기술을 선택하는 데 중요한 기준을 제공한다.
표 1: OGC 웹 서비스 비교 분석
| 서비스 |
약어 |
주요 기능 |
데이터 유형 |
핵심 연산 |
| 웹 맵 서비스 |
WMS |
지도 이미지 제공 |
래스터 이미지 (PNG, JPEG 등) |
GetMap, GetFeatureInfo |
| 웹 피처 서비스 |
WFS |
벡터 피처 데이터 제공 및 편집 |
벡터 (GML, GeoJSON 등) |
GetFeature, Transaction (WFS-T) |
| 웹 커버리지 서비스 |
WCS |
원시 래스터(커버리지) 데이터 제공 |
래스터 (GeoTIFF 등) |
GetCoverage |
| 웹 맵 타일 서비스 |
WMTS |
사전 렌더링된 지도 타일 제공 |
래스터 이미지 (PNG, JPEG 등) |
GetTile |
| 웹 프로세싱 서비스 |
WPS |
지리공간 처리 및 분석 기능 제공 |
모든 유형 |
Execute, DescribeProcess |
WMS와 같은 동적 서비스는 유연하지만 사용자의 모든 요청에 대해 실시간으로 지도를 렌더링해야 하므로 서버 부하가 크고 응답 속도가 느려질 수 있다. WFS는 대용량 벡터 데이터를 클라이언트로 전송해야 하므로 네트워크 대역폭과 클라이언트 처리 능력에 부담을 준다.33 이러한 성능 문제를 해결하기 위해 등장한 핵심 기술이 바로 ‘타일링(tiling)’이다. 타일링은 전체 지도 데이터를 미리 여러 축척 레벨(zoom level)에 맞춰 작은 정사각형 조각(tile)으로 분할하여 저장해두는 방식이다.10
래스터 타일링은 지도 데이터를 미리 렌더링하여 256x256 픽셀 크기의 이미지 타일들로 구성된 피라미드 구조의 캐시를 생성하는 방식이다.10 클라이언트는 현재 화면에 필요한 타일의 좌표(x, y, z)를 계산하여 서버에 해당 정적 이미지 파일들을 직접 요청한다.38 서버는 복잡한 렌더링 과정 없이 단순히 저장된 파일을 전송하기만 하면 되므로, 응답 속도가 획기적으로 향상된다.36 이 방식은 구글 맵스, 오픈스트리트맵(OSM) 등 현대 웹 매핑의 표준으로 자리 잡았으며, WMTS나 TMS(Tile Map Service)와 같은 표준 프로토콜을 통해 서비스된다.11
하지만 래스터 타일은 명백한 한계를 가진다. 스타일이 서버에서 렌더링될 때 이미지에 ‘구워지기(baked-in)’ 때문에, 클라이언트에서 지도의 색상이나 라벨을 동적으로 변경하는 것이 불가능하다. 스타일을 바꾸려면 서버에서 모든 타일을 다시 생성하고 캐시해야 한다. 또한, 고해상도 디스플레이에서는 이미지가 흐릿하게 보일 수 있으며, 지도 회전이나 기울이기 같은 부드러운 상호작용이 제한된다.
벡터 타일은 래스터 타일의 성능 이점과 벡터 데이터의 유연성을 결합한 차세대 기술이다. 이 방식은 이미지 조각 대신, 특정 영역에 포함된 벡터 데이터(점, 선, 면)를 미리 잘라내어 고도로 압축된 형식(예: Mapbox Vector Tiles, MVT)의 타일로 제공한다.39
클라이언트의 웹 브라우저는 이 벡터 타일들을 수신한 뒤, WebGL과 같은 그래픽 기술을 사용하여 실시간으로 지도를 렌더링한다.39 이 클라이언트 측 렌더링 방식은 다음과 같은 혁신적인 장점들을 제공한다 40:
- 동적 스타일링: 렌더링이 클라이언트에서 일어나므로, 서버에 새로운 데이터를 요청하지 않고도 지도 스타일(색상, 폰트, 레이어 가시성 등)을 즉시 변경할 수 있다. 단일 벡터 타일셋으로 다크 모드, 라이트 모드 등 다양한 지도 디자인을 제공하는 것이 가능하다.
- 부드러운 상호작용: 확대/축소 시 정수 단위의 줌 레벨에 얽매이지 않고 부드럽고 연속적인 줌이 가능하며, 지도의 자유로운 회전과 기울이기도 지원한다.
- 고해상도 렌더링: 벡터 그래픽은 어떤 해상도에서도 선명하게 렌더링되므로, 레티나(Retina) 디스플레이와 같은 고밀도 화면에서 뛰어난 시각적 품질을 제공한다.
- 효율적인 데이터 전송: 벡터 타일은 일반적으로 동일한 지역의 래스터 타일보다 파일 크기가 훨씬 작아 네트워크 대역폭을 절약하고 로딩 속도를 단축시킨다.
- 피처 정보 접근: 타일 내에 피처의 속성 정보가 포함되어 있어, 팝업 표시나 하이라이트 같은 상호작용을 클라이언트 단에서 효율적으로 구현할 수 있다.
웹 매핑 기술의 발전 과정을 보면, 하나의 아키텍처적 흐름을 발견할 수 있다. 초기의 동적 WMS는 유연했지만 느렸다(Thesis). 이에 대한 해결책으로 등장한 래스터 타일은 빨랐지만 경직되었다(Antithesis). 그리고 최종적으로 벡터 타일은 래스터 타일의 빠른 전송 방식과 벡터 데이터의 유연성을 결합하여 속도와 유연성을 모두 달성한 기술적 종합(Synthesis)이라고 할 수 있다. 이는 렌더링의 주체를 서버(WMS, 래스터 타일)에서 다시 클라이언트로 옮겨오되, WebGL과 MVT 같은 현대 기술을 통해 과거의 한계를 극복한 결과이다.
OWS 표준들은 웹 GIS의 상호운용성을 확립하는 데 큰 기여를 했지만, XML과 SOAP, 복잡한 KVP(Key-Value Pair) 인코딩 등 2000년대 초반의 웹 기술에 기반하고 있어 현대 웹 개발자들에게는 다소 무겁고 번거롭게 느껴졌다.27 오늘날의 웹 개발 생태계는 JSON과 RESTful API를 중심으로 구축되어 있기 때문이다.45 이러한 시대적 변화에 부응하여, OGC는 기존 웹 서비스 표준을 현대화하기 위한 새로운 표준군인 ‘OGC API’를 제정하기 시작했다.
OGC API는 기존 OWS의 기능을 계승하면서도, 현대적인 웹 개발 방식과 철학을 전면적으로 수용한 것이 특징이다.47 이는 단순히 기술 스택을 바꾸는 것을 넘어, 지리공간 데이터를 다루는 방식을 근본적으로 바꾸려는 시도이다. OGC API의 핵심은 지리공간 기술을 소수의 전문가 영역에서 벗어나, 모든 웹 개발자가 쉽게 접근하고 통합할 수 있는 주류 IT 기술로 만드는 데 있다. 이는 “개발자 경험(Developer Experience)과 사용성”에 초점을 맞춘다는 OGC의 비전에서도 명확히 드러난다.46
OGC API는 다음과 같은 핵심 원칙에 따라 설계되었다 26:
- 리소스 중심(Resource-Oriented): 기존의 서비스 중심(Service-Oriented) 접근법과 달리, API는 데이터 자체를 ‘리소스’로 취급한다. 예를 들어, 단일
wfs 엔드포인트에 복잡한 요청을 보내는 대신, /collections(데이터셋 목록), /collections/{collectionId}/items(개별 피처 목록)와 같이 직관적인 URL 구조를 통해 리소스에 접근한다.
- RESTful 아키텍처: 표준 HTTP 동사(GET, POST, PUT, DELETE 등)를 사용하여 리소스를 조회, 생성, 수정, 삭제하는 REST 원칙을 따른다. 이는 웹 개발자들에게 매우 친숙한 방식이다.
- 개발자 친화적 포맷: 복잡한 XML 대신, 웹에서 널리 쓰이는 JSON을 기본 응답 형식으로 채택했다.45 특히 피처 데이터는 GeoJSON 형식으로 제공하여 클라이언트에서의 활용도를 극대화했다.50 또한, 브라우저에서 바로 결과를 확인할 수 있도록 HTML 표현도 함께 제공하는 경우가 많다.
- 모듈식 빌딩 블록 접근법: OGC API는 거대한 단일 표준이 아닌, 기능별로 분리된 여러 개의 모듈식 표준으로 구성된다. 이를 통해 필요한 기능만 조합하여 API를 구축할 수 있다.26
- OpenAPI 기반 문서화: API 명세를 OpenAPI Specification(구 Swagger)으로 정의하여, 개발자가 API의 기능을 쉽게 이해하고 테스트할 수 있는 대화형 문서를 제공한다.46
OGC API 표준군은 지속적으로 확장되고 있으며, 주요 표준은 다음과 같다 48:
- OGC API - Common: 모든 OGC API가 공유하는 공통 요구사항을 정의한다. API의 시작점인 랜딩 페이지(
/), 표준 준수 여부를 알리는 적합성 선언(/conformance), 데이터셋 목록을 제공하는 컬렉션(/collections) 등의 기본적인 빌딩 블록을 포함한다.45
- OGC API - Features: WFS를 대체하는 표준으로, 웹에서 벡터 피처 데이터를 생성, 수정, 조회하는 기능을 제공한다.53 필터링, 좌표계 지정 등 여러 부분(part)으로 구성된 다중 파트 표준이다.53
- OGC API - Tiles: WMTS를 대체하는 표준으로, 래스터 타일과 벡터 타일을 제공하는 방법을 정의한다.48
- OGC API - Maps: WMS를 대체하는 표준으로, 지도 이미지를 제공한다.48
- 그 외 표준들: 이 외에도 커버리지(WCS), 프로세스(WPS), 메타데이터 카탈로그(CSW) 등을 대체하는 표준들이 개발 중이며, 이는 OGC API가 기존 OWS의 모든 기능을 현대적인 방식으로 계승하고 있음을 보여준다.45
OGC API는 기존 OWS를 완전히 폐기하는 것이 아니라, 새로운 패러다임을 제시하는 것이다. OGC는 기존 OWS 구현 위에 OGC API 인터페이스를 ‘파사드(façade)’ 패턴으로 구축하여 점진적인 마이그레이션을 지원하도록 설계했다.26 이는 조직이 기존의 막대한 투자를 보호하면서도 최신 웹 기술의 이점을 누릴 수 있도록 하는 현실적인 접근법이다.
웹 GIS의 사용자 경험은 클라이언트, 즉 웹 브라우저에서 어떻게 지도를 그리고 사용자와 상호작용하느냐에 따라 결정된다. 이 장에서는 지도를 실제로 화면에 구현하는 핵심적인 역할을 하는 자바스크립트 매핑 라이브러리들을 비교 분석하고, 팝업, 피처 선택, 그리기 등 필수적인 상호작용 기능의 구현 방법을 살펴본다. 나아가, 2차원 지도를 넘어 3차원 지구본과 대규모 데이터셋을 시각화하는 전문 라이브러리들의 세계를 탐험한다.
웹 지도 애플리케이션을 구축할 때 어떤 자바스크립트 라이브러리를 선택하는가는 프로젝트의 성패를 좌우할 수 있는 중요한 아키텍처 결정이다. 각 라이브러리는 고유한 철학과 장단점을 가지고 있으며, 프로젝트의 요구사항에 따라 최적의 선택이 달라진다.
- 철학 및 특징: Leaflet은 ‘단순함, 성능, 그리고 사용성’을 핵심 가치로 삼는 경량 오픈소스 라이브러리다.55 약 42KB에 불과한 작은 용량에도 불구하고 대부분의 웹 지도 개발에 필요한 핵심 기능을 모두 갖추고 있다.55 Leaflet의 가장 큰 장점은 직관적이고 배우기 쉬운 API와 방대한 문서, 그리고 활발한 커뮤니티이다.55
- 기능: 래스터 타일(WMS 포함), GeoJSON 오버레이, 마커, 팝업, 그리고 기본적인 벡터 도형(폴리라인, 폴리곤, 원) 표현에 탁월하다.55 관성 효과가 적용된 드래그 패닝, 스크롤 휠 줌, 모바일에서의 핀치 줌 등 부드러운 상호작용을 기본적으로 지원한다.55
-
확장성 및 한계: Leaflet은 핵심 기능을 최소화하고, 고급 기능은 방대한 플러그인 생태계를 통해 추가하는 방식을 취한다.57 지오코딩, 라우팅, 벡터 타일 지원, 그리기 도구 등 거의 모든 추가 기능이 플러그인 형태로 존재한다.57 그러나 이는 Leaflet이 완전한 기능을 갖춘 GIS 라이브러리가 아님을 의미하기도 한다. 다양한 좌표계 변환, 3D 시각화, 대규모 데이터셋 처리 등은 내장 기능만으로는 한계가 있으며, 성능 최적화를 위한 별도의 노력이 필요할 수 있다.57 렌더링은 주로 브라우저의 표준 HTML/CSS 및 Canvas 2D API를 사용하며, WebGL을 기본으로 사용하지는 않는다.61
- 철학 및 특징: OpenLayers는 복잡하고 전문적인 엔터프라이즈급 GIS 애플리케이션 구축을 목표로 하는 강력하고 기능이 완벽한(feature-complete) 고성능 라이브러리다.63
- 기능: GeoJSON, KML, GML, MVT 등 다양한 벡터 데이터 포맷과 WMS, WMTS, WFS 등 대부분의 OGC 표준 서비스를 네이티브로 지원하는 것이 가장 큰 강점이다.59 수많은 지도 투영법(projection)을 내장하고 있어 클라이언트 측에서 동적으로 좌표계를 변환할 수 있으며, 데이터 기반의 복잡한 스타일링, 레이어 스와이프, 동적 데이터 클러스터링 등 고급 상호작용 기능을 풍부하게 제공한다.63 렌더링에는 Canvas 2D와 WebGL을 모두 활용하여 성능을 최적화한다.63
-
사용 사례 및 비교: 전문적인 GIS 백엔드와의 긴밀한 통합, 대규모 데이터의 안정적인 처리, 복잡한 공간 연산이 요구되는 애플리케이션에 이상적이다.64 Leaflet에 비해 라이브러리 크기가 크고 학습 곡선이 가파르지만, 별도의 플러그인 없이도 대부분의 GIS 기능을 ‘즉시(out of the box)’ 사용할 수 있다는 장점이 있다.59
- 철학 및 특징: 이 라이브러리들은 WebGL을 사용하여 고성능의 미려한 지도를 렌더링하는 데 초점을 맞추고 있다.41 핵심 기술은 벡터 타일의 클라이언트 측 렌더링이다.
- 기술: 서버로부터 MVT(Mapbox Vector Tiles) 형식의 벡터 타일을 받아 WebGL을 통해 동적으로 렌더링한다. 이 방식은 비디오 게임과 같은 부드러운 상호작용을 가능하게 하며, 지도의 실시간 스타일 변경, 연속적인 줌, 그리고 2.5D(건물 돌출) 시각화를 위한 자유로운 회전 및 기울이기를 지원한다.41
- Mapbox GL JS vs. MapLibre GL JS: Mapbox GL JS는 이 기술을 선도한 원본 라이브러리다. 그러나 Mapbox사가 라이선스를 상업적으로 제한적인 정책으로 변경하자, 커뮤니티는 이에 반발하여 완전한 오픈소스 대안인 MapLibre GL JS를 만들었다.61 MapLibre는 많은 경우 Mapbox GL JS의 직접적인 대체재(drop-in replacement)로 사용될 수 있다.
- 과금 모델 (Mapbox): Mapbox는 API 사용량에 따라 과금하는 종량제(Pay-as-you-go) 모델을 채택하고 있으며, 일반적으로 ‘맵 로드(Map Loads)’ 횟수를 기준으로 비용을 청구한다. 대부분의 서비스에 대해 상당한 양의 무료 사용량을 제공한다.71
- 한계: WebGL을 지원하는 최신 브라우저가 필요하며, 구형 브라우저에서는 성능이 저하될 수 있다.41 Mapbox GL JS는 Mapbox 플랫폼과 API 토큰에 종속적인 반면, MapLibre는 특정 서비스 제공자에 얽매이지 않는다.
이 라이브러리들의 선택은 프로젝트의 방향을 결정하는 중요한 분기점이다. 단순한 지도에 몇 개의 마커를 표시하는 것이 목적이라면 Leaflet이 최적의 선택일 수 있다. 반면, 클라이언트 측에서 복잡한 좌표계 변환과 WFS-T 편집 기능이 필요하다면 OpenLayers가 적합하다. 미려한 디자인과 동적 스타일링, 부드러운 사용자 경험이 최우선 순위라면 MapLibre/Mapbox가 강력한 후보가 될 것이다. 다음 표는 개발자가 이러한 전략적 결정을 내리는 데 도움을 주기 위해 각 라이브러리의 핵심적인 특징을 상세히 비교한다.
표 2: 웹 매핑 라이브러리 기능 및 성능 비교
| 라이브러리 |
렌더링 엔진 |
핵심 강점 |
데이터 지원 |
3D/2.5D |
확장성 |
학습 곡선 |
라이선스 |
| Leaflet.js |
HTML/CSS/Canvas |
단순성, 경량, 방대한 플러그인 생태계 |
래스터 타일, GeoJSON |
없음 |
높음 (플러그인) |
낮음 |
BSD 2-Clause (오픈소스) |
| OpenLayers |
Canvas, WebGL |
기능 완전성, GIS 기능, 다중 좌표계 지원 |
모든 주요 벡터/래스터 포맷 및 OGC 서비스 |
제한적 2.5D |
높음 (내장 기능) |
높음 |
BSD 2-Clause (오픈소스) |
| Mapbox GL JS |
WebGL |
고성능 벡터 타일 렌더링, 동적 스타일링, 미려한 디자인 |
벡터 타일(MVT), GeoJSON |
지원 (2.5D 건물, 기울이기) |
중간 |
중간 |
Mapbox ToS (상업용) |
| MapLibre GL JS |
WebGL |
고성능 벡터 타일 렌더링, 동적 스타일링, 미려한 디자인 |
벡터 타일(MVT), GeoJSON |
지원 (2.5D 건물, 기울이기) |
중간 |
중간 |
BSD 3-Clause (오픈소스) |
| CesiumJS |
WebGL |
고정밀 3D 지구본, 시계열 데이터, 대규모 데이터셋 |
3D Tiles, KML, glTF, 지형/이미지 |
완전한 3D 지구본 |
높음 |
높음 |
Apache 2.0 (오픈소스) |
| deck.gl |
WebGL |
대규모 데이터 시각화, GPU 기반 분석 |
GeoJSON, Arrow 등 |
완전한 3D (베이스맵과 통합) |
높음 |
높음 |
MIT (오픈소스) |
웹 지도의 가치는 정적인 이미지를 넘어 사용자와의 상호작용을 통해 동적인 정보를 제공하는 데 있다. 이러한 상호작용은 대부분 이벤트 기반 모델(event-driven model)을 통해 구현된다. 라이브러리는 사용자의 행동(클릭, 마우스 이동 등)이나 지도의 상태 변화(줌 변경 등)에 따라 특정 이벤트를 발생시키고, 개발자는 이 이벤트를 ‘수신(listen)’하여 정의된 작업을 수행하는 함수, 즉 ‘리스너(listener)’를 작성한다.58
지도 위의 객체를 클릭하거나 마우스를 올렸을 때 추가 정보를 보여주는 것은 가장 기본적인 상호작용이다.
-
Leaflet 구현: Leaflet에서는 layer.bindPopup() 메소드를 사용하여 특정 레이어에 팝업을 쉽게 연결할 수 있다. 사용자가 해당 객체를 클릭하면 팝업이 나타난다.14 또한,
map.on('click',...) 이벤트 리스너를 사용하면 지도의 특정 위치를 클릭했을 때 해당 좌표에 팝업을 띄우는 것도 가능하다.74
-
OpenLayers 구현: OpenLayers에서는 map.on('pointermove',...) 이벤트를 수신하여 마우스 커서 위치의 픽셀 정보를 얻고, map.forEachFeatureAtPixel() 메소드를 통해 해당 픽셀에 어떤 피처가 있는지 감지한다. 감지된 피처가 있으면 그 정보를 HTML 오버레이 요소(툴팁)에 표시하고, 피처가 없으면 숨기는 방식으로 구현한다.76
사용자가 특정 피처를 선택했음을 시각적으로 명확히 표시하는 기능이다. 이는 주로 피처의 스타일을 동적으로 변경하여 구현한다. OpenLayers에서는 클릭이나 호버 이벤트 발생 시 해당 위치의 피처를 찾아 미리 정의된 별도의 ‘선택 스타일’을 적용하는 방식으로 구현할 수 있다.77 Mapbox GL JS는 ‘피처 상태(feature state)’라는 개념을 사용하여 hover와 같은 상태에 따라 피처의 모양을 변경하는, 보다 선언적인 방식을 제공한다.78
사용자가 지도 위에 직접 점, 선, 면과 같은 벡터 피처를 그리거나 기존 피처를 수정, 삭제할 수 있게 하는 기능이다.
-
Leaflet.draw 플러그인: Leaflet에서는 이 기능을 Leaflet.draw라는 매우 인기 있는 플러그인을 통해 구현한다.79 이 플러그인은 그리기 및 편집을 위한 완전한 UI 툴바를 제공한다. 핵심 아키텍처는 편집 가능한 레이어들을 담는
FeatureGroup을 지정하고, 피처가 생성되거나(draw:created), 편집되면(draw:edited) 이벤트를 발생시켜 개발자가 변경 사항을 감지하고 데이터베이스에 저장하는 등의 후속 처리를 할 수 있도록 하는 것이다.80
-
OpenLayers Interactions: OpenLayers는 Draw와 Modify라는 상호작용(Interaction) 객체를 내장하고 있어, 이를 맵에 추가하는 것만으로 동일한 기능을 구현할 수 있다.66
데이터 기반 스타일링(Data-Driven Styling)은 피처가 가진 속성 값에 따라 시각적 표현(색상, 크기, 투명도 등)을 다르게 하는 강력한 시각화 기법이다.82 이는 지도를 단순한 위치 표시 도구에서 동적인 데이터 분석 도구로 변모시킨다. 인구 밀도에 따라 행정구역의 색을 다르게 칠하는 등치지역도(choropleth map)가 대표적인 예이다.
-
Leaflet 구현: Leaflet의 GeoJSON 레이어에서는 style 옵션을 함수로 지정할 수 있다. 이 함수는 각 피처를 인자로 받아, 해당 피처의 속성(feature.properties)을 확인하고 조건에 맞는 스타일 객체를 반환하는 방식으로 데이터 기반 스타일링을 구현한다.13 등치지역도를 만들 때는 보통 데이터 값을 여러 구간(bin)으로 나누고,
colorBin()과 같은 함수를 사용하여 각 구간에 해당하는 색상 팔레트를 생성한 뒤 적용한다.83
-
Mapbox GL JS 구현: 이는 Mapbox GL JS의 핵심 강점 중 하나다. 스타일 정의 파일 내에서 강력한 ‘표현식(expressions)’을 사용하여 레이어의 paint 속성(예: fill-color, circle-radius)을 피처의 속성 값이나 현재 지도의 줌 레벨에 따라 동적으로 제어할 수 있다.78 이를 통해 매우 정교하고 동적인 데이터 시각화가 가능하다.
2D 웹 지도가 보편화되면서, 기술의 다음 단계는 현실 세계를 더욱 실감 나게 표현하는 3D 시각화와 기존 라이브러리로는 처리하기 어려웠던 대규모 데이터셋을 다루는 방향으로 나아가고 있다. 이러한 요구에 부응하기 위해 WebGL 기술을 적극적으로 활용하는 전문화된 라이브러리들이 등장했다. 이들의 등장은 웹 매핑 시장이 성숙하며 사용 사례에 따라 기술이 분화되고 있음을 보여준다. 즉, ‘만능’ 라이브러리 시대에서 ‘특정 작업에 최적화된 도구’를 선택하는 시대로의 전환을 의미한다.
- 핵심 역량: CesiumJS는 고정밀 3D 지구본과 2D 지도를 생성하기 위한 오픈소스 자바스크립트 라이브러리다.87 가장 큰 특징이자 강점은 WGS84 타원체를 기준으로 지구 전체를 정밀하게 모델링한 3D 글로브를 제공한다는 점이다. 이로 인해 항공우주, 국방, 지구과학 등 전 지구적 스케일의 정확한 공간 분석이 요구되는 전문 분야에서 독보적인 위치를 차지하고 있다.87
- 주요 기능:
- 3D Tiles: 사진측량(photogrammetry) 모델, 3D 빌딩, 포인트 클라우드 등 이기종의 대규모 3D 데이터셋을 효율적으로 스트리밍하고 렌더링하기 위한 OGC 표준인 ‘3D Tiles’를 네이티브로 지원한다.87
- 지형 및 이미지: 전 지구적 고해상도 지형(terrain)과 위성 이미지를 스트리밍하고, 3D 지형 위에 이미지를 자연스럽게 덧씌우는(draping) 고성능 시각화를 제공한다.87
- 시계열(Time-Dynamic) 시각화: 시간에 따라 변화하는 데이터를 다루는 4D 시각화에 대한 일급 지원(first-class support)을 제공한다. 이는 항공기나 위성의 궤적 추적, 기후 변화 시뮬레이션 등에서 핵심적인 기능이다.87
- 다중 뷰 모드: 완전한 3D 글로브 뷰, 평면 2D 맵 뷰, 그리고 2.5D 콜럼버스 뷰(Columbus view) 간의 실시간 전환을 동일한 API로 지원한다.87
-
Mapbox GL JS와의 비교: CesiumJS가 완전한 3D 지구본을 렌더링하는 시뮬레이션 엔진에 가깝다면, Mapbox GL JS는 평면 지도 위에 건물을 돌출시키는 2.5D 맵 렌더러에 가깝다.94 따라서 진정한 3D 공간 분석과 시뮬레이션이 필요하다면 CesiumJS가, 미려한 2.5D 지도 시각화가 목적이라면 Mapbox GL JS가 더 적합하다.96
-
핵심 역량: deck.gl은 대규모 데이터셋의 시각적 탐색 분석(visual exploratory data analysis)을 위해 설계된 GPU 가속 시각화 프레임워크다.97 deck.gl은 독립적인 매핑 라이브러리가 아니라, Mapbox, Google Maps, ArcGIS 등 기존 베이스맵 위에 오버레이하여 사용하는 시각화 ‘레이어’에 가깝다.97
-
아키텍처: ScatterplotLayer(산점도), ArcLayer(호), HexagonLayer(육각 빈) 등 사전 정의된 고성능 레이어들을 조합하여 복잡한 시각화를 구성하는 방식을 사용한다.97 React와 같은 선언적 UI 프레임워크와 잘 통합되도록 설계되었다.97
-
주요 기능: GPU에서 64비트 부동소수점 연산을 에뮬레이션하여 수백만 개의 데이터 포인트도 높은 정확도로 렌더링하는 것이 특징이다.97 지리공간 데이터뿐만 아니라 비공간 데이터 시각화도 지원하며,
MapView, GlobeView, FirstPersonView 등 다양한 뷰와 좌표계를 지원하여 유연성이 높다.99 특히 CARTO 플랫폼과 긴밀하게 통합되어 클라우드 데이터 웨어하우스의 데이터를 직접 시각화하는 데 강점을 보인다.101
- 핵심 역량: kepler.gl은 대규모 위치 데이터를 탐색하기 위한 강력한 오픈소스 지리공간 분석 도구이다. 이는 deck.gl을 기반으로 구축되었다.102
- 대상 사용자: 개발자나 GIS 전문가가 아닌 데이터 과학자, 분석가, 기획자 등을 주된 사용자로 상정한다. 코딩 없이 웹 기반의 사용자 친화적인 UI를 통해 CSV, JSON, GeoJSON 등의 데이터를 드래그 앤 드롭 방식으로 손쉽게 로드하고, 히트맵, 클러스터, 헥사곤 빈 등 정교한 시각화를 즉시 생성할 수 있다.102
- 사용 사례: 주된 용도는 탐색적 데이터 분석(EDA)이다.105 독립적인 웹 애플리케이션으로 사용하거나, React 컴포넌트 형태로 다른 애플리케이션에 내장하여 활용할 수 있다.106 kepler.gl은 복잡한 코딩 과정을 추상화하여 사용자가 데이터 자체의 패턴과 인사이트에 집중할 수 있도록 돕는다.
이처럼 전문화된 라이브러리들의 등장은 웹 GIS의 활용 범위가 넓어지고 깊어짐에 따라, 하나의 도구가 모든 것을 해결할 수 없다는 현실을 반영한다. 프로젝트의 목적이 전 지구적 3D 시뮬레이션인지, 수백만 포인트의 GPU 기반 렌더링인지, 아니면 코딩 없는 빠른 데이터 탐색인지에 따라 각각 CesiumJS, deck.gl, kepler.gl과 같은 최적의 도구를 선택하는 것이 중요해졌다.
현대 웹 GIS 애플리케이션은 단순히 지도 라이브러리 하나만으로 구성되지 않는다. 사용자가 보는 인터랙티브한 지도는 데이터의 저장, 처리, 서비스를 담당하는 백엔드 시스템과 긴밀하게 연동된 결과물이다. 이 장에서는 데이터가 데이터베이스에 저장되어 가공된 후, 맵 서버를 통해 웹 서비스로 발행되고, 최종적으로 클라이언트의 브라우저에서 시각화되기까지의 전 과정을 아우르는 ‘풀 스택(full-stack)’ 아키텍처를 살펴본다. 특히, 상용 플랫폼에 대한 강력한 대안으로 자리 잡은 오픈소스 스택의 핵심 구성 요소들을 집중적으로 분석한다.
모든 데이터 기반 애플리케이션의 심장은 데이터베이스다. 웹 GIS 애플리케이션이 대규모의 복잡한 공간 데이터를 효율적으로 저장, 관리, 조회하기 위해서는 일반적인 관계형 데이터베이스를 넘어 공간 데이터 처리에 특화된 기능이 필요하다.
PostgreSQL은 강력하고 신뢰성 높은 오픈소스 객체-관계형 데이터베이스 시스템이다. 여기에 PostGIS라는 확장 기능(extension)을 추가하면, PostgreSQL은 세계에서 가장 진보된 오픈소스 공간 데이터베이스로 변모한다.107
PostGIS는 다음과 같은 핵심적인 역량을 제공하며, 현대 웹 GIS 스택의 견고한 기반 역할을 수행한다:
- 공간 데이터 타입: PostGIS는 SQL 표준을 확장하여
GEOMETRY와 GEOGRAPHY라는 데이터 타입을 추가한다. 이를 통해 점, 선, 폴리곤과 같은 벡터 데이터를 데이터베이스 테이블의 컬럼에 직접 저장할 수 있다.109
- 공간 인덱싱: 공간 데이터를 빠르게 검색하기 위한 특수한 인덱스(예: R-Tree, GiST)를 지원한다. 공간 인덱스는 특정 영역(bounding box) 내에 포함된 객체를 찾는 것과 같은 공간 질의의 속도를 극적으로 향상시킨다. 이는 수많은 요청을 처리해야 하는 웹 환경에서 필수적인 성능 요소이다.
- 공간 함수: PostGIS는 OGC 표준을 준수하는 방대한 양의 공간 함수 라이브러리를 제공한다. 두 객체 간의 거리를 측정(
ST_Distance), 면적을 계산(ST_Area), 교차 여부를 확인(ST_Intersects), 한 좌표계에서 다른 좌표계로 변환(ST_Transform)하는 등, 데이터베이스 수준에서 복잡한 공간 분석 및 처리를 직접 수행할 수 있게 해준다.107
이처럼 PostGIS는 데이터를 단순 저장하는 것을 넘어, 강력한 공간 처리 엔진으로서의 역할을 수행한다. 이는 맵 서버나 웹 애플리케이션의 부담을 줄여주고, 전체 시스템의 성능과 효율성을 높이는 데 결정적인 기여를 한다.108
맵 서버는 백엔드의 데이터 소스(예: PostGIS 데이터베이스)와 프론트엔드의 클라이언트 애플리케이션(예: 웹 브라우저)을 연결하는 핵심적인 미들웨어(middleware)이다. 즉, 저장된 데이터를 웹을 통해 서비스 가능한 형태로 발행(publish)하는 역할을 담당한다.31
GeoServer는 자바(Java)로 개발된 대표적인 오픈소스 맵 서버로, 지리공간 데이터를 공유, 처리, 편집하는 기능을 제공한다.29 GeoTools라는 강력한 GIS 라이브러리를 기반으로 하며, 지리공간 웹 생태계의 핵심 구성 요소로 널리 인정받고 있다.31 GeoServer의 주요 역할과 특징은 다음과 같다:
- 데이터 소스 연결 및 서비스 발행: PostGIS, Oracle Spatial, Shapefile, GeoTIFF 등 매우 다양한 종류의 데이터 소스에 연결할 수 있다. 연결된 데이터는 WMS, WFS, WCS, WMTS 등 표준 OGC 웹 서비스로 손쉽게 발행할 수 있다.29
- 아키텍처 및 구성 요소 111:
- 작업 공간(Workspace): 관련된 프로젝트와 서비스를 묶는 최상위 논리적 컨테이너.
- 저장소(Store): 데이터 소스에 대한 연결 정보를 정의 (예: PostGIS DB 접속 정보).
- 레이어(Layer): 특정 저장소의 데이터셋(예: 테이블 또는 뷰)을 웹 서비스로 발행하기 위한 단위.
- 레이어 그룹(Layer Group): 여러 레이어를 하나의 레이어처럼 묶어서 서비스할 수 있는 기능.
- 주요 기능:
- 스타일링: OGC의 SLD(Styled Layer Descriptor) 표준을 사용하여 WMS로 서비스될 레이어의 색상, 라벨, 심볼 등을 상세하게 정의할 수 있다.112
- 캐싱: GeoWebCache라는 타일 캐싱 엔진이 내장되어 있어, WMS나 벡터 타일 서비스의 성능을 크게 향상시킬 수 있다.31
- 벡터 타일 지원: 현대적인 웹 매핑의 핵심인 벡터 타일을 MVT, GeoJSON, TopoJSON 등 다양한 포맷으로 발행할 수 있는 강력한 기능을 제공한다.40
MapServer는 GeoServer와 함께 널리 사용되는 또 다른 오픈소스 맵 서버이다. MapServer는 C 언어 기반의 CGI 애플리케이션으로, GeoServer(2003년)보다 더 오랜 역사(1996년)를 가지고 있다.32 전통적으로 MapServer는 WMS 성능과 정교한 지도 제작(cartography) 기능에서 강점을 보였고, GeoServer는 WFS 및 WFS-T(트랜잭션) 지원과 사용자 친화적인 웹 관리자 UI에서 앞서 있다는 평가를 받았다. 하지만 현재는 두 프로젝트 모두 성숙하여 대부분의 OGC 표준을 안정적으로 지원하며, 선택은 주로 개발 환경(Java vs. C)과 운영 편의성에 따라 이루어진다.32
이 섹션에서는 앞서 설명한 오픈소스 구성 요소들이 어떻게 유기적으로 결합하여 하나의 완전한 웹 GIS 애플리케이션을 구성하는지, 그 개념적인 데이터 흐름을 단계별로 살펴본다. 이는 특정 코드 구현보다는 전체 아키텍처를 이해하는 데 초점을 맞춘다.116
- 데이터 준비 및 저장 (PostGIS):
- 먼저, 시각화할 지리공간 데이터(예: 전국의 행정구역 경계 폴리곤)를 Shapefile이나 GeoJSON 등의 형식으로 준비한다.
- 이 데이터를
ogr2ogr과 같은 도구를 사용하여 PostGIS 데이터베이스의 특정 테이블로 임포트(import)한다.107
- 성능 향상을 위해 해당 테이블의 지오메트리 컬럼에 공간 인덱스를 생성한다.
- 데이터 서비스 발행 (GeoServer):
- GeoServer 관리자 페이지에 접속하여, PostGIS 데이터베이스에 연결하기 위한 새로운 ‘저장소(Store)’를 생성한다. 이때 데이터베이스 접속 정보를 입력한다.110
- 저장소 연결이 성공하면, 해당 데이터베이스 내의 공간 데이터 테이블 목록이 나타난다. 이 중에서 서비스할 테이블을 선택하여 새로운 ‘레이어(Layer)’로 발행한다.
- 발행된 레이어는 이제 WMS, WFS 등의 표준 서비스로 접근 가능하다. 현대적인 벡터 맵을 위해서는 GeoWebCache 설정에서 해당 레이어에 대해 MVT(Mapbox Vector Tile) 포맷을 활성화한다. 이렇게 하면 GeoServer는 특정 URL을 통해 해당 레이어를 벡터 타일로 서비스하기 시작한다.40
- 클라이언트 측 소비 및 시각화 (Leaflet 또는 MapLibre):
- HTML, CSS, JavaScript를 사용하여 웹 페이지를 구성하고, Leaflet이나 MapLibre GL JS와 같은 매핑 라이브러리를 포함시킨다.109
- 클라이언트 측 JavaScript 코드에서, GeoServer가 제공하는 벡터 타일 서비스의 URL을 소스로 지정하여 타일 레이어를 생성한다. (예:
http://.../geoserver/gwc/service/tms/1.0.0/{layer_name}@EPSG:900913@pbf/{z}/{x}/{y}.pbf)
- 라이브러리는 이 URL을 통해 동적으로 타일을 요청하고, 수신된 벡터 데이터를 브라우저 화면에 렌더링한다.
- 개발자는 클라이언트 코드 내에서 직접 지도의 스타일을 정의하고(예: 폴리곤의 채우기 색상, 경계선 두께), 피처 클릭 시 팝업을 띄우는 등의 상호작용을 구현한다.40
이러한 PostGIS –» GeoServer –» 클라이언트 라이브러리로 이어지는 스택은 각 구성 요소가 명확하게 분리된 모듈식 아키텍처를 형성한다. 이들의 결합은 OGC 표준이라는 ‘접착제’를 통해 이루어진다. 이러한 모듈성은 오픈소스 스택의 가장 큰 강점 중 하나다. 특정 요구사항에 따라 각 컴포넌트를 다른 것으로 교체할 수 있다. 예를 들어, GeoServer 대신 pg_tileserv나 Martin과 같은 더 가벼운 타일 서버를 사용하거나 122, Leaflet 대신 OpenLayers를 선택하는 것이 자유롭다. 이는 특정 벤더의 기술에 종속되는 것을 피하고, 유연하고 확장 가능한 시스템을 구축할 수 있게 해준다. 이는 FOSS4G(Free and Open Source Software for Geospatial) 커뮤니티가 추구하는 핵심 가치이며, 이러한 장점 덕분에 오픈소스 스택은 상용 플랫폼과 대등하게 경쟁하며 엔터프라이즈 환경에서도 널리 채택되고 있다.
웹 GIS 기술은 정적인 지도 표현을 넘어 실시간 데이터 처리, 클라우드 최적화, 그리고 브라우저 내 고성능 분석으로 빠르게 진화하고 있다. 이 장에서는 웹 매핑의 최전선에 있는 고급 주제들을 다룬다. 클라우드 환경에 최적화된 새로운 데이터 포맷들, 실시간 데이터 스트리밍 아키텍처, 그리고 WebAssembly를 통한 브라우저의 성능 혁신을 살펴보고, 이를 통해 웹 GIS의 미래 방향성을 조망한다.
‘클라우드 네이티브(Cloud-Native)’ 지리공간 포맷이란, 데이터를 파일 전체로 다운로드하지 않고도 클라우드 객체 저장소(예: Amazon S3, Google Cloud Storage)에서 필요한 부분만 효율적으로 읽어올 수 있도록 설계된 데이터 형식을 의미한다.125 이는 클라이언트가 파일의 특정 바이트 범위(byte range)만을 요청할 수 있게 하는 HTTP GET range request 기술을 통해 가능해진다.125
- 개념 및 기능: COG는 일반적인 GeoTIFF 파일이지만, 내부 데이터 구조를 특정 방식으로 재구성하여 스트리밍 접근에 최적화한 래스터 포맷이다.125 모든 COG는 유효한 GeoTIFF이므로, 기존 GIS 소프트웨어와의 하위 호환성이 보장된다.130
- 작동 원리: COG의 효율성은 두 가지 핵심 구조에 기인한다. 첫째, 내부 타일링(Internal Tiling)은 이미지를 작은 타일 단위로 저장하여 특정 영역의 데이터만 신속하게 접근할 수 있게 한다. 둘째, 오버뷰(Overviews)는 원본 이미지의 저해상도 버전을 여러 단계로 미리 만들어 파일 내에 포함시킨다. 클라이언트는 지도를 축소해서 볼 때 거대한 원본 대신 작은 오버뷰를 요청하여 빠르게 시각화할 수 있다. 또한, 파일의 시작 부분에 메타데이터와 타일 인덱스가 위치하여, 클라이언트는 작은 초기 요청만으로 전체 파일의 구조를 파악하고 필요한 데이터의 위치(바이트 범위)를 정확히 계산할 수 있다.127
-
사용 사례: 대규모 위성 이미지나 항공사진과 같은 래스터 데이터를 클라우드 환경에서 저장하고 서비스하는 현대적인 표준 방식으로 자리 잡고 있다.129
- 개념 및 기능: Zarr는 다차원 배열(N-dimensional array), 즉 텐서(tensor) 데이터를 청크(chunk) 단위로 분할하여 압축 저장하기 위한 포맷 명세이다.131 본질적으로 지리공간 포맷은 아니지만, 다차원 구조가 기후 모델, 다중 분광 이미지 등 과학 데이터에 매우 적합하여 지리공간 분야에서 사용이 급증하고 있다.
- 작동 원리: Zarr는 거대한 배열을 작은 청크로 나누어 키-값(key-value) 저장소에 저장한다. 이 저장소는 로컬 파일 시스템일 수도 있고, 클라우드 객체 저장소일 수도 있다.131 이러한 구조는 각 청크에 독립적으로 접근할 수 있게 하므로, Dask와 같은 라이브러리를 이용한 대규모 병렬 입출력(I/O) 및 분산 컴퓨팅에 매우 유리하다.134
-
GeoZarr: Zarr 자체에는 좌표계(CRS)와 같은 표준화된 지리공간 메타데이터 규약이 없다. 이러한 단점을 보완하기 위해 OGC 커뮤니티를 중심으로 GeoZarr라는 확장 명세가 개발되고 있다. GeoZarr는 Zarr 데이터에 지리공간 컨텍스트를 부여하여 상호운용성을 높이는 것을 목표로 한다.136
- 컬럼 기반 데이터의 이점: 이 두 포맷은 빅데이터 분석 분야에서 널리 사용되는 Apache Parquet과 Apache Arrow의 성능적 이점을 지리공간 벡터 데이터에 적용한 것이다.137 행(row) 단위가 아닌 열(column) 단위로 데이터를 저장하는 컬럼 기반(columnar) 방식은 특정 속성(열)만 선택하여 분석할 때 불필요한 데이터를 읽지 않아 매우 빠르다.
- GeoParquet: Parquet 파일에 지리공간 벡터 데이터를 저장하기 위한 파일 포맷 표준이다. 대규모 벡터 데이터셋에서 특정 속성만으로 분석을 수행할 때 탁월한 성능을 보이며, 압축률도 매우 높다.137 또한, 공간적 분할(spatial partitioning)을 지원하여 특정 영역의 데이터만 효율적으로 가져올 수 있다.138
- GeoArrow: Arrow의 컬럼 기반 인메모리(in-memory) 레이아웃에 지리공간 데이터를 표현하기 위한 메모리 포맷 명세이다.139 Arrow 메모리 포맷은 프로세스 간 데이터 복사 없이 메모리를 공유(zero-copy)할 수 있게 설계되어, 인메모리 분석 및 렌더링 성능을 극적으로 향상시킨다.140
- 관계: GeoParquet는 디스크나 클라우드에 저장된 데이터(data-at-rest)를 위한 파일 포맷이고, GeoArrow는 메모리에서 처리 중인 데이터(data-in-motion)를 위한 메모리 포맷이다. GeoParquet 파일을 읽으면 GeoArrow 형식의 인메모리 객체가 생성되는 등, 두 포맷은 서로 긴밀하게 연동되도록 설계되었다.140
아래 표는 클라우드 네이티브 포맷들의 핵심 개념과 장점을 요약하여, 현대적인 클라우드 기반 시스템 설계 시 데이터 유형과 접근 패턴에 맞는 최적의 포맷을 선택하는 데 필요한 정보를 제공한다.
표 4: 클라우드 네이티브 지리공간 포맷 개요
| 포맷 |
데이터 모델 |
핵심 개념 |
핵심 장점 |
| Cloud Optimized GeoTIFF (COG) |
래스터 |
내부 타일링 및 오버뷰를 가진 GeoTIFF |
대용량 래스터 이미지의 효율적인 HTTP 스트리밍 및 부분 접근 |
| Zarr |
N-D 배열 |
키-값 저장소에 저장된 청크화된 압축 배열 |
대규모 다차원 데이터셋(예: 기후 데이터)의 고성능 병렬 I/O |
| GeoParquet |
벡터 |
컬럼 기반 Parquet 파일에 저장된 지리공간 데이터 |
대규모 벡터 데이터셋에 대한 빠른 분석 쿼리 및 높은 압축률 |
| GeoArrow |
벡터 |
컬럼 기반 Arrow 인메모리 형식의 지리공간 데이터 |
고성능, 제로카피(zero-copy) 인메모리 분석 및 렌더링 |
실시간 웹 GIS는 사물 인터넷(IoT) 센서, 이동하는 차량, 소셜 미디어 피드 등 지속적으로 변화하는 데이터 스트림을 즉각적으로 수집, 처리, 분석 및 시각화하는 시스템을 의미한다.7 이는 정적인 데이터를 다루던 전통적인 GIS의 패러다임을 넘어, 동적인 현상을 실시간으로 모니터링하고 대응하는 것을 가능하게 한다.
실시간 웹 GIS 아키텍처는 일반적으로 다음과 같은 구성 요소들을 포함한다 142:
- 피드 수집(Feed Ingest): MQTT, Kafka와 같은 메시지 브로커나 REST API를 통해 외부의 실시간 데이터 소스로부터 데이터를 지속적으로 수신하는 컴포넌트다.
- 실시간 분석 엔진: 수신되는 데이터를 실시간으로 처리하는 엔진이다. 여기에는 특정 객체가 미리 정의된 구역(geofence)에 진입하거나 이탈하는지 감지하는 지오펜싱(Geofencing), 데이터의 시공간적 패턴 분석, 다른 데이터와의 공간 조인(spatial join)을 통한 정보 보강 등의 분석이 포함된다.
- 데이터 저장소: 처리된 데이터는 후속적인 빅데이터 분석이나 이력 조회를 위해 데이터 레이크나 시계열 데이터베이스에 저장될 수 있다.
- 출력 및 시각화: 분석된 실시간 데이터는 클라이언트로 푸시(push)되어 지도 위에 시각화된다. 이를 위해 서버와 클라이언트 간의 지속적인 연결을 유지하는 웹소켓(WebSockets)과 같은 기술이 주로 사용된다. ArcGIS 시스템에서는 이를 ‘스트림 서비스(stream service)’라는 형태로 제공한다.143
이러한 시스템을 구축하기 위해서는 ArcGIS Velocity와 같은 상용 플랫폼을 활용하거나 144, Kafka, Spark Streaming, Flink와 같은 오픈소스 기술들을 조합하여 이벤트 기반 아키텍처(event-driven architecture)를 설계할 수 있다.7 실시간 웹 GIS는 대용량, 고속의 데이터를 지연 없이 처리해야 하는 기술적 어려움이 있지만, 스마트 시티, 재난 관리, 물류 관제 등 다양한 분야에서 그 중요성이 날로 커지고 있다.
자바스크립트는 웹 개발의 핵심 언어이지만, 인터프리터 방식으로 작동하기 때문에 복잡한 연산에서는 성능적 한계를 보인다. 폴리곤 클리핑, 버퍼링, 재투영 등 계산 집약적인 지리공간 분석을 대규모 데이터셋에 대해 브라우저에서 직접 수행하는 것은 기존 자바스크립트만으로는 어려웠다.145
웹어셈블리(WebAssembly, WASM)는 이러한 한계를 극복하기 위한 기술이다. WASM은 웹 브라우저에서 실행될 수 있는 새로운 유형의 코드로, 텍스트 기반의 자바스크립트와 달리 저수준의 바이너리 명령어 형식이다. 이를 통해 C++, Rust와 같은 고성능 언어로 작성된 코드를 컴파일하여 브라우저에서 네이티브에 가까운 속도로 실행할 수 있다.145
지리공간 분야에서도 WASM을 활용하려는 움직임이 활발하다:
- GEOS-WASM: PostGIS와 Shapely의 핵심 엔진인 강력한 C++ 기하 연산 라이브러리 GEOS를 WASM으로 컴파일한 것이다.147 이를 통해 개발자는 자바스크립트에서 GEOS의 저수준 C-API를 직접 호출하여 고성능의 기하학적 연산을 브라우저 내에서 수행할 수 있다.
- GeoArrow-WASM: Rust와 같이 C 의존성이 없는 언어는 WASM으로 컴파일하기가 특히 용이하다.
geoarrow-rs와 같은 Rust 기반 라이브러리들은 벡터화된 지리공간 연산을 WASM으로 제공하여 또 다른 고성능 분석 경로를 열고 있다.146
WASM의 등장은 웹 GIS 아키텍처에 중대한 변화를 예고한다. 이는 웹 매핑 기술 발전의 세 번째 혁명적 단계로 볼 수 있다. 첫 번째 단계가 OWS를 통해 서버 중심의 아키텍처를 구축한 것이라면, 두 번째 단계는 벡터 타일 기술을 통해 렌더링 작업을 클라이언트로 옮겨온 것이다. 이제 WASM은 여기서 한 걸음 더 나아가 복잡한 분석 작업까지 클라이언트로 가져오고 있다.145 과거에는 WPS 서버에 데이터를 보내 처리해야 했던 버퍼링 연산을 이제는 브라우저가 직접 수행할 수 있게 된 것이다. 이는 서버 부하와 네트워크 지연을 획기적으로 줄여줄 뿐만 아니라, 인터넷 연결 없이도 강력한 분석 기능을 제공하는 오프라인 우선(offline-first) 애플리케이션의 등장을 가능하게 한다. 브라우저는 단순한 뷰어를 넘어, 완전한 기능을 갖춘 GIS 처리 환경으로 진화하고 있다.
웹 GIS 기술의 발전은 활발한 산업 생태계를 기반으로 한다. 이 생태계는 막강한 자본과 기술력을 갖춘 상용 소프트웨어 기업들과, 개방성과 협력을 무기로 혁신을 주도하는 오픈소스 커뮤니티라는 두 개의 큰 축으로 구성된다.
- Esri: 1969년에 설립된 Esri는 의심할 여지 없는 전 세계 GIS 시장의 선두 주자다.151 데스크톱(ArcGIS Pro), 서버(ArcGIS Enterprise), 그리고 클라우드 기반 SaaS(ArcGIS Online)를 아우르는 포괄적인 ArcGIS 플랫폼을 통해 모든 규모의 조직에 GIS 솔루션을 제공한다.153 Esri의 강점은 각 제품이 유기적으로 연동되는 강력하고 통합된 생태계를 구축했다는 점에 있다. ArcGIS Online은 웹 서비스 형태로 베이스맵, 지오코딩, 라우팅 등 다양한 기능을 제공하며, 사용자는 이를 기반으로 손쉽게 웹 맵과 앱을 제작하고 공유할 수 있다.27
- Mapbox: Mapbox는 개발자 친화적인 API와 SDK를 제공하는 데 특화된 플랫폼 기업이다.73 B2B(기업 대상) 및 B2D(개발자 대상) 비즈니스 모델을 기반으로, 사용량에 따라 과금하는 방식으로 수익을 창출한다.73 Mapbox는 고품질의 지도 디자인(cartography)과 벡터 타일 기술의 선구자로 명성을 얻었으며, 물류, 소매, 자동차 등 다양한 산업 분야에 맞춤형 위치 기반 솔루션을 제공한다.158
-
기타 주요 기업: 이 외에도 구글(Google Cloud, Google Maps Platform), 마이크로소프트(Azure Maps), 헥사곤(Hexagon), 트림블(Trimble), 알터릭스(Alteryx) 등 수많은 기업들이 클라우드 인프라, 원격 탐사, 데이터 분석 플랫폼 등 각자의 전문 분야에서 지리공간 산업의 중요한 부분을 차지하고 있다.151
- FOSS4G (Free and Open Source Software for Geospatial): FOSS4G는 특정 단체나 제품이 아닌, 지리공간 분야의 자유-오픈소스 소프트웨어와 그 커뮤니티 전체를 지칭하는 용어다.109 PostGIS(데이터베이스), GeoServer(맵 서버), QGIS(데스크톱), OpenLayers/Leaflet(웹 라이브러리) 등으로 구성된 오픈소스 스택은 상용 플랫폼에 대한 완전하고 강력한 대안을 제공한다.
- 커뮤니티와 협력: FOSS4G 생태계는 전 세계 개발자들의 자발적인 참여와 협력을 통해 발전하며, 개방형 표준 준수를 핵심 가치로 삼는다.163 매년 개최되는 FOSS4G 컨퍼런스는 새로운 기술과 아이디어가 공유되고 논의되는 가장 중요한 장이다.163
- 최신 동향: 최근 FOSS4G 커뮤니티에서는 데이터 과학 분야와의 융합(Jupyter 노트북 활용), 서버리스 아키텍처의 도입, 그리고 Mapbox의 라이선스 변경에 대한 대응으로 MapLibre와 같은 새로운 오픈소스 프로젝트가 빠르게 성장하는 등 역동적인 변화가 일어나고 있다.70
지금까지 웹 GIS를 구성하는 다양한 기술과 아키텍처를 살펴보았다. 마지막으로, 실제 프로젝트에서 이러한 기술들을 어떻게 전략적으로 선택하고, 모든 사용자가 접근할 수 있는 포용적인 지도를 만들기 위한 모범 사례는 무엇인지 구체적으로 알아본다.
“최고의” 기술 스택이란 존재하지 않는다. 가장 적합한 스택은 프로젝트의 고유한 요구사항, 데이터의 특성, 그리고 팀의 역량에 따라 결정된다. 성공적인 웹 GIS 애플리케이션을 구축하기 위해서는 다음의 요소들을 종합적으로 고려하여 기술을 선택해야 한다.
- 프로젝트 규모와 복잡성: 만들고자 하는 애플리케이션이 소수의 마커를 표시하는 단순한 지도인가, 아니면 복잡한 분석 기능이 포함된 엔터프라이즈급 시스템인가? 간단한 작업에는 경량의 Leaflet이 적합하지만, 다중 좌표계 지원이나 복잡한 GIS 기능이 필요하다면 OpenLayers가 더 나은 선택이다.64
- 데이터의 양과 형태: 다루어야 할 데이터의 규모는 어느 정도인가? 수백만 개의 포인트 데이터나 복잡한 폴리곤을 시각화해야 하는가? 대규모 포인트 데이터의 고성능 렌더링에는 deck.gl이, 복잡한 폴리곤 데이터의 효율적인 전송에는 TopoJSON 포맷이 유리하다.64
- 성능 요구사항: 부드러운 애니메이션과 실시간 상호작용이 사용자 경험의 핵심 요소인가? 그렇다면 WebGL 기반의 MapLibre나 Mapbox GL JS가 Canvas 기반의 Leaflet보다 우수한 성능을 제공할 것이다.62
- 상호작용 및 분석 수준: 사용자가 지도 위에서 직접 데이터를 그리거나 편집해야 하는가? 속성 값에 따라 동적으로 스타일이 변해야 하는가? 클라이언트 측에서 복잡한 공간 분석이 필요한가? 이러한 요구사항은 WFS 서비스, Mapbox GL의 표현식(expressions), 나아가 WebAssembly의 도입 여부를 결정하는 중요한 기준이 된다.28
- 2D vs. 3D: 평면 지도로 충분한가, 아니면 실제 지구와 같은 3D 글로브 환경이 필요한가? 2D 지도에는 OpenLayers나 Leaflet이 적합하지만, 3D 시뮬레이션이나 전 지구적 데이터 시각화에는 CesiumJS가 필수적이다.94
- 개발팀의 전문성: 팀이 전문적인 GIS 지식을 보유하고 있는가, 아니면 일반적인 웹 개발에 더 익숙한가? OpenLayers는 GIS 전문가에게 친숙한 개념이 많지만, Leaflet이나 Mapbox GL JS는 일반 웹 개발자들이 더 쉽게 접근할 수 있다.117
- 예산 및 라이선스: 완전한 오픈소스 솔루션으로 구축해야 하는가, 아니면 사용량 기반의 과금 모델을 가진 상용 플랫폼을 활용할 수 있는가? 이는 MapLibre와 Mapbox, 또는 오픈소스 스택과 ArcGIS Online 사이의 선택에 직접적인 영향을 미친다.59
웹 접근성은 모든 사용자가 장애 유무와 관계없이 웹사이트와 애플리케이션의 정보와 기능에 동등하게 접근하고 이용할 수 있도록 보장하는 것을 의미한다. 시각적 정보에 크게 의존하는 웹 지도는 특히 접근성 확보에 더 많은 노력이 필요하다. 접근성 있는 지도를 만드는 것은 단순히 법적 요구사항(예: WCAG, ADA, Section 508)을 준수하는 것을 넘어, 더 많은 사람들에게 정보를 전달하고 포용적인 디지털 환경을 만드는 사회적 책임이기도 하다.167
웹 콘텐츠 접근성 지침(WCAG)을 기반으로 웹 지도에 적용해야 할 핵심적인 접근성 원칙은 다음과 같다.
- 대체 텍스트 제공: 모든 시각적 정보에는 이를 대체할 수 있는 텍스트가 제공되어야 한다. 스크린 리더 사용자는 이 텍스트를 통해 지도 콘텐츠를 이해한다.
- 정적인 지도 이미지에는 내용을 설명하는
alt 속성을 제공해야 한다.169
- iframe으로 삽입된 지도(예: 구글맵)에는
title 속성을 통해 지도의 목적을 명시해야 한다.169
- 가장 중요한 것은, 지도가 전달하려는 핵심 정보(예: 특정 장소의 위치, 경로)를 지도와 인접한 곳에 텍스트 기반으로 함께 제공하는 것이다. 예를 들어, 여러 위치를 표시하는 지도라면 각 위치의 주소와 설명을 담은 목록을 제공해야 한다.169
- 복잡한 데이터 시각화 지도의 경우, 원본 데이터를 표(table) 형태로 제공하는 것이 스크린 리더 사용자에게 매우 유용한 대안이 될 수 있다.169
- 색상에만 의존하지 않기: 정보 전달을 위해 색상을 사용할 수는 있지만, 색상이 유일한 수단이 되어서는 안 된다.170 색맹이나 저시력 사용자를 위해 패턴, 텍스처, 아이콘, 라벨 등 색상 외의 시각적 단서를 함께 사용해야 한다.172 또한, 텍스트와 배경, 지도 요소 간의 명도 대비를 충분히 확보해야 한다. WCAG는 일반 텍스트에 대해 최소 4.5:1의 명도 대비를 권장한다.167
- 키보드 접근성 확보: 마우스를 사용할 수 없는 사용자를 위해 지도의 모든 기능(확대/축소, 이동, 피처 클릭 등)은 키보드만으로도 조작 가능해야 한다.171 사용자가 Tab 키를 눌러 탐색할 때, 현재 어떤 요소에 초점이 있는지 명확하게 시각적으로 표시(예: 테두리, 하이라이트)되어야 한다.170 또한, 키보드 포커스가 지도 내부에 갇혀 빠져나오지 못하는 ‘키보드 함정(keyboard trap)’이 발생하지 않도록 해야 한다.171
- 명확한 라벨과 컨트롤: 모든 상호작용 요소(버튼, 링크 등)는 그 기능을 명확히 알 수 있도록 레이블이 지정되어야 한다.170 지도 위의 위치를 나타내는 이름은 중복되지 않고 고유하며, 그 내용을 쉽게 이해할 수 있도록 구체적으로 작성해야 한다 (예: ‘입구’ 대신 ‘스미스 도서관 동쪽 입구’).167
168
- [✓] 명도 대비 확인: WebAIM Contrast Checker와 같은 도구를 사용하여 모든 텍스트와 그래픽 요소가 WCAG 기준을 충족하는지 검증한다.
- [✓] 명확한 레이블 사용: 모든 지도 요소에 대해 간결하고 설명적인 제목과 레이블을 제공한다.
- [✓] 대체 텍스트 추가: 모든 의미 있는 이미지에
alt 텍스트를 추가하고, 모든 비디오에 자막과 오디오 설명을 제공한다.
- [✓] 접근성 정보 제공: 휠체어 접근 가능 경로, 장애인 주차 구역, 경사로 등 접근성과 관련된 정보를 지도 위에 명확히 표시하고, 이를 위한 전용 카테고리나 필터를 제공한다.
- [✓] 키보드 테스트: 마우스를 사용하지 않고 오직 키보드만으로 지도의 모든 기능을 사용할 수 있는지 테스트한다.
- [✓] 스크린 리더 테스트: 실제 스크린 리더(NVDA, JAWS 등)를 사용하여 지도를 탐색하며 사용자가 정보를 올바르게 인지하고 상호작용할 수 있는지 확인한다.173
- [✓] 반응형 디자인 검증: 다양한 크기의 화면(모바일, 태블릿, 데스크톱)과 확대된 브라우저 창에서도 콘텐츠가 깨지거나 가려지지 않고 정상적으로 표시되는지 확인한다.
결론적으로, 접근성 있는 지도를 만드는 것은 기술적인 준수를 넘어, 모든 사용자를 배려하는 포용적인 설계 철학의 문제이다. 초기 기획 단계부터 접근성을 고려함으로써, 우리는 더 많은 사람이 지리 정보의 가치를 누릴 수 있는 유용하고 공평한 웹 환경을 구축할 수 있다.
-
| GIS란? |
공간정보시스템 매핑 기술 - Esri, accessed July 6, 2025, https://www.esri.com/ko-kr/what-is-gis/overview |
- GIS란무엇인가?, accessed July 6, 2025, http://www.sigmapress.co.kr/shop/shop_image/g45718_1494826286.pdf
- 지리 정보 시스템(GIS)이란 무엇인가요? - IBM, accessed July 6, 2025, https://www.ibm.com/kr-ko/think/topics/geographic-information-system
- 지리 정보 시스템 - 위키백과, 우리 모두의 백과사전, accessed July 6, 2025, https://ko.wikipedia.org/wiki/%EC%A7%80%EB%A6%AC_%EC%A0%95%EB%B3%B4_%EC%8B%9C%EC%8A%A4%ED%85%9C
- 정보통신분야의 GIS 기술의 활용 - Korea Science, accessed July 6, 2025, https://koreascience.kr/article/JAKO199811920374836.pdf
- Web GIS 의 기술현황 및 구현 - SlideServe, accessed July 6, 2025, https://www.slideserve.com/kosey/web-gis
- Web GIS: Revolutionizing RealTime Spatial Data Access - Satpalda, accessed July 6, 2025, https://satpalda.com/web-gis-revolutionizing-realtime-spatial-data-access/
- 웹 매핑 - 위키백과, 우리 모두의 백과사전, accessed July 6, 2025, https://ko.wikipedia.org/wiki/%EC%9B%B9_%EB%A7%A4%ED%95%91
- Web GIS - Migrating to ArcGIS Pro, accessed July 6, 2025, https://migrating2arcgispro.eagle.co.nz/pages/web-gis
- 지도 서비스는 어떻게 만드는 것일까? - NAVER D2, accessed July 6, 2025, https://d2.naver.com/helloworld/1174
- 타일 레이어-Portal for ArcGIS, accessed July 6, 2025, https://enterprise.arcgis.com/ko/portal/latest/use/tile-layers.htm
- GeoJSON - Wikipedia, accessed July 6, 2025, https://en.wikipedia.org/wiki/GeoJSON
- Using GeoJSON with Leaflet - Leaflet - a JavaScript library for interactive maps, accessed July 6, 2025, https://leafletjs.com/examples/geojson/
- Chapter 5 Using GeoJSON in Leaflet - Bookdown, accessed July 6, 2025, https://bookdown.org/sammigachuhi/book-leaflet/using-geojson-in-leaflet.html
- topojson/topojson: An extension of GeoJSON that encodes topology! - GitHub, accessed July 6, 2025, https://github.com/topojson/topojson
- Difference between GeoJSON and TopoJSON - Stack Overflow, accessed July 6, 2025, https://stackoverflow.com/questions/14740705/difference-between-geojson-and-topojson/14765321
- Difference between GeoJSON and TopoJSON - Stack Overflow, accessed July 6, 2025, https://stackoverflow.com/questions/14740705/difference-between-geojson-and-topojson
- TopoJSON vs. GeoJSON / Siavash Habibi - Observable, accessed July 6, 2025, https://observablehq.com/@syaleni/topojson-vs-geojson
-
| KML Tutorial |
Keyhole Markup Language - Google for Developers, accessed July 6, 2025, https://developers.google.com/kml/documentation/kml_tut |
- Keyhole Markup Language - Wikipedia, accessed July 6, 2025, https://en.wikipedia.org/wiki/Keyhole_Markup_Language
-
| What is KML?-ArcGIS Pro |
Documentation, accessed July 6, 2025, https://pro.arcgis.com/en/pro-app/latest/help/data/kml/what-is-kml-.htm |
- Mastering KML for Geospatial Insights - Number Analytics, accessed July 6, 2025, https://www.numberanalytics.com/blog/ultimate-guide-to-kml-in-geospatial-analysis
-
| Know about KML File Format |
Easy Guide - Mapulator, accessed July 6, 2025, https://mapulator.app/kml-file-format-everything-you-need-to-know/ |
- Open Geospatial Consortium (OGC) - OpenGXT for Server 1.0 문서, accessed July 6, 2025, http://opengxt.mangosystem.com/ko/webprocessingservice/index.html
- Open Geospatial Consortium Standards - OSGeo-Live 8.0 Documentation, accessed July 6, 2025, https://live.osgeo.org/archive/8.0/ko/standards/standards.html
- Introduction OGC API standards, accessed July 6, 2025, https://apsac.ap.gov.in/wp-content/uploads/2023/01/Introduction.pdf
- Web Services–A Standards-Based Framework for Integration - Esri, accessed July 6, 2025, https://www.esri.com/news/arcuser/0403/webservices.html
- [OpenLayers] WMS 와 WFS - 송병민의 개발일지 - 티스토리, accessed July 6, 2025, https://tqa0722.tistory.com/m/15
- [GeoServer] GeoServer란? - 늦깎이 개발자의 공부 이야기 - 티스토리, accessed July 6, 2025, https://clsung.tistory.com/7
- WMS/WFS 무엇을 사용할까? - velog, accessed July 6, 2025, https://velog.io/@kyeong1750/WMSWFS-%EB%AC%B4%EC%97%87%EC%9D%84-%EC%82%AC%EC%9A%A9%ED%95%A0%EA%B9%8C
- GeoServer - 위키백과, 우리 모두의 백과사전, accessed July 6, 2025, https://ko.wikipedia.org/wiki/GeoServer
- [mapserver-users] Mapserver vs Geoserver, accessed July 6, 2025, https://mapserver-users.osgeo.narkive.com/P2vwzUlo/mapserver-vs-geoserver
- 10.2. 수업: WFS(Web Feature Service) - QGIS Documentation 문서, accessed July 6, 2025, https://docs.qgis.org/3.40/ko/docs/training_manual/online_resources/wfs.html
- 11.2. Lesson: WFS(Web Feature Service) - QGIS, accessed July 6, 2025, https://download.qgis.org/qgisdata/2.8/ko/docs/training_manual/online_resources/wfs.html
-
| 웹 기반 서비스 표준 |
Documentation - 1. 소개, accessed July 6, 2025, https://docs2.stlogic.co.kr/4/4 |
- Open Source GIS를 이용한 고해상도 영상의 Tile Map Service 시스템 구축에 관한 연구 - KISS, accessed July 6, 2025, https://kiss.kstudy.com/DetailOa/Ar?key=54294222
- 타일 맵 서비스 - 위키백과, 우리 모두의 백과사전, accessed July 6, 2025, https://ko.wikipedia.org/wiki/%ED%83%80%EC%9D%BC_%EB%A7%B5_%EC%84%9C%EB%B9%84%EC%8A%A4
- 웹 맵 타일 서비스 - Aspose, accessed July 6, 2025, https://products.aspose.com/gis/ko/net/gis-formats/wmts
- 맵박스 벡터 타일 - Aspose, accessed July 6, 2025, https://products.aspose.com/gis/ko/net/gis-formats/mvt
- Vector tiles tutorial - GeoServer 2.21.x User Manual, accessed July 6, 2025, https://docs.geoserver.org/2.21.x/en/user/extensions/vectortiles/tutorial.html
- Mapbox GL JS vs. Mapbox.js - Stack Overflow, accessed July 6, 2025, https://stackoverflow.com/questions/35069753/mapbox-gl-js-vs-mapbox-js
- 벡터 타일 레이어-Portal for ArcGIS, accessed July 6, 2025, https://enterprise.arcgis.com/ko/portal/10.5/use/vector-tile-layers.htm
- 벡터 타일 지도를 활용한 사용자 맞춤형 웹 지도 서비스 제공 방안에, accessed July 6, 2025, https://kiss.kstudy.com/Detail/Ar?key=3847580
- 오픈스트리트맵 재단에서 공식적으로 벡터 지도 타일을 운영하기 시작함 - GeekNews, accessed July 6, 2025, https://news.hada.io/topic?id=17808
- Overview and main concepts - OGC API workshop, accessed July 6, 2025, https://ogcapi-workshop.ogc.org/overview-and-main-concepts/
- IMPROVING ACCESS THROUGH WEB APIS - OGC API - Open Geospatial Consortium, accessed July 6, 2025, https://ogcapi.ogc.org/downloads/OGC_APIs_prospectus.pdf
- LX 2024년 표준개발협력기관 지원 사업 협약 체결 WMS, WFS, WCS의 뒤를 이을 OGC API를 알아, accessed July 6, 2025, https://www.lx.or.kr/cmm/fms/FileDown.do?atchFileId=FILE_000000000043843OeAPG&fileSn=0
- OGC API, accessed July 6, 2025, https://ogcapi.ogc.org/
- Features - Overview - OGC API, accessed July 6, 2025, https://ogcapi.ogc.org/features/overview.html
- ogcapi-workshop.ogc.org, accessed July 6, 2025, https://ogcapi-workshop.ogc.org/api-deep-dive/features/#:~:text=Note%20as%20well%20that%20WFS,well%20as%20other%20vector%20formats.
-
| OGC Standards |
Geospatial Standards and Resources, accessed July 6, 2025, https://www.ogc.org/standards/ |
- Common - Overview - OGC API, accessed July 6, 2025, https://ogcapi.ogc.org/common/overview.html
- Features - OGC API, accessed July 6, 2025, https://ogcapi.ogc.org/features/
- OGC API - Records and STAC : r/gis - Reddit, accessed July 6, 2025, https://www.reddit.com/r/gis/comments/sjog5a/ogc_api_records_and_stac/
- Leaflet - a JavaScript library for interactive maps, accessed July 6, 2025, https://leafletjs.com/
- 5 JavaScript mapping APIs compared - LogRocket Blog, accessed July 6, 2025, https://blog.logrocket.com/javascript-mapping-apis-compared/
- Leaflet, a JavaScript library for Web Mapping Applications - eTatvaSoft, accessed July 6, 2025, https://www.etatvasoft.com/insights/leaflet-a-javascript-library-for-web-mapping-applications/
- Documentation - Leaflet - a JavaScript library for interactive maps, accessed July 6, 2025, https://leafletjs.com/reference.html
- Comparing Mapbox, Leaflet, and OpenLayers - Bac Ha Software (BHSoft), accessed July 6, 2025, https://bachasoftware.com/blog/insights-2/comparing-mapbox-openlayers-and-leaflet-30
- What are the disadvantages of Leaflet? - Lemon.io, accessed July 6, 2025, https://lemon.io/answers/leaflet/what-are-the-disadvantages-of-leaflet/
-
| I’ve struggled to understand the relationship between Mapbox, Mapbox Studio, Map… |
Hacker News, accessed July 6, 2025, https://news.ycombinator.com/item?id=27607050 |
- MapLibre GL JS vs. Leaflet: Choosing the right tool for your interactive map, accessed July 6, 2025, https://blog.jawg.io/maplibre-gl-vs-leaflet-choosing-the-right-tool-for-your-interactive-map/
- OpenLayers - Welcome, accessed July 6, 2025, https://openlayers.org/
- Detailed Comparison of MapLibre, Leaflet, and OpenLayers Contribution Growth - Medium, accessed July 6, 2025, https://medium.com/@limeira.felipe94/detailed-comparison-of-maplibre-leaflet-and-openlayers-contribution-growth-2d52cef235b2
- Choosing the Right Mapping Library: Leaflet, OpenLayers vs. Folium and Geemap - Medium, accessed July 6, 2025, https://medium.com/@limeira.felipe94/choosing-the-right-mapping-library-leaflet-openlayers-vs-folium-and-geemap-bdbc92f701c4
- OpenLayers Examples, accessed July 6, 2025, https://openlayers.org/en/latest/examples/
- Style Expressions - OpenLayers, accessed July 6, 2025, https://openlayers.org/en/latest/examples/style-expressions.html
- Basic Concepts - OpenLayers, accessed July 6, 2025, https://openlayers.org/doc/tutorials/concepts.html
- Create 3D and Dynamic Web Maps with Mapbox GL JS, accessed July 6, 2025, https://www.mapbox.com/mapbox-gljs
- OpenSource to the rescue: the future of MapLibre :: FOSS4G 2022 general tracks :: pretalx, accessed July 6, 2025, https://talks.osgeo.org/foss4g-2022/talk/SNZWWJ/
- Mapbox pricing, accessed July 6, 2025, https://www.mapbox.com/pricing
-
| Pricing |
Mapbox GL JS, accessed July 6, 2025, https://docs.mapbox.com/mapbox-gl-js/guides/pricing/ |
- What is Mapbox’s business model? - Vizologi, accessed July 6, 2025, https://vizologi.com/business-strategy-canvas/mapbox-business-model-canvas/
- Quick Start Guide - Leaflet - a JavaScript library for interactive maps, accessed July 6, 2025, https://leafletjs.com/examples/quick-start/
- Triggering click event on Leaflet map? - GIS Stack Exchange, accessed July 6, 2025, https://gis.stackexchange.com/questions/88273/triggering-click-event-on-leaflet-map
- Tooltip on Hover - OpenLayers, accessed July 6, 2025, https://openlayers.org/en/latest/examples/tooltip-on-hover.html
- Select Features by Hover - OpenLayers, accessed July 6, 2025, https://openlayers.org/en/latest/examples/select-hover-features.html
-
| Examples |
Mapbox GL JS, accessed July 6, 2025, https://docs.mapbox.com/mapbox-gl-js/example/ |
- Using the Leaflet.draw plugin for leaflet.js - D3.js Tips and Tricks, accessed July 6, 2025, http://www.d3noob.org/2014/01/using-leafletdraw-plugin-for-leafletjs.html
- Leaflet Draw Documentation - Idacordig, accessed July 6, 2025, https://idacordig.unc.edu.ar/static/packages/leaflet-draw/docs/leaflet-draw-0.4.3.html
- Leaflet Draw Documentation, accessed July 6, 2025, https://leaflet.github.io/Leaflet.draw/docs/leaflet-draw-latest.html
-
| data-driven styling |
Help - Mapbox Documentation, accessed July 6, 2025, https://docs.mapbox.com/help/glossary/data-driven-styling/ |
-
| Zoomable Choropleth Map from GeoJSON with Leaflet |
Guides - MapTiler documentation, accessed July 6, 2025, https://docs.maptiler.com/guides/maps-apis/maps-platform/zoomable-choropleth-map-from-geojson-with-leaflet/ |
- Choropleths • leaflet - rstudio.github.io, accessed July 6, 2025, https://rstudio.github.io/leaflet/articles/choropleths.html
- Interactive choropleth map with R and leaflet - The R Graph Gallery, accessed July 6, 2025, https://r-graph-gallery.com/183-choropleth-map-with-leaflet.html
-
| Style lines with a data-driven property |
Mapbox GL JS, accessed July 6, 2025, https://docs.mapbox.com/mapbox-gl-js/example/data-driven-lines/ |
- CesiumJS – Cesium, accessed July 6, 2025, https://cesium.com/platform/cesiumjs/
- CesiumJS: Fundamentals – Cesium, accessed July 6, 2025, https://cesium.com/learn/cesiumjs-fundamentals/
- CesiumJS Features Checklist / CesiumGS/cesium Wiki - GitHub, accessed July 6, 2025, https://github.com/CesiumGS/cesium/wiki/CesiumJS-Features-Checklist
-
| Photorealistic 3D terrain with aerial imagery using Cesium JS |
Guides |
Map tilling hosting, accessed July 6, 2025, https://docs.maptiler.com/guides/map-tilling-hosting/data-hosting/photorealistic-3d-terrain-with-aerial-imagery-using-cesium-js/ |
- How to use Cesium JS: step-by-step tutorial - MapTiler documentation, accessed July 6, 2025, https://docs.maptiler.com/cesium/how-to-use-cesium/
- Terrain – Cesium, accessed July 6, 2025, https://cesium.com/learn/3d-tiling/ion-tile-terrain/
- CesiumJS – Cesium, accessed July 6, 2025, https://cesium.com/learn/cesiumjs-learn/
- What is the difference between Mapbox GL JS and Cesium? - Stack Overflow, accessed July 6, 2025, https://stackoverflow.com/questions/59732285/what-is-the-difference-between-mapbox-gl-js-and-cesium
- Cesium and Mapbox: how to have the same nice feeling?, accessed July 6, 2025, https://community.cesium.com/t/cesium-and-mapbox-how-to-have-the-same-nice-feeling/8619
- Is this map Cesium JS?, accessed July 6, 2025, https://community.cesium.com/t/is-this-map-cesium-js/24282
-
| Home |
deck.gl, accessed July 6, 2025, https://deck.gl/ |
-
| Base Maps |
deck.gl, accessed July 6, 2025, https://deck.gl/docs/get-started/using-with-map |
-
| Views and Projections |
deck.gl, accessed July 6, 2025, https://deck.gl/docs/developer-guide/views |
- Coordinate Systems - Deck.gl, accessed July 6, 2025, https://deck.gl/docs/developer-guide/coordinate-systems
-
| @deck.gl/carto |
deck.gl, accessed July 6, 2025, https://deck.gl/docs/api-reference/carto/overview |
- kepler.gl, accessed July 6, 2025, https://kepler.gl/
-
| Display a Kepler.gl Map Using Jupyter Notebook |
by James Opacich |
Medium, accessed July 6, 2025, https://jamesopacich.medium.com/display-a-kepler-gl-map-69d807dae082 |
- Introductory Guide to Kepler.gl - GitHub Pages, accessed July 6, 2025, https://leadr-msu.github.io/kepler-gl/
-
| Carto vs Kepler.gl: Which tool to choose for location analytics? |
by Aditi Sinha - Medium, accessed July 6, 2025, https://medium.com/data-science/carto-vs-kepler-which-tool-to-use-for-geospatial-analytics-894c867545b4 |
- kepler.gl: Welcome, accessed July 6, 2025, https://docs.kepler.gl/
-
| PostGIS 시작하기 |
PDF - SlideShare, accessed July 6, 2025, https://www.slideshare.net/slideshow/postgis-101511460/101511460 |
- Application Scheme of PostgreSQL-PostGIS Server Engine based on Open Source for GIS Portal Building -Proceedings of the KSRS Conference - Korea Science, accessed July 6, 2025, https://koreascience.kr/article/CFKO200911850418327.do
-
| Developing GIS With Free & Open Source Software |
GeoPerformans, accessed July 6, 2025, https://geoperformans.com/en/article/developing-gis-with-free-open-source-software |
- Publishing maps with Geoserver and PostGIS - Cybertec, accessed July 6, 2025, https://www.cybertec-postgresql.com/en/publishing-maps-with-geoserver-and-postgis/
- OpenLayers를 여행하는 개발자를 위한 안내서 - 7. 공간정보 데이터를 관리하는 법. GeoServer, accessed July 6, 2025, https://blog.itcode.dev/projects/2022/03/07/gis-guide-for-programmer-7
- 제대로 배워보자 - 공개SW 포털, accessed July 6, 2025, https://www.oss.kr/storage/app/public/oss/c0/77/%5BGeoServer%5D%20Solution%20Guide%20V0.95.pdf
- 공개SW솔루션설치&활용가이드, accessed July 6, 2025, [https://www.oss.kr/storage/app/public/oss/f7/5a/GeoServer]%20Solution%20Guide%20V0.95.pdf
-
| GeoServer 기초 |
PPT - SlideShare, accessed July 6, 2025, https://www.slideshare.net/slideshow/geoserver-30424128/30424128 |
- Vector tiles tutorial - GeoServer 2.28.x User Manual, accessed July 6, 2025, https://docs.geoserver.org/main/en/user/extensions/vectortiles/tutorial.html
-
| Teaching Programming for GIS, Part 2: Web Programming |
Esri Industry Blog, accessed July 6, 2025, https://www.esri.com/en-us/industries/blog/articles/teaching-programming-for-gis-part-2 |
-
| Web GIS Development starter Guide |
by Krishna G. Lodha |
Geek Culture |
Medium, accessed July 6, 2025, https://medium.com/geekculture/web-gis-development-starter-guide-e9ecd32e7fad |
- [Ubuntu 16.04] PostGIS 설치 후 GeoServer에 연결하고 지도 띄우는 방법 - 공부하는짱구, accessed July 6, 2025, https://huangdi.tistory.com/22
- [Javascript] OpenLayers + GeoServer + PostGIS + VWORLD + WFS,WMS - 장수궁뎅이, accessed July 6, 2025, https://dgblog.tistory.com/260
- [Leaflet - GeoServer] WMS layer 로 GIS 지도 퍼블리싱하기, accessed July 6, 2025, https://thinkoutbox.tistory.com/54
-
| GeoServer with leaflet |
Application of GeoServer on web-GIS - YouTube, accessed July 6, 2025, https://www.youtube.com/watch?v=fdUpaWd6I_Y |
- Creating a web mapping application - Maplibre and pg_tileserv (#3) - YouTube, accessed July 6, 2025, https://www.youtube.com/watch?v=WLKrSD3LmHs
- Creating a web mapping application (#1) - YouTube, accessed July 6, 2025, https://www.youtube.com/watch?v=iFVlbEb5P5s
- Making a web based map working with millions of records : r/gis - Reddit, accessed July 6, 2025, https://www.reddit.com/r/gis/comments/we0e1b/making_a_web_based_map_working_with_millions_of/
-
| What are Cloud Optimized GeoTIFFs (COGs)? |
U.S. Geological Survey - USGS.gov, accessed July 6, 2025, https://www.usgs.gov/faqs/what-are-cloud-optimized-geotiffs-cogs |
- www.usgs.gov, accessed July 6, 2025, [https://www.usgs.gov/faqs/what-are-cloud-optimized-geotiffs-cogs#:~:text=A%20Cloud%20Optimized%20GeoTIFF%20(COG,of%20a%20file%20they%20need.](https://www.usgs.gov/faqs/what-are-cloud-optimized-geotiffs-cogs#:~:text=A Cloud Optimized GeoTIFF (COG,of a file they need.)
- Cloud Optimized GeoTIFF in depth, accessed July 6, 2025, https://cogeo.org/in-depth.html
- Cloud-Optimized GeoTIFFs, accessed July 6, 2025, https://guide.cloudnativegeo.org/cloud-optimized-geotiffs/intro.html
- The Complete Guide to Cloud Optimized GeoTIFF (COG) - Atlas.co, accessed July 6, 2025, https://atlas.co/blog/the-complete-guide-to-cloud-optimized-geotiff-cog/
-
| New Standard Announced for Using GeoTIFF Imagery in the Cloud |
NASA Earthdata, accessed July 6, 2025, https://www.earthdata.nasa.gov/news/feature-articles/new-standard-announced-using-geotiff-imagery-cloud |
- Zarr - Zarr, accessed July 6, 2025, https://zarr.dev/
- guide.cloudnativegeo.org, accessed July 6, 2025, https://guide.cloudnativegeo.org/zarr/intro.html#:~:text=The%20Zarr%20data%20format%20is,Zarr’s%20unit%20of%20data%20storage.
-
| Zarr Storage Specification Standard |
Publications |
OGC, accessed July 6, 2025, https://www.ogc.org/standards/zarr-storage-specification/ |
- Zarr Storage Specification Version 2 - NASA Earthdata, accessed July 6, 2025, https://www.earthdata.nasa.gov/about/esdis/esco/standards-practices/zarr-storage-specification-v2
- Zarr (data format) - Wikipedia, accessed July 6, 2025, https://en.wikipedia.org/wiki/Zarr_(data_format)
- zarr-developers/geozarr-spec: This document aims to provides a geospatial extension to the Zarr specification. Zarr specifies a protocol and format used for storing Zarr arrays, while the present extension defines conventions and recommendations for storing multidimensional georeferenced grid of geospatial observations (including rasters). - GitHub, accessed July 6, 2025, https://github.com/zarr-developers/geozarr-spec
- GeoParquet, accessed July 6, 2025, https://geoparquet.org/
- Interview with Kyle Barron on GeoArrow and GeoParquet, and the Future of Geospatial Data Analysis, accessed July 6, 2025, https://cloudnativegeo.org/blog/2024/12/interview-with-kyle-barron-on-geoarrow-and-geoparquet-and-the-future-of-geospatial-data-analysis/
- geoarrow.org, accessed July 6, 2025, https://geoarrow.org/#:~:text=Whereas%20GeoParquet%20is%20a%20file,using%20the%20Arrow%20IPC%20format)..)
- GeoArrow and GeoParquet in deck.gl / Kyle Barron - Observable, accessed July 6, 2025, https://observablehq.com/@kylebarron/geoarrow-and-geoparquet-in-deck-gl
- GeoParquet 1.1 coming soon! - Medium, accessed July 6, 2025, https://medium.com/radiant-earth-insights/geoparquet-1-1-coming-soon-9b72c900fbf2
-
| Real-time data streaming and analytics system overview |
ArcGIS Architecture Center, accessed July 6, 2025, https://architecture.arcgis.com/en/framework/system-patterns/real-time-data-streaming-and-analytics/overview.html |
-
| ArcGIS Server web services-Portal for ArcGIS |
Documentation for ArcGIS Enterprise, accessed July 6, 2025, https://enterprise.arcgis.com/en/portal/10.5/use/arcgis-server-services.htm |
-
| Real-time data streaming and analytics system (SaaS) |
ArcGIS Architecture Center, accessed July 6, 2025, https://architecture.arcgis.com/en/framework/system-patterns/real-time-data-streaming-and-analytics/deployment-patterns/as-saas.html |
- stuartlynn/wasm_geo_agg - GitHub, accessed July 6, 2025, https://github.com/stuartlynn/wasm_geo_agg
-
| Prototyping GeoRust + GeoArrow in WebAssembly / Kyle Barron |
Observable, accessed July 6, 2025, https://observablehq.com/@kylebarron/prototyping-georust-geoarrow-in-webassembly |
- GEOS-WASM, accessed July 6, 2025, https://chrispahm.github.io/geos-wasm/
- chrispahm/geos-wasm: WASM + JS port of GEOS - GitHub, accessed July 6, 2025, https://github.com/chrispahm/geos-wasm
- geoarrow-wasm, accessed July 6, 2025, https://geoarrow.org/geoarrow-rs/js/
-
| Real-Time Geospatial Intelligence: Leveraging Rust WebAssembly and Predictive AI for Browser-Based Spatial Queries. |
by Leonardo de Melo |
Medium, accessed July 6, 2025, https://medium.com/@LeonardoDeMeloWeb/real-time-geospatial-intelligence-leveraging-rust-webassembly-and-predictive-ai-for-browser-based-a608ca5ed7c2 |
- Top Companies in Geospatial Analytics Industry - Google (US), Trimble (US) and Esri (US), accessed July 6, 2025, https://www.marketsandmarkets.com/ResearchInsight/geospatial-analytics-market.asp
- Major Players - Geospatial Analytics Industry - Coherent Market Insights, accessed July 6, 2025, https://www.coherentmarketinsights.com/blog/insights/major-players-geospatial-analytics-industry-2132
- ArcGIS Online - Web GIS Mapping Software - Esri, accessed July 6, 2025, https://www.esri.com/en-us/arcgis/products/arcgis-online/overview
-
| Geospatial Analytics Market Size, Industry Share |
2033 - IMARC Group, accessed July 6, 2025, https://www.imarcgroup.com/geospatial-analytics-market |
- ArcGIS Online, accessed July 6, 2025, https://www.arcgis.com/
-
| About Mapbox |
Location Intelligence for Business, accessed July 6, 2025, https://www.mapbox.com/company |
- vizologi.com, accessed July 6, 2025, https://vizologi.com/business-strategy-canvas/mapbox-business-model-canvas/#:~:text=We%20generate%20income%20through%20usage,also%20provide%20significant%20revenue%20streams.
- About Mapbox Technology, accessed July 6, 2025, https://www.mapbox.com/about/maps
- Mapbox Maps, accessed July 6, 2025, https://www.mapbox.com/maps
- Global Top 100 Geospatial Companies - 2024 Edition - Geoawesome, accessed July 6, 2025, https://geoawesome.com/global-top-100-geospatial-companies-2024-edition/
- Geospatial Analytics Market Size, Share and Industry Report - MarketsandMarkets, accessed July 6, 2025, https://www.marketsandmarkets.com/Market-Reports/geospatial-analytics-market-198354497.html
- Top 10 Geospatial Data Companies - EM360Tech, accessed July 6, 2025, https://em360tech.com/top-10/geospatial-data-companies
- FOSS4G 2024 Belém Brasil, accessed July 6, 2025, https://2024.foss4g.org/
- What We Learned About Open-Source Geospatial Technology at FOSS4G - CARTO, accessed July 6, 2025, https://carto.com/blog/what-we-learned-about-open-source-geospatial-foss4g
- FOSS4G: Presenting on the Future of Web Mapping, Cartography, accessed July 6, 2025, https://blog.mapbox.com/foss4g-presenting-on-the-future-of-web-mapping-cartography-and-mapbox-streets-5e4e2b47e610
- kepler.gl, accessed July 6, 2025, https://kepler.gl/demo
- Interactive Map Web Accessibility Styles & Tips - Concept3D Help, accessed July 6, 2025, https://help.concept3d.com/hc/en-us/articles/115003617214-Interactive-Map-Web-Accessibility-Styles-Tips
- Making Your Interactive Maps Accessible: A Comprehensive Guide, accessed July 6, 2025, https://mapme.com/blog/making-your-interactive-maps-accessible/
- Maps - Web Accessibility Guidelines, accessed July 6, 2025, http://web-accessibility.carnegiemuseums.org/content/maps/
- Designing for Web Accessibility – Tips for Getting Started - W3C, accessed July 6, 2025, https://www.w3.org/WAI/tips/designing/
- Interactive Maps and Accessibility: 4 Tips, accessed July 6, 2025, https://www.boia.org/blog/interactive-maps-and-accessibility-4-tips
- 11 Accessibility Considerations That Transform Modern Map Design, accessed July 6, 2025, https://www.maplibrary.org/1613/exploring-accessibility-considerations-in-map-design/
- Screen Readers, Map and App accessibility : r/gis - Reddit, accessed July 6, 2025, https://www.reddit.com/r/gis/comments/1fcqyp4/screen_readers_map_and_app_accessibility/