---
title: "모든 임원진을 감탄시킬 모바일 대시보드를 구축하세요"
date: "2017-03-16"
categories: 
  - "development"
  - "mobile"
  - "software"
tags: 
  - "mobile-dashboards"
  - "mobile-development"
  - "mobiletogether"
description: Altova MobileTogether를 사용하여 멋지고 기능성이 뛰어난 모바일 대시보드를 만드는 방법을 소개합니다.
---
Status: #blog

Tags:  #mobile-dashboards #mobile-development #mobiletogether

Categories:  [mobile-development](/blog/ko/category/mobile-development.md) | [low-code+no-code](/blog/ko/category/low-codeno-code.md)
# 모든 임원진을 감탄시킬 모바일 대시보드를 구축하세요

이전에 게시한 글에서 [세련된 모바일 앱 제작하기](https://www.altova.com/blog/build-an-elegant-mobile-app-that-delights-end-users/), 저희는 다양한 모바일 기기에서 실행되는 간단한 앱과 완벽한 모바일 대시보드의 예시를 보여드렸습니다. 모바일 개발자들은 사용자가 앱 사용 경험을 직접 설정할 수 있도록 하여 사용자에게 더욱 편리한 서비스를 제공할 수 있습니다. MobileTogether를 사용하면 개발자는 다양한 모바일 플랫폼에 맞춰 앱을 최적화할 수 있습니다 **그리고** 사용자가 쉽고 직관적인 방식으로 텍스트 크기를 원하는 대로 조절할 수 있도록 기능을 제공합니다.

각 사용자가 원하는 텍스트 크기를 설정할 수 있도록 함으로써, 사용자에게 편리함을 제공하는 동시에 개발자가 모든 기기에서 적절한 텍스트 크기를 결정하는 부담을 덜어줍니다.

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

<!--more-->

### 사용자가 텍스트 크기를 선택할 수 있도록 합니다

모바일 앱에서 텍스트 크기를 설정할 수 있도록 두 개의 별도 버튼 또는 슬라이더 컨트롤을 사용할 수 있습니다.

### 두 개의 버튼으로 텍스트 크기 조절

저희가 이전에 소개했던 회사 판매 보고서 앱은 두 개의 버튼을 사용하는 방식을 채택했습니다.

![MobileTogether 판매 보고서 앱 - 안드로이드 버전](/blog/images/Android-Landscape.png)

제어 장치의 하단에는 직관적인 설명이 적힌 두 개의 텍스트 크기 조절 버튼이 있습니다

![모바일 투게더 앱의 글꼴 크기 조절 버튼](/blog/images/Android-Bottom-Row.png)

이 버튼들은 "textSize"라는 이름의 지속적인 데이터 요소의 값을 10에서 50 사이의 범위 내에서 증가시키거나 감소시킵니다.

다음은 감소 버튼에 할당된 제어 동작입니다

![MobileTogether 컨트롤 액션을 사용하여 텍스트 크기를 늘립니다](/blog/images/decrease-text-size.png)

그리고 "증가" 버튼에 대한 동작은 다음과 같습니다

![MobileTogether 컨트롤 액션을 사용하여 텍스트 크기를 늘립니다](/blog/images/increase-text-size.png)

`textSize` 요소는 MobileTogether에서 간단한 사용자 함수 내에서 사용되며, 텍스트 크기를 설정하기 위한 유효한 문자열을 생성하는 데 사용됩니다

![가변 텍스트 크기를 지원하는 MobileTogether 사용자 함수 정의](/blog/images/set-text-size-function.png)

마지막으로, 앱 내 각 텍스트 요소의 글꼴 크기는 속성 창의 드롭다운 메뉴 대신 XPath 표현식을 사용하여 설정됩니다

![텍스트 요소에 적용할 수 있는 모바일 관련 속성](/blog/images/text-size-property.png)

"textSize" 요소가 영구 데이터 트리에 정의되어 있기 때문에, 사용자가 선택한 텍스트 크기는 해당 기기에서 앱을 다시 실행할 때까지 유지됩니다.

이 두 개의 버튼 방식은 회사 매출 보고서와 같이 몇 개의 주요 페이지로 구성된 앱에서 효과적입니다. 사용자가 결과를 즉시 확인할 수 있고, 원하는 크기로 조정할 수 있기 때문입니다. 아래는 작은 글꼴과 큰 글꼴로 표시된 회사 매출 보고서의 예시입니다

![글자가 작은 MobileTogether 앱](/blog/images/small-text-sample.png)  ![큰 글씨로 표시된 MobileTogether 앱](/blog/images/large-text-sample.png)

참고로, 제목은 본문 텍스트보다 크도록 설정되어 있습니다. 이는 제목 텍스트에 대한 또 다른 사용자 기능을 통해 이루어지며, 이 기능은 본문 텍스트와 제목 텍스트의 크기 간의 관계를 설정합니다

![MobileTogether에서 제목 텍스트 크기를 조절하는 기능](/blog/images/headline-text-function.png)

### 슬라이더를 사용하여 텍스트 크기 조절

또 다른 방법으로, 사용자가 텍스트 크기를 조절할 수 있도록 슬라이더 컨트롤을 사용할 수 있습니다. 개발자는 여전히 textSize에 대한 지속적인 데이터 요소를 만들고, 크기 문자열을 생성하는 사용자 함수를 만들며, 위에서 설명한 것처럼 텍스트 크기 속성을 XPath 표현식으로 지정해야 합니다.

하지만 때로는 텍스트 크기를 조절하는 두 개의 버튼을 배치할 만큼 충분한 화면 공간이 없을 수도 있습니다. 그런 경우에는 하나의 버튼을 사용하여 슬라이더 컨트롤에 접근할 수 있습니다.

아래에 표시된 "실행 판매 모바일 대시보드" 앱은 다양한 그래픽 형태로 원하는 날짜의 판매 데이터를 제공합니다. 화면 상단에 있는 컨트롤 영역은 다양한 빠른 날짜 선택 기능을 제공하지만, 텍스트 크기를 조절할 수 있는 버튼을 하나 더 추가할 공간이 제한적입니다.

![MobileTogether 모바일 대시보드 앱 (안드로이드 버전)](/blog/images/Dashboard-app-Android.png)

이 앱에서 "A±" 버튼을 누르면 하위 페이지가 열리고, 이 페이지에는 슬라이더 컨트롤이 있어 사용자가 "textSize" 요소의 값을 조정할 수 있습니다

![모바일 대시보드 앱에서 텍스트 크기를 조절할 수 있는 슬라이더 컨트롤](/blog/images/resize-slider.png)

맨 위 줄에 표시되는 텍스트는 사용자가 슬라이더 컨트롤을 조작하는 동안 실시간으로 크기가 조정됩니다. 사용자가 "뒤로" 버튼을 클릭하면, 텍스트 요소의 크기가 조정된 상태로 메인 페이지가 다시 표시됩니다. 앞서 설명한 두 개의 버튼 방식과 마찬가지로, textSize 요소는 지속적인 데이터로 저장되며, 앱을 다시 실행할 때 사용자가 선택한 크기가 복원됩니다.

일부 앱은 인치와 센티미터, 달러와 유로, 또는 기본 주소나 이미지 파일 이름과 같이 사용자 설정으로 저장하기에 적합한 여러 요소를 포함할 수 있습니다. 이러한 경우, 개발자는 사용자가 모든 사용자 설정을 한 곳에서 확인하고 변경할 수 있도록 단일 설정 페이지를 만들 수 있습니다.

MobileTogether Designer는 안드로이드, iOS, 윈도우 8, 윈도우 10, 윈도우 폰 8, 그리고 HTML-5 기반 웹 클라이언트를 위한 크로스 플랫폼 앱에 다양한 고급 기능을 빠르고 쉽게 구현할 수 있는 무료 도구입니다. [사본을 다운로드하세요](https://www.altova.com/ko/download/mobiletogether.html) 그리고 오늘 바로 시작하세요!