---
title: "모바일 앱 디자인 템플릿"
date: "2020-07-28"
categories: 
  - "app-development"
  - "mobile-development"
  - "mobiletogether"
  - "tools"
tags: 
  - "app-design"
  - "cross-platform-app-development"
  - "mobile-development-tools"
  - "mobiletogether"
description: Altova MobileTogether에서 모바일 앱 개발을 위한 디자인 템플릿을 사용하면 개발 속도와 효율성을 향상시킬 수 있습니다.
---
Status: #blog

Tags:  #app-design #cross-platform-app-development #mobile-development-tools #mobiletogether

Categories: [mobile-development](/blog/ko/category/mobile-development.md) | [low-code+no-code](/blog/ko/category/low-codeno-code.md)
# 모바일 앱 디자인 템플릿

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

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

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

![](/blog/images/Blog_MT_control_templates_1.jpg)

<!--more-->

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

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

[![MobileTogether 예제 앱인 "CompanySales"의 일부 페이지입니다](/blog/images/designer-overview.png)](designer-overview.png)

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

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

[![다양한 날짜 선택 기능을 결합하여 모바일 앱 디자인 템플릿을 제작했습니다](/blog/images/super-datepicker-1.png)](super-datepicker-1.png)

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

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

### 모바일 앱 디자인 템플릿

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

[![모바일 앱에 컨트롤 템플릿 추가하기](/blog/images/pages-helper-window.png)](pages-helper-window.png)

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

[![기존의 컨트롤 요소를 모바일 앱 디자인 템플릿으로 변환하는 작업](/blog/images/template-from-selection.png)](template-from-selection.png)

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

[![컨트롤 템플릿 내의 "오늘" 버튼에 대한 기능](/blog/images/today-action.png)](today-action.png)

[![컨트롤 템플릿 내에서 왼쪽 화살표 버튼이 수행하는 동작](/blog/images/arrow-action.png)](arrow-action.png)

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

[![향상된 날짜 선택기 디자인 템플릿 내의 "오늘" 버튼에 적용할 수 있는 스타일 및 속성입니다 ](/blog/images/button-enable.png)](button-enable.png)

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

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

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

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

[![모바일 앱 디자인 템플릿 (앱 페이지 레이아웃에서 보이는 형태)](/blog/images/placeholder-control-1.png)](placeholder-control-1.png)

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

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

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

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

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

[![모바일 앱 디자인 템플릿의 동작 방식을 수정하는 방법](/blog/images/event-overrides.png)](event-overrides.png)

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

[![](/blog/images/action-dialog-1.png)](action-dialog-1.png)

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

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

### 직접 사용해 보세요

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