--- title: "모바일 앱에서 사용자 정의 함수를 개발하고 디버깅하는 방법" date: "2021-03-17" categories: - "apps" - "mobile-development" - "tools" tags: - "app-design" - "app-development" - "debugging" - "mobile-development-tools" description: Altova MobileTogether 프레임워크 내에서 효과적인 코딩을 위해, 모바일 앱 개발에서 사용자 함수가 수행하는 역할, 특히 현지화 및 디버깅에 초점을 맞춰 알아보겠습니다. --- Status: #blog Tags: #app-design #app-development #debugging #mobile-development-tools Categories: [low-code+no-code](/blog/ko/category/low-codeno-code.md) | [mobile-development](/blog/ko/category/mobile-development.md) # 모바일 앱에서 사용자 정의 함수를 개발하고 디버깅하는 방법 최근, 동료 개발자의 코드 검토 과정에서 한 선임 개발자가 남긴 메모를 발견했습니다. "영어가 아닌 다른 언어가 사용될 때도 제대로 작동하도록 사용자 함수를 약간 수정했습니다." 이 문장은 놀라웠습니다. 코드는 코드일 뿐이고, 개발자나 최종 사용자가 어떤 언어를 사용하든 영향을 받아서는 안 되기 때문입니다. 사용자 함수는 단순히 입력 매개변수를 받아 결과를 반환하는 표현일 뿐입니다. Altova MobileTogether는 데이터 선택 및 처리를 위한 표준화된 함수 프로그래밍과 드래그 앤 드롭 방식의 UI 디자인을 결합한 [크로스 플랫폼 모바일 개발 프레임워크](https://www.altova.com/ko/mobiletogether)에서 사용자 기능을 지원합니다. 여러 MobileTogether 데모 애플리케이션은 사용자 기능에 크게 의존하며, MobileTogether 디자이너는 사용자 기능의 생성 및 검증을 크게 돕는 기능을 제공합니다. 모바일 앱에서 사용자가 사용하는 기능들을 살펴보겠습니다. 이를 위해, 몇 가지 데모 앱 중 하나를 예시로 들어 설명하겠습니다. ![](/blog/images/mt_darktheme_blog_3.jpg) 이전 게시글에서 모바일 개발을 위한 [고급 프로그래밍 기술](https://www.altova.com/blog/programming-techniques-for-mobile-development/)의 예시로 "Parcel Delivery" 앱을 언급했습니다. "Parcel Delivery"는 숙련된 개발자가 구현한 우수한 앱으로, 사용자 기능에 크게 의존하고 있습니다. "Parcel Delivery" 예제는 실제 배송 앱을 완벽하게 시뮬레이션한 것입니다. 사용자는 뉴저지 주에 있는 창고에서 출발하여 GPS를 통해 안내받으며 뉴욕 시의 여러 곳으로 소포를 배송하는 배송 회사 소속 운전자의 역할을 수행합니다. MobileTogether Designer의 시뮬레이터 창에서 이 앱을 실행하면 각 목적지까지의 실제적인 이동 경로를 확인할 수 있습니다. MobileTogether 데모 서버에서 "Parcel Delivery" 앱을 사용자의 스마트폰에서 실행하면, 스마트폰 내장 GPS 기능이 사용됩니다. 다음은 다크 모드를 적용한 아이폰과 라이트 모드를 적용한 안드로이드 폰에서 보이는 운전자 배정 화면 두 가지 예시입니다 [![](/blog/images/mobile-screens-1.png)](mobile-screens-1.png) 실행 시간에 실행되는 사용자 정의 함수는 배송 작업 목록과 지도 상의 마커를 생성합니다. 이러한 함수 정의는 MobileTogether 디자이너의 XPath 표현식 빌더 창에서 확인할 수 있습니다 [![모바일 앱에서 사용자 기능에 대한 정의](/blog/images/function-definitions.png)](function-definitions.png) 위에서 선택한 "빌더" 옵션은 입력 지원 기능, 상황에 맞는 XPath/XQuery 구문에 대한 팝업 설명, 그리고 표현식을 작성하는 동안 자동 완성 기능을 제공합니다. "평가기" 옵션을 선택하면 표현식의 결과를 미리 볼 수 있으므로, 필요에 따라 표현식을 검증하거나 수정할 수 있습니다. 앱이 MobileTogether 시뮬레이터에서 실행되는 동안, XPath 평가기는 페이지 소스 데이터의 모든 런타임 값에 접근할 수 있습니다. 우리는 시뮬레이터에서 XPath 평가기를 열어 모바일 앱의 사용자 함수를 평가할 수 있습니다 [![모바일 투게더 시뮬레이터에서 사용자 함수 실행하기](/blog/images/simulator-1-1.png)](simulator-1-1.png) `RemainingDestinations()` 함수는 각 목적지에 대한 속성 정보를 담은 목록을 반환하며, 이 목록은 투두 페이지 하단에 있는 텍스트 목록에 표시됩니다. `DestinationMarkerList()` 사용자 함수는 `RemainingDestinations()` 함수를 호출하고, 지도 상의 각 목적지를 표시하기 위한 지도 마커 목록을 생성합니다 [!["DestinationMarkerList" 함수 실행](/blog/images/simulator-2a.png)](simulator-2a.png) 사용자가 지도상의 특정 지점을 클릭하면, 해당 지점의 설명과 제목이 표시됩니다 [![사용자가 정의한 함수를 사용하여 생성된 지도 마커와 레이블 텍스트](/blog/images/map1-1.png)](map1-1.png) `DestinationMarkerList()` 함수는 지도 컨트롤의 속성입니다 [![맵 객체의 속성으로 사용자 정의 함수를 할당합니다](/blog/images/properties-1-2.png)](properties-1-2.png) 프로젝트 메뉴의 주요 기능 중 하나는 앱 내에서 사용자 정의 함수가 사용된 모든 위치를 목록으로 생성하는 옵션을 제공합니다 [![모바일 앱에서 사용자 정의 함수가 어떻게 사용되는지 목록으로 정리](/blog/images/listing-1.png)](listing-1.png) 사용자 함수 평가 과정을 자세히 확인하려면, 시뮬레이션 중에 디버그 모드를 활성화하여 함수가 단계별로 어떻게 평가되는지 확인할 수 있습니다 [![MobileTogether 디버거에서 사용자 정의 함수를 단계별로 실행합니다](/blog/images/debug-1-1.png)](debug-1-1.png) 앱 실행 과정에서 사용자는 각 배송 과정을 시뮬레이션하고, 각 택배의 수령인과 손상 상태를 기록합니다. "배송 요약" 페이지에서는 이러한 결과를 확인할 수 있습니다 [![배송 보고서에서 지도 마커를 표시하는 사용자 정의 기능](/blog/images/simuator-rpt.png)](simuator-rpt.png) 이 지도에서 마커는 색상으로 구분되어 있으며, 팝업 창에 각 배송 상태에 대한 설명이 표시됩니다. 위에 강조 표시된 배송의 경우, 조안 존스가 대리 수령인이었기 때문에 마커 색상이 녹색 대신 주황색으로 표시됩니다. `ReportMarkerList()` 함수는 데이터 트리에서 배송 정보를 가져와 실제 수령인이 발송인과 다른 경우 마커 색상을 변경합니다. 우리가 배송이 완전히 성공하지 않았다는 것을 알 수 있는 유일한 방법은 작업 기록을 통해서입니다. 그리고 그곳에서 코드 검토 의견에 대한 미스터리가 풀립니다! 해당 텍스트는 영어로 작성되어 있기 때문에, 코드 검토자는 어떤 언어에서도 작동하도록 사용자 함수를 수정했습니다. MobileTogether는 런타임 시 다양한 언어로 작성된 메시지 텍스트를 쉽게 분석할 수 있는 지역화 기능을 제공합니다. "소포 배송" 앱은 영어, 독일어, 스페인어, 일본어 또는 프랑스어 운영체제 버전에 맞게 현지화되어 있습니다. 아래에 보이는 "현지화" 대화 상자의 상단 부분에는 페이지 제목, 레이블, 버튼 등 고정된 텍스트에 대한 번역 목록이 표 형태로 표시됩니다. [![로컬라이제이션 대화 상자는 런타임에 결정되는 텍스트 문자열에 이름을 부여합니다](/blog/images/localization.png)](localization.png) 하단 섹션에서는 실행 중에 발생하는 조건에 따라 텍스트 문자열에 대한 변환 테이블을 정의합니다. MobileTogether에는 mt-load-string('이름')이라는 내장 함수가 있으며, 이 함수는 장치의 언어와 관계없이 지정된 이름으로 문자열을 참조합니다. 아래 그림은 배송 보고서 지도에 표시되는 핀의 색상과 팝업 텍스트를 설정하는 `ReportMarkerList()` 함수의 정의를 보여줍니다. 배송 관련 작업 텍스트가 "delivered_C"라는 문자열과 일치하면 해당 핀은 초록색으로 표시됩니다. 영어로 "delivered_C"는 "개인적으로 배송을 수령했습니다"라는 의미이며, 스페인어로는 "Entrega aceptada en persona" (직접 배송을 수령했습니다)라고 표현됩니다 [![모바일 앱에서 사용자 정의 함수를 모든 언어에서 정상적으로 작동하도록 하기 위해서는 올바른 문법을 사용해야 합니다](/blog/images/simulator-rpt2.png)](simulator-rpt2.png) 만약 개발자가 "DeliverySummary" 값을 영어로 "개인적으로 배송 완료"라는 문자열과 비교했다면, 다른 언어에서는 지도에 표시되는 마커 색상이 정확하게 표시되지 않았을 것입니다. MobileTogether 시뮬레이터를 사용하여 ReportMarkerText() 사용자 함수의 동작을 다양한 언어로 검증할 수 있습니다. 메인 프로젝트 메뉴에는 다른 언어로 앱을 실행할 수 있는 옵션이 포함되어 있습니다 [![로컬라이제이션 결과를 검증하기 위한 시뮬레이션 언어 선택](/blog/images/language-menu-es.png)](language-menu-es.png) 저희는 앱을 스페인어로 실행하고, 일련의 배송 과정을 거쳐 스페인어로 작성된 배송 보고서를 생성할 수 있습니다. 또한, 배송 요약에 표시된 각 항목의 내용에 따라 각 핀의 색상이 정확하게 설정됩니다. [![시뮬레이터를 실행하여 사용자 정의 함수 결과를 스페인어로 확인합니다](/blog/images/spanish-color-map-1.png)](spanish-color-map-1.png) 모든 기술과 도구를 활용하여, 모바일 앱에서 사용자 정의 함수와 같은 고급 프로그래밍 기술을 포함하여, 놀라운 속도로 자신만의 앱을 개발해 보세요! 저희의 MobileTogether를 확인해 보세요 [영상 시연 자료](https://www.altova.com/ko/mobiletogether/demos#video_Demos), 더 [샘플 애플리케이션](https://www.altova.com/ko/mobiletogether/demos), 또는 심지어 [온라인 매뉴얼](https://www.altova.com/manual/MobileTogether/mobiletogetherdesigner/) 자세한 정보를 얻고 싶으시다면, 아래 내용을 참고해주세요. 이제 크로스 플랫폼 모바일 앱을 직접 개발할 준비가 되셨다면, 다음 단계를 진행하세요 [MobileTogether 디자이너를 다운로드하세요](https://www.altova.com/ko/mobiletogether/download).