--- title: "자동으로 다크 모드를 지원하는 모바일 앱을 개발하세요" date: "2020-12-28" categories: - "app-development" - "mobile-development" tags: - "app-development" - "dark-theme" - "mobile-development-tools" - "mobiletogether" description: Altova MobileTogether를 사용하여 다크 모드에 자동으로 적용되는 모바일 앱을 개발하는 방법을 알아보세요. 사용자 경험을 향상시키고 배터리 수명을 효과적으로 최적화할 수 있습니다. --- Status: #blog Tags: #app-development #dark-theme #mobile-development-tools #mobiletogether Categories: [mobile-development](/blog/ko/category/mobile-development.md) | [mobile-development](/blog/ko/category/mobile-development.md) # 자동으로 다크 모드를 지원하는 모바일 앱을 개발하세요 Android 및 Apple 모바일 기기에서는 "다크 모드"라는 디스플레이 옵션을 사용할 수 있습니다. 이는 일반적인 화면 표시 방식의 거의 반전된 이미지라고 생각할 수 있습니다. 다크 모드에서는 흰색이 검은색으로, 검은색이 흰색으로 표시되며, 전반적으로 색상 강도가 조절됩니다. 다크 모드는 전력 소비를 줄여 배터리 사용 시간을 늘릴 수 있으며, 어두운 환경에서도 화면을 더 쉽게 볼 수 있도록 도와줍니다. Altova MobileTogether는 개발자들이 앱을 실행할 때 사용자의 설정(예: 다크 모드 설정)을 자동으로 감지하여 다크 모드를 지원하는 모바일 앱을 만들 수 있도록 다양한 기능을 제공합니다. 예시를 하나 살펴봅시다 ![](/blog/images/mt_darktheme_blog_1.jpg) 아래에 동일한 모바일 기기에서 실행되는 모바일 앱의 두 가지 화면을 보여드리는데, 하나는 밝은 테마(Light Theme)이고 다른 하나는 어두운 테마(Dark Theme)입니다. [![동일한 모바일 앱을 밝은 테마와 어두운 테마로 표시한 모습](/blog/images/image-1-1.png)](image-1-1.png) 이 앱을 사용하면 사용자가 태양광 패널의 발전량과 전기 사용량을 계기판의 측정값을 통해 기록하고, 기록된 데이터를 시각화하는 차트를 생성하여 시간이 지남에 따라 발생하는 잉여 전력량을 추적할 수 있습니다. 많은 주택용 태양광 발전 시스템은 순차보상 방식으로 전력망에 연결됩니다. 지붕에 설치된 태양광 패널은 햇빛이 비치는 동안에만 가정에 전력을 공급합니다. 밤이나 가정의 전력 소비량이 발전량보다 많을 때는 전력망에서 전기를 공급받습니다. 시스템이 가정에서 소비하는 것보다 더 많은 전력을 생산하는 경우, 남는 전력은 전력망으로 다시 공급되어 전력 회사의 발전 능력을 보완합니다. Altova MobileTogether는 모바일 개발자들이 MobileTogether Designer를 통해 [다양한 플랫폼에서 작동하는 모바일 앱을 쉽게 개발할 수 있도록 지원합니다](https://www.altova.com/ko/mobiletogether) 이 도구는 드래그 앤 드롭 방식으로 UI를 디자인할 수 있는 기능, 이벤트 처리를 위한 강력한 시각적 프로그래밍 언어인 액션 트리, 그리고 데이터 선택 및 처리를 위한 표준화된 함수형 프로그래밍 기능을 결합하여 제공됩니다. 이 앱의 모든 구성 요소는 높은 수준으로 사용자 정의가 가능하지만, 기본적으로 텍스트, 버튼, 규칙, 테두리, 심지어 창 배경의 색상과 같은 요소들은 각 기기의 시스템 기본 설정으로 구현됩니다. MobileTogether Designer에는 개발자가 전체 프로젝트 설정을 지정할 수 있는 "스타일" 도우미 창이 포함되어 있으며, 여기에는 밝은 테마 또는 어두운 테마 설정을 포함한 다양한 옵션을 설정할 수 있습니다. [![모바일 앱에서 다크 모드를 자동으로 지원하도록 스타일 및 속성을 설정합니다.](/blog/images/styles-window.png)](styles-window.png) 테마 설정 옵션은 "시스템 설정 사용", "밝은 테마 강제 적용", 또는 "어두운 테마 강제 적용"입니다. 기본 설정은 "시스템 설정 사용"이며, 따라서 개발자는 별도의 작업 없이도 어두운 테마를 자동으로 지원할 수 있습니다. ### 사용자 지정 색상을 사용하는 차트에서 다크 모드를 자동으로 지원합니다 일부 요소는 사용자 정의 색상 설정을 필요로 할 수 있으며, 개발자는 밝은 테마와 어두운 테마에 대한 대체 색상을 지정할 수 있습니다. 첫 번째 단계는 현재 사용 중인 사용자 설정을 확인하는 것입니다. MobileTogether에는 전역 변수가 포함되어 있어 개발자가 런타임 시 사용자 기기의 설정을 감지하고, 기기 기능에 따라 적절한 동작을 수행하도록 지원합니다. MobileTogether 디자이너의 "전역 변수" 대화 상자에는 선택된 시뮬레이션 기기에 대한 모든 전역 변수와 해당 값들이 나열되어 있습니다. [!["글로벌 변수는 런타임 시 사용자 기기의 배경색을 식별합니다."](/blog/images/global-variables-1.png)](global-variables-1.png) 특정 안드로이드 기기의 기본 페이지 배경색은 위에 표시되어 있습니다. 이 값은 기기가 다크 모드(어두운 테마)로 설정되어 있을 경우 변경될 수 있습니다. 16진수 값이 낮을수록 더 어두운 색상을 나타내며, 값이 높을수록 밝은 색상을 나타냅니다. #808080라는 16진수 값은 50% 밝기의 회색을 나타냅니다. 런타임에 이 값을 테스트하기 위해 XPath 표현식을 만들 수 있으며, 50% 밝기의 회색보다 어두운 기본 배경색은 장치가 다크 모드(어두운 테마)로 설정되어 있음을 의미한다고 가정할 수 있습니다. 디자이너 시뮬레이션 창의 XPath 평가기는 표현식의 정확한 구문을 파악하는 데 유용한 도구입니다 [![모바일 기기의 기본 배경색을 기준으로 검은색 또는 흰색의 색상 코드를 반환하는 XPath 표현식입니다](/blog/images/xpath-expression.png)](xpath-expression.png) 이 표현식은 16진수 문자열을 정수로 변환하고, 그 값을 50% 회색 값과 비교하여, 결과에 따라 검은색 또는 흰색 문자열 값을 선택합니다. 따라서 이 표현식은 라이트 테마 또는 다크 테마에 따라 텍스트 색상을 자동으로 선택하는 데 유용하며, 사용자 함수에 적용해 보겠습니다 ![사용자 정의 함수 내에서 해당 표현식을 구현합니다.](/blog/images/user-function.png) MobileTogether는 사용자가 쉽게 사용할 수 있도록 다양한 기능을 제공합니다 [다양하고 풍부한 차트와 그래프를 제작하세요](https://www.altova.com/ko/mobiletogether/enterprise-apps) 모든 플랫폼에서 동일한 모양을 갖도록 설계된 앱입니다. 위에 표시된 "솔라 툴" 앱의 예시를 보면, 막대 그래프를 사용하여 일일 태양광 발전량을 보여주고, 면적 그래프 위에 전기 소비량을 겹쳐서 보여줍니다. 개발자는 "차트 모양 변경" 대화 상자와 같이 여러 차트 설정 대화 상자를 통해 이러한 차트의 설정을 선택할 수 있습니다 [![모든 플랫폼에서 동일한 차트를 생성할 수 있도록 차트 모양 설정 대화 상자](/blog/images/chart-creation.png)](chart-creation.png) 이러한 대화 상자 중 많은 부분이 색상을 설정합니다. 예를 들어, 배경색과 테두리 색상을 설정할 수 있습니다. 하지만, 런타임 시 클라이언트 장치에서 평가되는 동적 XPath 설정을 통해 이러한 기본값을 완전히 변경할 수 있습니다. [![차트 컨트롤을 세밀하게 조정할 수 있는 동적 XPath 옵션입니다.](/blog/images/chart-config.png)](chart-config.png) 이 버튼을 클릭하면 차트의 각 요소에 대해 XPath 값 또는 표현식을 설정할 수 있는 대화 상자가 열립니다. 아래 그림에서 차트 설정 대화 상자에 검은색 또는 흰색으로 지정된 모든 요소에 대한 값을 설정했습니다. 원래 흰색 요소는 기본 배경색으로 설정하고, 텍스트나 테두리와 같은 검은색 요소는 저희의 AutoTextColor() 함수를 사용하여 설정했습니다. ![글로벌 변수와 사용자 정의 함수를 활용하여 다크 모드를 자동으로 지원하도록 구현했습니다](/blog/images/dynamic-xpath.png) 각 축의 격자선과 같은 요소들은, 어떤 테마(라이트 또는 다크)를 선택하든 잘 어울리는 밝은 회색으로 설정되어 있습니다. 각 차트의 각 레이어마다 별도의 "동적 XPath 설정" 대화 상자가 있지만, 모든 설정을 완료하면 더 이상 수정할 필요가 없습니다. 이렇게 설정하면 차트가 라이트 테마와 다크 테마 모두에서 자동으로 올바르게 생성됩니다. 다음은 안드로이드 폰 화면으로, 다크 모드와 라이트 모드에서 누적 흑자 차트를 보여줍니다 [![앱의 다크 모드와 라이트 모드 화면을 다른 각도에서 보여주는 이미지입니다](/blog/images/android-app-1.png)](android-app-1.png) 사용자 설정에 따라 자동으로 다크 모드를 지원하는 사용하기 쉬운 모바일 애플리케이션을 만들 준비가 되셨다면, 무료로 사용할 수 있는 [MobileTogether Designer](https://www.altova.com/ko/mobiletogether/download)를 다운로드하세요. 또한, [MobileTogether 데모](https://www.altova.com/ko/mobiletogether/demos) 페이지에서 동영상, 튜토리얼, 그리고 더 많은 데모 앱으로 연결되는 링크를 확인해 보세요.