우아한테크코스에서 사용자 간 중고 경매 거래 서비스 ‘땅땅땅’을 개발하던 중, 당시까지 완성된 앱을 설치한 코치님께서 두근두근한 마음으로 앱을 실행시키셨다. 하지만 글씨도 까맣고 배경도 까만 땅땅땅 화면이 나왔다.

어! 다크 모드가 안되네요…? 지원해주세요!!!

다크 모드에서도 라이트 모드의 디자인이 띄워지도록 할 방법이 있긴 하지만 어두운 화면만 보다가 라이트 모드의 밝은 화면을 보면 당연히 불편하고, 불쾌하지 않을까?

생각보다 다크 모드를 사용하는 사람들이 많다는 것을 다시 한번 깨닫고, 나는 다크 모드를 대응해보기로 결심했다.

다크 모드 색상에 맞춰 디자인하기

우리 팀에는 디자이너가 따로 없다. 대신 내가 Figma를 사용할 줄 알기 때문에 디자인을 줄곧 맡고 있다.

하지만 다크 모드 대응은 한 번도 해본적이 없기 때문에 디자이너들의 글을 많이 찾아보았다. 결정적으로 가장 도움이 많이 됐던 글을 하나 첨부한다.

디자이너들을 따라해보고자 팔레트를 다음과 같이 만들어보았다. 이를 디자인 시스템이라고 부르던가? 중요한 Primary와 Grey 팔레트를 살펴보자

단순히 색을 대칭해서는 다크 모드에 색깔이 어울리지 않을 수 있다. 너무 튀어서 눈이 아픈 색상이 되기도 한다. 나는 색을 대칭한 후에 다크 모드 색상은 채도를 조금 낮췄다.

기존 라이트 모드 기준으로 디자인하던 페이지를 복사하여 다크 모드 기준으로 색상을 다시 지정했다. 위에서 정한 색상을 기준으로, 1:1 매칭하여 지정한다.

감이 오는가? 우측 하단 Selection colors를 보면 번호가 같다. 단지 라이트인지, 다크인지가 다를 뿐! 이를 이용해서 앱에도 적용할 것이다.

디자인에 맞춰 다크 모드 적용해보기

values-night 생성

나는 colors, themes를 조정해줄 것이기 때문에 values-night 폴더에 colors-night, themes-night 파일을 생성해주었다. themes는 다크 모드에서 어떤 스타일을 사용할지 재지정해주기 위함이다.

<!-- values/colors.xml -->
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="red_900">#C40000</color>
    <color name="red_800">#D21613</color>
    <color name="red_700">#DF211B</color>
    <color name="red_500">#FF3A1F</color>
    <color name="red_300">#F16F69</color>
    <color name="red_100">#FFCCCF</color>
    <color name="red_50">#FFEBED</color>

    <color name="grey_900">#121212</color>
    <color name="grey_800">#323232</color>
    <color name="grey_700">#505050</color>
    <color name="grey_500">#8A8A8A</color>
    <color name="grey_300">#D0D0D0</color>
    <color name="grey_100">#EEEEEE</color>
    <color name="grey_50">#F7F7F7</color>
</resources>

<!-- values-night/colors.xml -->
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="red_900">#F2DEE0</color>
    <color name="red_800">#E56963</color>
    <color name="red_700">#E26761</color>
    <color name="red_500">#ED351C</color>
    <color name="red_300">#E32C20</color>
    <color name="red_100">#C51010</color>
    <color name="red_50">#B40000</color>

    <color name="grey_900">#F7F7F7</color>
    <color name="grey_800">#EEEEEE</color>
    <color name="grey_700">#CECECE</color>
    <color name="grey_500">#7E7E7E</color>
    <color name="grey_300">#4E4E4E</color>
    <color name="grey_100">#2F2F2F</color>
    <color name="grey_50">#121212</color>
</resources>

colors.xml에 디자인 시스템에 정의한대로 작성해준다. 그리고 이 색상 이름대로 뷰에 잘 적용해두었다면, 알아서 라이트 모드일 때와 다크 모드일 때 색상이 다르게 보인다. 예를 들어 뷰에서 Text 색상을 red_900으로 지정해주었다면 라이트 모드에서는 #C40000, 다크 모드에서는 #F2DEE0가 적용될 것이다.

하지만 여기서 한 가지 문제가 있다.

1:1 매칭이 안되는 경우 어떡하지?

다크 모드에서 라이트 모드의 번호에 해당하는 반대 색깔을 주면, 의도하지 않은 디자인이 나올 수도 있다.

나는 다크 모드에서도 빨간색 버튼+흰색 글씨 조합을 사용하고 싶었다. 하지만 원래 매칭했던 색깔을 그대로 사용하니 마음에 들지 않는 디자인이 나왔다.

그래서 colors에 따로 색상을 정의해주었다.

<!-- values/colors.xml -->
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="primary">@color/red_900</color>
    <color name="text_active_fixed">@color/grey_50</color>

<!-- values-night/colors.xml -->
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="primary">@color/red_50</color>
    <color name="text_active_fixed">@color/grey_900</color>

빨간색은 Primary 컬러라서 primary로, 버튼의 흰 글씨는 활성화되어있는 버튼의 고정된 글씨 색상이라는 의미로 text_active_fixed로 정의했다. 이렇게 따로 정의해두면 각 모드에 사용할 색상을 다르게 지정해줄 수 있다.

<!-- values/themes.xml -->
<resources xmlns:tools="http://schemas.android.com/tools">
    <style name="Base.Theme.DdangDdangDdang" parent="Theme.Material3.DayNight.NoActionBar">
        <item name="colorPrimary">@color/primary</item>

<!-- values-night/themes.xml -->
<resources xmlns:tools="http://schemas.android.com/tools">
    <style name="Base.Theme.DdangDdangDdang" parent="Theme.Material3.DayNight.NoActionBar">
        <item name="colorPrimary">@color/primary</item>

테마에도 방금 정의한 Primary 색상으로 colorPrimary 속성을 지정해주었다.

<Button
    android:id="@+id/btn_auction_detail_bottom_button"
    android:layout_width="match_parent"
    android:layout_height="@dimen/height_submit_button"
    android:layout_marginHorizontal="@dimen/margin_side_layout"
    android:minHeight="@dimen/height_submit_button"
    android:padding="0dp"
    android:textColor="@color/text_active_fixed"

그리고 Button은 기본적으로 background 색상이 primary이고, textColor만 바꿔주면 된다. 방금 정의한 text_active_fixed로 색상을 지정해주었다.

정확히 1:1 매칭이 안되는 상황에, 색상을 별도로 지정해줄 경우 어떻게 네이밍을 지어야할지는 아직도 잘 모르겠다. (이 글을 보고 계시는 실무자 분들이 계시다면 댓글로 꼭 알려주시면 감사하겠습니다.)

땅땅땅에서는 이와 같은 방법으로 성공적으로 다크 모드 대응을 해냈다. 다크 모드를 대응하면서 기존 색상도 보기 편하게 조금씩 바꿨더니, 라이트 모드와 다크 모드 모두 보기 편하다는 피드백이 들어와서 뿌듯했다.