19
2월
2020

모바일 Dark mode 대응

Dark mode는 UI 트렌드 중의 하나이며 UI 전체를 어두운 톤으로 설정하는 기능을 말합니다. 이전에도 앱 자체의 설정을 통해 “밝은 테마, 어두운 테마”를 지원하는 경우는 있었지만, 당연히 해당 앱에서만 적용될 뿐 다른 앱에 이 설정이 공유되지 않습니다. 하지만, Dark mode는 OS의 자체 설정이며 OS, 모든 앱과 서비스가 이 설정을 공유하여 UI 색상을 변경시킴으로 디바이스의 사용자 경험 자체를 어두운 색상 위주로 일관되게 전환시키는 것을 말합니다.

현재 가장 많이 쓰이는 OS인 Windows 10, macOS 10.14 mojave, 그리고 모바일에서는 iOS 13 (2019.09 발표), Android 10 (2019.09.03 발표) 에서 Dark mode를 지원하고 있습니다. 모바일의 경우 마치 약속한 듯 비슷한 시기에 발매된 OS들이 경쟁적으로 지원을 시작했습니다.

image from https://webkit.org/blog/8892/dark-mode-in-web-inspector/

최신의 OS들이 자체적으로 다크 모드를 지원하기 시작하면서 앞으로 다크모드에 대응하는 앱과 서비스가 빠르게 늘어날 것으로 예상됩니다. 하지만, 다크 모드 특성 상 단 하나의 앱이라도 다크 모드를 지원하지 않는다면 UI가 어색해진다는 단점이 있는데, 이는 다크 모드를 사용하기 어렵게 하는 요소입니다.

구글의 메인페이지는 항상 흰색이라 다크 모드를 사용할 때 어색합니다 (2020.02)

특히 웹사이트들은 현재에도 대부분 흰색 또는 밝은색을 기준으로 제작되고 있습니다. 물론 웹사이트 입장에서도 그동안 시스템에서 다크 모드를 지원하지 않거나 설정을 인식할 방법이 없기 때문에 대응이 어려웠습니다. 하지만, 새로운 모바일 OS의 등장과 함께 시스템의 다크모드 설정을 인식할 수 있는 CSS룰이 추가되었습니다.

prefers-color-scheme

prefers-color-scheme 이라는 media query를 이용하면 시스템의 다크 모드를 인식할 수 있으며, 옵션은 light, dark, no-preference 입니다. CSS media query가 항상 그랬듯, OS의 설정을 변경하면 리로딩할 필요 없이 바로 적용되는 모습을 볼 수 있습니다.

.themed {
  display: block;
  width: 10em;
  height: 10em;
  background: black;
  color: white;
}
 
@media (prefers-color-scheme: light) {
  .themed {
    background: white;
    color: black;
  }
}
@media (prefers-color-scheme: dark) {
  // 어두운 테마를 선택했을 경우 override할 CSS
  .themed {
    background: black;
    color: white;
  }
}

이전에는 일부의 웹사이트 자체에서 스위치 UX를 통해 다크모드 전환을 지원하는 경우도 있었고, 삼성 Galaxy 단말기의 경우 자체적으로 “야간 모드”를 지원하기도 했지만, 일관된 사용자 경험으로 이어지지는 않았습니다. 하지만, 새로운 OS에서 시스템 다크 모드를 지원함에 따라 웹사이트에서도 OS의 경험과 일관된 색상 모드를 지원할 수 있도록 변경되었습니다.

지원범위

다크 모드를 인식하는 css media query는 비교적 최근에 지원되기 시작했습니다. (Media Query Level 5 : editor’s draft)

  • Mobile OS는 iOS 13, Android 10 (Q)에서 지원이 시작되었습니다.
  • 브라우저의 지원범위도 아주 최근 (2019.09 기준) 시작되었으며 Chrome 76, safari 12.1, iOS safari 13 버전에서 지원됩니다. 따라서 MacOS, Windows 10의 경우 브라우저의 업데이트를 바로 하지 않는다면 지원이 안될 수도 있습니다.
  • 하지만, 모바일 환경에서는 iOS 13, Android 10에서 지원이 시작되었고 이는 브라우저 지원 시기와도 일치하기 때문에 OS만 업그레이드된다면 다크 모드 지원에 큰 문제가 없어 보입니다.
data from https://caniuse.com/#feat=prefers-color-scheme

기타 : 삼성 단말기 자체의 “야간 모드”

Android 9를 이용하는 삼성 단말기의 경우 “야간 모드”라는 것을 지원하고 있습니다. 하지만 OS 자체적으로 지원되는 다크 모드와 관련은 없기 때문에 prefers-color-scheme media query에는 반응하지 않습니다. 또한 OS 차원에서도 별도의 web api 를 지원하고 있지 않으므로 웹페이지 차원에서 이를 감지하는 것은 불가능합니다.

기타 : Chrome Experimental Dark Mode

안드로이드용 chrome 74의 experimeltal spec으로 자체 다크 모드 활성화 기능이 있었습니다. chrome://flags 를 통해 실험 기능을 활성화할 수 있는데 “Android web contents dark mode” 라는 메뉴명을 검색하면 확인할 수 있습니다.

이 옵션의 경우, 활성화를 시켜도 이 옵션에 직접적으로 반응하는 css나 조건은 별도로 존재하지 않습니다. 크롬 브라우저 자체에서 색상을 반전시켜주는 기능입니다.

다만 모든 요소의 색상을 반전시키지 않으며 일부 지원하지 않거나, 의도적으로 반전시키지 않는 항목이 있는 것으로 보입니다. 이 역시 컨트롤은 불가능하며, 결정적으로 브라우저의 UI도 어두운 색상으로 전환되지 않기 때문에 실험적인 스펙으로만 생각해도 될 것 같습니다.

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다

%d 블로거가 이것을 좋아합니다: