모든 임원진을 감탄시킬 모바일 대시보드를 구축하세요

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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