다크모드 적용기

최근 기존 프로젝트에 다크모드를 적용하는 일을 진행했었다. 꽤 오랜 시간이 소요될 줄 알았지만 안드로이드에서 제공하는 기능을 통해서 생각보다 빠르게 적용할 수 있었다. 이번 포스트에서는 다크모드를 적용하면서 유용했던 기능을 정리해봤다.

 

0. 동일한 이름으로

 

다크모드를 적용할 때 주요하게 변경하는 부분은 텍스트 색깔, 그림 파일 형태의 앱 내 아이콘, XML로 생성한 그림 파일(사각형이나 그라데이션 등등) 이다. 다크모드를 적용하더라도 각각의 파일 이름은 그대로 가져가야 앱 내에서 수정하는 부분을 최소화 할 수 있기 때문에 리소스의 이름은 동일하게 유지하고 라이트모드, 다크모드 각각의 상태에서는 다른 파일을 사용하도록 진행했다.

 

1. 아이콘 리소스 분리

 

안드로이드에서는 리소스 폴더에 키워드를 넣어서 앱의 Configuration에 따라 다른 리소스를 사용하도록 설정할 수 있다. 해상도에 따라서 다른 아이콘을 적용하고 싶은 경우에는 drawable-xhdpi, drawable-xxhdpi 이런식으로 적용할 수 있는데 다크모드를 사용하는 경우에는 night 키워드를 넣어서 분기할 수 있다. drawable-night-xhdpi 이런 형태의 폴더를 만들면 xhdpi 해상도에서 다크모드인 경우에 이 폴더의 아이콘을 사용하게 된다.

 

추가한 폴더

 

2. 색상 분리 작업

 

라이트모드에서 다크 모드로 전환 할 때 색깔별로 어느정도 규칙이 생긴다. 예를 들면 라이트 모드에서 검은색 텍스트를 사용했다면 다크 모드에서는 흰색으로 바뀌게 된다. 나의 경우엔 이 부분에 대해선 디자인 팀에서 가이드라인을 받았고 규칙에 맞게 모드에 따라서 색상 파일로 분리한 다음에 각각의 리소스에 등록해주었다.

 

색상 정보를 가지고 있는 파일은 colors.xml 이었고 values 폴더 내에 있었다. 아이콘과 마찬가지로 이 폴더도 values-night로 하면 다크모드일때만 바라보는 폴더를 만들 수 있었다. 이 안에 colors.xml 을 추가하고 동일한 색상 이름이 다른 hexa 값을 가지도록 변경했다.

 

<!-- values/colors.xml -->

    <color name="hashtag_selected">#07c3ff</color>
    
<!-- values-night/colors.xml -->

    <color name="hashtag_selected">#404245</color>

 

이렇게 구분한 색상 값을 뷰 클래스에 적용하면 모드의 상태에 따라 다른 색상을 보여줄 수 있다. 텍스트뷰나 XML로 만든 그림 파일에도 동일하게 적용 가능하다. 

 

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/hashtag_selected" />
    <corners android:radius="18dp" />
</shape>