mir.pe (일반/어두운 화면)
최근 수정 시각 : 2024-04-04 15:42:11

다크 모드

어두운 화면에서 넘어옴
1. 개요2. 역사3. 만드는 법
3.1. 참고하면 좋은 글
4. 장단점
4.1. 장점4.2. 단점4.3. 기타 평가
5. 논란
5.1. 다크모드가 근시를 유발한다?5.2. 어두운 곳에서 엎드린 채로 휴대폰을 보면 녹내장이 발병된다?5.3. Microsoft Windows 앱 제작사의 늑장
6. 다크 모드를 지원하는 제품 및 사이트
6.1. 운영 체제6.2. 콘솔 게임기6.3. 브라우저6.4. 프로그램6.5. 사이트
6.5.1. 나무위키의 다크 모드
7. 다크 모드를 지원하지 않는다면?8. 관련 문서

[Clearfix]

1. 개요

파일:나무위키 모바일 다크모드.jpg 파일:나무위키 모바일 다크모드(검은 화면 적용).jpg
△ 모바일 버전에서 나무위키의 자체 다크 모드
기본값[A] '검은 화면으로' 적용
파일:나무위키 PC 다크모드.png 파일:나무위키 PC 다크모드(검은 화면 적용).png
△ PC 버전에서 나무위키의 자체 다크 모드[A]
파일:Windows Dark.png
△ Windows 11의 자체 다크 모드
사용자 인터페이스에서 밝은 화면에 검은 글자 대신 어두운 화면에 흰 글자를 나타내는 테마.

2. 역사

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

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

자동차 내비게이션의 경우 스마트폰이나 컴퓨터에서 다크모드가 대중화되기 이전부터 거의 완벽하게 지원을 해주고 있었다. 야간 운전시 다크모드가 없으면 말 그대로 눈뽕을 맞기 때문.

3. 만드는 법

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

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

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

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

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

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

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

3.1. 참고하면 좋은 글

4. 장단점

4.1. 장점

4.2. 단점

4.3. 기타 평가

5. 논란

결론적으로 "다크 모드/라이트 모드 중 무엇이 눈에 좋냐?"가 아니라 "스마트폰을 가까이서 오래 보는 것은 눈에 좋지 않다."가 올바른 결론이 될 것이다. 그리고 그 눈에 좋지 않다는 것도 성인에게는 눈의 피로를 더욱 빠르게 가속화시킬 뿐, 근시와 난시를 유발시키거나, 심해지게 만들지는 않는다.[5]

5.1. 다크모드가 근시를 유발한다?


' 근시'에 대한 이해가 부족해서 나오는 의견이다. 우선 근시가 무엇인지 정확하게 이해해야 이 논제를 이해할 수 있다. 근시는 안구의 길이인 안축장이 길어지면서 상이 상대적으로 망막의 앞쪽에 맺히게 되고, 그에 따라 먼 곳에 있는 사물이 흐릿하게 보이는 굴절장애를 뜻한다. 여기서 핵심은 '안축장이 길어진다'이다. 한번 근시가 유발되면 몸이 성장할수록 안구도 같이 성장하면서 안구의 길이가 길어진다. 이유는 여러가지가 있지만, 유전적인 요인, 오랫동안 근거리 작업을 하는 것 등이 꼽힌다.
근시는 몇몇 예외를 제외하고 영원히 진행되지 않는다. 대부분은 몸의 성장이 끝나면서 안구도 성장이 멈추기 때문이다. 안과 전문의들이 만 19세를 기점으로 대부분 근시 진행이 멈춘다 라고 답하는 이유가 그 때문이다.

즉, 근시는 성인이 되면 더 이상 심해지지 않는다, 라고 보는 것이 의학적으로 타당하다. 난시 역시 마찬가지이다[6]. 그렇다면 왜 영상에서는 다크모드를 쓰면 근시와 난시가 심해질 수 있다고 안과 교수들이 답한 것일까?

아마 취재진 측에서 특정한 나이대를 한정하지 않고 다크모드를 쓰면 근시와 난시가 심해지냐고 물었을 확률이 높다. 안과 의사 입장에서는 당연히 성장기에는 근거리 작업을 하는 것이 난시를 유발시키고, 더욱 심하게 만들 수 있으므로 당연히 유발시킬 수 있을 것이라 답할 것이다. 위에서도 언급했지만 성장기가 끝나면 근시와 난시가 심해지지 않는다는 점을 기억하자.

논제에 대한 전문의의 답변

우선 어두침침한 곳에서 작은 글자의 책을 보면 조절을 많이 해서 눈이 피로해지는 것은 맞다. 실제로 눈 성장기에 이런 행동은 근시를 유발할 수 있다. 하지만 이러한 상황이 다크 모드와 비교가 가능할까?

동공의 산동은 주위 환경의 조도에 따라 자동으로 일어난다. 누구든 낮에는 동공이 수축하고, 밤에는 동공이 확장된다. 스마트폰에서 나오는 작은 화면을 본다고 동공이 조졀력을 크게 쓸 정도로 유의미하게 확장된다면, 정오에 햇빛이 쨍쨍하게 내려쬐는 공간에서 스마트폰을 다크 모드로 보면 동공이 산동된다는 뜻과도 같다. 즉, 어두운 곳에서 스마트폰을 사용한다면 동공이 상대적으로 확장되므로 눈에 악영향을 끼칠 수도 있겠지만, 주위 환경이 밝다면 딱히 상관이 없는 이야기이다. 또한 성인에게는 이런다고 근시가 더 이상 심해지지 않는다. 눈 피로를 가속화시킬 수는 있다.

5.2. 어두운 곳에서 엎드린 채로 휴대폰을 보면 녹내장이 발병된다?

녹내장이 무엇인지에 대한 이해가 필요하다. 여기서 경고하는 병은 '급성 폐쇄각 녹내장'이다. 상황보단 안구의 구조적인 문제가 훨씬 큰 영향을 끼치는 병이다. 주로 키나 체구가 작아 안구가 작거나, 원시가 있거나, 40대 이상에게서 주로 발병하는 병으로 일반적인 사람들에게는 크게 해당되지 않는 병이다. 우리가 생활하면서 주의해야 할 것은 위와는 관계 없는 '만성 녹내장'이다.

혹자는 라이트 모드가 오히려 만성 녹내장을 유발한다고 주장하는데, 애초에 라이트 모드냐 다크 모드냐에 따라 안압이 다르게 상승하지 않는다. 단순히 고개를 숙이고 있어도 안압은 1~2 정도 그냥 올라간다. 책을 읽거나 스마트폰을 보면 수정체의 조절 작용으로 안압이 조금 더 상승할 수도 있고, 어두운 환경에서 시청하면 더욱 안압이 높게 올라갈 수도 있다. 발살바 호흡을 활용한 웨이트 운동시에는 안압이 40mmHg까지 올라간다는 보고도 있다.

그만큼 안압은 생활하면서 언제든 수시로 변화하고, 한번 올라간 안압은 그 행동을 중단하면 다시 원래대로 돌아온다. 라이트 모드, 다크 모드를 떠나 고개를 숙이고 스마트폰을 하는 그 행위 자체가 안압을 높일 수 있지만, 그 행동이 녹내장을 유발한다는 명확한 근거는 아직까지 정확하게 밝혀진 바가 없다. 현대 사회에 들어서 녹내장의 평균 발병 연령이 낮아지고, 그 현상을 전자기기의 보급과 결부시키는 것 뿐이다.[7][8]

5.3. Microsoft Windows 앱 제작사의 늑장

Windows 10부터 다크 모드를 자체적으로 지원하기 시작했을 정도로 다크 모드 지원이 대세가 되어가고 있지만, 정작 Windows용 앱을 만드는 제작사의 상당수는 라이트 모드만을 사용할 것을 전제로 깔고 앱을 짠다. 당장 카카오톡만 해도 Windows만 다크모드 지원이 쏙 빠져 있다. OLED를 달고 나오는 태블릿 PC와 노트북도 꽤 있고, 데스크톱용 모니터도 OLED를 채용한 제품도 나오고 있는 점에서 비판을 피할 수 없다.

6. 다크 모드를 지원하는 제품 및 사이트

시스템 다크 테마를 지원하거나 다크 테마만 지원하는 최신 정식 버전을 기준으로 한다. 설정이 연동되지 않는 다크 테마는 ★로 표시하며, 다크 모드로 고정된 경우에는 ☆로 표시한다. 트루 블랙을 지원하는 경우에는 ■로 표시하며, 기본적으로 회색 계열 다크 모드를 사용하지만 설정을 통해 트루 블랙으로 변경할 수 있을 경우에는 □■로 표시한다.

6.1. 운영 체제

6.2. 콘솔 게임기

6.3. 브라우저

프로그램 Windows 10 macOS Android iOS
IE X 미지원[11]
Chrome O
Firefox O
Edge O
Safari 미지원 O 미지원 O
Whale O
Opera O
Vivaldi O 미지원
Yandex Δ
Brave O
Samsung Internet 미지원 O[12] 미지원
Dolphin 미지원 O[13] X
DuckDuckGo 미지원 O
Kiwi 미지원 O 미지원
Puffin 미지원 Δ[14]
OH 미지원 O[15] 미지원

6.4. 프로그램

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

6.5. 사이트

6.5.1. 나무위키의 다크 모드

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

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

8. 관련 문서


[A] 2024년 1월 26일에 나무위키의 UI가 변경되었다. [A] [3] 특히 AMOLED를 탑재한 넥서스 S 시절 진저브레드 이후로는 UI에 검은색을 적극적으로 활용하였다. 상태표시줄이 특히 그러하다. [4] 나무위키에서도 배경색을 #000, 글자색을 #fff로 설정한 표를 자주 볼 수 있는데, 지나친 대조로 눈이 피곤해지니 바로바로 수정해 주는 게 바람직하다. 구글 머티리얼 디자인 가이드는 #121212의 검은색을 권장하고 있다. 참고로 나무위키의 다크 모드 배경 색상은 #1f2023이다. [5] 물론 일반적으로 그렇다는 것이지 얼마든지 예외는 있으니 성인이 된 뒤에도 근시와 난시가 계속 진행되는 것 같다면 꼭 안과로 가서 검사를 받자. [6] 특히나 난시가 성장기가 끝난 뒤에도 심해지는 것은 근시보다도 더욱 드문 케이스다. [7] 물론 일리가 아예 없다는 것은 아니다. 단지 명확한 근거가 없을 뿐. [8] 여담이지만 만성 녹내장은 안압 그 자체보다는 안압에 대한 시신경의 취약성이 더욱 중요하다. 누구는 안압이 높아도 시신경이 튼튼하여 녹내장이 발생하지 않는 경우도 있고, 누구는 안압이 정상이어도 시신경이 약해 녹내장이 발생한다(정상 안압 녹내장). 녹내장의 유발 요인 중 가장 중요하게 보는 것이 바로 근시의 디옵터이다. 고도근시일수록 안축장이 길어져 시신경이 약해지고, 낮은 안압임에도 녹내장으로 진행되기 쉽다. [9] MacBook Pro Touch Bar에서 구동되는 운영체제이다. [10] 제어판, 속성 메뉴, 문제 해결 창 등 다크 모드가 적용이 안 된 곳도 있다. 관련 영상 또한 제공되는 다크 모드 UI가 UWP만 제공되고 있고 공식적으로는 Win32를 위한 API가 일체 제공되고 있지 않다. 편법을 쓰면 가능하긴 하나 권장되진 않는다. 바탕 화면 우클릭 - 개인설정 - 고대비 설정을 하면 제어판 등 대부분 다크 모드가 적용된다. [11] macOS용은 5.2.3에서 끝났으며 역시 지원하지 않는다. [12] 브라우저 UI는 다크 모드를 완벽 지원한다. 웹사이트에서는 다크 모드 미지원 사이트를 강제로 다크 모드화 시킬 수도 있고, 지원 사이트에서만 자동으로 다크 모드가 켜지게 설정할 수도 있다. [13] 수동으로 활성화하면 된다. [14] iOS용은 부활했으나 역시 UI를 제외한 다크모드를 지원하지 않는다. [15] AMOLED 단말기를 위해 다크 모드 사용 시 디밍 기능을 끌 수도 있다. [16] 처음 나올 당시 사이트를 보면 예전에는 화이트에 왼쪽에만 다크였던 것을 알 수 있다. [17] 윈도우 개인 설정에서 다크 모드를 켜면, 오피스에서 다크 모드가 활성화된다. 다크 모드가 꺼질 경우 기본값인 색상형으로 설정된다. 2019 기준으로 최신 업데이트를 해야 적용된다. [18] 다만 제공자인 Lefintech .Ltd가 위치한 모리셔스는 중국과의 관계과 완만한것 때문인지 iOS용 Safari의 플러그인 설정에 ‘권한’항목을 보면 gov.cn과 hainan.gov.cn이 등록되어있었으나 최근엔 다른 도메인이 등록된 것을 볼때 장기간 테스트가 필요한 웹페이지는 따로 등록하는 모양인듯 하다. [19] 예를들면 aaa.com과 aaa.bbb.com은 다크모드와 PNG반전을 설정할수 있지만 aaa.com/bbb나 aaa.bbb.com/ccc는 각각 aaa.com과 aaa.bbb.com의 설정이 우선적으로 적용된다. [20] 네이버카페에 댓글을 쓸때 개행이 무시되는 문제가 있다. 이는 온갖 스타일구문을 건드려서 그런 듯하다. 해당 방식은 보배드림 같은 웹 페이지의 경우 다크모드가 적용돼서 쓸만하긴 하나 가끔 오작동이 발생하는 편이다. amp기반 페이지가 삽입되있으면 다크모드가 꺼져있는데도 다크모드가 적용되는 문제가 있다. [21] 기사 페이지 외의 다음 뉴스 메인 페이지는 지원하지 않는다. [22] 2006년 엠파스 시절부터 2011년 다음 통합 직전까지 사용했다. [23] Super Dark Mode는 별도의 CSS 테그를 복사 붙여넣기해야되며(물론 레이아웃은 깨진다.) Sauron은 썸네일이 아닌 일반 이미지만 같이 어두워지며 Dark Reader는 렌더링 방식을 설정할 수 있지만 모바일용 Firefox에서는 필터/필터+ 방식의 경우 웹페이지가 느리게 동작된다. [24] 뭔 소리인지 모르겠다면 enable로 하자. [25] 이 확장 기능을 사용하면 나무위키의 기본 다크 모드를 사용하고 있었을 경우 레이아웃이 깨지는데, 예외 처리에다가 namu.wiki를 입력해 줘야 한다.

분류