모바일 앱에 지도 기능을 통합하세요

개발자들은 모바일 기기의 위치 정보 기능을 활용하여 매우 맞춤화된 위치 기반 앱을 만들 수 있습니다. 현재 알토바(Altova)의 크로스 플랫폼, 로우 코드 모바일 개발 도구인 모바일투게더(MobileTogether)는 모든 주요 모바일 플랫폼에서 애플리케이션에 지도를 깊이 통합할 수 있도록 지원합니다.

개발자는 모바일 앱에 지도를 통합하고, 특정 위치를 표시하는 마커를 추가하며, 사용자가 지도에서 특정 위치를 클릭했을 때 실행되는 사용자 정의 기능을 설정할 수 있습니다. 예를 들어, 기업은 앱에 모든 지점 위치를 표시하는 지도를 포함하고, 사용자가 특정 지점을 클릭하면 해당 지점의 현재 재고 정보를 보여주는 기능을 구현할 수 있습니다.

이전 게시글에서, 사용자가 콤보 박스에서 공항 코드를 선택하여 미국 주요 공항의 상태를 확인할 수 있는 모바일 앱에 대해 설명했습니다. 다른 방법으로는, 47개의 콤보 박스 항목을 지도 위에 표시되는 위치 정보(핀)로 대체하는 것입니다.

자, 이 예시를 함께 살펴보겠습니다.

아래 스크린샷은 새로운 "공항 상태" 앱이 안드로이드 폰, 아이폰, 그리고 윈도우 데스크톱 애플리케이션으로 실행되는 모습을 보여줍니다.

각 기기에서는 해당 기기에 내장된 기본 지도 애플리케이션을 사용하여 지도가 생성됩니다. 최종 사용자는 각 플랫폼에서 익숙한 스타일과 형식을 자동으로 확인할 수 있습니다.

만약 지도가 화면 하단에 있는 일부 상태 정보를 가려버린다면, 화면을 위아래로 스크롤하여 해당 정보를 확인할 수 있습니다

MobileTogether Designer의 시각적 레이아웃 기능을 사용하여 지도 컨트롤을 앱으로 끌어다 넣어 모바일 앱에 지도를 통합할 수 있습니다. 각 지도의 속성을 사용자 정의할 수 있습니다. 아래 스크린샷은 저희 주요 공항 상태 페이지의 일부를 보여주며, 오른쪽에는 지도 속성 설정 창이 표시되어 있습니다.

사용 가능한 지도 유형은 도로 지도, 위성 지도, 또는 혼합 지도입니다. 선택 사항인 확대/축소 기능 외에도, 모든 터치스크린 장치는 한 손가락으로 지도를 스크롤하거나, 두 손가락을 사용하여 확대/축소 기능을 지원합니다.

표시될 지도 영역은 mt-geo-map-marker 표현식을 사용하여 정의된 하나 이상의 마커 목록을 기반으로 합니다. 각 마커는 ID, 제목, 그리고 텍스트 필드를 포함합니다. 이러한 값들은 마커를 클릭했을 때 가져올 수 있습니다.

마커의 색상은 빨강, 초록, 파랑과 같은 일반적인 이름일 수도 있고, 위에서 사용한 것처럼 사용자 정의 색상 코드를 사용하여 지정할 수도 있습니다.

"Viewport" 속성은 지도 상단의 왼쪽 모서리와 하단의 오른쪽 모서리 좌표를 설정하여 지도가 표시될 전체 영역을 정의합니다. 이 값을 비워두면, 기본적으로 정의된 모든 마커와 약간의 여백이 포함된 영역이 표시됩니다. 우리는 북미 지역의 대부분에 대한 초기 값을 설정하여 뷰포트 표현식을 정의했습니다.

"제어 동작" 속성은 사용자가 지도상의 특정 지점(마커)을 클릭했을 때 어떤 일이 발생하는지 정의합니다. 저희 앱은 해당 마커의 제목(세 자리 공항 코드)을 읽고, 해당 코드를 사용하여 FAA 웹 서비스에서 공항 정보를 가져온 다음, 화면을 업데이트합니다.

저희 앱은 선택된 공항의 위치를 확대 표시하기 위해 새로운 화면 표시 영역 좌표를 계산합니다

모바일 앱에 지도를 통합하는 것이 얼마나 쉬운지 직접 경험해 보세요. 온라인 도움말과 예제 앱이 포함된 무료 모바일 앱 개발 도구인 "MobileTogether Designer"를 다운로드하세요 또한, GitHub에서 "Airport Status" 앱을 다운로드하여 개발 도구에서 직접 실행하거나, 개인 모바일 기기에서 시험적으로 실행해 볼 수도 있습니다.

MobileTogether을 사용하여 제작된 다른 앱에 대해 알아보고, 비디오 데모를 다음 링크에서 확인하세요: https://www.altova.com/mobiletogether/demos