네이티브 모바일 앱을 위한 다크 모드 구현

줄리아 초우
2023년 ２월 9일
11분 읽기

오늘날 대부분의 모바일 폰에는 사용자가 라이트 모드와 다크 모드 사이를 전환할 수 있는 내장 기능이 있습니다. 사용자의 폰이 이미 다크 모드에 있지만 조정할 수 없는 앱이 있고 라이트 모드에서 밝게 빛나는 경우, 앱 사용에 대한 사용자의 전반적인 경험을 방해합니다. 이러한 이유로 네이티브 모바일 앱에 다크 모드를 구현하는 방법을 아는 것이 중요합니다.

다행히도 Mendix, 많은 코드가 백그라운드에서 미리 빌드되어 있으므로 프로세스가 간단합니다.

이 튜토리얼은 다음 언어로 작성된 네이티브 앱을 기반으로 작성되었습니다. Mendix 모델러 버전 9.20. 다른 버전에서는 다를 수 있습니다.

이 게시물의 내용

이 게시물에서는 다크 모드를 만드는 방법을 다룹니다. Mendix 네이티브 모바일 앱. 최종 결과는 사용자의 모바일 설정에 따라 앱이 자동으로 다크 모드(또는 라이트 모드)로 전환되는 것입니다. 휴대폰이 이미 다크 모드인 경우 앱은 다크 모드로 표시되고 그 반대의 경우도 마찬가지입니다.

이 게시물은 무엇입니까 않습니다. about

이 게시물은 밝은 모드와 어두운 모드 사이의 토글 스위치를 만드는 방법에 대한 튜토리얼이 아니라는 점에 유의하세요. (자세한 내용은 다음에서 읽을 수 있습니다. 앱에서 다크 모드를 구현하는 방법) 오늘 우리가 알아보려는 것은 사용자의 휴대폰이 다크 모드일 때 앱이 자동으로 다크 모드 버전으로 전환되는 방법입니다.

튜토리얼

1단계: 사용자 정의 테마 모듈 만들기

사용자 정의 테마 모듈을 만들 때 사용하는 방법은 웹 앱용 사용자 정의 테마 모듈을 만드는 방법과 비슷합니다. 앱 탐색기에서 마우스 오른쪽 버튼을 클릭하고 "모듈 추가"를 선택합니다.

네이티브 모바일 앱을 위한 다크 모드 구현_앱 탐색기를 마우스 오른쪽 버튼으로 클릭하고 모듈 추가를 선택합니다.

알아볼 수 있는 방식으로 이름을 변경해야 합니다. 예를 들어, 브랜드 이름이 "Smith Company"인 경우 테마 모듈은 "smith_theme"과 같은 것이 될 수 있습니다. 이 예에서 저는 모듈 이름을 "sampleapp_theme"으로 변경했습니다.

네이티브 모바일 앱을 위한 다크 모드 구현_테마 모듈 이름

또한 이 모듈을 UI 리소스 모듈로 표시해야 합니다. 모듈을 마우스 오른쪽 버튼으로 클릭하고 "Mark this as a UI resource module"을 선택합니다. 그러면 모듈이 녹색으로 바뀌어야 합니다.

네이티브 모바일 앱에 다크 모드 구현_모듈을 UI 리소스 모듈로 표시하여 녹색으로 바꿈

이를 UI 리소스 모듈로 표시하면 팀에서 사용자 지정 스타일이 있는 위치를 빠르게 찾는 데 도움이 됩니다.

사용자 정의 테마 모듈을 만드는 것은 특정 브랜드와 관련된 모든 스타일을 한곳에 그룹화하는 효과적인 방법입니다. 이 브랜드에 속하는 다른 앱에서 동일한 스타일을 재사용해야 하는 경우, 사용자 정의 테마 모듈을 내보내고 새 앱에 가져오기만 하면 됩니다.

네이티브 모바일 앱에서 사용자 정의 클래스는 사용자 정의 테마 모듈 내의 "main.js"에 추가됩니다. 이는 다음 위치에 있습니다: themesource > [사용자 정의 테마 모듈] > main.js

네이티브 모바일 앱을 위한 다크 모드 구현_사용자 정의 클래스가 사용자 정의 테마 모듈 내의 maindotjs에 추가되었습니다.

여기에 다크 모드 기능도 추가할 예정입니다.

2단계: 다크 모드를 만드는 데 필요한 모듈 추가

앱에 다크 모드를 만들려면 "main.js" 파일에 두 가지를 추가해야 합니다.

첫째, 파일 맨 위에 "모양" 모듈을 추가해야 합니다. 이 모듈을 추가하면 앱의 선호하는 색 구성표를 결정할 수 있습니다. ("모양"에 대해 자세히 알아보려면 이 링크를 참조하세요. https://reactnative.dev/docs/appearance).

둘째, "darkMode" 변수를 추가해야 합니다. 이는 앱의 특정 구성 요소에 대한 다크 모드 버전을 구현하기 전에 필요합니다. 코드는 다음과 같습니다.

네이티브 모바일 앱을 위한 다크 모드 구현_다크 모드 변수 추가를 위한 코드

3단계: 테스트해보세요

이 예에서 저는 텍스트와 이미지가 포함된 탭 컨테이너를 만들었습니다.

네이티브 모바일 앱에 다크 모드 구현_텍스트와 이미지가 있는 탭 컨테이너

이제 앱을 실행하면 다음과 같습니다.

네이티브 모바일 앱을 위한 다크 모드 구현_탭과 제목이 있는 앱을 실행했을 때의 모습 샘플

참고: 이는 현재 밝은 모드와 어두운 모드에서 앱이 표시되는 방식입니다.

탭 컨테이너에 클래스를 부여해 보겠습니다. 탭 컨테이너를 두 번 클릭하고 "모양"으로 가서 클래스를 부여합니다. 이 예에서 제 클래스는 "sampleTab"입니다.

네이티브 모바일 앱을 위한 다크 모드 구현_탭 컨테이너에 클래스 제공

참고: 클래스 이름은 낙타 표기법(첫 번째 단어의 첫 글자는 소문자, 그 이후 단어의 첫 글자는 대문자)을 따라야 합니다.

“main.js” 파일에서 탭의 배경색, 표시기(즉, 선택된 탭의 밑줄), 레이블 및 활성 레이블을 변경해 보겠습니다.

네이티브 모바일 앱을 위한 다크 모드 구현_탭, 인디케이터, 레이블 및 활성 레이블의 배경색을 변경하기 위한 코드

8번째 줄의 주석에서 보듯이 다크모드에 대한 대체 스타일을 추가하는 형식은 변수의 속성에 darkmode ? [다크모드] : [라이트모드] 를 추가하는 것입니다.

모든 것을 저장하고 프로젝트를 실행하세요.

결과

라이트 모드에서의 결과는 다음과 같습니다.

네이티브 모바일 앱을 위한 다크 모드 구현_라이트 모드의 앱 예시

다크모드에서의 결과는 다음과 같습니다.

네이티브 모바일 앱을 위한 다크 모드 구현_다크 모드의 앱 예

밝은 모드와 어두운 모드 모두에서 색상과 대비를 자유롭게 조정해 보세요. 참고용으로 더 멋진 버전의 앱을 소개합니다.

라이트 모드 :

네이티브 모바일 앱을 위한 다크 모드 구현_라이트 모드의 더 멋진 버전

참고: 책 이미지는 제가 직접 만든 것입니다.

다크 모드 :

네이티브 모바일 앱을 위한 다크 모드 구현_다크 모드의 더 멋진 버전

참고: 책 이미지는 제가 직접 만든 것입니다.

Studio Pro 모델러의 앱 레이아웃과 코드를 포함한 더 멋진 버전의 프로젝트 파일은 여기에서 다운로드할 수 있습니다. https://www.mendix.com/wp-content/uploads/DarkModeSampleApp-2.mpk_.zip

학습해 주셔서 감사드리고, 이 튜토리얼이 유익했기를 바랍니다!

네이티브 모바일 앱을 위한 다크 모드 구현 | Mendix

사이트 검색

개발자 블로그