헬스, 요가, 필라테스, 골프, 요가, 축구 … 요즘 어떤 운동 하세요? 건강과 자기 관리의 중요성이 대두하고 있는 현대 사회에서 운동은 취미를 넘어선 필수 요소 중 하나가 되었습니다. 이 중에서도 최근 20-40대 직장인을 중심으로 런닝 열풍이 불고 있는데요, 한국런닝산업협회에 따르면 22년 기준 국내 마라톤 대회 참가자 수는 약 100만 명(!)으로 추산되고 있으며 이는 코로나19이후 홈트레이닝과 런닝 문화가 확산하면서 가속화되었습니다. ‘달리기’가 유행하면서 덩달아 런닝화 브랜드가 급부상하는가 하면 티비 프로그램에서도 런닝 관련 콘텐츠를 쉽게 발견할 수 있게 되었습니다. 이는 런닝이 이제 단순한 운동을 넘어 하나의 라이프스타일로 자리 잡고 있음을 보여줍니다.
방송인 ‘기안84’는 최근 ‘나혼자산다’에서 뉴욕마라톤에서 풀코스를 완주하는 모습을 보였습니다
SNL 러닝크루는 MZ사이에서 유행인 러닝 동호회를 풍자하며 인기를 끌었습니다
서울과 부산 주요 도시를 달리는 러닝크루를 쉽게 발견할 수 있으며 지자체 주관의 런닝 대회 및 이벤트 참여자도 대폭 늘었습니다. 런닝을 처음 시작하시는 분이라면 빼놓을 수 없는건 바로 ‘스마트폰 어플’입니다. 스트라바(Strava), 나이키 런 클럽(NRC)와 같은 달리기 어플은 단순히 시간과 거리를 측정하는 것을 넘어서 런닝 경로를 정교하게 그리고 분석할 수 있는 기능을 제공하여 사용자의 기록을 풍부하게 하고 성취감을 느끼도록 도와줍니다.
스위스 러닝브랜드인 온러닝은 런닝 인기와 힘입어 매출 급부상에 품귀 현상까지 빚고 있습니다
<1000만 러너 시대…러닝용품 시장 급성장> - 한경
운동 어플에서 경로를 그리려면 어떻게 해야할까요? 가장 쉬운 방법은 바로 구글맵스플랫폼의 API를 사용하는 것입니다. 구글 지도 API를 사용하면 정확하여 누구나 정확하고 상세한 러닝 경로를 쉽게 시각화할 수 있습니다. 구체적으로 어떤 API를, 어떻게 사용하면 좋을지 오늘 포스팅에서 차근차근 살펴보도록 하겠습니다.
구글지도 API 사용방법
경로 그리기의 기본은 구글맵스플랫폼의 구글 지도 JavaScript API를 사용하는 데에서 시작합니다.
여기서 먼저, API의 기본 개념과 사용방법이 궁금하신 분들은 아래 포스팅을 참조해주세요
- 구글지도 API 개념부터 활용까지 파헤치기
- 구글맵 API 키 발급하고 무료로 사용하기
구글 길찾기 API의 종류와 사용 예제에 대해 알고 싶으시다면 아래 포스팅을 참조해주세요
- 구글 지도 초보자를 위한 구글 길찾기 API(Routes API) 완벽 가이드
구글맵 API로 경로 그리기 예시
구글지도 API를 활용한 경로 그리기 기본 구현 코드는 아래와 같습니다.
[html - index.html]
<html> <head> <title>Travel Modes in Directions</title>
<link rel="stylesheet" type="text/css" href="./src/style.css" /> <script type="module" src="./src/index.ts"></script> </head> <body> <div id="floating-panel"> <b>Mode of Travel: </b> <select id="mode"> <option value="DRIVING">Driving</option> <option value="WALKING">Walking</option> <option value="BICYCLING">Bicycling</option> <option value="TRANSIT">Transit</option> </select> </div> <div id="map"></div> <script> (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({ key: "YOUR_API_KEY", v: "weekly", // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.). // Add other bootstrap parameters as needed, using camel case. }); </script> </body> </html>
|
[typescript - index.ts]
let map; let directionsRenderer;
async function initMap(): Promise<void> { const { Map } = (await google.maps.importLibrary( "maps" )) as google.maps.MapsLibrary; const { DirectionsRenderer, DirectionsService } = (await google.maps.importLibrary( "routes" )) as google.maps.RoutesLibrary;
const mapOptions: google.maps.MapOptions = { zoom: 16, center: { lat: 37.5665, lng: 126.978 }, mapId: "DEMO_MAP_ID", };
map = new Map(document.getElementById("map") as HTMLElement, mapOptions);
const directionsRenderer = new DirectionsRenderer(); const directionsService = new DirectionsService();
directionsRenderer.setMap(map);
calculateAndDisplayRoute(directionsService, directionsRenderer); (document.getElementById("mode") as HTMLInputElement).addEventListener( "change", () => { calculateAndDisplayRoute(directionsService, directionsRenderer); } ); }
function calculateAndDisplayRoute( directionsService: google.maps.DirectionsService, directionsRenderer: google.maps.DirectionsRenderer ) { const selectedMode = (document.getElementById("mode") as HTMLInputElement) .value; const travelMode = google.maps.TravelMode[ selectedMode as keyof typeof google.maps.TravelMode ];
directionsService .route({ origin: "도쿄역", destination: "도쿄 디즈니 랜드", travelMode: travelMode, }) .then((response) => { directionsRenderer.setDirections(response); }) .catch((e) => window.alert("Directions request failed due to " + status) ); }
initMap(); |
[css]
style.css
#map { height: 100%; }
html, body { height: 100%; margin: 0; padding: 0; }
#floating-panel { position: absolute; top: 10px; left: 25%; z-index: 5; background-color: #fff; padding: 5px; border: 1px solid #999; text-align: center; font-family: "Roboto", "sans-serif"; line-height: 30px; padding-left: 10px; }
|
Maps JavaScript API 그리고 Directions API 비교
위의 예시에서는 Maps JavaScript API와 RouteLibrary가 사용되었습니다. RouteLibrary는 JavaScript를 통해 구글지도를 구현할 때 쉽게 사용할 수 있게 한 라이브러리입니다.
두 API는 서로 보완적인 관계에 있으며 대부분의 위치 기반 서비스에서 함께 사용되곤 합니다. 두 개 API의 사용 목적 및 활용 사례는 아래 표에 정리되어있습니다.
Maps JavaScript API | Directions API |
| 경로 정보를 텍스트/JSON 형태로 제공 두 지점 사이의 최적 경로 계산 이동 거리, 예상 시간 제공 대중교통, 자동차, 도보 등 다양한 이동 모드 지원 백엔드 서버의 경로 데이터 처리/네비게이션 시스템/라우팅 알고리즘 개발
|
두 API를 활용한 통합 활용 코드 예제는 아래와 같습니다. 아래 코드를 보고 두 API가 어떻게 상호 보완되는지 이해해보세요!
전세계 러닝앱 1위 Strava 역시 구글지도 API를 활용하고 있습니다
구글지도 길찾기 API 이런 기능 구현도 가능합니다
물론 위의 예시는 매우 기본적인 경로 그리기 구현 방법만을 보여주는 것뿐, 실제 프로젝트에서는 더 복잡하고 정교한 로직이 필요합니다. 구글맵 API를 활용한 경로 그리기에는 단순 경로를 표시하는 것 외에도 다양한 요소를 고려한 추가 기능을 구현할 수 있습니다.
구글맵을 활용한 경로 그리기 구현 방법에 어떤 추가 기능이 들어갈 수 있을까요?
고도 변화 시각화: 고도의 변화를 계산하여 런닝 코스의 고도 변화를 시각화할 수 있습니다. 등산하시는 분이라면 사용하시는 등산 어플에서 찾을 수 있는 기능이죠?
맞춤형 경로 추천: 도심과 공원의 경로를 구분하는 등 사용자의 런닝 레벨과 선호도에 따라 맞춤형 경로를 추천할 수 있습니다
날씨 정보 통합: 실시간 날씨 정보를 경로와 함께 제공할 수 있습니다
실시간 경로 추적: GPS 위치 업데이트를 통해 사용자의 현재 위치를 실시간으로 표시할 수 있습니다. 나와 친구들의 위치를 비교하며 뛰는 것도 재밌겠네요!
런닝앱 외에도 만보기, 여행 어플 등 다양한 서비스에서 구글지도 API가 이용되고 있습니다
본 포스팅에서는 경로 그리기의 예시로 런닝 어플을 들었지만 사실 우리가 많이 사용하는 만보기 어플이나 건강 추적 어플 모두 유사한 위치 추적 및 경로 그리기 기술을 사용하고 있습니다. 런닝 앱과 마찬가지로 GPS 위치 정보를 활용하여 어플 내에 이동 경로를 추적하고 그려내는데요 이렇듯 구글지도 API는 우리가 매일같이 사용하는 어플 곳곳에서 알게 모르게 활용되고 있습니다.
이렇듯 구글지도 API는 단순한 기술 구현을 넘어 사용자에게 의미 있는 경험을 제공하고 있습니다. 런닝, 만보기, 등산, 여행 등 다양한 분야에서 위치 기반 서비스를 활용하고 여러분의 웹과 앱 서비스를 창의적이고 혁신적인 방향으로 탈바꿈해보세요. 구글맵 Maps JavaScript API와 Directions API로 경로 그리는 방법에 대해 추가로 궁금하신 내용이 있으시다면 국내 유일 구글맵스플랫폼 프리미어 파트너사인 SPH를 통해 문의 부탁드립니다.
SPH는 Google Maps, SuperMap, Maxar Technologies 등 다양한 제품군을 가지고 있으며, 고객의 사례에 꼭 맞는 무료 세미나 및 인적 컨설팅을 제공하고 있습니다. 더욱 자세한 이야기를 나누고 싶으시다면, 여기에서 문의 주시길 바라며, SPH에서 발행하는 GIS / 로케이션인텔리전스 관련 최신 소식을 받아보고 싶으신 분들은 페이스북 페이지 또는 뉴스레터를 구독해주시길 바랍니다
