목차
Overview
0. 시작하기 전
1. 테마 권장 사항
2. 테마 선택 다이얼로그 만들기
3. 다크 모드 테마 설정
3-1. 색상
3-2. 이미지
4. 다크 모드를 적용한 브랜디
5. 결론

Overview

출시 이전 가칭 Android Q 버전이 2019년 9월 3일 Android 10 이란 네이밍으로 출시되었습니다.

Android 10 의 업데이트 중 저의 가장 큰 관심사는 바로 다크 모드입니다.

다크 모드를 활성화했을 때, 기존에는 일부 시스템에서만 테마가 변경되었는데, Android 10 으로 업데이트되며 애플리케이션에서도 다크 모드를 적용할 수 있게 되었습니다.

다크 모드를 활성화하면 배터리 효율성이 높아지고, 어두운 주변 환경에서 눈부심을 최소화할 수 있기 때문에 다크 모드를 선호하는 유저들이 많습니다.

자, 이제! 다크 모드를 브랜디 앱에 적용시켜 보겠습니다. 😊

🤙 다크 모드, 어두운 테마, 다크 테마 등 여러 단어를 다크 모드로 통칭


0. 시작하기 전

  • Android 10 에서 다크 모드 활성화하는 방법입니다.

    (기기 정보는 Android 10, One UI Beta, 갤럭시s10e)

    아래 스크린샷과 같이 알림창에서 다크 모드의 활성 상태를 변경할 수 있습니다.

dark


1. 테마 권장 사항

Android 공식 문서(developer.android.com)에서는 사용자가 직접 테마를 선택하는 것을 권장합니다.

  • 밝은 테마 - Light
  • 어두운 테마 - Dark
  • 시스템 기본 값 (권장 기본 옵션) - Default

여기서 시스템 기본 값은 Android 10 이상과 Android 9 이하에서 권장되는 옵션이 다릅니다.

Android 10 이상

  • 시스템 기본 값 : 다크 모드 활성화 여부
  • Android 9 이하

  • 시스템 기본 값 : 절전 모드 활성화 여부
  • Android 9 이하 버전에서는 다크 모드 활성화 여부 대신 절전 모드 활성화 여부로 테마를 변경합니다.

    (기기 정보는 Android 9, One UI 1.5, 갤럭시노트10)

    dark

    밝은 테마를 선택했을 땐, 다크 모드의 활성화 여부를 판단하지 않고 밝은 테마가 적용됩니다.


    2. 테마 선택 다이얼로그 만들기

    Android 공식 문서의 권장사항을 따라 사용자가 테마를 선택할 수 있도록 테마 선택 다이얼로그를 만들어 보겠습니다.

    1. ThemeUtil 생성

    테마를 전환하기 위해서는 아래 메서드를 호출해야 합니다. 이 함수는 시작된 Activity를 자동으로 다시 생성하여 테마를 전환해줍니다.

    // ex) 나이트모드로 테마 설정
    AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)
    

    위의 setDefaultNightMode() 메서드의 사용을 편하게 하기 위해 Util 클래스를 만듭니다.

    권장 사항에 따라 시스템 기본 값을 선택했을 때, Android 10 이상일 경우와 아닌 경우를 분기하여 테마를 적용할 수 있도록 합니다.

    public class ThemeUtil {
        public static final String LIGHT_MODE = "light";
        public static final String DARK_MODE = "dark";
        public static final String DEFAULT_MODE = "default";
    
        public static void applyTheme(String themeColor) {
            switch (themeColor) {
                case LIGHT_MODE:
                    AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO);
                    break;
    
                case DARK_MODE:
                    AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES);
                    break;
    
                default:
                    // 안드로이드 10 이상
                    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
                        AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_FOLLOW_SYSTEM);
                    }
                    // 안드로이드 10 미만
                    else {
                        AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_AUTO_BATTERY);
                    }
                    break;
            }
        }
    }
    

    2. 다이얼로그 생성

    dark

    라디오 버튼 클릭 시, 해당하는 테마 값을 SharedPreference에 저장하고 테마를 전환합니다.

    BrandiSession brandiSession = A.getBrandiSession();
    
    String themeColor = ThemeUtil.LIGHT_MODE;
    brandiSession.setThemeColor(themeColor);
    ThemeUtil.applyTheme(themeColor);
    

    3. Application에서 theme 지정

    마지막으로, SharedPreference에 저장되어 있는 테마 값을 앱 실행 시에 확인하여 선택된 값으로 테마를 적용합니다.

    BrandiSession brandiSession = A.getBrandiSession();
    
    String themeColor = brandiSession.getThemeColor();
    ThemeUtil.applyTheme(themeColor);
    

    3. 다크 모드 테마 설정

    이제, 다크 모드일 때의 색상과 이미지를 변경해보겠습니다 🥳

    색상

    다크 모드 일 때의 색상을 변경하기 위해서는 values-night/colors.xml 파일을 만들어 이 파일 안에 색상 값을 지정해주면 됩니다. 주의 사항으로는 values-night/colors.xml 에 정의될 수 있는 name은 values/colors.xml 에 정의된 name이어야 합니다.

    • res/values/colors 의 프로젝트 구조
    dark

    라이트 모드 일 때 colors.xml 의 정의된 컬러를 사용하고, 다크 모드 일 때는 colors.xml (night) 에 정의된 컬러 사용합니다.

    • values/colors.xml
    <color name="color_dark_000000_ffffff">#000000</color>
    <color name="color_dark_e1e1e1_000000">#e1e1e1</color>
    <color name="color_dark_4a4a4a_8f9097">#4a4a4a</color>
    <color name="color_dark_4a4a4a_9e9e9e">#4a4a4a</color>
    
    ...
    
    • values-night/colors.xml
    <color name="color_dark_000000_ffffff">#ffffff</color>
    <color name="color_dark_e1e1e1_000000">#000000</color>
    <color name="color_dark_4a4a4a_8f9097">#8f9097</color>
    <color name="color_dark_4a4a4a_9e9e9e">#9e9e9e</color>
    
    ...
    

    이미지

    색상과 마찬가지로, 라이트 모드일 때의 이미지 명과 동일하게 drawable-night-xxxhdpi 폴더 안에 이미지를 넣어주면 됩니다.

    • res/values/drawable/ic_logo_branditxt 의 프로젝트 구조
    dark

    라이트 모드일 때 해상도에 따라 xxhdpi, xxxhdpi를 사용하고, 다크 모드일 때는 night-xxxhdpi를 사용합니다. 또한 다크 모드일 때에도 해상도에 따라 이미지를 넣을 수 있습니다.

    • ic_logo_branditxt.png (xxxhdpi)
    dark
    • ic_logo_branditxt.png (night-xxxhdpi)
    dark

    4. 다크 모드를 적용한 브랜디

    • 다크 모드를 적용한 브랜디 홈
    dark
    • Android 10 에서 다크 모드 적용한 영상
    • Android 9 에서 다크 모드 적용한 영상

    5. 결론

    이렇게 브랜디 애플리케이션의 홈 화면에 다크 모드를 적용해 보았습니다. 👏

    브랜디에서는 유저들의 편안한 눈을 위해 열심히 다크 모드를 적용하고 있습니다. 하지만 다크 모드를 브랜디 애플리케이션 전체에 적용하기 위해서는 디자이너들의 많은 리소스가 필요하기 때문에 전체 적용까지는 시간이 걸릴 예정입니다.

    추후에 다크 모드가 적용된 브랜디 애플리케이션을 기대해 주세요 🎶


    참고 사이트

    https://developer.android.com/guide/topics/ui/look-and-feel/darktheme

    참고 예제

    https://github.com/android/user-interface-samples/tree/master/DarkTheme


    김보예 | MA팀
    kimby@brandi.co.kr
    브랜디, 오직 예쁜 옷만