항공 정사영상 구글 지도 표출 기술 안내서

항공 정사영상 구글 지도 표출 기술 안내서

1. 서론: 고해상도 공간 정보와 웹 지도의 융합

본 안내서는 고정밀 항공 정사영상을 범용적인 구글 지도 플랫폼에 통합하는 데 필요한 이론적 배경과 실용적 기술을 총망라하여 제시하는 것을 목표로 한다. 이 안내서는 정사영상의 기본 개념부터 공간 좌표 참조 시스템(CRS)의 복잡한 이론, GDAL(Geospatial Data Abstraction Library)을 활용한 데이터 전처리, 그리고 구글 지도 API를 통한 최종 시각화에 이르는 전 과정을 상세히 다룬다.1

핵심 과제는 근본적으로 다른 두 공간 데이터 모델의 정합에 있다. 정사영상은 측량 및 지도 제작을 목적으로 밀리미터 단위의 위치 정확도를 추구하는 정밀한 기하학적 모델이다.4 반면, 구글 지도는 전 지구적 범위의 신속한 시각화와 사용자 상호작용에 최적화된 웹 기반의 시각적 지구 모델이다.5 이 둘은 서로 다른 좌표 참조 시스템(CRS)을 사용하므로, 이들을 하나의 지도 위에 수학적으로 정확히 중첩시키는 것이 본 과업의 본질이다.6 이는 단순히 이미지를 지도 위에 ‘올려놓는’ 수준을 넘어, 서로 다른 두 개의 ’디지털 현실 모델’을 수학적으로 일치시키는 정교한 과정이다.

따라서 본 안내서는 다음과 같은 체계적인 기술 흐름에 따라 내용을 전개한다. 첫째, 정사영상의 특성을 이해하고, 둘째, 두 데이터 간의 좌표계 차이를 분석한다. 셋째, GDAL의 gdalwarp 유틸리티를 사용하여 정사영상의 좌표계를 구글 지도 표준에 맞게 재투영한다. 넷째, gdal2tiles 스크립트로 재투영된 이미지를 웹 환경에 최적화된 타일 피라미드 구조로 변환한다. 마지막으로, Google Maps JavaScript API를 활용하여 생성된 타일 레이어를 지도 위에 성공적으로 중첩하는 방법을 제시한다.8 이 과정을 통해 GIS 비전문가 개발자들이 웹 매핑 시 겪는 좌표계의 복잡성이라는 장벽을 해소하고, 실질적인 문제 해결 능력을 함양하는 데 기여하고자 한다.

2. 정사영상의 이해

2.1 정사영상의 정의와 기하학적 특성

항공사진은 항공기에 탑재된 카메라를 통해 지표면을 촬영한 결과물이다. 그러나 일반적인 항공사진은 카메라 렌즈의 중심 투영(Central Projection) 방식 때문에 촬영된 이미지에 기하학적 왜곡이 포함된다. 즉, 지형의 높낮이(기복)나 건물의 높이로 인해 지점이 실제 위치보다 바깥쪽으로 밀려나 보이는 ’기복 변위’가 발생하며, 촬영 당시 항공기의 기울어짐(자세)으로 인한 ’편위’도 나타난다.1 이로 인해 일반 항공사진에서는 높은 건물이 옆으로 누워 보이는 현상이 나타나며, 지도처럼 정확한 거리나 면적을 측정하는 데 사용할 수 없다.

정사영상이란 이러한 기하학적 왜곡을 수학적으로 보정한 고정밀 영상 데이터를 의미한다. 제작 과정에서는 수치표고모델(DEM, Digital Elevation Model)을 이용하여 지형의 높이 정보를 반영하고, 항공기의 외부표정요소(위치 및 자세)를 이용해 왜곡을 제거한다.4 이 ‘정사보정’ 과정을 거치면, 모든 지점을 수직 상공에서 내려다본 것과 같은 정사 투영(Orthogonal Projection) 상태로 변환된다.1

그 결과, 정사영상은 일반 지도와 동일하게 모든 지점에서 축척이 일정하게 유지되며, 영상 내 모든 객체의 위치 정확도가 수치지도 수준으로 향상된다.4 이 때문에 정사영상은 단순한 사진이 아닌, 정확한 위치, 거리, 면적 측정이 가능한 ’영상 지도(Image Map)’로서 높은 가치를 지닌다. 사용자가 구글 지도에 표출하고자 하는 ’정사영상’은 단순한 그림 파일이 아니라, 모든 픽셀이 실제 세계의 지리적 좌표와 1:1로 대응하는 정밀한 ’공간 데이터베이스’인 것이다. 이러한 본질을 이해하는 것은 후속 좌표계 변환 과정의 중요성을 인지하는 첫걸음이다.

2.2 실감 정사영상(True Ortho Image)의 심화 개념

전통적인 정사영상은 지형의 기복은 보정하지만, 건물과 같은 인공 구조물의 높이는 완벽하게 처리하지 못하는 한계가 있었다. 이로 인해 도심 지역의 고층 빌딩이 방사상으로 누워 보이는 ’도복 현상(Building Lean)’이 여전히 영상에 남아있게 된다.

실감 정사영상(True Ortho Image)은 이러한 한계를 극복한 한 단계 더 발전된 형태의 정사영상이다. 실감 정사영상은 지형뿐만 아니라 건물, 교량 등 인공 구조물의 기복까지 정밀하게 보정한다.4 이를 통해 건물의 도복 현상을 제거하고, 건물이 가리고 있던 지면(폐색 지역, Occlusion Area)까지 복원하여 표현한다. 결과적으로 실감 정사영상에서는 모든 건물이 수직으로 서 있는 것처럼 보여 실제 모습에 가장 가깝다.

이러한 특성 덕분에 실감 정사영상은 디지털 트윈(Digital Twin), 스마트 시티(Smart City) 구축 등 3차원 공간정보가 필수적인 분야의 핵심 인프라 자료로 활용된다.4 실감 정사영상의 제작 공정은 고해상도 항공사진, 지형 정보를 담은 DEM과 지물 높이까지 포함한 DSM(Digital Surface Model), 그리고 컴퓨터 비전 기술을 이용한 건물 영역 검출 및 편위 보정 등 더욱 복잡하고 정교한 기술을 필요로 한다.4

2.3 국내 정사영상 데이터 현황

대한민국에서는 국토지리정보원(NGII)이 국가기본도 제작 및 국토 변화 모니터링을 목적으로 전국에 대한 항공사진 촬영 및 정사영상 제작 사업을 주기적으로 수행하고 있다.11 1966년부터 시작된 항공사진 촬영 사업은 기술 발전에 힘입어 고품질의 디지털 데이터를 생산하는 단계에 이르렀다.12

국토지리정보원은 전 국토를 도시지역과 비도시지역으로 구분하여 촬영 주기를 관리하며, 일반적으로 1년 주기로 최신 영상을 확보하고 있다.12 이를 기반으로 제작되는 정사영상은 활용 목적에 따라 해상도가 다르게 제공된다. 예를 들어, 변화 탐지가 중요한 도시지역은 12cm급의 고해상도 정사영상을, 그 외 일반지역은 25cm급 해상도의 정사영상을 제작하여 민간 및 공공기관에 온·오프라인으로 제공한다.11 따라서 사용자는 자신의 활용 목적과 필요한 상세 수준에 맞는 해상도의 정사영상 데이터를 선택하여 확보할 수 있다.

3. 공간 좌표 참조 시스템(CRS)의 원리

3.1 공간 데이터의 주소 체계, CRS

좌표 참조 시스템(CRS, Coordinate Reference System)은 지구 표면 혹은 공간상의 특정 위치를 고유한 숫자 좌표로 표현하기 위한 약속된 체계, 즉 ’공간 데이터의 주소 체계’이다.13 모든 지리 공간 데이터는 특정 CRS를 기준으로 좌표값을 가지며, CRS가 정의되지 않은 데이터는 지도 위에 정확한 위치를 표현할 수 없어 공간적 의미를 상실한다.16 따라서 서로 다른 공간 데이터를 결합하거나 분석하기 위해서는 각 데이터가 어떤 CRS를 따르는지 명확히 알고, 필요에 따라 이를 통일하는 과정이 필수적이다.

3.2 CRS의 구성 요소

CRS는 크게 세 가지 핵심 요소로 구성된다. 이 요소들이 어떻게 조합되느냐에 따라 수많은 종류의 CRS가 정의된다.

  • 기준 타원체(Datum Ellipsoid): 실제 지구는 완벽한 구가 아니라 자전의 영향으로 적도 부분이 약간 부풀어 오른 회전 타원체에 가깝다. 기준 타원체는 이러한 불완전한 지구의 모양과 크기를 장축, 단축, 편평률 등의 매개변수를 이용해 수학적으로 가장 근사하게 정의한 모델이다.15 어떤 기준 타원체를 사용하느냐에 따라 동일한 지점이라도 좌표값이 미세하게 달라진다. 전 세계적으로는 GPS 시스템에서 사용하는 WGS84가 표준으로 널리 쓰이며, 대한민국에서는 과거 Bessel 1841 타원체를 사용하다가 현재는 GRS80 타원체를 주로 사용한다.15

  • 지리 좌표계(Geographic CRS): 3차원 타원체 표면 위의 위치를 각도 단위인 위도(Latitude)와 경도(Longitude)로 표현하는 좌표계이다.15 위도는 적도를 기준으로 남북 방향의 위치를, 경도는 본초 자오선(Prime Meridian)을 기준으로 동서 방향의 위치를 나타낸다.18 이는 3차원 곡면 상의 위치를 표현하는 가장 근본적인 방식이며, 대표적인 예로

EPSG:4326 (WGS84)가 있다.

  • 투영 좌표계(Projected CRS): 3차원의 타원체 표면을 지도와 같은 2차원 평면으로 옮기는 수학적 변환 과정인 ’투영(Projection)’을 통해 정의되는 좌표계이다.14 둥근 지구 표면을 평면에 펼치는 과정에서는 필연적으로 거리, 면적, 각도, 형태 중 일부 요소의 왜곡이 발생한다.15 투영 좌표계는 이러한 왜곡을 특정 지역이나 목적에 맞게 최소화하도록 설계되며, X와 Y라는 직각 좌표를 사용하고 단위는 주로 미터(meter)이다.15 대한민국의 TM(Transverse Mercator) 좌표계나 구글 지도의 웹 메르카토르 좌표계가 여기에 속한다.

3.3 웹 지도의 표준: 웹 메르카토르(Web Mercator) 투영법 심층 분석

웹 메르카토르(Web Mercator)는 구글 지도, 빙 맵(Bing Maps), 오픈스트리트맵(OpenStreetMap) 등 오늘날 대부분의 글로벌 웹 지도 서비스에서 사실상의 표준(de facto standard)으로 사용하는 투영 좌표계이다. 공식적으로는 EPSG:3857 코드로 식별된다.

이 좌표계가 웹 환경의 표준이 된 이유는 지리학적 정확성보다는 컴퓨터 과학적 효율성을 우선시한 전략적 선택의 결과이다. 웹 지도는 전 세계 수많은 사용자에게 빠르고 끊김 없는(seamless) 지도 서비스를 제공해야 한다. 이를 위해 거대한 지도 이미지를 한 번에 전송하는 대신, 미리 정의된 여러 줌 레벨에 걸쳐 지도를 작은 정사각형 타일(Tile)로 잘라두고, 사용자의 화면에 필요한 타일만 동적으로 요청하여 보여주는 ‘타일 맵 서비스(TMS)’ 방식을 사용한다.19 웹 메르카토르 투영은 전 세계를 거대한 직사각형으로 표현하며, 모든 경선과 위선이 서로 수직인 직선 격자를 형성한다. 이 구조는 지도를 2^n \times 2^n 개의 정사각형 타일로 분할하고 각 타일의 주소(좌표)를 계산하는 과정을 매우 단순하고 빠르게 만들어주어, 웹 환경에서의 효율성을 극대화한다.5

  • 수학적 원리

메르카토르 투영의 핵심 수학적 원리는 ‘등각성(Conformality)’, 즉 지도상의 한 점에서 모든 방향으로의 축척이 같아 각도가 보존되는 성질이다.21 이로 인해 작은 지역의 형태는 왜곡되지 않는다. 지구를 반지름 R인 구로 가정하고, 기준 경도를 \lambda_0라 할 때, 특정 지점의 위도 \varphi와 경도 \lambda는 다음 공식을 통해 지도상의 평면 좌표 (x, y)로 변환된다.23

x = R (\lambda - \lambda_0)

y = R \ln[\tan(\frac{\pi}{4} + \frac{\varphi}{2})]

25

이 공식에서 y좌표 계산에 자연로그(\ln)와 탄젠트(\tan) 함수가 사용되는 이유는, 위도가 높아짐에 따라 경선 간의 거리가 좁아지는 것을 보상하기 위해 위선 방향(y축)으로 지도를 늘려 등각성을 유지하기 위함이다.

  • 장점과 한계

웹 메르카토르의 가장 큰 장점은 앞서 언급한 타일링의 용이성과 그로 인한 빠른 렌더링 속도이다.5 또한, 지도상의 직선이 일정한 방위각을 유지하는 항정선(Rhumb line)과 일치하여 과거 항해에 유용하게 사용되기도 했다.22

하지만 명백한 한계 또한 존재한다. 가장 심각한 단점은 고위도로 갈수록 면적이 극심하게 확대 왜곡되는 현상이다.21 예를 들어, 구글 지도에서는 그린란드가 아프리카 대륙과 비슷한 크기로 보이지만 실제 면적은 아프리카가 약 14배 더 크다.5 이 때문에 웹 메르카토르 투영은 전 지구적 현상의 분포나 국가 간 면적 비교 등에는 매우 부적합하다. 결국, 정사영상과 같이 지리학적 정확성을 생명으로 하는 데이터를 웹 메르카토르라는 ‘효율적이지만 왜곡된’ 틀에 맞추는 작업은, ’정확한 데이터’를 ’효율적인 플랫폼’에 맞게 ’번역’하는 과정이라 할 수 있다.

아래 표는 본 안내서에서 다루는 주요 좌표 참조 시스템의 특징을 비교한 것이다.

표 1: 주요 좌표 참조 시스템(CRS) 비교

속성EPSG:4326 (WGS 84)EPSG:5179 (UTM-K)EPSG:3857 (Web Mercator)
종류지리 좌표계투영 좌표계투영 좌표계
기준 타원체WGS 84GRS 80WGS 84 (연산 시 구로 간주)
투영법해당 없음 (타원체 상의 좌표)횡단 메르카토르 (TM)메르카토르
주요 단위도 (Degree)미터 (Meter)미터 (Meter)
좌표 범위경도: -180 ~ 180 위도: -90 ~ 90X, Y 좌표X, Y 좌표 (전 지구)
주요 사용처GPS, 전 지구적 데이터 표준대한민국 국가기본도, 공공 데이터구글/빙 맵 등 웹 지도 서비스
특징왜곡 없음, 전 지구 위치 표현한반도 지역 왜곡 최소화웹 타일링 최적화, 고위도 면적 왜곡 심각

4. 핵심 전처리 단계: 좌표계 변환 및 타일화

정사영상을 구글 지도에 성공적으로 표출하기 위해서는 두 가지 핵심적인 전처리 단계를 거쳐야 한다. 첫 번째는 정사영상의 좌표 체계를 구글 지도의 표준에 맞게 변환하는 ’좌표계 재투영’이며, 두 번째는 변환된 대용량 이미지를 웹 환경에 맞게 잘게 나누는 ‘타일화’ 과정이다. 이 두 단계는 각각 공간적 정합과 구조적 최적화를 담당하며, 분리된 작업이지만 하나의 연속적인 워크플로우를 구성한다.

4.1 좌표계 변환의 필연성: 공간적 정합(Spatial Alignment)

서로 다른 CRS를 가진 공간 데이터를 하나의 지도 위에 중첩하면, 동일한 지리적 위치라 하더라도 사용하는 ’주소 체계’가 다르기 때문에 좌표값이 달라 지도상에서 위치가 어긋나게 표시된다.6 예를 들어, 대한민국의 국가 표준 좌표계(예: EPSG:5179)로 제작된 정사영상과 웹 메르카토르(EPSG:3857) 기반의 구글 지도는 기준 타원체, 투영 원점, 단위 등이 모두 다르므로 직접 중첩할 경우 수백 미터 이상의 오차가 발생할 수 있다.

따라서 정확한 공간 분석과 올바른 시각화를 위해서는 모든 데이터를 하나의 통일된 CRS로 일치시키는 과정, 즉 ‘좌표계 변환’ 또는 ’재투영(Reprojection)’이 반드시 선행되어야 한다.2 본 과업의 목표는 정사영상을 구글 지도 위에 표출하는 것이므로, 정사영상이 가진 원래의 CRS를 구글 지도의 표준인

EPSG:3857로 변환해야 한다. 이 과정을 통해 정사영상의 모든 픽셀은 구글 지도의 좌표 체계에 맞는 새로운 좌표값을 부여받게 되며, 비로소 두 데이터 간의 공간적 정합이 이루어진다.

4.2 GDAL 활용 (1): gdalwarp를 이용한 좌표계 재투영

gdalwarp는 래스터 데이터의 좌표계 변환, 이미지 모자이크, 포맷 변경, 잘라내기 등 다양한 작업을 수행할 수 있는 강력한 GDAL 커맨드라인 유틸리티이다.30 이 도구는 정사영상의 CRS를 변환하는 핵심적인 역할을 수행한다.

  • 핵심 명령어 예시

원본 정사영상(ortho_wgs84.tif)이 EPSG:4326 (WGS84) 좌표계를 가질 때, 이를 구글 지도 표준인 EPSG:3857로 변환하여 ortho_webmercator.tif 파일로 저장하는 기본 명령어는 다음과 같다.

gdalwarp -s_srs EPSG:4326 -t_srs EPSG:3857 -r bilinear -of GTiff ortho_wgs84.tif ortho_webmercator.tif

30

  • 주요 옵션 상세 해설

gdalwarp 명령어는 다양한 옵션을 통해 변환 과정을 정밀하게 제어할 수 있다. 주요 옵션은 아래 표와 같다.

표 2: gdalwarp 주요 옵션

옵션설명예시비고
-s_srs <CRS>원본 파일의 좌표 참조 시스템(CRS)을 지정한다.-s_srs EPSG:4326원본에 CRS 정보가 없거나 잘못된 경우 필수.
-t_srs <CRS>결과 파일의 목표 좌표 참조 시스템(CRS)을 지정한다.-t_srs EPSG:3857재투영의 핵심 옵션.
-r <method>리샘플링 방식을 선택한다. (near, bilinear, cubic 등)-r bilinear결과물의 시각적 품질에 영향을 줌.
-of <format>출력 파일의 포맷을 지정한다.-of GTiffGeoTIFF, PNG, JPEG 등 GDAL 지원 포맷.
-cutline <ds>벡터 파일을 이용해 결과물을 잘라낼 때 사용한다.-cutline aoi.shp특정 관심 지역(AOI)만 추출할 때 유용.
-dstalpha원본에 없는 경우, 투명한 배경을 위한 알파 채널을 추가한다.-dstalpha불규칙한 형태의 이미지 처리 시 유용.

특히 -s_srs-t_srs 옵션은 각각 원본과 목표 CRS를 명시적으로 지정하는 가장 중요한 부분이다.[30, 33] -r 옵션은 재투영 과정에서 픽셀 그리드가 재배열될 때 새로운 픽셀 값을 어떻게 계산할지를 결정하는 리샘플링 방식을 지정하며, 결과물의 시각적 품질에 직접적인 영향을 미친다.[31, 34] bilinear (쌍선형 보간) 방식은 처리 속도와 품질 사이에서 합리적인 절충안으로 널리 사용된다.

또한, gdalwarp는 원본과 목표 CRS의 기준 타원체(Datum)가 다를 경우(예: GRS80 -> WGS84) 내부적으로 적절한 Datum 변환을 자동으로 수행한다. 이로 인해 미세한 좌표 이동이 발생할 수 있는데, 이는 오류가 아니라 서로 다른 기준면을 일치시켜 더 정확한 위치 정합을 이루기 위한 정상적인 과정이다.[34]

4.3 GDAL 활용 (2): gdal2tiles.py를 이용한 타일 피라미드 생성

gdalwarp를 통해 좌표계 변환을 마친 정사영상은 수 기가바이트(GB)에 달하는 단일 대용량 파일일 수 있다. 이러한 파일을 웹 브라우저에서 직접 로딩하는 것은 현실적으로 불가능하다. 따라서 웹 지도 서비스에서는 이미지를 여러 줌 레벨(Zoom Level)에 걸쳐 256x256 픽셀 크기의 작은 타일 이미지들로 미리 분할해 놓는 ‘타일 피라미드(Tile Pyramid)’ 구조를 사용한다.19 사용자가 지도를 확대/축소하거나 이동할 때, 브라우저는 해당 영역과 줌 레벨에 필요한 타일 이미지만 서버에 요청하여 빠르고 효율적으로 지도를 표시할 수 있다.

gdal2tiles.py는 이러한 타일 피라미드를 자동으로 생성해주는 GDAL에 포함된 파이썬 스크립트이다.35

  • 핵심 명령어 예시

앞서 생성한 ortho_webmercator.tif 파일을 입력으로 하여, 줌 레벨 12부터 18까지의 타일을 생성하고 ./tiles 디렉토리에 저장하는 명령어는 다음과 같다.

gdal2tiles.py --profile=mercator -z 12-18 -w none ortho_webmercator.tif./tiles

36

  • 주요 옵션 상세 해설

  • --profile=mercator (-p mercator): 생성될 타일의 프로파일을 지정한다. mercator 프로파일은 구글 지도의 타일 좌표 체계(좌상단 원점, XYZ 스킴)와 완벽하게 호환되는 타일을 생성하도록 보장한다. 이는 구글 지도 API와 원활하게 연동하기 위한 필수 옵션이다.35

  • -z <zoom_levels>: 생성할 줌 레벨의 범위를 지정한다. 12-18은 줌 레벨 12부터 18까지의 모든 타일을 생성하라는 의미이다. 줌 레벨이 1 증가할 때마다 타일의 수는 4배(가로 2배, 세로 2배)로 기하급수적으로 늘어나므로, 서비스에 필요한 상세 수준과 서버 저장 용량을 신중하게 고려하여 적절한 범위를 설정해야 한다.35

  • -w <webviewer>: 타일과 함께 OpenLayers나 Leaflet 기반의 미리보기용 웹 페이지를 생성할지 여부를 지정한다. 서버에 타일만 업로드할 경우에는 none으로 설정하여 순수 타일 데이터만 생성하는 것이 효율적이다.36

  • 결과물 분석

명령어 실행이 완료되면, 출력 디렉토리(./tiles) 내부에는 줌레벨/X좌표/Y좌표.png 형식의 계층적인 디렉토리 구조가 생성된다. 예를 들어, 줌 레벨 15의 특정 타일은 ./tiles/15/12345/67890.png와 같은 경로에 저장된다. 이 명확하고 예측 가능한 구조는 제4장에서 다룰 Google Maps API의 getTileUrl 함수가 각 타일의 URL을 동적으로 생성하는 규칙과 직접적으로 연결되어, 전체 시스템이 원활하게 동작하는 기반이 된다.3

5. Google Maps JavaScript API를 이용한 표출

전처리 단계를 통해 생성된 타일 피라미드는 이제 웹 서버에 업로드되어 클라이언트(웹 브라우저)의 요청을 기다리는 상태가 된다. 이 단계에서는 Google Maps JavaScript API를 사용하여 웹 페이지에 지도를 생성하고, 준비된 타일들을 지도 위에 오버레이(Overlay) 형태로 표출하는 방법을 다룬다.

5.1 API 설정 및 기본 지도 생성

가장 먼저, Google Cloud Platform(GCP) 콘솔에 접속하여 프로젝트를 생성하고, ’Google Maps JavaScript API’를 활성화해야 한다. 이후 API 키를 발급받아 웹 페이지에 포함시켜야 API를 정상적으로 사용할 수 있다.3

기본적인 지도를 웹 페이지에 렌더링하기 위한 HTML 구조와 JavaScript 코드는 다음과 같다.

<!DOCTYPE html>
<html>
<head>
<title>Orthophoto Overlay</title>
<style>
/* 지도를 표시할 div 요소가 전체 화면을 차지하도록 설정 */
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
// 지도를 생성하고 초기 위치와 줌 레벨을 설정
const map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: { lat: 37.5665, lng: 126.9780 } // 서울 중심 좌표
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script>
</body>
</html>

3

이 코드는 map이라는 ID를 가진 div 요소에 서울을 중심으로 하는 구글 지도를 생성한다. script 태그의 src 속성에는 발급받은 API 키를 YOUR_API_KEY 부분에 삽입해야 하며, callback=initMap 파라미터는 API 로딩이 완료된 후 initMap 함수를 실행하도록 지시한다.

5.2 커스텀 타일 레이어 구현: ImageMapType 클래스

Google Maps API는 사용자가 직접 제작한 타일 이미지를 지도 위에 하나의 레이어처럼 중첩할 수 있도록 google.maps.ImageMapType 클래스를 제공한다.3 이 클래스의 인스턴스를 생성하여 지도에 추가하면, 구글의 기본 지도(도로, 위성 등) 위에 우리가 만든 정사영상 타일을 띄울 수 있다.

ImageMapType 객체를 생성하기 위해서는 ImageMapTypeOptions 객체를 생성자의 인자로 전달해야 한다. 이 옵션 객체에는 다음과 같은 주요 속성들이 포함된다.

  • tileSize: 타일의 크기를 google.maps.Size 객체로 지정한다. gdal2tiles의 기본값과 동일하게 보통 new google.maps.Size(256, 256)으로 설정한다.
  • getTileUrl: 특정 좌표와 줌 레벨에 해당하는 타일 이미지의 URL을 반환하는 함수. 이 클래스의 가장 핵심적인 부분이다.
  • minZoom, maxZoom: 이 타일 레이어가 표시될 최소 및 최대 줌 레벨을 지정한다. gdal2tiles 실행 시 -z 옵션으로 지정한 범위와 일치시키는 것이 좋다.
  • name: 지도 유형 컨트롤에 표시될 레이어의 이름.

5.3 getTileUrl 함수의 역할과 동적 URL 생성 로직

getTileUrl 함수는 ImageMapType의 심장부와 같다. 이 함수는 지도 엔진이 특정 위치와 줌 레벨의 타일을 화면에 그려야 할 때마다 자동으로 호출된다.3 이 함수의 역할은 호출 시 전달받은 인자를 바탕으로 해당 타일 이미지의 정확한 URL을 문자열 형태로 반환하는 것이다.

이 함수는 두 개의 인자를 받는다.

  1. coord: 타일의 X, Y 좌표를 속성으로 가지는 google.maps.Point 객체 (coord.x, coord.y).
  2. zoom: 현재 지도의 줌 레벨 (정수).

함수 내부에서는 이 coordzoom 값을 이용하여, gdal2tiles가 생성한 파일 경로 규칙({z}/{x}/{y}.png)에 맞는 실제 타일 이미지의 URL을 동적으로 조립해야 한다.3 프론트엔드(Google Maps API)와 백엔드(타일 서버)는 이

getTileUrl 함수가 생성하는 ’URL 규칙’이라는 명확한 약속(contract)을 통해 상호작용한다. gdal2tiles는 이 약속에 맞는 결과물을 생성하는 서버 측 준비 도구이며, ImageMapType은 이 약속을 이행하여 타일을 요청하는 클라이언트 측 구현체인 셈이다. 이 아키텍처는 클라이언트와 서버의 역할을 명확히 분리하여 매우 확장성 있고 효율적인 웹 매핑 시스템의 근간을 이룬다.

5.4 전체 구현 코드 예제

앞선 단계들을 모두 통합하여, gdal2tiles로 생성된 타일 레이어를 구글 지도에 중첩하는 완전한 JavaScript 코드는 다음과 같다. 아래 코드를 앞서 작성한 initMap 함수 내부에 추가하면 된다.

function initMap() {
// 1. 기본 지도 생성
const map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: { lat: 37.5665, lng: 126.9780 }, // 서울 중심 좌표
});

// 2. gdal2tiles 결과물이 업로드된 서버의 기본 URL 정의
const TILE_BASE_URL = 'https://your-server.com/path/to/tiles/';

// 3. ImageMapType 객체 생성
const orthoMapType = new google.maps.ImageMapType({
getTileUrl: function(coord, zoom) {
// Google Maps 타일 좌표 체계는 유한하므로, 유효 범위를 벗어나는 타일 요청은 차단할 수 있다.
const maxCoord = 1 << zoom;
if (coord.x < 0 |

| coord.x >= maxCoord |
| coord.y < 0 |
| coord.y >= maxCoord) {
return null; // 유효하지 않은 타일 좌표에 대해서는 null을 반환
}
// 동적으로 타일 URL을 생성하여 반환
return ${TILE_BASE_URL}${zoom}/${coord.x}/${coord.y}.png`;
},
tileSize: new google.maps.Size(256, 256),
minZoom: 12, // gdal2tiles에서 생성한 최소 줌 레벨
maxZoom: 18, // gdal2tiles에서 생성한 최대 줌 레벨
name: 'Orthophoto' // 레이어 이름
});

// 4. 지도에 커스텀 타일 레이어를 오버레이 형태로 추가
// map.mapTypes.set('orthophoto', orthoMapType);
// map.setMapTypeId('orthophoto'); // 지도 유형을 커스텀 레이어로 변경할 경우
map.overlayMapTypes.insertAt(0, orthoMapType); // 기본 지도 위에 중첩할 경우
}

3

위 코드에서 map.overlayMapTypes.insertAt(0, orthoMapType); 부분은 생성된 orthoMapType 레이어를 지도의 오버레이 레이어 스택의 가장 아래쪽(0번 인덱스, 기본 지도 타일 바로 위)에 추가하라는 의미이다. 이를 통해 사용자는 구글의 기본 지도 레이블이나 도로망 위에 정사영상을 투명하게 중첩하여 볼 수 있게 된다.

6. 고급 주제 및 문제 해결

정사영상 타일을 지도에 표출하는 과정은 여러 단계를 거치므로 다양한 문제가 발생할 수 있다. GIS 데이터 처리 과정에서 발생하는 문제의 상당수는 좌표계, 단위, NoData 값 등 ‘눈에 보이지 않는’ 메타데이터에 대한 오해에서 비롯된다. 이 장에서는 현업에서 자주 발생하는 문제들의 원인을 분석하고, 그 해결 방안을 제시한다. 이러한 문제 해결 과정은 공간 데이터 처리 파이프라인에 대한 깊은 이해를 돕는 학습 기회가 될 수 있다.

6.1 타일 경계 아티팩트(Artifact)와 리샘플링

  • 문제 현상: gdalwarp로 재투영하거나 gdal2tiles로 타일을 생성한 후, 지도에서 타일과 타일이 만나는 경계 부분에 얇은 검은색 선이나 색상 불일치(줄무늬)가 나타나는 현상이다.40
  • 발생 원인: 이 문제의 주된 원인은 재투영 또는 타일링 과정에서 사용되는 ‘리샘플링(Resampling)’ 방식에 있다. bilinear(쌍선형 보간)나 cubic(3차 회선 보간) 같은 보간법은 부드러운 이미지를 얻기 위해 주변 픽셀들의 색상 값을 혼합하여 새로운 픽셀 값을 계산한다.34 하지만 이미지의 가장자리나 데이터가 없는(NoData) 영역의 경계에서 이 과정이 실행될 때, 의도치 않게 NoData 값(종종 검은색, 값 0으로 처리됨)이 실제 이미지 픽셀 값과 섞이면서 경계에 어두운 줄무늬나 원치 않는 색상이 나타나는 아티팩트를 유발할 수 있다.40
  • 해결 방안:
  1. near(최근린 보간법) 사용: 가장 간단하고 효과적인 해결책은 리샘플링 옵션(-r)을 near로 설정하는 것이다. near 방식은 보간 계산 없이 가장 가까운 원본 픽셀의 값을 그대로 사용하므로 경계에서 색상 혼합이 원천적으로 발생하지 않는다. 이 방법은 특히 아티팩트를 회피하는 데 매우 효과적이다.40
  2. 알파 채널 활용: gdalwarp 실행 시 -dstalpha 옵션을 추가하면, 데이터가 없는 영역을 완전히 투명하게 처리하는 알파 채널이 결과 파일에 생성된다. 이렇게 명시적으로 투명도를 정의하면 후속 타일링 과정에서 경계가 더 깔끔하게 처리되어 아티팩트 발생을 줄일 수 있다.40

아래 표는 주요 리샘플링 방식의 특징을 비교한 것이다.

표 3: 리샘플링(Resampling) 방식 비교

방식원리장점단점주요 사용 사례
near (최근린 보간)가장 가까운 픽셀의 값을 그대로 사용한다.계산 속도가 가장 빠름. 원본 화소값을 변경하지 않음.결과물이 각져 보일 수 있음(블록 현상).분류도 등 이산적인 데이터, 아티팩트 회피
bilinear (쌍선형 보간)주변 4개 픽셀의 값을 가중 평균하여 계산한다.near보다 부드러운 결과물. 계산 속도와 품질의 균형.원본에 없는 새로운 화소값이 생성됨. 경계가 흐릿해질 수 있음.연속적인 데이터(정사영상, DEM)의 일반적인 처리
cubic (3차 회선 보간)주변 16개 픽셀의 값을 사용하여 더 복잡한 곡선으로 보간한다.bilinear보다 선명하고 부드러운 결과물.계산 속도가 느림. 경계에서 오버슈팅(Overshooting) 발생 가능.고품질의 시각적 결과물이 중요할 때

6.2 좌표 단위 불일치로 인한 정렬 오류

  • 사례 분석: gdalwarp를 사용하여 지리 좌표계인 EPSG:4269(단위: 도)에서 투영 좌표계인 EPSG:3857(단위: 미터)로 래스터 데이터를 재투영했다. 이후 이 데이터를 PostGIS와 같은 공간 데이터베이스에 로드하고, 프론트엔드에서 특정 위경도 좌표(예: 37.5, 127.0)를 이용해 해당 위치의 픽셀 값을 조회했을 때, 데이터가 있음에도 불구하고 null 값이 반환되는 문제가 발생했다.34

  • 근본 원인: 이 문제의 핵심은 ’단위 불일치’이다. 데이터베이스에 저장된 래스터는 미터(meter) 단위의 EPSG:3857 좌표계를 가지고 있는데, 조회 시 사용한 좌표는 도(degree) 단위의 위경도 값이었다. 시스템은 이 도 단위 좌표(예: 127.0)를 미터 값으로 오인하여 전혀 다른 위치(적도로부터 동쪽으로 127m 지점)를 조회하게 되므로, 당연히 원하는 결과를 얻을 수 없다.34

  • 해결 방안: 공간 데이터를 다룰 때는 항상 좌표계와 단위를 일치시켜야 한다. 조회하려는 지점의 좌표 또한 데이터의 CRS에 맞게 변환한 후 사용해야 한다. PostGIS와 같은 공간 데이터베이스는 이를 위한 좌표 변환 함수를 제공한다. 예를 들어, PostGIS에서는 ST_Transform 함수를 사용하여 이 문제를 해결할 수 있다. 먼저 ST_SetSrid로 입력 좌표가 EPSG:4269(WGS84, 도 단위)임을 명시한 후, ST_Transform을 통해 이를 데이터의 CRS인 EPSG:3857(미터 단위)로 변환하여 쿼리에 사용해야 한다.

-- 잘못된 쿼리 (단위 불일치)
-- SELECT ST_Value(rast, ST_SetSrid(ST_MakePoint(127.0, 37.5), 3857)) FROM raster_table;

-- 올바른 쿼리 (좌표 변환)
SELECT ST_Value(rast, ST_Transform(ST_SetSrid(ST_MakePoint(127.0, 37.5), 4326), 3857)) FROM raster_table;

34

6.3 대용량 데이터 처리 시 성능 최적화

대용량 정사영상을 처리할 때는 상당한 시간과 시스템 자원이 소요될 수 있다. 몇 가지 최적화 전략을 통해 처리 효율을 높일 수 있다.

  • 메모리 관리: gdalwarp 실행 시 -wm <memory_in_mb> 옵션을 사용하여 작업에 할당할 메모리 캐시의 크기를 명시적으로 지정할 수 있다. 시스템의 가용 메모리가 충분하다면, 이 값을 높여 I/O 작업을 줄이고 처리 속도를 개선할 수 있다.30
  • 타일 압축: gdal2tiles는 기본적으로 PNG 형식으로 타일을 생성한다. 만약 정사영상에 투명한 영역이 없다면, --jpeg-quality=<1-100> 옵션을 사용하여 JPEG 형식으로 타일을 생성하고 압축 품질을 조절할 수 있다. JPEG는 손실 압축 방식이므로 파일 크기를 크게 줄여 서버 저장 공간을 절약하고 클라이언트의 로딩 속도를 향상시킬 수 있지만, 이미지 품질 저하가 발생할 수 있다는 점을 고려해야 한다.36
  • 줌 레벨 최적화: 서비스에 필요한 최대 줌 레벨을 신중하게 결정하는 것이 매우 중요하다. 줌 레벨이 1 증가할 때마다 타일의 수는 4배로 늘어나므로, 불필요하게 높은 줌 레벨(예: 20 이상)까지 타일을 생성하면 파일 수와 총용량이 기하급수적으로 증가하여 서버에 큰 부담을 줄 수 있다.36

7. 결론: 정사영상 웹 매핑의 활용과 전망

본 안내서는 고정밀 항공 정사영상을 범용적인 구글 지도 플랫폼에 표출하기 위한 일련의 기술적 과정을 체계적으로 분석하고 제시했다. 이 과정은 세 가지 핵심 워크플로우로 요약될 수 있다. 첫째, 원본 정사영상이 가진 고유의 좌표 참조 시스템(CRS)을 구글 지도의 표준인 웹 메르카토르(EPSG:3857)로 통일하는 좌표계 재투영 단계(gdalwarp). 둘째, 재투영된 대용량 이미지를 웹 환경에서 효율적으로 전송하고 렌더링할 수 있도록 다중 해상도 타일 구조로 변환하는 웹 최적화 타일링 단계(gdal2tiles). 셋째, 생성된 타일들을 Google Maps JavaScript API의 ImageMapType 클래스를 이용하여 웹 지도 위에 오버레이로 시각화하는 API 연동 및 표출 단계이다.

이 전체 프로세스를 성공적으로 수행하기 위한 가장 근본적인 전제는 데이터의 지리 공간적 본질, 즉 좌표 참조 시스템(CRS)에 대한 명확한 이해이다. 서로 다른 기준과 단위를 가진 두 공간 정보를 하나의 평면 위에 정확히 정합시키는 것은, 단순히 이미지를 겹치는 것이 아니라 두 세계의 ’언어’를 ’번역’하는 것과 같다. 이 번역 과정에서 GDAL과 같은 강력한 오픈소스 도구를 체계적으로 활용하는 능력은 매우 중요하다.

본 안내서에서 제시된 기술은 다양한 분야에서 높은 활용 가치를 지닌다. 도시 계획 전문가는 최신 정사영상을 통해 도시의 변화상을 직관적으로 파악하고, 환경 모니터링 분야에서는 특정 지역의 식생 변화나 오염원 추적에 활용할 수 있다. 또한, 재난 관리, 부동산 정보 서비스, 정밀 농업 등 정확한 지리적 현황 파악이 중요한 모든 영역에서 사용자와의 상호작용이 가능한 동적 웹 지도 서비스를 구축하는 데 기여할 수 있다.

향후 기술은 2차원 평면을 넘어 3차원으로 확장될 것이다. 건물의 높이와 형태까지 완벽하게 구현된 실감 정사영상(True Ortho Image)을 Google Maps의 Photorealistic 3D Tiles API와 결합하면, 사용자는 가상현실과 같은 몰입감 속에서 실제 도시 공간을 탐색하는 경험을 할 수 있을 것이다. 이처럼 고정밀 공간 정보와 범용 웹 플랫폼의 융합은 앞으로 더욱 정교하고 실감 나는 방식으로 우리의 디지털 세계와 현실 세계를 연결하는 교량이 될 것으로 전망된다.

8. 참고 자료

  1. 정사영상 지도제작 - 천우항측(주), http://www.chunwoogis.com/%EC%A0%95%EC%82%AC%EC%98%81%EC%83%81-%EC%A7%80%EB%8F%84%EC%A0%9C%EC%9E%91
  2. QGIS 기초 _ 좌표계 설정 - Urban Toolkit - 티스토리, https://popole97.tistory.com/entry/QGIS-%EA%B8%B0%EC%B4%88-%EC%A2%8C%ED%91%9C%EA%B3%84-%EC%84%A4%EC%A0%95
  3. Custom tiles in Google Maps · GitHub, https://gist.github.com/clhenrick/dcce31036d3e3940c55b31ddb86ca1ec
  4. 실감정사영상(True Ortho Image) - 클라우드의 데일리 리포트 - 티스토리, https://clouds-daily.tistory.com/137
  5. 왜 굳이 기존의 메르카토르 도법 지도 말고 더 정확한 세계 지도를 쓰면 …, https://www.reddit.com/r/Maps/comments/5gvo7s/why_dont_we_start_using_a_more_accurate_world_map/?tl=ko
    1. 여러 데이터의 좌표계 통일하기, https://urbn-ds.tistory.com/5
  6. GIS 초보의 좌표정의 좌표변환 작업 - Make S sense - 티스토리, https://makessense.tistory.com/38
  7. Creating super-overlays with gdal2tiles | Keyhole Markup Language | Google for Developers, https://developers.google.com/kml/articles/raster
  8. 정사사진/정사영상 제작, http://contents.kocw.net/KOCW/document/2013/gacheon/PARKHonggi2/11.pdf
  9. 항공촬영 기반 영상정보 구축 - 신한항업, http://shas.co.kr/%ED%95%AD%EA%B3%B5%EC%B4%AC%EC%98%81-%EA%B8%B0%EB%B0%98-%EC%98%81%EC%83%81%EC%A0%95%EB%B3%B4-%EA%B5%AC%EC%B6%95/
  10. 정사영상 제작 - 국토지리정보원, https://www.ngii.go.kr/kor/content.do?sq=203
  11. 항공사진 촬영 - 국토지리정보원, https://www.ngii.go.kr/kor/content.do?sq=202
  12. rfriend.tistory.com, [https://rfriend.tistory.com/618#::text=(1)%20%EC%A2%8C%ED%91%9C%EA%B3%84%20(CRS%2C,%EB%A1%9C%20%ED%91%9C%ED%98%84%ED%95%A0%20%EC%A7%80%EB%A5%BC%20%EC%A0%95%EC%9D%98%ED%95%A9%EB%8B%88%EB%8B%A4.](https://rfriend.tistory.com/618#::text=(1) 좌표계 (CRS%2C,로 표현할 지를 정의합니다.)
  13. 좌표 정의 및 좌표계 - 지재유경(志在有逕) - 티스토리, https://dulidungsil.tistory.com/entry/%EC%A2%8C%ED%91%9C-%EC%A0%95%EC%9D%98-%EB%B0%8F-%EC%A2%8C%ED%91%9C%EA%B3%84
  14. 좌표계(Coordinate Reference System, CRS) 기본 개념 - 투영법, 기준 …, https://ybeaning.tistory.com/58
  15. [R 지리공간 데이터 분석] 좌표계, 좌표 참조 시스템 (CRS, Coordinate Reference Systems), https://rfriend.tistory.com/596
  16. [공간통계 스터디] 1주차 / sp, sf library / 공간데이터 종류와 특징 - CLODAGH NOTE - 티스토리, https://clodagh.tistory.com/39
  17. [R 지리공간 데이터 분석] R에서의 좌표계, 좌표 참조 시스템 (CRS, Coordinate Reference Systems in R), https://rfriend.tistory.com/618
  18. Generating map tiles with GDAL2Tiles, https://blog.mastermaps.com/2008/03/generating-map-tiles-with-gdal2tiles.html
  19. Tile Overlays in Google Earth: The Missing Manual - Medium, https://medium.com/google-earth/tile-overlays-in-google-earth-the-missing-manual-28f37cc65c80
  20. Mercator projection - Wikipedia, https://en.wikipedia.org/wiki/Mercator_projection
  21. Mercator Map - Mathematical Mysteries, https://mathematicalmysteries.org/mercator-map/
  22. Converting from Mercator Projection to Latitude and Longitude, https://math.stackexchange.com/questions/1888552/converting-from-mercator-projection-to-latitude-and-longitude
  23. Deriving the Mercator projection algorithm - MathOverflow, https://mathoverflow.net/questions/124839/deriving-the-mercator-projection-algorithm
  24. www.here.com, https://www.here.com/docs/bundle/map-tile-developer-guide/page/topics/mercator-projection.html
  25. Mercator Projection – from Wolfram MathWorld, https://mathworld.wolfram.com/MercatorProjection.html
  26. 왜 메르카토르지? 더 공정한 투영법보다 이걸 쓰는 장점이 뭔데? : r/geography - Reddit, https://www.reddit.com/r/geography/comments/20giqj/why_mercator_what_are_the_advantages_of_using_it/?tl=ko
  27. yganalyst.github.io, https://yganalyst.github.io/spatial_analysis/spatial_analysis_3/#:~:text=3.-,%EC%A2%8C%ED%91%9C%EA%B3%84%EC%9D%98%20%EB%B3%80%ED%99%98,%ED%86%B5%EC%9D%BC%EC%8B%9C%EC%BC%9C%EC%A3%BC%EB%8A%94%EA%B2%8C%20%EC%A2%8B%EB%8B%A4.
  28. [GIS] 좌표 정의 및 변환 방법, 자주쓰는 좌표계 - yg’s blog, https://yganalyst.github.io/spatial_analysis/spatial_analysis_3/
  29. gdalwarp — GDAL documentation, https://gdal.org/en/stable/programs/gdalwarp.html
    1. Tutorial 1: simple raster conversion with GDAL - The University of Edinburgh, https://www.geos.ed.ac.uk/~smudd/TopoTutorials/html/tutorial_raster_conversion.html
  30. Coastal Vulnerability: ‘Could not open … as a gdal.OF_RASTER’, https://community.naturalcapitalproject.org/t/coastal-vulnerability-could-not-open-as-a-gdal-of-raster/2329
  31. postgis - Issue with different values after reprojection using …, https://gis.stackexchange.com/questions/380246/issue-with-different-values-after-reprojection-using-gdalwarp-epsg4269-3857
  32. gdal2tiles.py - Linux Manuals (1) - SysTutorials, https://www.systutorials.com/docs/linux/man/1-gdal2tiles/
  33. gdal2tiles — GDAL documentation, https://gdal.org/en/stable/programs/gdal2tiles.html
  34. Using GDAL2Tiles for overlaying images in Google Maps | by Heather - Medium, https://medium.com/@TopHat8855/using-gdal2tiles-for-overlaying-images-in-google-maps-15a7a67dd7fd
  35. Custom tiles in Google Maps - GitHub Gist, https://gist.github.com/donmccurdy/1d3998a37c73e9435b5503e5f37457be
  36. Overlay Map Types | Maps JavaScript API - Google for Developers, https://developers.google.com/maps/documentation/javascript/examples/maptype-overlay
  37. gdal - gdalwarp outline artefact - Geographic Information Systems …, https://gis.stackexchange.com/questions/4772/gdalwarp-outline-artefact
  38. Comparison of Tiling Artifact Removal Methods in Secondary Ion Mass Spectrometry Images, https://pmc.ncbi.nlm.nih.gov/articles/PMC10688221/
  39. MBTiles — GDAL documentation - Raster drivers, https://gdal.org/en/stable/drivers/raster/mbtiles.html