최근 수정 시각 : 2022-06-21 08:59:15

다크 모드

파일:다크모드 나무위키.jpg파일:다크모드 나무위키2.jpg
나무위키의 자체 다크 모드
기본값 '다크는 회색이 아니라 검정입니다!' 적용
1. 개요2. 역사3. 만드는 법
3.1. 참고하면 좋은 글
4. 장단점
4.1. 장점4.2. 단점4.3. 기타 평가
5. 지원 여부
5.1. 운영 체제5.2. 콘솔 게임기5.3. 브라우저5.4. 프로그램5.5. 사이트
6. 다크 모드를 지원하지 않는다면?7. 관련 문서


[Clearfix]

1. 개요

사용자 인터페이스에서 밝은 화면에 검은 글자 대신 어두운 화면에 흰 글자를 나타내는 테마.

2. 역사

다크 모드 사용은 초창기와 비슷한 모습으로 회귀하였다고 할 수 있다. PC 초창기 시절의 MS-DOS부터가 검은 바탕에 흰 글씨였다. 모바일 기기의 경우 2010년대 초에 안드로이드는 검정 화면 기반이 많았으며[1], iOS는 다크 모드는 아니지만 스큐어모피즘 차용으로 현재와 같이 쨍하게 밝은 이미지는 아니었다. 그러다가 안드로이드는 롤리팝부터, iOS는 7부터 미니멀리즘 디자인을 택하고 분위기가 전반적으로 밝아졌다. 그러던 것이 2010년대 말부터 구글, 애플, 마이크로소프트가 모두 다크 모드를 지원하기 시작하였다.

과거와 다른 점이라면, 밝은 테마와 어두운 테마를 이동할 수 있고 운영체제의 설정이 다른 모든 애플리케이션과 연동될 수 있어, 단순한 설정으로 운영체제와 애플리케이션의 색을 간단히 전환할 수 있다는 것이다. 운영체제가 직접 다크 모드를 지원하는 것은 다른 앱이나 서비스가 다크 모드를 지원하는 것보다 의의가 큰 편이다. 다크 모드는 보통 완전한 검은색(#000000) 다크 모드와 어두운 회색 계열의 다크 모드가 있다. AMOLED를 고려한 것인지 기본적으로 파란색인 것들은 다크 모드에선 난색 계열로 바뀌는 경우도 있다.

3. 만드는 법

어두운 배경색과 밝은 글씨색을 쓰되, #000000(완벽한 검정)이나 #FFFFFF(완벽한 하양) 등의 색깔은 피하는 게 좋다. 극단적인 검정/하양은 눈을 더 피로하게 만들고 그닥 예쁜 색 조합도 아니기 때문이다. 따라서 완벽한 검정보다는 어두운 회색, 완벽한 하양보다는 밝은 회색을 써서 눈의 피로를 줄여야 한다.[2]

포인트를 줄 때는 채도가 낮은 색을 써야 한다. 흔히 '물 빠진 색'이라고 부르는 색깔을 쓰는 게 좋다. 머티리얼 디자인 컬러 팔레트를 살펴보고 채도가 낮은 색상을 써서 가독성을 높이고 시각적 안정감을 제공해야 한다. 이때 밝은 부분이 지나치게 크면 눈이 쉽게 피로해지므로 삼가야 한다.

불투명도를 적극 활용해야 한다. 특히 타이틀, 버튼 등에 포함되는 텍스트의 강조를 위해서다. 가장 강조되어야 하는 텍스트는 87%, 그다음은 60%, 비활성화 상태의 텍스트는 38% 정도가 적당하다.

다크 모드에서는 그림자를 사용하지 않는 게 좋다. 밝을 때의 그림자는 확 눈에 띄지만, 어두울 때의 그림자는 눈에 잘 띄지 않는 것처럼 다크 모드에서의 그림자는 이도 저도 아닌 모습이 될 가능성이 높다.

웹 콘텐츠 접근성 지침에 따라 적절한 대비 색상을 요소로 배치하여 접근성을 해치는 일이 없도록 해야 한다. 쉽게 말해 라이트 모드에서 너무 밝은 요소를 사용하거나 다크 모드에서 너무 어두운 요소를 사용해 사용자의 웹 경험을 해치지 말아야 한다. WCAG 2.0 기준을 충족하는지는 CONTRAST CHECKER에서 확인할 수 있다.

라이트/다크 모드 토글은 위의 스타일 지침 외에도 여러가지가 필요하다. 일단 토글 스위치가 필요하고 테마를 변경했더라도 다른 페이지에 가면 다시 변경 전 디폴트 테마가 나오니 로컬 스토리지/쿠키 값을 이용해야만 한다. 이 값을 이용하면 사용자가 브라우저를 종료해도 쿠키를 삭제하지 않는다면 계속해서 토글된 테마를 이용하는 것이 가능하다. 이것에 더해 사용자가 선호하는 브라우저 테마를 반영할 수도 있다.

또한 다크 테마를 이용할 시 FOUC(flash of unstyled content, 스타일이 적용되지 않은 페이지가 로드 이후 찰나의 시간 동안 보이는 현상) 현상을 방지하는 기술도 필요하다. 그렇지 않으면 다른 페이지를 로드할 시 계속해서 반짝거린다.

3.1. 참고하면 좋은 글

4. 장단점

4.1. 장점

  • OLED 화면인 경우 - 특성을 공유하는 CRT, PDP와도 공통되는 사항이기도 하다.
  • 밝기 감소. 어두운 곳에서 다른 사람들에게 피해를 주고 싶지 않거나 혹은 몰폰을 하고 싶을 때 유용하다. 또 눈의 피로를 줄이는 데 도움이 된다.
  • 시인성 대비(contrast)가 높아지기 때문에 찾고자 하는 글자나 이미지가 더 눈에 잘 띈다. 소스 코드의 경우 장문의 텍스트보다는 비교적 짧고 문법 색상(Syntax Coloring)으로 강조된 글자들이 주가 되기 때문에, 프로그래머들은 다크 모드를 많이 선호하는 편이다.

4.2. 단점

  • OLED 화면인 경우는, 완전한 검은색(#000000)일 경우 배경은 픽셀이 꺼져 있는데, 흰색 글씨에서만 빛이 뿜어져 나와서 눈부심과 빛번짐 등의 문제가 거슬릴 수 있다.[7] 특히 초보 디자이너들은 완전한 검은색(#000000)과 완전한 하얀색(#ffffff)을 사용하는 실수를 저지르곤 하는데, 이 경우 눈의 피로가 가중된다.
  • 가독성 저하. 다크 모드가 정보 강조에는 유리하지만 읽는 시간이 길어지거나 정확히 읽어야 할 때는 밝은 배경에 어두운 글씨가 더 좋다. 이는 단순히 우리가 하얀 배경, 검은 글씨에 익숙하기 때문이 아니라 시각적 연구 결과라고 한다. 출처 이런 문제 때문인지, Apple메모 앱이나 Microsoft OneNote 앱은 다크 모드에서도 본문을 쓰는 부분은 하얀 배경을 유지할 수 있도록 하는 옵션이 있다.
  • LCD에서는 픽셀 구동 방식에 따라(특히 IPS 방식) 빛샘 현상이 나타나기도 한다.
  • 웹 페이지가 다크 모드를 지원하지 않는 경우 브라우저별로 하얗게 나오는 문제가 있다. 강제로 활성하는 방법도 있지만 설정별로 페이지 내 색상이 반전되는 문제가 있다.
  • 브라우저[8]에 따라 웹 페이지 사진 색상이 더 어둡게 표현이 된다. 이는 인터넷 쇼핑으로 의류를 자주 구입하거나 구경하는 사람들에게는 치명적인 단점이 되는데 빨간색 옷의 사진을 다크 모드를 켠 후 보면 사진을 어둡게 톤다운 시켜서 더 어두운 빨간 옷으로 보인다. 쇼핑몰만 이미지 필터를 적용하지 않는 브라우저/애드온도 있긴 하지만, eBayAmazon 등의 해외 쇼핑몰만 지원한다.
  • 웹페이지에서 다크 모드를 지원하는 경우 다크 모드 웹페이지를 복사해 라이트 모드 웹페이지에 붙여넣거나 라이트 모드 웹페이지를 복사해 다크 모드 웹페이지에 붙여넣으면 밝은 화면에서 어두운색의 텍스트가 출력되거나 어두운 화면에서 밝은색의 텍스트가 출력되는 현상이 발생한다. 이건 다크 모드 자체의 문제는 아니고 HTML 태그가 같이 복사되어 생기는 문제로, 복붙할 때 메모장을 한 번 거치면 HTML 태그가 삭제되므로 이런 현상을 방지할 수 있다.
  • 시력 저하. 동공은 빛에 영향을 받는다. 밝으면 수축하고 어두우면 확장한다. 빛이 밝아 동공이 수축하게 되면 눈은 덜 피로해지고 세부적인 내용에 집중하는 능력이 향상된다. 하지만 색상체계가 어두워진 다크 모드를 사용하면 동공은 확장되고 이러한 경험이 지속되면 눈부심이나 시력 저하로 이어질 수 있다. 동공이 열리면 선명도도 떨어진다. 백내장 같은 안구 질환도 생길수 있다. 차라리 다크 모드를 풀고 화면 밝기(조도)를 낮추는 게 시력 건강에 덜 해롭다.
  • 미국 씨넷에 따르면, 맨체스터대학교 연구진은 저녁 무렵의 차가운 계열 색상의 빛과 한낮 따뜻한 계열 색상의 빛이 건강에 더 이롭다는 연구결과를 발표했다. 연구진은 "인체 시계는 해질 무렵의 어둡고 푸른 색으로 잠을 잘 시간이란 판단을 한다"고 설명했다. 연구진에 의하면, 스마트폰 화면의 블루라이트는 사람의 뇌에 야간이라는 신호를 준다. 이 색상이 해질녘과 유사하기 때문이다. 연구진은 "모바일 기기에서 저녁에 화면 색상을 바꿔 블루 라이트 노출을 제한하도록 한 기술은 복잡한 메시지를 던진다"며 "기기에서 생산되는 밝기의 작은 변화가 더 일상의 색상과 유사하기 때문"이라고 주장했다. 실험에서 스마트폰의 블루 라이트는 수면 패턴에 더 약한 영향을 미치는 것으로 측정됐다. 노란색 계열의 빛을 노출했을 때 영향이 오히려 컸다.
  • 일부 다크모드 플러그인들은 백터부분을 건드려서 지도를 어둡게 만들수는 있으나 네이버 서비스와 같은 웹페이지들까지 영향을 받아서 구성요소가 사라지거나 일부 레이아웃이 투명해지는 문제가 생긴다.
  • 다크모드는 주로 밤에 쓰는 게 유리해 보인다. 외신들이 자주 인용하는 케임브리지대학의 실라스 브라운 박사에 따르면 배경색을 어둡게 하면 눈부심으로 인한 눈의 피로가 줄고 뚜렷한 대비로 인해 글자가 잘 보이며, 청색광으로 인한 수면방해도 덜하다는 장점이 있다. 다만 디스플레이가 백라이트형이 아닌 반사형이거나 주변 조명이 밝은 경우, 글꼴이 너무 작거나 얇은 경우에는 이런 이점이 덜하다.

4.3. 기타 평가

  • 단순한 색감
    앱에 따라 다르지만, 특정 앱은 단순히 흰색으로만 구성된 것이 아니라, 일부 혹은 전체적으로 유채색을 넣는 경우도 있다. 앱에 따라 이 유채색도 검은색으로 만드는 경우가 있다. 대표적으로 마이크로소프트 오피스의 경우 워드는 파란색, 엑셀은 초록색, 원노트는 보라색 이렇게 나름의 컬러를 가지고 있다. 음악을 찾는 앱 Shazam은 파란색 배경을 가지고 있다. MS 오피스의 경우 다크 모드를 켜면 모두 검은색 계통으로 바뀐다. 단순하고 통일성 있는 색감이나 다크 모드의 기능성을 생각하는 사람에겐 좋은 점이지만, 그냥 흰색만 검은색으로 만들면 충분한 사람에게는 아쉬운 점.

5. 지원 여부

시스템 다크 테마를 지원하거나 다크 테마만 지원하는 최신 정식 버전을 기준으로 한다. 비표준 지원, 설정이 연동되지 않는 다크 테마는 별표(★)로 표시한다.

5.1. 운영 체제

5.2. 콘솔 게임기

5.3. 브라우저

  • OS와 브라우저 모두 정식 최신 버전을 기준으로 한다.
프로그램 Windows 10 macOS Android iOS
IE X 미지원[14]
Chrome
Firefox
Edge
Safari 미지원 미지원
Whale
Opera
Vivaldi 미지원
Yandex
Brave
Samsung 미지원 [15] 미지원
Dolphin 미지원 [16] X
DuckDuckGo 미지원
Kiwi 미지원 미지원
Puffin 미지원 [17]
OH 미지원 [18] 미지원

5.4. 프로그램

몇몇 프로그램은 운영체제에서 다크 모드를 활성화시켜야 적용된다. 라이트 모드가 나타나면 앱 내부 설정에서 바꿀 수 있다.

5.5. 사이트

  • 네이버 ★: PC에서 메인 페이지 한정으로 지원한다. 이전까진 웨일 브라우저를 제외한 다른 브라우저에서 다크 모드를 직접 지원하지 않아 브라우저 기능으로 강제 적용할 경우 언론사를 비롯한 각종 로고 배경만 하얗게 남아 보기 불편했는데, 정식으로 지원하면서 로고 배경들도 깔끔하게 바뀌었다. 문제는 PC 버전 메인 페이지를 제외하고는 다크 모드를 전혀 지원하지 않아서 반쪽짜리라는 소리를 듣는다. 2021년 2월 업데이트로 네이버 카페 모바일 앱에 다크 모드가 추가되었다. 모바일 웹에서도 추가되었지만 수동으로 활성화 해야 한다.
  • 네이트
  • 다음의 모바일 메인 페이지와 다음 뉴스의 기사 모바일 페이지[21]: 이 외의 부분과 PC 페이지는 다크 모드를 지원하지 않으며, 점진적으로 지원할 것으로 보인다.
  • 더쿠
  • 디시인사이드 ★: 시스템 비연동
  • 루리웹: PC 버전 한정으로 다크 모드 활성화 시 로고가 구버전[22]으로 바뀐다.
  • 미니기기 코리아
  • 웃긴대학 ★: 시스템 비연동, 모바일 한정
  • 유튜브: PC 웹 및 모바일 앱 한정, 모바일 웹은 미지원
  • 아카라이브
  • 인스티즈 ★: 시스템 비연동
  • 에펨코리아 ★: 시스템 비연동
  • 퀘이사존 ★: 원래부터 어두운 배경이었다.
  • 쿨앤조이 ★: 원래부터 어두운 배경으로, 컴덕들 사이에서는 '검은동네'라는 별칭도 있을 정도로 유명하다.
  • 클리앙
  • 트위치
  • 트위터: 일몰에서 일출까지 자동으로 켜지는 설정도 지원한다.
  • DeviantArt
  • ArtStation: 이쪽은 원래 어두운 배경이다.
  • Facebook: 웹으로 접속할 시 일부 계정에서 새로운 디자인과 함께 다크 모드를 선택할 수 있는 UI가 제공된다.
  • DVD프라임 ★: 시스템 비연동

5.5.1. 나무위키의 다크 모드

파일:상세 내용 아이콘.svg   자세한 내용은 나무위키:테마 문서
번 문단을
부분을
참고하십시오.

6. 다크 모드를 지원하지 않는다면?

  • 다크 모드를 지원하지 않는 앱이나 웹사이트는 분명히 있다. 운영체제 차원에서 강제로 다크 모드를 지원하는 경우도 있으나, 완벽하지는 않다. 웹 브라우저의 경우 Night Eye와 같은 확장 프로그램을 통해 강제로 다크 모드를 적용할 수 있지만 레이아웃이 깨지거나 페이지가 느리게 로딩이 되는 문제점이 있다.[23]
  • 안드로이드 10 이상의 삼성, MIUI 12 이상의 샤오미 기기에서는 다크 모드를 지원하지 않는 앱에도 다크 모드를 강제로 적용시킬 수 있다. 삼성은 개발자 옵션에서 하드웨어 가속 렌더링 탭에 '강제로 어둡게 재정의'를 활성화하면 되고, 샤오미는 디스플레이 > 다크 모드 옵션에서 개별 앱 설정에 들어가서 앱 별로 킬 수 있다.
  • 크롬 브라우저에서는 다크 모드를 활성화해도 대다수의 페이지는 다크 모드를 지원하지 않아 라이트 모드 그대로 표시된다. 이를 해결하기 위해선 chrome://flags/#enable-force-dark를 입력하여 Disable또는 Default을 본인이 원하는 다른 것으로 바꾸고[24] 크롬을 재시작하거나 Relaunch를 누르자. 권장하는 설정은 "Enable with selective inversion of everything"로, 이 설정은 구글 검색결과에서 맨 위에 뜨는 카드의 제목창이 글씨랑 전부 하얗게 나오는걸 적절한 색으로 배경을 반전시켜 글씨가 안보이는 불상사가 생기지 않는다. 2020년 6월 3일 업데이트 이후 해당 플래그를 설정하면 웹페이지가 시스템의 다크 모드를 인식할수 없는 문제점이 생겼다.
  • Firefox부가기능으로 다크 모드를 항상 활성화할 수 있고, 예외 사이트 처리도 해줄 수 있어 편리하다.[25] 퀄리티가 예상 외로 좋다.
  • Night Owl 또는 Screen Dimmer를 함께 사용하면 보기가 더욱 편해진다. 특히 다크 모드랑 블루라이트 필터를 지원하지 않는 기기를 위해 블루라이트/컬러 필터를 내장하고 있다.
  • iOS의 경우 접근성의 Smart Invert를 활성화하면 다크 모드를 지원하지 않는 앱이나 Safari에서 지원하지 않는 페이지까지 활성화할 수 있다.

7. 관련 문서



[1] 특히 AMOLED를 탑재한 넥서스 S 시절 진저브레드 이후로는 UI에 검은색을 적극적으로 활용하였다. 상태표시줄이 특히 그러하다.[2] 나무위키에서도 배경색을 #000, 글자색을 #fff로 설정한 표를 자주 볼 수 있는데, 지나친 대조로 눈이 피곤해지니 바로바로 수정해 주는 게 바람직하다. 구글 머티리얼 디자인 가이드는 #121212의 검은색을 권장하고 있다.[3] 구글 머티리얼 디자인 가이드의 다크 모드 섹션을 번역한 글이다.[4] 모니터 화면을 장시간 봐야 하는 경우 라이트 모드는 눈이 쉽게 피로해지는 반면 다크 모드는 상대적으로 피로감이 덜 하다. 또 밤에 핸드폰을 하는 등 주변이 어두운 상황에서도 눈의 피로가 덜하다.[5] Always On Display하고 비슷한 원리.[6] 다만 출처에 따라선 트루 블랙이 아니면 고작 평균 0.3% 정도 절약으로 별 차이 없다는 얘기도 있으니 참고하자.[7] 이러한 눈부심, 가독성 저하 등의 문제들은 흰 글씨를 초록/노랑/주황색으로 바꿔 청색광을 대폭 줄임으로써 어느정도 개선할 수 있다. 자세한 방법은 스타일리시 참조.[8] Firefox애드온[9] 10.14 부터 지원[10] MacBook Pro Touch Bar에서 구동되는 운영체제이다.[11] 공식적으로는 10부터 지원하나, 값 자체는 꽤 오래되었기 때문에 Dark Mode 같은 앱을 쓰면 별도의 작업 없이 이전 버전에서도 한 번에 변경할 수 있다.[12] 제어판, 속성 메뉴, 문제 해결 창 등 다크 모드가 적용이 안 된 곳도 있다. 관련 영상 또한 제공되는 다크 모드 UI가 UWP만 제공되고 있고 공식적으로는 Win32를 위한 API가 일체 제공되고 있지 않다. 편법을 쓰면 가능하긴 하나 권장되진 않는다. 바탕 화면 우클릭 - 개인설정 - 고대비 설정을 하면 제어판 등 대부분 다크 모드가 적용된다.[13] 13부터 지원[14] macOS용은 5.2.3에서 끝났으며 역시 지원하지 않는다.[15] 브라우저 UI는 다크 모드를 완벽 지원한다. 웹사이트에서는 다크 모드 미지원 사이트를 강제로 다크 모드화 시킬 수도 있고, 지원 사이트에서만 자동으로 다크 모드가 켜지게 설정할 수도 있다.[16] 수동으로 활성화하면 된다.[17] iOS용은 부활했으나 역시 UI를 제외한 다크모드를 지원하지 않는다.[18] AMOLED 단말기를 위해 다크 모드 사용 시 디밍 기능을 끌 수도 있다.[19] 처음 나올 당시 사이트를 보면 예전에는 화이트에 왼쪽에만 다크였던 것을 알 수 있다.[20] 윈도우 개인 설정에서 다크 모드를 켜면, 오피스에서 다크 모드가 활성화된다. 다크 모드가 꺼질 경우 기본값인 색상형으로 설정된다. 2019 기준으로 최신 업데이트를 해야 적용된다.[21] 기사 페이지 외의 다음 뉴스 메인 페이지는 지원하지 않는다.[22] 2006년 엠파스 시절부터 2011년 다음 통합 직전까지 사용했다.[23] Super Dark Mode는 별도의 CSS 테그를 복사 붙여넣기해야되며(물론 레이아웃은 깨진다.) Sauron은 썸네일이 아닌 일반 이미지만 같이 어두워지며 Dark Reader는 렌더링 방식을 설정할 수 있지만 모바일용 Firefox에서는 필터/필터+ 방식의 경우 웹페이지가 느리게 동작된다.[24] 뭔 소리인지 모르겠다면 enable로 하자.[25] 이 확장 기능을 사용하면 나무위키의 기본 다크 모드를 사용하고 있었을 경우 레이아웃이 깨지는데, 예외 처리에다가 namu.wiki를 입력해 줘야 한다.