모바일 앱 리팩토링

새로운 기능이나 기존 소프트웨어 앱의 개선에 대한 가장 좋은 아이디어는 종종 열정적인 사용자들로부터 얻어집니다. 새로운 기능을 구현하면 모바일 앱의 개선 작업을 위한 기회가 생깁니다. 제 친구인 케이시는 몇 년 동안 "MobileTogether Solar Data Tracking" 앱을 사용하여 옥상 태양광 시스템의 성능을 모니터링하면서 몇 가지 제안을 했습니다.

이 앱은 한 페이지에는 연간 월별 생산량을 보여주는 차트와 표를, 다른 한 페이지에는 최근 30일간의 일일 생산량을 보여주는 정보를 표시했습니다. 각 페이지에 있는 탐색 버튼을 통해 사용자는 쉽게 다른 화면으로 이동할 수 있었습니다. 케이시는 앱을 개선하여 모든 차트와 표를 하나의 페이지에 배치하는 것을 제안했습니다. 시간이 지나면서 모바일 사용자들은 손가락 하나로 스크롤하여 데이터를 보여주는 긴 페이지 형태의 모바일 앱에 익숙해졌습니다. 하나의 페이지로 구성된 앱은 더욱 부드럽고 현대적인 느낌을 줄 것입니다.

솔라 데이터 트래커는 안드로이드, iOS, 윈도우 운영체제에서 모두 사용할 수 있는 앱으로, Altova MobileTogether Designer를 사용하여 단일 소스에서 개발되었습니다 보고서를 하나의 페이지로 통합하는 과정에서 앱을 단순화하기 위해 구현 방식을 개선할 수 있는 기회를 얻었습니다. MobileTogether Designer는 드래그 앤 드롭 방식으로 작동하며, 앱 컨트롤 및 도구를 복사 및 붙여넣기 할 수 있는 기능을 제공합니다. 또한, 지역 변수, 전역 변수, 함수, 액션 그룹, 스타일 시트, 외부 데이터 소스 등 모바일 앱의 다양한 요소 사용 현황을 파악하여 모바일 앱을 개선하는 기능을 제공합니다. 이러한 기능들은 앱 수정 작업을 크게 단순화했습니다.

다음은 안드로이드 폰에서 볼 수 있는 월별 태양광 발전량 보고서 페이지와 일별 보고서 페이지를 나란히 비교한 모습입니다

![[Pasted image 20250224145704.png]]

그리고 여기 아이폰에서 스크롤을 통해 한 화면에 모든 데이터를 볼 수 있는 새로운 단일 페이지 버전이 있습니다

![[Pasted image 20250224145734.png]] 화면 중앙 상단에 있는 "새 청구서 추가" 버튼은 이전에는 월별 보고서 페이지의 마지막 부분에 위치했습니다. 이제 보고서가 일일 기록 데이터로 계속 연결됩니다. 페이지의 끝을 나타내는 규칙을 하단에 추가했습니다.

모바일투게더 디자이너에서 새로운 버전을 만드는 과정은 매우 간단했습니다

일일 보고서 페이지의 디자인 요소를 복사하여 월간 보고서 페이지의 맨 뒤에 붙여넣으세요
불필요한 페이지 이동 버튼을 제거하십시오
헤더의 제목 표시를 수정하고 단순화합니다
매일 수집되는 데이터 테이블의 설정을 변경하여 스크롤 기능을 제거합니다
워크플로우 계층 구조에서 기존의 일일 보고서 페이지를 삭제하십시오

MobileTogether Designer에는 논리 오류나 경고를 확인하는 "검증" 도구와, 각 수정 사항을 단계별로 되돌려 문제의 원인이 된 특정 변경 사항을 정확히 찾아낼 수 있는 "실행 취소" 버튼이 포함되어 있습니다.

또한, 하나의 작업 그룹을 수정해야 합니다. 사용자가 새로운 일일 기록이나 전기 회사 청구서에 기재된 정보를 추가하면, 차트도 새로운 데이터 테이블에 맞춰 업데이트되어야 합니다. 기존 방식은 각 페이지의 차트를 업데이트하기 위해 별도의 작업 그룹을 사용했습니다. 작업 그룹 대화 상자를 열고, 기존 작업 그룹에 작업을 추가하여 일일 차트도 업데이트할 수 있습니다.

또한, 해당 그룹의 활동 내용을 보다 정확하게 반영하기 위해 그룹 이름을 변경했습니다. "액션 그룹" 대화 상자에서 그룹 이름을 변경하면, 디자이너는 해당 액션 그룹이 사용되는 모든 위치에서 자동으로 이름을 업데이트합니다.

내장된 MobileTogether 시뮬레이터 창은 솔루션을 즉시 실행하여 논리 검증, 다양한 Android, iOS, Windows 및 기타 기기에서 표시될 사용자 인터페이스 확인, 그리고 실행 중인 워크플로우 데이터의 변화를 확인할 수 있도록 합니다. 또한, 이 시뮬레이터는 실행 과정을 자세히 관찰하고 추적할 수 있는 다양한 디버깅 기능을 제공합니다.

"리팩터링" 메뉴에는 다양한 디자인 요소들의 사용 내역을 보여주는 명령과, 앱 내에서 전혀 사용되지 않는 항목들을 나열하는 명령이 포함되어 있습니다.

"액션 그룹" 목록에는 원래 일일 생산량 차트를 업데이트했던 그룹이 포함되어 있습니다. 하지만 일일 보고서 페이지가 더 이상 앱의 일부가 아니므로, 해당 액션 그룹은 더 이상 필요하지 않으며 삭제할 수 있습니다.

저희는 새로운 모바일 데이터 추적 장치를 출시했고, 케이시는 이 장치를 공원에서 열린 전기차 전시회에서 적극적으로 선보였습니다. 당시 공원에서는 휴대폰 신호가 약했고, 와이파이도 제공되지 않았습니다.

모바일 앱 리팩토링을 위한 다양한 MobileTogether 기능을 사용해 보려면, 무료로 사용할 수 있는 MobileTogether 디자이너를 다운로드하십시오.