앱과 웹 개발에 활용할 수 있는 국가공간정보 지도 플랫폼
VWorld, 즉 브이월드는 국토교통부 계열의 국가공간정보 오픈플랫폼입니다. 일반 지도 서비스처럼 단순히 위치를 보여주는 수준을 넘어, 국가가 보유한 공간정보를 2D 지도, 3D 지도, 항공영상, 지적도, 건물정보, 주제도, 검색 API 등으로 활용할 수 있게 제공하는 플랫폼입니다. 브이월드는 다양한 국가공간정보를 누구나 쉽게 조회하고 활용할 수 있는 2D·3D 지도서비스와 OpenAPI를 제공한다고 설명하고 있습니다.
앱이나 웹을 개발할 때 VWorld를 사용하면 별도의 지도 데이터를 직접 구축하지 않아도 지도 기반 서비스를 만들 수 있습니다. 예를 들어 “지도어때” 같은 앱에서는 현재 위치 표시, 지역 검색, 주변 시설 표시, CCTV 위치 표시, 버스정류소 표시, 공공데이터 위치 표시 등에 활용할 수 있습니다.
VWorld로 만들 수 있는 서비스
VWorld는 다음과 같은 앱과 웹 서비스에 잘 맞습니다.
1. 지도 기반 생활 정보 앱
현재 위치를 기준으로 주변 정보를 표시하는 앱을 만들 수 있습니다.
예를 들면 다음과 같습니다.
현재 위치 표시
지역명 검색
주소 검색
주변 CCTV 표시
주변 버스정류소 표시
공공시설 위치 표시
주차장 위치 표시
전기차 충전소 표시
관광지 표시지도어때 같은 앱은 VWorld를 중심 지도로 사용하고, 공공데이터포털, ITS, TAGO, AirKorea, 기상청 API 등을 함께 연결하면 “생활 위치정보 앱”으로 확장할 수 있습니다.
2. 업무용 지도 시스템
VWorld는 일반 앱뿐 아니라 업무용 시스템에도 적합합니다.
예를 들면 다음과 같습니다.
공사 위치 관리
설비 위치 관리
CCTV 위치 관리
영업지역 표시
차량 위치 표시
현장 점검 위치 기록
공장/건물/부지 위치 관리MES, ERP, FEMS, ESG 시스템에서도 현장 위치를 지도와 연결하면 활용도가 높아집니다. 예를 들어 공장별 에너지 사용량, 설비 위치, 점검 이력, 배출시설 위치 등을 지도 위에 표시할 수 있습니다.
VWorld 주요 API
1. 2D 지도 API
2D 지도 API는 일반적인 웹 지도 화면을 만들 때 사용합니다. 도로, 건물, 지형, 행정구역 등을 배경지도로 표시하고 그 위에 마커, 선, 영역 등을 올릴 수 있습니다.
활용 예시는 다음과 같습니다.
지역 검색 결과를 지도에 표시
현재 위치에 마커 표시
CCTV 위치 마커 표시
버스정류소 마커 표시
선형 경로 표시
특정 구역 폴리곤 표시2D 지도는 웹 페이지에서 JavaScript로 구현하고, MAUI 앱에서는 WebView를 통해 표시하는 방식이 가장 현실적입니다.
2. WebGL 3D 지도 API 3.0
VWorld는 WebGL 기반 3D 지도 API도 제공합니다. 공식 설명에 따르면 WebGL 3D지도 API 3.0은 JavaScript 형태로 제공되며, 기존 2.0 기능을 유지하면서 사용자 친화적으로 개선되었고 GIS 표준을 준수하도록 설계되었습니다. 사용하려면 브이월드 회원가입 후 인증키를 발급받아야 합니다.
3D 지도는 건물, 지형, 높이 정보 등을 입체적으로 표현할 때 유용합니다.
활용 예시는 다음과 같습니다.
도심 건물 3D 표시
공사 현장 주변 지형 확인
전망 분석
건물 밀집 지역 확인
관광 안내 지도
도시 시뮬레이션국토교통부 공공데이터 설명에서도 WebGL 3D 지도 API는 WebGL 기반의 JavaScript 형태로 제공되는 3D 지도 플랫폼이라고 설명되어 있습니다.
3. 검색 API
VWorld 검색 API는 주소, 도로명주소, 장소명 등을 검색하여 좌표를 얻는 기능에 활용할 수 있습니다.
앱에서 사용자가 “창원시청”, “마산역”, “서울역”처럼 입력하면 해당 위치의 좌표를 받아와 지도 중심을 이동시킬 수 있습니다.
활용 예시는 다음과 같습니다.
장소명 검색
주소 검색
도로명주소 검색
검색 결과 목록 표시
선택한 위치로 지도 이동지도어때 앱에서는 가장 기본이 되는 기능입니다.
4. WMS / WFS API
VWorld는 WMS와 WFS 방식의 공간정보 서비스도 제공합니다. 공식 문서에 따르면 WMS는 Web Map Service, WFS는 Web Feature Service이며, 인증키를 사용해 WMS 1.3.0 / WFS 1.1.0 서비스를 활용할 수 있습니다.
쉽게 말하면 다음과 같습니다.
WMS: 지도 이미지를 받아오는 방식
WFS: 공간 객체 데이터를 받아오는 방식WMS는 특정 주제도를 지도 이미지처럼 겹쳐 보여줄 때 좋고, WFS는 실제 공간 데이터를 받아서 앱에서 직접 처리할 때 좋습니다.
예를 들면 다음과 같은 정보와 연결할 수 있습니다.
지적도
용도지역
건물 정보
행정구역
도로 정보
토지 정보
주제도앱 개발에서 VWorld 활용 구조
1. 웹에서는 JavaScript로 직접 구현
웹에서는 HTML, JavaScript, CSS로 VWorld 지도를 직접 구현할 수 있습니다.
기본 구조는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>VWorld 지도 예제</title>
<script src="https://map.vworld.kr/js/vworldMapInit.js.do?apiKey=발급받은키"></script>
</head>
<body>
<div id="vmap" style="width:100%; height:700px;"></div>
<script>
// VWorld 지도 초기화 코드 작성
</script>
</body>
</html>실제 서비스에서는 API 키, 지도 버전, 사용하는 지도 API 종류에 따라 스크립트 주소와 초기화 방식이 달라질 수 있습니다. 따라서 개발 시점에는 반드시 VWorld 개발자센터의 최신 예제를 기준으로 적용하는 것이 좋습니다.
C# MAUI 앱에서 VWorld를 사용하는 방법
MAUI는 기본적으로 C# 기반 앱 개발 프레임워크입니다. 하지만 VWorld 지도 API는 주로 JavaScript 기반으로 제공됩니다. 따라서 MAUI에서 VWorld를 사용할 때는 일반적으로 다음 구조를 사용합니다.
MAUI 앱
└ WebView
└ HTML + JavaScript
└ VWorld 지도 API즉, MAUI 화면 안에 WebView를 배치하고, WebView 안에서 VWorld 지도를 실행하는 방식입니다.
MAUI 화면 구성 예시
<ContentPage
x:Class="eMap.MainPage"
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
Title="지도어때">
<Grid RowDefinitions="Auto,*">
<VerticalStackLayout
Grid.Row="0"
Padding="10"
Spacing="6">
<Entry
x:Name="txtKeyword"
Placeholder="지역명 또는 장소명을 입력하세요" />
<Button
Text="지역 검색"
Clicked="OnSearchClicked" />
</VerticalStackLayout>
<WebView
x:Name="MapWebView"
Grid.Row="1" />
</Grid>
</ContentPage>MAUI에서 HTML 지도 로드 예시
private void LoadVWorldMap()
{
string apiKey = "발급받은_VWorld_API_KEY";
string html = $@"
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<meta name='viewport' content='width=device-width, initial-scale=1.0' />
<style>
html, body {{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}}
#map {{
width: 100%;
height: 100vh;
}}
</style>
</head>
<body>
<div id='map'></div>
<script>
var map;
function initMap() {{
var options = {{
mapId: 'map',
initPosition: new vw.CameraPosition(
new vw.CoordZ(128.6811, 35.2285, 15000),
new vw.Direction(0, -90, 0)
),
logo: true,
navigation: true
}};
map = new vw.Map();
map.setOption(options);
map.start();
}}
window.onload = initMap;
</script>
</body>
</html>";
MapWebView.Source = new HtmlWebViewSource
{
Html = html
};
}위 예시는 창원 근처 좌표를 기준으로 3D 지도를 띄우는 개념 예제입니다. VWorld WebGL 3D API 3.0은 JavaScript로 제공되며, 공식 예제에서도 webglMapInit.js.do, vw.Map, vw.CameraPosition, vw.CoordZ 같은 구조를 사용합니다.
지역 검색 기능 구현 구조
지역 검색은 보통 다음 흐름으로 만듭니다.
사용자 입력
→ VWorld 검색 API 호출
→ 검색 결과 JSON 수신
→ 위도/경도 추출
→ WebView 지도 중심 이동
→ 마커 표시MAUI에서는 C#에서 API를 호출하고, 결과 좌표를 JavaScript 함수로 넘기는 방식이 좋습니다.
C#에서 검색 API 호출 구조
public class VWorldSearchService
{
private readonly HttpClient _httpClient = new();
private const string ApiKey = "발급받은_VWorld_API_KEY";
public async Task<(double lat, double lon, string title)?> SearchPlaceAsync(string keyword)
{
if (string.IsNullOrWhiteSpace(keyword))
return null;
string encoded = Uri.EscapeDataString(keyword);
string url =
$"https://api.vworld.kr/req/search" +
$"?service=search" +
$"&request=search" +
$"&version=2.0" +
$"&crs=EPSG:4326" +
$"&size=10" +
$"&page=1" +
$"&query={encoded}" +
$"&type=place" +
$"&format=json" +
$"&key={ApiKey}";
string json = await _httpClient.GetStringAsync(url);
using JsonDocument doc = JsonDocument.Parse(json);
var root = doc.RootElement;
string status = root
.GetProperty("response")
.GetProperty("status")
.GetString() ?? "";
if (!status.Equals("OK", StringComparison.OrdinalIgnoreCase))
return null;
var items = root
.GetProperty("response")
.GetProperty("result")
.GetProperty("items");
if (items.GetArrayLength() == 0)
return null;
var first = items[0];
string title = first.GetProperty("title").GetString() ?? keyword;
var point = first.GetProperty("point");
double lon = double.Parse(point.GetProperty("x").GetString() ?? "0");
double lat = double.Parse(point.GetProperty("y").GetString() ?? "0");
return (lat, lon, title);
}
}검색 버튼 처리 예시
private readonly VWorldSearchService _searchService = new();
private async void OnSearchClicked(object sender, EventArgs e)
{
try
{
string keyword = txtKeyword.Text?.Trim() ?? "";
if (string.IsNullOrWhiteSpace(keyword))
{
await DisplayAlert("알림", "검색어를 입력하세요.", "확인");
return;
}
var result = await _searchService.SearchPlaceAsync(keyword);
if (result == null)
{
await DisplayAlert("검색 결과 없음", "해당 위치를 찾을 수 없습니다.", "확인");
return;
}
await MoveMapAsync(result.Value.lat, result.Value.lon, result.Value.title);
}
catch (Exception ex)
{
await DisplayAlert("오류", ex.Message, "확인");
}
}WebView 지도 이동 함수 호출
private async Task MoveMapAsync(double lat, double lon, string title)
{
string safeTitle = title.Replace("'", "\\'");
string script = $"moveToLocation({lat}, {lon}, '{safeTitle}');";
await MapWebView.EvaluateJavaScriptAsync(script);
}HTML 안에는 다음 JavaScript 함수가 필요합니다.
function moveToLocation(lat, lon, title) {
if (!map) return;
var position = new vw.CameraPosition(
new vw.CoordZ(lon, lat, 3000),
new vw.Direction(0, -90, 0)
);
map.moveTo(position);
// 필요 시 마커 표시 기능 추가
}지도어때에 VWorld를 적용하는 추천 구조
지도어때 앱을 기준으로 보면 다음 구조가 가장 좋습니다.
MainPage
├ 검색 영역
├ 현재 위치 버튼
├ 지도 WebView
├ 주변 정보 버튼
└ 결과 목록
Services
├ VWorldSearchService.cs
├ LocationService.cs
├ CctvService.cs
├ BusStopService.cs
└ WeatherService.cs
Models
├ MapPoint.cs
├ SearchResult.cs
├ CctvItem.cs
└ BusStopItem.cs지도어때 주요 기능 설계
1. 현재 위치 표시
스마트폰 GPS로 현재 위치를 가져온 뒤 VWorld 지도 중심을 이동합니다.
GPS 좌표 수집
→ 위도/경도 확인
→ WebView JavaScript 호출
→ 지도 중심 이동
→ 현재 위치 마커 표시MAUI에서는 Geolocation.Default.GetLocationAsync()를 사용할 수 있습니다.
2. 지역명 검색
사용자가 지역명을 입력하면 VWorld 검색 API로 좌표를 조회합니다.
창원시청 검색
→ VWorld 검색 API 호출
→ 위도/경도 수신
→ 지도 이동
→ 검색 위치 표시3. CCTV 표시
VWorld 지도 위에 ITS 또는 공공데이터 CCTV 좌표를 마커로 표시할 수 있습니다.
CCTV API 호출
→ CCTV 목록 수신
→ 좌표 추출
→ 지도에 마커 표시
→ 마커 클릭 시 영상 URL 표시이 기능은 고속도로어때, 국도어때 기능과 연결하기 좋습니다.
4. 버스정류소 표시
TAGO 또는 지자체 버스 API를 이용해 주변 정류소를 조회하고 VWorld 지도에 표시할 수 있습니다.
현재 위치
→ 주변 정류소 조회
→ 지도 마커 표시
→ 정류소 클릭
→ 경유 노선 / 도착정보 / 버스 위치 표시5. 미세먼지 / 날씨 표시
AirKorea와 기상청 API를 연결하면 지도 상단에 현재 환경 정보를 표시할 수 있습니다.
현재 위치
→ 가까운 측정소 조회
→ 미세먼지 표시
→ 기상청 예보 표시VWorld 사용 시 장점
1. 국가공간정보 기반
VWorld는 공공 기반 공간정보 플랫폼이기 때문에 행정구역, 도로, 지형, 건물, 주제도 등 공공성 있는 데이터를 활용하기 좋습니다.
2. 2D와 3D 지도 모두 가능
일반 지도는 2D로 구현하고, 건물이나 지형 중심 서비스는 3D로 확장할 수 있습니다.
3. 공공데이터와 연계성이 좋음
공공데이터포털, ITS, TAGO, 기상청, AirKorea 같은 공공 API와 함께 쓰기 좋습니다.
4. 업무용 시스템에 적합
상업용 지도 서비스보다 공공 행정, 건설, 설비, 시설물, 도시정보, 현장관리 시스템에 적합한 편입니다.
VWorld 사용 시 주의할 점
1. API 키 관리
VWorld API를 사용하려면 인증키가 필요합니다. 공식 문서에서도 API 사용을 위해 회원가입 후 마이포털에서 인증키를 받아야 한다고 설명하고 있습니다.
앱에 API 키를 직접 넣으면 노출될 수 있으므로 가능하면 서버를 중간에 두는 구조가 좋습니다.
나쁜 구조:
앱 → VWorld API
권장 구조:
앱 → 내 서버 → VWorld API다만 단순 지도 표시나 테스트 앱에서는 앱 내부에 키를 넣어 개발할 수도 있습니다.
2. WebView 통신 처리
MAUI에서 VWorld를 사용할 때 가장 중요한 부분은 C#과 JavaScript 간 통신입니다.
C# → JavaScript
EvaluateJavaScriptAsync 사용
JavaScript → C#
HybridWebView 또는 Custom Handler 필요일반적인 지도 이동, 마커 표시 정도는 C#에서 JavaScript 함수를 호출하는 방식으로 충분합니다.
3. Android 인터넷 권한
MAUI Android 앱에서 WebView와 API를 사용하려면 AndroidManifest.xml에 인터넷 권한이 필요합니다.
<uses-permission android:name="android.permission.INTERNET" />HTTP 기반 리소스를 사용할 경우에는 cleartext 설정이 필요할 수 있습니다.
<application
android:usesCleartextTraffic="true"
android:allowBackup="true"
android:supportsRtl="true" />가능하면 HTTPS 기반 URL을 사용하는 것이 좋습니다.
4. 지도 로딩 시점
WebView가 완전히 로드되기 전에 JavaScript를 호출하면 지도 이동이나 마커 표시가 실패할 수 있습니다.
따라서 다음과 같은 처리가 필요합니다.
WebView 로드 완료 확인
→ 지도 초기화 완료 확인
→ JavaScript 함수 호출지도 HTML 안에 mapReady = true 같은 변수를 두고 확인하는 방식이 좋습니다.
VWorld와 다른 지도 서비스 비교
VWorld
장점:
국가공간정보 활용에 강함
2D / 3D 지도 지원
공공데이터 연계에 적합
업무용 시스템에 적합
단점:
일반 상용 지도보다 예제와 UI가 다소 개발자 중심
MAUI에서는 WebView 연동 필요카카오 지도
장점:
장소 검색과 생활 편의 정보에 강함
상점, 음식점, 편의시설 검색이 편리
사용자 친화적
단점:
국가공간정보, 주제도, 업무용 GIS에는 VWorld보다 약할 수 있음네이버 지도
장점:
국내 사용자 친화적
길찾기와 장소 정보가 강함
단점:
업무용 공간정보나 공공 주제도 활용은 제한적구글 지도
장점:
전세계 지도 서비스에 강함
단점:
국내 상세 데이터와 공공데이터 연계는 국내 지도보다 불리할 수 있음지도어때 앱에 추천하는 적용 방식
지도어때는 VWorld를 기본 지도로 사용하고, 외부 API를 추가로 연결하는 구조가 좋습니다.
기본 지도:
VWorld
검색:
VWorld 검색 API
카카오 로컬 API 보조 가능
교통:
ITS CCTV API
TAGO 버스 API
환경:
AirKorea
기상청 API
저장:
Preferences 또는 SQLite
앱 구조:
C# MAUI + WebView + JavaScript최종 정리
VWorld는 단순한 지도 서비스가 아니라 국가공간정보를 활용할 수 있는 공공 지도 플랫폼입니다. 웹에서는 JavaScript로 직접 구현할 수 있고, C# MAUI 앱에서는 WebView를 이용해 HTML 지도 페이지를 표시하는 방식으로 구현할 수 있습니다.
지도어때 같은 앱에서는 VWorld를 중심으로 현재 위치, 지역 검색, CCTV, 버스정류소, 주차장, 전기차 충전소, 미세먼지, 날씨 정보를 결합하면 매우 유용한 생활형 지도 앱으로 확장할 수 있습니다.
특히 VWorld는 공공데이터와의 궁합이 좋기 때문에 개인용 지도 앱뿐 아니라 공사관리, 설비관리, 현장관리, 스마트공장, 에너지관리, ESG 관리 시스템에도 활용 가치가 높습니다.
'조그만 기술로 세상을 이롭게 > 지도어때' 카테고리의 다른 글
| 지도어때 개편 안내 (0) | 2026.05.26 |
|---|---|
| 앱이나 웹 개발에 활용 가능한 지도 서비스 정리 (0) | 2026.05.24 |
| 지도어때 비공개 테스트 진행 중 (0) | 2026.05.15 |
