모바일 앱 디자인 템플릿

이전 게시글에서 모바일 앱 개발 시 소프트웨어 디자인 템플릿을 활용하여 디자인 재사용성을 높이고, 다양한 앱 요구사항에 맞춰 효율적이고 유연한 옵션을 쉽게 구축할 수 있는 방법에 대해 설명했습니다. 또한, 런타임 시 사용자 선택에 따라 여러 계층의 계층적 데이터를 표시하도록 설계된 컨트롤 템플릿의 예시를 소개했습니다.

저희의 예제는 개발자들을 위해 개발된 Altova의 RMAD(Rapid Mobile App Development, 빠른 모바일 앱 개발 도구)인 MobileTogether를 사용하여 제작되었습니다 크로스 플랫폼 앱을 개발합니다 최종 사용자가 만족할 수 있는, 역동적이고 정교한 앱 성능을 제공합니다.

여러 개의 컨트롤을 하나의 큰 단위로 결합하여 크로스 플랫폼 모바일 앱을 위한 컨트롤 템플릿을 만들 수 있습니다. 이는 마치 개별 부품으로 구성된 복잡한 하위 조립체를 만드는 것과 같습니다. 이렇게 만들어진 디자인 템플릿은 모바일 앱 개발 과정에서 쉽게 적용할 수 있어 개발 속도를 높이고 일관성을 유지하는 데 도움이 됩니다.

Altova의 모바일 개발 도구인 MobileTogether Designer는 드래그 앤 드롭 방식의 시각적 레이아웃 도구와 함수형 프로그래밍 기술을 결합하여 다양한 기능을 보여주는 예제 앱을 제공합니다. "CompanySales" 앱은 가상의 회사에 대한 실시간 모바일 보고서를 생성하기 위해 주문 데이터베이스를 쿼리합니다. 이 보고서에는 전체 판매액, 제품별 판매액, 지역별 판매액, 또는 개별 영업 담당자별 판매액이 포함되며, 사용자는 보고서 날짜를 선택하고 이전 기간과 비교할 수 있습니다.

아래는 2월 15일의 실시간 판매 현황을 보여주는 개요 페이지와, 해당 날짜의 제품별 판매 내역을 상세하게 보여주는 제품별 판매 페이지의 이미지입니다.

앱의 각 페이지에는 날짜 선택 기능이 포함되어 있어, 사용자가 과거의 특정 날짜를 선택하여 과거 판매 데이터를 확인할 수 있습니다.

주요 디자이너 레이아웃 창에서 확인할 수 있듯이, 날짜 선택 기능은 세 개의 버튼 컨트롤과 하나의 날짜 선택 컨트롤을 결합하여 구현되었습니다

날짜 선택 컨트롤은 보고서 날짜를 표시하며, 사용자가 과거의 모든 날짜를 선택할 수 있도록 합니다. 왼쪽 및 오른쪽 화살표 버튼은 각각 하루 전 또는 하루 후의 날짜로 이동하며, "오늘" 버튼을 클릭하면 현재 날짜가 선택됩니다.

보고서의 날짜가 현재 날짜로 설정되면, "오늘" 버튼과 오른쪽 화살표 버튼은 모두 비활성화됩니다.

모바일 앱 디자인 템플릿

제어 템플릿은 위에 표시된 제어 요소들이 생성되기 전에, "페이지" 도우미 창에서 먼저 추가됩니다. 새로운 페이지와 제어 템플릿은 왼쪽 상단에 있는 녹색 "+" 버튼을 클릭하여 추가할 수 있습니다

또는, 기존 페이지에 있는 컨트롤을 선택하고, 마우스 오른쪽 버튼을 클릭하여 나타나는 메뉴에서 옵션을 선택하여 컨트롤 템플릿을 만들 수도 있습니다

향상된 날짜 선택기 내에서 "오늘" 버튼, 화살표 버튼, 그리고 날짜 선택기 컨트롤에 의해 수행되는 기능들은 모두 컨트롤 템플릿 내에서 정의됩니다. 아래에는 "오늘" 버튼과 왼쪽 화살표 버튼에 대한 기능들이 나와 있습니다

"오늘" 버튼이 현재 날짜가 선택되었을 때 활성화되지 않도록 하고, 사용자가 미래 날짜로 이동하지 못하도록 설정하고 싶습니다. 이러한 버튼의 활성화 조건을 "스타일 및 속성" 도구 창에서 설정할 수 있습니다. 다음은 "오늘" 버튼에 대한 설정의 일부입니다

"오늘" 버튼은 선택된 보고서 날짜가 현재 날짜로 설정되어 있을 때 비활성화됩니다. 또한, 버튼이 클릭 가능한지 여부를 나타내기 위해 서로 다른 색상을 사용했습니다.

색상 정의는 선택 사항입니다. "CompanySales" 앱의 주요 요구 사항 중 하나는 모든 기기에서 동일한 색상을 표시하여 기업의 브랜드 이미지를 일관되게 보여주는 것이었습니다. 색상 정의를 비워두면, MobileTogether는 각 플랫폼(Android, iOS, Windows 10 등)에 대해 기본 색상을 자동으로 적용합니다.

페이지에 컨트롤 템플릿 추가하기

향상된 날짜 선택 컨트롤 템플릿은 앱의 "임원 판매 보고서" 페이지와 네 개의 하위 페이지 중 세 곳에서 사용됩니다. 우리는 단순히 "페이지" 도우미 창에서 향상된 날짜 선택 컨트롤을 필요한 각 페이지로 끌어다 놓았습니다. 이렇게 하면 템플릿이 "플레이스홀더 컨트롤"에 자동으로 적용되어 여러 단계를 절약할 수 있습니다. (예시: [이미지 또는 설명])

모바일 앱 디자인 템플릿의 동작 방식 수정

우리가 더 고려해야 할 사항이 하나 있습니다. 사용자가 새로운 보고서 날짜를 선택하면, 앱이 자동으로 판매 데이터베이스를 검색하여 각 페이지에 맞는 고유한 보고서와 차트를 표시하도록 하고 싶습니다. 지금까지 "고급 날짜 선택기"에 정의된 기능은 단순히 날짜를 선택하는 기능만 제공합니다.

컨트롤 템플릿을 추가적으로 처리하는 방법은 세 가지입니다. 첫째, 컨트롤 템플릿 자체에 정의된 작업만 적용할 수 있습니다. 둘째, 컨트롤 템플릿에 정의된 작업을 모두 무시하고, 플레이스홀더에 정의된 새로운 작업만 적용할 수 있습니다. 셋째, 컨트롤 템플릿의 작업과 플레이스홀더에 정의된 추가 작업을 결합하여 사용할 수 있습니다.

저희 회사의 판매 앱은 세 번째 옵션을 사용합니다. "고급 날짜 선택기" 기능을 통해 사용자가 원하는 날짜를 선택할 수 있습니다. 또한, 각 페이지에 표시되는 "플레이스홀더"는 해당 페이지에 적합한 데이터베이스 쿼리 실행 및 차트 업데이트와 같은 특수한 기능을 제공합니다.

각 페이지의 템플릿 컨트롤에서, 오른쪽 클릭 메뉴를 통해 이벤트 설정을 변경할 수 있도록 기능을 추가했습니다

그러면 "작업" 대화 상자가 열립니다. 아래에 "제품별 판매" 페이지에서 사용할 수 있는 작업 목록이 표시되어 있습니다.

첫 번째 액션은 "템플릿 이벤트 콜백(Template Event Callback)"이라는 특수한 내장 액션 그룹입니다. "템플릿 이벤트 콜백"을 포함시키는 것은, 향상된 날짜 선택기 컨트롤 템플릿에 정의된 모든 액션이 먼저 실행되고, 그 후에 플레이스홀더에 정의된 추가 액션이 실행됨을 의미합니다.

위 이미지에서 마지막 액션 그룹을 확장하면 "판매 제품별 보고서"를 업데이트하는 "새로 고침" 액션들이 표시됩니다. 처음 두 개의 "새로 고침" 액션은 데이터베이스 쿼리를 실행하고, 마지막 두 개의 "새로 고침" 액션은 쿼리 결과에 따라 차트를 다시 그립니다.

직접 사용해 보세요

무료로 사용할 수 있는 MobileTogether Designer를 다운로드하고, CompanySales 예제 앱을 열어 이 판매 보고 도구에서 모바일 앱 디자인 템플릿을 자세히 살펴보세요. 또는, 모바일 앱을 다운로드하고, CompanySales 앱을 직접 사용하는 모바일 기기에서 실행해 보세요. 모바일 앱에서의 디자인 템플릿 지원은 MobileTogether의 다양한 기능 중 하나이며, 개발자들이 빠르고 간편한 로우코드 방식을 통해 고급 네이티브 앱을 개발할 수 있도록 지원합니다.