모바일 앱에서 맞춤형 지도 만들기

이전 게시글에서 우리는 크로스 플랫폼 모바일 앱에 지도 기능을 통합하는 방법을 설명했습니다. 이때 각 사용자의 기기에 설치된 기본 지도 애플리케이션을 활용했습니다. 저희 예제 앱은 미국 내 주요 공항의 위치를 표시하는 지도를 생성했습니다. 그림에서는 동일한 앱이 안드로이드 폰, 아이폰, 그리고 윈도우 데스크톱에서 생성한 지도를 보여줍니다.

만약 매핑할 위치 목록이 사전에 알려지지 않고, 실행 시간에 사용자 활동에 따라 생성된다면 어떻게 될까요? Altova의 로우코드 크로스 플랫폼 모바일 개발 도구인 MobileTogether는 개발자들이 실행 시간에 생성되는 지리 위치 목록을 기반으로, 모바일 앱에서 실시간으로 맞춤형 지도를 만들 수 있도록 지원합니다.

여기 보이는 것은 모바일 앱의 화면으로, 사용자가 입력한 문구를 기반으로 주변 위치 목록을 가져오기 위해 RESTful API 요청을 수행합니다.

만약 기업에서 새로운 데이터 센터를 건설할 위치를 찾고 있다면, 검색 결과 목록에 지도를 추가하는 것은 매우 유용한 기능이 될 것입니다.

이전 게시물에서 소개한 "공항 상태" 앱에서 보셨듯이, MobileTogether의 지도 컨트롤은 지도에 표시되는 마커, 지도를 표시하는 뷰포트 프레임, 그리고 사용자가 지도상의 특정 지점을 클릭했을 때 수행될 동작들을 정의하는 속성들을 포함합니다.

"공항 상태" 앱에서 주요 공항에 대한 모든 마커 목록은 "마커" 속성을 위한 XPath/XQuery 편집기 창에 직접 코딩되어 있었습니다

맵 마커를 생성하는 XQuery 표현식

이 마커들은 반드시 하드코딩되어야 하는 것은 아닙니다. 대신, 모바일 앱에서 사용하는 사용자 정의 지도에 대한 모든 마커 목록은 XQuery 표현식을 통해 생성될 수 있습니다. 모바일 앱에서 사용자 정의 지도를 만들기 위해서는, REST 검색 쿼리 결과를 기반으로 하는 XQuery FLWOR (For-Let-Where-Order-Return) 표현식이 필요합니다.

FLWOR 표현식에서 let, where, 그리고 order 파라미터는 선택 사항이며, 저희의 마커 목록 처리에는 필요하지 않습니다. REST 요청으로 반환되는 위치 목록을 처리하기 위해서는 For와 Return만 사용하면 됩니다

XQuery 표현식을 처음부터 완벽하게 작성하는 것은, "let", "where", "order" 매개변수 없이도 어려울 수 있습니다. 이때 XQuery 표현식 창의 "평가기" 섹션이 유용하게 활용됩니다. "평가기" 버튼을 클릭하면 작업 중에 표현식을 테스트해 볼 수 있습니다.

만약 수식에 오류가 포함되어 있다면, 계산이 실패하고 오류 내용은 결과 창에 표시됩니다.

모바일 앱 개발 중인 시뮬레이터가 실행되는 동안, MobileTogether Designer에서 XQuery 표현식 창을 열었습니다. 먼저 시뮬레이터를 사용하여 텍스트 검색을 수행했고, 이를 통해 텍사스주 아마릴로 반경 100마일 이내의 "풍력 발전" 관련 실시간 데이터를 REST 쿼리를 통해 얻었습니다. 위 스크린샷에서 화면 하단 왼쪽에 표시된 검색 결과 중 "Cielo Wind Power LLC"라는 이름은, 오른쪽의 평가 결과 화면에 표시되는 마커 1에 대한 텍스트 요소를 생성하는 데 사용되었습니다.

작동하는 표현에 만족하면, 새로운 지리 위치 정보 맵 컨트롤을 검색 결과 페이지에 끌어서 추가한 다음, 해당 표현을 복사하여 "마커" 속성에 붙여넣습니다. MobileTogether 디자이너에서 맵이 포함된 페이지의 모습은 다음과 같습니다

이제 남은 지도 속성들을 저희 애플리케이션에 가장 적합하도록 설정할 수 있습니다. 저희는 확대/축소 기능을 갖춘 도로 지도를 선택했습니다. 다른 사용 가능한 지도 유형으로는 위성 지도나 위성 이미지와 도로 정보를 결합한 하이브리드 지도가 있습니다. "뷰포트" 속성은 비어 있습니다. 왜냐하면 MobileTogether가 런타임 시 XQuery 표현식에 의해 정의된 지도상의 모든 마커를 포함하도록 뷰포트를 자동으로 설정하기 때문입니다. 또한, REST 요청 결과의 개수가 0보다 클 때만 표시되도록 XQuery 표현식을 사용하여 가시성을 설정했습니다.

다음은 지도 속성 도움말 창의 모습입니다

"제어 폭" 및 "제어 높이" 속성 설정을 통해 MobileTogether는 각 모바일 기기에 적합한 지도 크기를 자동으로 설정할 수 있습니다.

마커를 클릭했을 때 사용자에게 해당 위치에 대한 더 많은 정보를 제공하고자 합니다. 이는 "컨트롤 액션(Control Action)" 속성에서 정의됩니다. "컨트롤 액션"을 위한 3개의 점(…) 버튼을 클릭하면 "액션" 대화 상자가 열리며, 개발자는 이 대화 상자에서 여러 개의 액션을 정의할 수 있습니다

저희 앱은 MobileTogether 확장 기능을 사용하여 클릭된 마커에 대한 정보를 수집한 다음, 해당 위치의 상세 정보를 표시하는 하위 페이지를 엽니다.

아래는 아이폰에서 실행되는 앱의 결과 화면과, 안드로이드 폰에서 사용자가 특정 항목을 클릭했을 때 나타나는 하위 페이지의 모습입니다

결과 상세 페이지의 "생산 데이터 보기" 버튼을 클릭하면, 선택된 풍력 발전소의 과거 발전 데이터를 조회하기 위해 데이터베이스에 접속할 수 있습니다.

모바일 앱에서 사용자 정의 지도를 만드는 것이 얼마나 쉬운지 직접 경험해 보세요. 온라인 도움말과 예제 앱이 포함된 무료 모바일 앱 디자인 도구인 "MobileTogether Designer"를 다운로드하세요

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