라이트 온 다크 컬러 구성

Light-on-dark color scheme
이 기사는 기술 계획과 그 개념에 관한 것입니다.Wikipedia에서 "다크 모드"의 사용에 대한 자세한 내용은 Wikipedia:다크 모드
GNOME의 어두운 테마
일반 디스플레이 모드(왼쪽) 및 다크 모드(오른쪽)의 웹 사이트 버전

Light-on-Dark 색 구성표(블랙 모드, 다크 모드, 다크 테마, 나이트 모드 또는 라이트 아웃(모드)이라고도 함)는 어두운 배경에 밝은 색 텍스트, 아이콘 및 그래픽 사용자 인터페이스 요소를 사용하는 색 구성표입니다.컴퓨터 사용자 인터페이스 설계 및 웹 설계 측면에서 자주 논의됩니다.현대의 많은 웹 사이트와 운영체제는 사용자에게 옵션인 Light-on-Dark 디스플레이 모드를 제공합니다.

일부 사용자들은 다크 모드 디스플레이가 시각적으로 더 매력적이라고 생각하며 눈의 [1]피로를 줄일 수 있다고 주장한다.OLED 디스플레이를 탑재한 2016년식 구글 픽셀의 최대 밝기 디스플레이는 [2]순수 검정색보다 약 6배 많은 전력을 소비한다.그러나 기존의 LED 디스플레이는 [3]소비전력이 감소하는 이점을 얻을 수 없습니다.대부분의 최신 운영체제는 옵션인 라이트 온 다크 색상 [4]구성을 지원합니다.

역사

녹색 CRT 디스플레이에서 실행되는 Zork 비디오 게임

브라운관 오실로스코프, 오실로스코프 등과 같은 현대 컴퓨터 스크린의 이전 세대들은 그래프를 그리고 검은색 배경에 빛나는 트레이스로 다른 콘텐츠를 도입하는 경향이 있었다.

컴퓨터 화면이 등장하면서, 원래 사용자 인터페이스는 오실로스코프나 오실로스코프에 사용되는 것과 같은 CRT에 형성되었습니다.형광체는 보통 매우 어두운 색이었고 전자빔이 형광체에 부딪혔을 때 밝게 빛났으며 흑백 화면에 적용된 인체에 따라 검은색 배경에 흰색, 녹색, 파란색 또는 황색으로 보입니다.RGB 화면은 모든 빔을 "on"으로 설정하여 흰색으로 만드는 등 계속해서 비슷하게 작동했습니다.

텔레텍스트의 등장으로, 이 새로운 [5]매체에 가장 적합한 1차 및 2차 밝은 색상과 조합에 대한 연구가 이루어졌다.검은색의 시안 또는 노란색은 일반적으로 검은색, 빨간색, 녹색, 노란색, 파란색, 자홍색, 시안 및 흰색 팔레트에서 최적인 것으로 확인되었습니다.

반대 색 세트인 어두운 색 배합은 원래 종이 위의 잉크를 시뮬레이션하기 위해 WYSIWYG 워드 프로세서에 도입되어 표준이 되었습니다.

2018년, 애플은 맥OS 10.[6]14에서 뒤를 이었다.2019년 9월 iOS 13과 안드로이드 10은 모두 다크 [7][8]모드를 도입했다.

Firefox 및 Chromium은 모든 내부 화면에서 옵션인 어두운 테마를 가지고 있습니다.서드파티 개발자도 독자적인 다크 [9]테마를 구현할 수 있게 된다.

2019년에는 프론트엔드 웹 개발자를 위한 "prefers-color-scheme" 옵션이 생성되었으며, 이는 사용자가 밝은 색 또는 어두운 색 [10]테마를 사용할 수 있도록 선택하는 것을 알리는 CSS 속성입니다.

전력 사용량

어두운 색상의 조명은 OLED 디스플레이에 표시하는 데 필요한 에너지를 줄입니다.이는 배터리 지속 시간과 에너지 [11]소비에 긍정적인 영향을 미칩니다.

OLED는 주로 검은색인 이미지를 표시하는 LCD 전력의 약 40%를 소비하지만 문서나 웹사이트 [12]등 흰색 배경의 이미지를 표시하는 데 3배 이상의 전력을 소비할 수 있다.이것에 의해, 어두운 색채 설정을 사용하지 않는 한, 배터리 지속 시간과 에너지 소비의 삭감으로 연결됩니다.소비전력이 장기간 감소하면 배터리 지속시간이나 디스플레이 및 배터리의 수명이 길어질 수 있습니다.

라이트 온 다크 컬러 방식을 사용하여 달성할 수 있는 에너지 절약은 OLED 스크린의 작동 방식 때문입니다. OLED 스크린에서는 각 서브픽셀이 자체 빛을 생성하며 빛을 생성할 때만 전력을 소비합니다.이는 LCD의 동작과는 대조적입니다.LCD에서는 서브픽셀이 상시 점등(점등)된 LED 백라이트로부터의 빛을 차단하거나 통과시킵니다.

"AMOLED Black" 색 구성표(암회색 대신 순수한 검정색을 사용)는 표시되는 픽셀의 평균 밝기에 비례하여 AMOLED 화면의 전력 소비량이 감소하기 때문에 검은색 대신 어두운 회색을 사용하는 다른 밝은 색 구성표보다 반드시 더 많은 에너지를 절약하지는 않습니다.AMOLED 블랙이 다크 그레이보다 더 많은 에너지를 절약하는 것은 사실이지만, 추가 에너지 절약은 종종 무시할 수 있습니다. 예를 들어 AMOLED 블랙은 구글의 공식 안드로이드 [13]앱에 사용되는 다크 그레이에 비해 1% 미만의 추가 에너지 절약만을 제공합니다.2018년 11월, 구글은 안드로이드 다크 모드가 배터리 [14]수명을 단축시켰다고 확인했습니다.

웹 문제

어떤 사람들은 어두운 배경에 밝은 텍스트가 있는 색 배치는 전체 밝기가 낮을수록 눈의 피로를 덜 유발하기 때문에 화면에서 읽기가 더 쉽다고 주장한다.다른[15][16][17] 사람들은 반대로 주장한다.주의할 점은 웹 페이지의 대부분이 흰색 배경용으로 설계되어 있다는 것입니다.알파 채널 대신 투명 비트가 있는 GIF 및 PNG 이미지는 윤곽이 흐트러지는 경향이 있을 뿐만 아니라 다른 그래픽 요소에 문제가 생깁니다.

이 있습니다.prefers-color-schemeCSS 상의 미디어 기능을 사용하여 사용자가 밝은 색상과 어두운 색채 중 어느 쪽을 요구했는지 검출하고 요청된 색채표를 처리합니다.사용자의 운영 체제 기본 설정 또는 사용자 [10][18]에이전트에서 지정할 수 있습니다.

CSS의 예:

@미디어 (색채를 더하다: 어두운) {     몸 {         색.: #cc;         배경: #222;     } }

JavaScript의 예:[19]

한다면 (윈도.match 미디어('(color-color-color: dark)').일치하다) {     어두운(); }

「 」를 참조해 주세요.

레퍼런스

  1. ^ "Dark mode is easier on your eyes and battery". November 21, 2018.
  2. ^ Emily Price (November 11, 2018). "Use Dark Mode to Conserve Your Phone's Battery Power". Lifehacker. Retrieved March 20, 2021.
  3. ^ Eisfeld, Henriette; Kristallovich, Felix (2020). The Rise of Dark Mode : A qualitative study of an emerging user interface design trend.
  4. ^ David Murphy. "Embrace Evil by Enabling Dark Mode in Every App". Lifehacker. Retrieved November 15, 2020.
  5. ^ Petterson, Rune (March 1985). "Use of Colors in Teletext and Videotex". ResearchGate.{{cite web}}: CS1 maint :url-status (링크)
  6. ^ "macOS Mojave: Dark Mode, Stacks, & More". MacRumors. Retrieved August 8, 2022.
  7. ^ "How to Enable Dark Mode in iOS 13". MacRumors. Retrieved August 8, 2022.
  8. ^ "Here's how to enable the Android 10 dark theme mode". Android Authority. September 3, 2019. Retrieved August 8, 2022.
  9. ^ Porter, Jon (June 3, 2019). "Dark mode is coming to iOS 13". The Verge. Retrieved June 5, 2019.
  10. ^ a b "prefers-color-scheme - CSS: Cascading Style Sheets MDN". MDN Web Docs. Retrieved March 18, 2021.{{cite web}}: CS1 maint :url-status (링크)
  11. ^ Gottsegen, Gordon. "Using Android's dark mode improves battery life, Google confirms". CNET.
  12. ^ Stokes, Jon. (2009-08-11) 올해 9월, OLED는 더 이상 "3-5년 후" 웨이백 머신에 2012-01-25년 아카이브되었습니다.Arstechnica.com 를 참조해 주세요.2011-10-04 취득.
  13. ^ Raga, Dylan (June 27, 2019). "No, "AMOLED Black" Does NOT Save More Battery Than Dark Gray". XDA.
  14. ^ Welch, Chris (November 2, 2018). "Google confirms dark mode is a huge help for battery life on Android". The Verge.
  15. ^ "Love dark mode? Here's why you may still want to avoid it". Android Authority. June 29, 2020. Retrieved September 12, 2020.
  16. ^ Clarke, Laurie (July 30, 2019). "Dark mode isn't as good for your eyes as you believe". Wired UK. ISSN 1357-0978. Retrieved September 12, 2020.
  17. ^ Budiu, Raluca (February 2, 2020). "Dark Mode vs. Light Mode: Which Is Better?". nngroup.com.
  18. ^ Walsh, David (January 28, 2019). "prefers-color-scheme: CSS Media Query". David Walsh Blog. Retrieved March 18, 2021.
  19. ^ "Window.matchMedia() - Web APIs MDN". developer.mozilla.org. Retrieved March 18, 2021. The Window interface's matchMedia() method returns a new MediaQueryList object that can then be used to determine if the document matches the media query string, as well as to monitor the document to detect when it matches (or stops matching) that media query{{cite web}}: CS1 maint :url-status (링크)