원문 보기: https://dawoum.duckdns.org/wiki/Light-on-dark_color_scheme
어두운-위에-밝은 색상 체계(light-on-dark color scheme)는, dark mode, dark theme 또는 night mode으로 더 잘 알려져 있으며, 어두운 위에 밝은 색상 텍스트, 아이콘, 및 그래픽 사용자 인터페이스 요소를 사용하는 색상 체계입니다. 그것은 종종 컴퓨터 사용자 인터페이스 디자인과 웹 디자인 측면에서 논의됩니다. 많은 최신 웹 사이트와 운영 시스템은 사용자에게 선택적 다크 테마 디스플레이 모드를 제공합니다.
일부 사용자는 다크 모드가 더 시각적으로 친근하도록 나타냄을 발견하고 그것이 눈의 긴장을 줄여줄 것이라고 주장합니다.[1] 전체 밝기로 흰색을 표시하는 것은 OLED 디스플레이를 가지는 2016 구글 픽셀에서 순수한 검정보다 약 6배의 전력을 사용합니다.[2] 어쨌든, 기존의 LED 디스플레이는 전력 소비 감소로부터 이익을 얻을 수 없습니다.[3] 대부분의 현대 운영 시스템은 선택적인 다크 모드 색상 체계를 지원합니다.[4]
History
음극선 오실로그래프, 오실로스코프, 등과 같은 현대 컴퓨터 화면의 전신은 그래프를 그리고 다른 컨텐츠를 검은색 배경에 빛나는 트레이스로 도입하는 경향이 있었습니다.
컴퓨터 스크린의 도입과 함께, 원래 사용자 인터페이스는 오실로그래프나 오실로스코프에 사용되는 것과 같은 음극선관 (CRT)에 형성되었습니다. 형광체는 통상적으로 매우 어두운 색이었고, 전자빔이 그것에 부딪힐 때 밝게 빛나며, 흑백 화면에 적용된 형광체에 따라 검은색 배경에 흰색, 녹색, 파란색, 또는 호박색으로 나타납니다. RGB 화면은 흰색을 형성하기 위해 "켜짐"으로 설정된 모든 빔을 사용하여 계속 유사하게 작동했습니다.
텔레텍스트의 출현과 함께, 어떤 주요 광색과 보조 광색과 조합이 이 새로운 매체에 가장 적합한지에 대한 연구가 수행되었습니다.[5] 검은색 바탕의 청록색 또는 노란색은 전형적으로 검은색, 빨간색, 녹색, 노란색, 파란색, 마젠타색, 시안, 및 흰색 팔레트에서 최적의 것으로 나타났습니다.
반대 색상 모음, 밝은-위에-어둔운 색상 체계 (라이트 모드 또는 라이크 테마)는 원래 종이 위에 잉크를 시뮬레이션하기 위해 WYSIWYG 워드 프로세서에 도입되었고, 표준이 되었습니다.
Microsoft는 2016년 Windows 10의 기념일 업데이트에서 다크 테마를 도입했습니다.[6] 2018년, Apple은 macOS Mojave에서 따랐습니다.[7] 2019년 9월에, iOS 13과 Android 10은 모두 다크 모드를 도입했습니다.[8][9] 일부 운영 시스템은 일몰이나 일출시 자동으로 다크 모드 상태를 변경하는 도구를 제공합니다.[10]
Firefox와 Chromium은 모든 내부 화면에 대한 선택적인 다크 테마를 가지고 있습니다. 제 3 자 개발자가 자신의 어두운 테마를 구현할 수 있을 것입니다.[11] 역시 어두운 색상 체계로 웹 사이트를 다시 주제화하고 시스템 테마와도 일치할 수 있는 다양한 브라우저 애드온도 있습니다.[12]
2019년에, 트런트-엔드 웹 개발자를 위해 "prefers-color-scheme" 옵션이 만들어졌으며, 시스템이 자신의 시스템이 밝거나 어두운 색상 테마를 사용하도록 사용자의 선택을 신호하는 CSS 속성입니다.[13]
2024년 7월, Wikipedia의 모바일 웹 사이트는 다크 모드를 받았습니다.[14] 데스크탑 웹 사이트는 나중에 마찬가지로 다크 모드를 받았습니다.[15]
Energy usage
어두운-위에-밝은 색상 체계는 OLED 디스플레이에 표시하기 위해 더 적은 에너지를 요구합니다. 이것은 배터리 수명에 긍정적인 영향을 미치고 에너지 소비를 줄입니다.[16]
OLED는 주로 검은 색깔인 이미지를 표시하는 데 LCD의 전력의 약 40%를 소비할 것이지만, 문서나 웹 사이트와 같은 흰색 배경을 가진 이미지를 표시하기 위해 3배 이상의 전력을 사용할 수 있습니다.[17] 이것은 어두운-위에-밝은 색상 체계가 사용되지 않는 한 배터리 수명을 줄이고 에너지 사용량을 높아는 것으로 이어질 수 있습니다. 장기적으로 줄어든 전력 사용량은 배터리 수명이나 디스플레이와 배터리의 유용한 수명을 연장할 수 있습니다.
어두운-위에-밝은 색상 체계를 사용하여 달성될 수 있는 에너지 절약은 OLED 스크린의 작동 방식 때문입니다: OLED 스크린에서 각 하위-픽셀은 자체 빛을 생성하고 빛을 생성할 때만 전력을 소비합니다. 이것은 LCD의 작동 방식과 대조적입니다: LCD에서 하위-픽셀은 항상 켜져 있는 (lit) LED 백라이트의 빛을 차단하거나 통과시킵니다.
AMOLED 화면의 전력 소비가 표시된 픽셀의 평균 밝기에 비례하여 감소하기 때문에, "AMOLED Black" 색상 체계 (짙은 회색 대신 순수한 검은색을 사용함)는 검은색 대신 짙은 회색을 사용하는 다른 어두운-위에-밝은 색상 체계보다 반드시 더 많은 에너지를 절약하는 것은 아닙니다. AMOLED 검정이 짙은 회색보다 더 많은 에너지를 절약하는 것은 사실이지만, 추가 에너지 절약은 종종 무시할 수 있습니다; AMOLED 검정은 예를 들어 Google의 공식 Android 앱에 대해 다크 테마에 사용되는 짙은 회색에 비해 1% 미만의 추가 에너지 절감만 제공합니다.[18] 2018년 11월, Google은 Android의 다크 모드가 배터리 수명을 절약한다고 확인했습니다.[19]
Issues with the web
어떤 사람들은 어두운 배경에 밝은 텍스트를 갖는 색상 체계가 전체 밝기가 낮을수록 눈의 피로가 덜하기 때문에 화면에서 읽기 더 쉽다고 주장합니다. 다른 사람들은 그 반대를 주장합니다.[20][21][22] 웹의 일부 페이지는 흰색 배경으로 디자인되어 있습니다; 이미지 자산 (GIF, PNG, SVG, WOFF, 등)을 잘못 사용하면 Dark Reader와 같은 플러그인에서 (설계된 대신) 다크 모드가 강제되면 시각적 아티팩트를 유발할 수 있습니다.
CSS에는 사용자가 밝거나 어두운 색 구성표를 요청했는지 감지하고 요청된 색상 체계를 제공하는 prefers-color-scheme 미디어 기능이 있습니다. 그것은 사용자의 운영 시스템 기본 설정 또는 사용자 에이전트에서 표시될 수 있습니다.[13][23]
CSS 예제:
@media (prefers-color-scheme: dark) {
body {
color: #ccc;
background: #222;
}
}
<span style="background-color: light-dark(#fff, #333); color: light-dark(#333, #fff);"></span>
자바스크립트 예제:[24]
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
dark();
}
