스마트지도 개발기 API 통합과 사용자 경험을 고려한 UI 설계

광주 충장축제 스마트 지도 '축집사' 개발기! API 통합, 사용자 중심 UI 설계, 실시간 혼잡도 정보 제공 등 혁신적인 기능으로 축제 방문객의 경험을 개선하였습니다. 스마트 결제 시스템과 실시간 POI 관리로 더욱 편리한 축제 현장을 제공합니다.

딥파인

Nov 27, 2024

Contents

사용자 편의를 극대화한 UI: 혼잡도 정보와 스마트 결제 시스템 연동 안전한 API 통합을 위한 보안 강화 방안 확장성과 안정성을 고려한 AWS 인프라 설계 실시간 POI 데이터 업데이트를 위한 데이터베이스 관리 마치며

축제와 같이 일시적인 기간과 공간에서 진행되는 행사에서는 일반적인 지도만으로는 필요한 정보를 모두 제공하기 어렵습니다. 이에 주최 측은 방문객들을 위해 축제 전용 지도를 제작하여 배포하지만, 이러한 지도 역시 정보 전달에 한계가 있습니다. 한 장의 지도에 필터링 없이 많은 정보가 담겨있어 방문객들이 실제로 필요한 정보를 찾는 데 어려움을 겪을 수 있기 때문입니다.

이러한 문제를 해결하고 방문객들에게 더 많은 정보를 제공하고자, 딥파인은 한국관광공사와 협업하여 광주 추억의 충장축제에서 누구나 쉽게 접근할 수 있는 웹 기반의 스마트 지도를 개발하였습니다.

웹 기반 스마트지도 구축을 위한 지도 API 선정

가장 먼저 고려한 것은 어떤 지도 API를 사용할 것인가였습니다. 후보로는 네이버 지도와 TMAP 두 가지가 있었고, 주요 고려 사항은 도보 길 안내, 지도 내 POI(Point Of Interest) 마킹, 지도 내 특정 영역에 도형 생성 가능(혼잡도 표시) 세 가지 기능이었습니다.

이러한 요구 사항을 모두 충족시키는 API를 찾은 결과, TMAP이 모든 기능을 지원한다는 것을 확인하였습니다. 따라서 TMAP을 최종적으로 선택하여 개발을 진행하게 되었습니다.

HTML5 Geolocation API를 활용한 사용자 위치 기반 길 안내 구현

지도 API를 선정한 이후, 본격적인 개발에 앞서 스마트 지도에서 사용자에게 제공할 정보를 정리하였습니다. 노출될 정보(이하 POI라 칭하겠습니다)는 행사, 푸드존, 편의시설, 주차장, AED의 다섯 가지로 분류하였으며, 각 POI에는 지도 상의 좌표를 포함하고, 클릭 시 팝업으로 운영 날짜와 시간, 설명 등의 상세 정보를 제공하여 사용자가 필요한 정보에 즉시 접근할 수 있도록 설계하였습니다.

또한 길 안내 기능을 구현하기 위해 사용자의 위치 데이터를 활용해야 했는데, 이를 위해 HTML5 Geolocation API를 사용하였습니다.

이미지 출처 : 축집사 https://chookzipsa.deepfine.com/

HTML5 Geolocation API란?

HTML5 Geolocation API는 웹 브라우저에서 사용자의 동의를 받아 GPS, Wi-Fi, IP 주소, 셀룰러 네트워크 등을 통해 사용자의 현재 위치를 추적할 수 있게 해주는 웹 기술입니다.

navigator.geolocation 객체를 통해 Geolocation 기능에 접근할 수 있으며, getCurrentPosition() 메서드(사용자의 현재 위치를 한 번 가져옴)와 watchPosition() 메서드(사용자의 위치 변화를 지속적으로 추적)를 사용하여 위치 정보를 받아올 수 있습니다.

저희 서비스의 특성상 사용자 위치를 지속적으로 지도에 표시해야 하기 때문에, watchPosition() 메서드를 활용하였습니다. 아래 예시 이미지와 같이 각 조건에 맞는 POI를 검색하여 길 안내를 받을 수 있고 해당 POI의 운영시간 내 위치로부터의 거리를 확인할 수 있습니다.

개발 시 고려 사항

Geolocation API를 사용함에 있어 몇 가지 중요한 사항들을 고려하여 개발을 진행하였습니다.

사용자 동의 필요
위치 정보는 개인정보에 해당하므로, 사용자의 명시적인 동의를 받는 것이 필수적입니다. 이를 위해 위치 정보 접근 요청 시 사용자에게 동의 창을 제공하고, 동의 여부에 따라 기능을 제공하도록 구현하였습니다.
보안 연결(HTTPS) 요구
Geolocation API는 보안상의 이유로 HTTPS 프로토콜에서만 동작합니다. 따라서 서비스 전반에 SSL 인증서를 적용하여 HTTPS 환경을 구축하였으며, 이를 통해 사용자 데이터의 안전성을 확보하였습니다.
위치 정보의 정확도
위치 정보는 사용자의 기기 성능이나 주변 환경에 따라 정확도가 달라질 수 있습니다. 특히 실내나 지하에서는 GPS 신호가 약해져 정확도가 떨어질 수 있기 때문에, 이러한 변수를 고려하여 위치 기반 기능을 설계하였습니다.
브라우저 호환성
대부분의 최신 브라우저는 Geolocation API를 지원하지만, 일부 구형 브라우저나 특정 환경에서는 지원하지 않을 수 있습니다. 이에 대비하여 호환성 체크를 실시하고, 지원하지 않는 브라우저에서는 대체 안내 메시지를 제공하도록 구현하였습니다.
에러 처리
위치 정보를 가져오는 과정에서 오류가 발생할 수 있으므로, 이에 대한 예외 처리를 철저히 하였습니다. 예를 들어, 사용자가 위치 정보 제공을 거부했을 때나 네트워크 문제가 발생했을 때 적절한 안내 메시지를 표시하도록 하였습니다.

이러한 고려 사항들을 반영하여 개발함으로써, 사용자는 조건에 맞는 POI를 검색하여 실시간 길 안내를 받을 수 있고, 해당 POI의 운영 시간 내에 현재 위치로부터의 거리도 확인할 수 있습니다. 이로써 방문객들은 축제 현장에서 더욱 편리하고 정확한 정보를 제공받을 수 있게 되었습니다.

사용자 편의를 극대화한 UI: 혼잡도 정보와 스마트 결제 시스템 연동

사용자 편의를 최우선으로 고려하여, 딥파인은 주차장 혼잡도와 거리 혼잡도 정보를 스마트 지도에 연동하였습니다. 이를 통해 방문객들은 실시간으로 주차장 이용 현황과 거리의 혼잡도를 확인할 수 있어, 더욱 쾌적하고 편리한 축제 경험을 할 수 있었습니다.

1. 주차장 혼잡도 제공🚗

딥파인은 드론 관제가 가능한 주차장에 한하여 주차 공간 잔여율 정보를 함께 제공하였습니다. (주)베스텔라랩에서 수집한 데이터를 API를 통해 받아와, 주차장 POI의 색상을 혼잡도에 따라 변경하는 방식을 채택하였습니다. 이를 통해 사용자는 지도에서 주차장의 혼잡도를 한눈에 확인할 수 있도록 UI를 설계하였습니다.

또한, 분석에 사용된 드론 항공사진을 함께 제공하여 사용자가 직접 주차장의 상태를 시각적으로 확인할 수 있게 하였습니다. 주차장별 혼잡도 레벨은 1부터 4까지의 단계로 구분되며, 각 레벨에 따라 파랑, 초록, 오렌지, 빨강의 색상으로 표시하여 직관성을 높였습니다.

드론을 연동하여 실시간으로 주차 정보를 안내하는 인공지능(AI) 주차 솔루션을 선보인다. — 드론 연동한 주차장 AI 분석 이미지(사진:베스텔라랩)

2. 거리 혼잡도 실시간 표시🏃

거리 혼잡도 정보는 (주)피치에이아이에서 제공한 데이터를 활용하였습니다. API를 통해 각 영역의 혼잡도 레벨을 실시간으로 받아와, 사전에 지정한 지도 내 특정 영역에 해당 레벨에 맞는 색상을 적용하였습니다. 이를 통해 사용자는 축제 전역의 거리 혼잡도를 실시간으로 확인할 수 있어, 더욱 효율적인 동선 계획이 가능해졌습니다.

추가로, 사용자가 보는 일반 화면 외에도 혼잡도 정보를 집중적으로 볼 수 있는 관제용 화면을 제공하였습니다. 운영진은 이 화면을 통해 전체 축제장의 혼잡도를 실시간으로 모니터링하고 관리할 수 있었습니다. 혼잡도 레벨은 1부터 5까지로 구분되며, 파랑, 초록, 노랑, 오렌지, 빨강의 색상으로 시각화하여 즉각적인 상황 파악이 가능하도록 UI를 설계하였습니다.

3. 스마트 결제 시스템 연동 💰

딥파인은 방문객들의 편의를 위해 스마트 결제 시스템을 축집사에 연동하였습니다. 푸드트럭 POI에 스마트 결제 시스템으로 바로 이동할 수 있는 링크 버튼을 추가하여, 사용자가 길 안내 버튼 외에도 자연스럽게 결제 화면으로 이동할 수 있도록 UI를 구성하였습니다. 이를 통해 방문객들은 줄을 서지 않고도 간편하게 음식을 주문하고 결제할 수 있어, 축제 경험의 만족도를 높였습니다.

지금까지 축집사에 포함된 주요 기능들을 살펴보았습니다. 이제 개발 과정에서 마주한 고민들과 그 해결 방안을 공유하고자 합니다.

안전한 API 통합을 위한 보안 강화 방안

TMAP API를 활용하여 스마트 지도를 구현하는 과정에서, 보안적인 측면을 철저히 고려하였습니다. 초기 개발 단계에서는 TMAP 모듈을 웹 기반 서비스에 직접 임포트하는 방식을 사용하였는데, 이 과정에서 API 키가 클라이언트 측에 노출될 수 있는 가능성을 인지하게 되었습니다.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>simpleMap</title>
<script
	src="https://apis.openapi.sk.com/tmap/vectorjs?version=1&appKey=발급받은 Appkey"></script>
<script type="text/javascript">
	// 페이지가 로딩이 된 후 호출하는 함수입니다.
	function initTmap(){
		// map 생성
		// Tmapv3.Map을 이용하여, 지도가 들어갈 div, 넓이, 높이를 설정합니다.
		var map = new Tmapv3.Map("map_div", { // 지도가 생성될 div
			center : new Tmapv3.LatLng(37.56520450, 126.98702028),
			width : "100%",	// 지도의 넓이
			height : "400px",	// 지도의 높이
			zoom : 16	// 지도 줌레벨
		});
	} 
</script>
</head>
<body onload="initTmap()"><!-- 맵 생성 실행 -->
	<div id="map_div"></div>
</body>
</html>

(출처 : TMAP API )

위와 같이 스크립트 태그의 src 속성에 AppKey가 직접 포함되어 있어, 웹 페이지의 소스 코드를 통해 누구나 키를 확인할 수 있는 구조였습니다. 이는 API 키가 외부에 노출되어 서비스 오용이나 비용 손실 등의 보안 위험을 초래할 수 있으므로, 이에 대한 해결이 필요했습니다. 보안 강화를 위해 다음과 같은 조치를 취하였습니다.

서버 사이드에서의 TMAP 모듈 로드
클라이언트 측 코드에서 직접 API 키를 포함시키지 않고, 서버에서 TMAP 모듈을 로드한 후 클라이언트에게 전달하는 방식을 채택하였습니다. 이를 통해 API 키가 외부에 노출되지 않도록 하였으며, 클라이언트는 서버를 통해 안전하게 TMAP 서비스를 이용할 수 있게 되었습니다.
IP 제한 기능 적용
여기서 더 확실하게 API KEY 탈취로 인한 재산 피해를 막기 위해 TMAP에서 제공하는 IPS 제한 기능을 사용하여, 특정 IP 주소에서만 API 요청이 가능하도록 설정하였습니다. 이를 통해 승인되지 않은 IP로부터의 접근을 차단하고, API 키의 오남용을 방지할 수 있었습니다.

IPS(Intrusion Prevention System)란?
IPS는 침입 방지 시스템을 의미하며, 네트워크나 시스템에 대한 악의적인 침입 시도를 실시간으로 탐지하고 차단하는 보안 장치입니다.
환경 변수로 API 키 관리
API 키를 소스 코드에 직접 입력하는 대신, 환경 변수 파일을 통해 관리하였습니다. 이는 소스 코드 저장소에 민감한 정보가 포함되지 않도록 하여 보안을 한층 강화하였습니다. 환경 변수를 사용함으로써, 개발 및 배포 과정에서 API 키의 노출 위험을 최소화할 수 있었습니다. 아래의 예제는 API 모듈을 로드하여 클라이언트에게 전달해 주는 부분입니다.

이와 같이 보안 조치를 통해, 가이드 문서에서 설명하는 방법과는 다르게 API 키를 소스에 직접 입력하지 않고 외부 파일로 관리함으로써 API 키 노출의 위험을 최소화하였습니다. 이러한 접근 방식은 보안 표준을 준수하면서도 사용자에게 안정적이고 신뢰할 수 있는 서비스를 제공하는 데 큰 도움이 되었습니다.

확장성과 안정성을 고려한 AWS 인프라 설계

스마트 지도 서비스인 축집사는 축제 기간 동안 많은 방문객이 동시에 이용할 것으로 예상되어, 안정적이고 원활한 서비스를 제공하기 위해 AWS 인프라를 신중하게 설계하였습니다. 다음과 같은 조치를 통해 높은 트래픽을 효과적으로 관리하고, 사용자 경험을 극대화하였습니다.

AWS 인스턴스 구성 및 로드밸런싱 도입

축제 지도 특성상 많은 트래픽이 예상되는 서비스였기 때문에, 이를 대비하여 AWS 인스턴스를 다음과 같이 구성하였습니다.

우선, WEB 서버와 WAS 서버를 각각 두 대씩 구성하여 서비스의 확장성과 안정성을 확보하였습니다.

WEB 서버는 정적인 콘텐츠(HTML, CSS, 이미지 등)를 제공하는 역할을 담당하며, WAS 서버는 동적인 콘텐츠(웹 애플리케이션)를 처리하고 제공하는 역할을 맡습니다. 이러한 서버 구성을 통해 각 서버에 가해지는 부하를 분산시켜, 사용자에게 빠르고 안정적인 서비스를 제공할 수 있었습니다.

또한, 로드밸런싱을 도입하여 네트워크 트래픽을 효율적으로 분산시켰습니다.

로드밸런싱이란?

로드밸런싱은 애플리케이션을 지원하는 리소스 풀 전체에 네트워크 트래픽을 균등하게 배포하는 기술로, 부하를 여러 대의 컴퓨터 자원에 나눔으로써 각 컴퓨터에게 가해지는 부하를 최소화하는 것으로 이로써 자원의 가용성 및 응답시간을 최적화하는 컴퓨터 네트워크 기술입니다.

아래 표는 WEB 서버와 WAS 서버의 역할과 주요 소프트웨어를 정리한 것입니다.

WEB 서버와 WAS 서버에 대한 설명

항목	웹 서버	WAS 서버
정의	정적인 콘텐츠(HTML, CSS, 이미지 등)를 제공하는 서버	동적인 콘텐츠(웹 애플리케이션)를 처리하고 제공하는 서버
기능	HTTP 프로토콜을 이용해 클라이언트에게 웹 페이지 제공	웹 애플리케이션 실행 및 데이터 처리, 웹 서버와 클라이언트 간의 중계 역할
주요 소프트웨어	Apache, Nginx, IIS	Tomcat, JBoss, WebLogic, WebSphere

이를 통해 가용성을 향상시켜, 한 서버에 장애가 발생하더라도 다른 서버가 트래픽을 처리하여 서비스 중단을 방지할 수 있었습니다.

또한, 확장성을 제공하여 트래픽 증가 시 서버를 추가하여 쉽게 확장할 수 있었으며, 성능 최적화를 통해 각 서버의 부하를 균등하게 분산시켜 전반적인 응답 속도를 개선하였습니다. 이러한 방식으로 축집사 시스템의 확장성과 안정성을 확보하는 데 중점을 두었습니다.

한편, 실제 서비스 운영 중에는 축제 현장의 POI(Point Of Interest) 정보가 수시로 변경되는 상황이 발생했습니다. 화장실 고장으로 인한 임시 폐쇄나 새로운 편의시설 추가 등 예상치 못한 변동사항이 있었습니다. 이에 서비스 중단 없이 POI 데이터를 실시간으로 업데이트할 수 있는 다음과 같은 방안을 마련했습니다.

실시간 POI 데이터 업데이트를 위한 데이터베이스 관리

데이터베이스(DB)에 POI 정보 저장 및 관리

모든 POI 정보를 데이터베이스에 저장하여 중앙에서 관리함으로써, 필요한 경우 신속하게 데이터를 수정하고 업데이트할 수 있었습니다. 이를 통해 잘못된 정보 제공으로 인한 민원을 최소화 할 수 있었으며, 관광객들에게도 정확한 정보를 실시간으로 제공할 수 있었습니다.

이와 같은 데이터베이스 관리 방안을 통해, 축집사는 축제 기간 동안에도 잘못된 정보제공으로 인한 민원 발생을 최소화 할 수 있었고 정확한 정보를 실시간으로 제공할 수 있었습니다.

마치며

스마트 지도 축집사를 개발하면서 불특정 다수의 많은 사용자들이 동시에 이용하는 프로젝트를 처음 경험하게 되었습니다. 안정적인 서비스를 제공하기 위해 보안 문제와 트래픽 분산 방안에 대해 깊이 고민했고, 그 결과 축제 기간 동안 서비스 장애 없이 스마트 지도를 성공적으로 운영할 수 있었습니다.

앞으로도 여러 지역 축제에서 기존 지도로는 제공하기 어려웠던 정보들을 축집사와 같은 스마트지도를 통해 제공할 수 있을 것으로 기대됩니다.

또한, 2D 지도를 넘어 3D 지도를 제공하고 AR 내비게이션 기능을 도입하기 위해 지속적으로 연구개발에 힘쓸 예정입니다. 딥파인은 앞으로도 혁신적인 기술력을 바탕으로 다양한 축제와 이벤트에서 안정적이고 유용한 스마트 지도 서비스를 제공하여, 방문객들에게 더욱 풍부한 정보를 제공할 수 있도록 최선을 다하겠습니다.