다크 모드 테마

다크 모드는 사용자가 시스템 전체에 색상을 설정할 수 있는 기능을 제공합니다( Android 10 및 iOS 13에 도입됨). ‘어두운’ 테마는 배터리 수명을 절약하고 사용자의 눈의 피로를 줄이는 동시에 앱 개발자에게 사용자가 선호하는 어두운 색상 테마를 더 쉽게 구현할 수 있는 방법을 제공하기 위한 것입니다.

Braze 인앱 메시지는 대체 다크 테마를 추가하여 사용자의 선호도에 따라 적절한 색상 메시지를 전달하고 앱 디자인과 일관성을 유지할 수 있도록 지원합니다.

다크 모드 작동 방식

Android 10 또는 iOS 13 이상 버전을 사용하는 사용자는 디바이스 설정에서 다크 모드를 켜거나 끌 수 있습니다.

다크 모드가 활성화되면 기기의 기본 메뉴와 화면(푸시 알림, 기기 설정 등)이 짙은 회색으로 변경됩니다. 앱 코드에서 대체 테마를 지정하여 앱이 다크 모드를 지원하도록 선택할 수도 있습니다.

어두운 모드 테마 설정

인앱 메시지 작성 시 스타일 탭에 있는 새로운 다크 모드 옵션을 사용하면 기기에서 다크 모드로 설정된 사용자를 위해 대체 색상 테마를 쉽게 추가할 수 있습니다.

이 옵션을 활성화하면 색상 선택기를 사용하여 인앱 메시지의 어두운 테마 색상을 선택하거나 기존 색상 프로필을 선택하여 기존의 어두운 테마 또는 밝은 테마를 재사용할 수 있습니다.

지속적으로 다크 모드 사용

모든 인앱 메시지에 다크 모드를 사용하려면 템플릿 > 인앱 메시지 템플릿으로 이동하세요.

드롭다운에서 색상 프로필 만들기를 선택합니다. 다크 모드 테마에 맞는 색상 프로필을 만듭니다. 그런 다음 인앱 메시지의 다크 모드 버전을 만들 때마다 해당 색상 프로필을 선택하여 인앱 메시지의 모양을 일관되게 유지할 수 있습니다.

호환성

• 사용자는 iOS 디바이스 버전 13 이상 또는 Android 디바이스 버전 10 이상을 사용 중이어야 합니다.
• Braze iOS SDK v3.21.0+ Braze Android SDK v3.8.0+가 필요합니다.

HTML 인앱 메시지 사용

HTML 인앱 메시지에 대한 어둡고 밝은 테마를 만들려면 prefers-color-scheme CSS 미디어 기능을 사용하여 사용자의 선호도를 감지할 수 있습니다.

예를 들어, 다음과 같습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
@media (prefers-color-scheme: dark) {
  body {
    background: #333;
    color: white;
  }
}

@media (prefers-color-scheme: light) {
  body {
    background: white;
    color: #555;
  }
}