--- title: "모바일 앱 테마는 사용자 만족도를 향상시킵니다" date: "2022-03-02" categories: - "app-development" - "mobile-development" - "mobiletogether" tags: - "mobile-app-themes" - "mobile-app-user-interface" - "mobile-development-tools" - "mobiletogether" description: 모바일 앱 테마가 차트 색상 및 표시 방식을 사용자 정의할 수 있도록 함으로써 사용자 만족도를 어떻게 향상시키는지 알아보세요. 모바일 앱 개발 플랫폼인 MobileTogether의 강력한 디자인 도구를 활용하여 가능합니다. --- Status: #blog Tags: #mobile-app-themes #mobile-app-user-interface #mobile-development-tools #mobiletogether Categories: [mobile-development](/blog/ko/category/mobile-development.md) | [mobile-development](/blog/ko/category/mobile-development.md) | [mobile-development](/blog/ko/category/mobile-development.md) # 모바일 앱 테마는 사용자 만족도를 향상시킵니다 모바일 앱 테마는 각 사용자가 개인적인 선호도에 따라 앱의 디자인을 변경할 수 있도록 하여 사용자 만족도를 높입니다. 데이터 보고 및 시각화 기능을 제공하는 앱에서 여러 테마를 구현하는 한 가지 방법은 사용자에게 차트 및 그래프의 색상 팔레트를 선택할 수 있는 옵션을 제공하는 것입니다. MobileTogether는 드래그 앤 드롭 방식의 사용자 인터페이스 디자인, 이벤트 처리를 위한 강력한 시각적 프로그래밍 언어인 액션 트리, 그리고 데이터 선택 및 처리를 위한 표준화된 함수형 프로그래밍을 결합하여 사용됩니다. 개발자들은 매일 MobileTogether를 사용하여 [세련된 크로스 플랫폼 애플리케이션을 개발하세요](https://www.altova.com/ko/mobiletogether) 다양한 인기 형식으로 제작된 풍부한 차트와 그래프를 제공합니다. 주요 차트 설정에서는 모바일 앱 개발자가 앱을 디자인하는 과정에서 내장된 네 가지 색상 팔레트 중 하나를 선택하거나, 심지어 차트와 그래프에 사용할 사용자 정의 색상 팔레트를 정의할 수 있습니다. 다크 모드와 라이트 모드 디스플레이 설정을 함께 사용하면, 총 열 가지의 다양한 색상 조합으로 디스플레이를 사용자 정의할 수 있습니다. 개발자는 디자인 단계에서 특정 색상을 강제하는 대신, MobileTogether의 기능을 활용하여 사용자가 직접 원하는 색상을 선택할 수 있도록 할 수 있습니다. 예시를 통해 자세히 살펴보겠습니다. ![](/blog/images/mt_darktheme_blog_3.jpg) 아래 이미지는 모바일 앱에서 제공하는 "모바일 투게더 색상 구성" 선택 대화 상자와, 옥상 태양광 발전 시스템의 생산량을 보고하는 차트의 예시를 보여줍니다. [![모바일 앱의 테마를 차트 색상 조합을 통해 정의합니다](/blog/images/user-schema-def.png)](user-schema-def.png) 개발자는 차트 설정 대화 상자에서 사용자 정의 색상 설정을 적용했습니다. 이 설정에 따르면, 차트의 배경 영역은 주황색으로 채워지고, 막대는 파란색으로 표시됩니다. 차트에 다른 요소들이 추가될 경우, 다음 색상은 녹색, 노란색, 보라색 등으로 지정될 것입니다. 개발자는 드롭다운 메뉴에서 제공되는 다양한 내장 색상 조합(컬러 스키마) 중 원하는 것을 선택할 수 있었습니다 [![내장된 색상 조합을 활용하면 다양한 모바일 앱 테마를 만들 수 있습니다](/blog/images/schema-choose.png)](schema-choose.png) ### **모바일 앱 테마 만들기** 모든 모바일 기기에서 사용자가 앱 실행 시 원하는 색상 테마를 선택할 수 있도록 하는 전략을 살펴보겠습니다. 이 앱에는 이미 설정 페이지가 있으므로, 사용자 인터페이스 테마를 선택할 수 있는 기능을 자연스럽게 해당 페이지에 추가할 수 있습니다. 먼저, 각 색상 테마에 대한 라디오 버튼과 색상 샘플을 포함하는 테이블을 만들어 보겠습니다. 완성된 테이블의 모습은 MobileTogether Designer에서 다음과 같습니다 [![모바일 앱 테마 선택 기능을 보여주는 테이블 (MobileTogether 디자이너에서 볼 수 있는 형태)](/blog/images/theme-buttons-1.png)](theme-buttons-1.png) MobileTogether는 익숙한 모든 선택 기능을 지원합니다. 예를 들어, 테이블 바로 위에 콤보 박스가 나타납니다. 모바일 앱 테마의 경우, 모든 색상 옵션을 동시에 표시하기 위해 라디오 버튼을 선택했습니다. 이 앱의 차트는 각 항목에 하나 또는 두 개의 요소만 포함하고 있으며, 따라서 각 색상 조합은 각 스키마에서 목록의 처음 두 가지 색상을 나타냅니다. 다음은 모바일투게더 시뮬레이터 창에서 설정 페이지의 동일한 부분을 보여주는 이미지입니다 [![MobileTogether 시뮬레이터에서 볼 수 있는 색상 테마 선택 기능](/blog/images/theme-buttons-2.png)](theme-buttons-2.png) 주요 차트 설정 대화 상자를 통해 개발자는 거의 모든 데이터 세트를 시각화하는 데 가장 적합한 차트를 빠르고 쉽게 디자인할 수 있습니다. 여기에는 면적 차트, 막대 차트, 캔들 차트, 게이지 차트, 파이 차트 등이 포함됩니다. 또한, 차트 유형을 여러 층으로 결합하여 사용할 수도 있습니다. 위에 표시된 월별 생산 차트는 막대 차트가 겹쳐진 레이어 차트입니다. 하지만 차트의 각 요소는 앱 실행 중에 처리되는 XPath 표현식의 결과로 정의될 수도 있습니다. "동적 XPath 설정" 대화 상자에서 설정한 값은 기본 차트 설정보다 우선 적용됩니다. ![색상 테마를 선택하기 위한 동적 XPath 설정](/blog/images/dynamic-xpath-settings.png) "동적 XPath 설정" 대화 상자를 통해 XML 요소인 "graphColorBase"에서 각 차트에 적용할 색상 설계를 지정할 수 있습니다. 앱 설정 페이지의 라디오 버튼 목록은 "graphColorBase"에 다음 값 중 하나를 할당합니다: "기본값", "흑백", "컬러", "파스텔", 또는 "사용자 정의". 다음은 안드로이드 폰에서 다크 모드(어두운 모드)로 설정했을 때, 앱 테마를 선택하는 모습이 담긴 앱의 최종 화면 스크린샷입니다 [![안드로이드 폰에서 모바일 앱 테마를 선택하는 방법](/blog/images/android-example.png)](android-example.png) 아이폰의 밝은 모드에서 표준 색상과 흑백 색상 구성의 예시입니다 [![아이폰에서 보이는 모바일 앱 테마](/blog/images/iphone-example.png)](iphone-example.png) 회색조 색상 체계는 색맹을 가진 사용자에게 완벽한 선택일 수 있습니다! 저희의 "MobileTogether"를 한번 살펴보세요 [영상 시연 자료](https://www.altova.com/ko/mobiletogether/demos#video_Demos), 더 [샘플 애플리케이션](https://www.altova.com/ko/mobiletogether/demos), 또는 심지어 [온라인 매뉴얼](https://www.altova.com/manual/MobileTogether/mobiletogetherdesigner/) MobileTogether에 대한 모든 정보를 자세히 알아보려면 다음 내용을 참고하십시오. 모바일 앱 테마를 통해 사용자 만족도를 향상시키고 싶으실 때, 다음 단계를 진행하시면 됩니다 [MobileTogether 디자이너를 다운로드하세요](https://www.altova.com/ko/mobiletogether/download).