설계 분야에서 다크 모드는 새로운 개념의 검은색입니다. 명암 색 구성표, 나이트 모드 또는 블랙 모드라고도 하는 다크 모드는 어두운 배경에 밝은 텍스트와 아이콘을 사용하여 모든 항목을 표시합니다.

다크 모드는 새로운 개념이 아니지만 최근 몇 년 동안 널리 각광 받고 있어 대부분의 운영 체제, 브라우저, 스마트폰, 앱에서 다크 모드를 지원합니다.

다크 모드의 간단한 역사

다크 모드는 2018년 Sylvian Boyer가 OLED 스크린을 탑재한 스마트폰에 다크 모드를 확장하면서 널리 알려지기 시작했습니다. 개발자, 게이머, 해커들은 다크 모드를 빠르게 채택했고 가장 중요한 사용자로 남아 있습니다.

2020년 설문조사에 따르면 개발자의 70%가 코딩 또는 프로그래밍 중 다크 모드 IDE를 선호한다고 합니다.

다크 모드는 일반적인 장치 사용자 사이에서도 계속해서 널리 사용되고 있습니다. 이제는 대부분의 운영 체제, 브라우저, 게임, 앱에 다크 모드가 있습니다. 예를 들어, Discord와 같은 일부 응용 프로그램의 UI(사용자 인터페이스)는 다크 모드로 완전히 전환되었습니다.

그렇다면 다크 모드가 이처럼 널리 사용되는 이유는 무엇인가요? 조사에 따르면 어두운 팔레트가 적용된 앱은 밝은 팔레트보다 에너지 사용량이 거의 90% 더 적다고 합니다. 또한 다크 모드는 너무 밝지 않아도 색을 더욱 또렷하게 표현하는 데 도움이 됩니다. 다크 모드는 화면의 전체 밝기를 줄여 주변광이 어둡더라도 눈을 훨씬 더 편안하게 만들어 줍니다.

Google의 Android 및 Play용 제품 관리 담당 VP인 Sameer Samat은 "누구나 조명이 어두운 곳에 있을 수 있는데, 흰색 화면은 눈에 잘 들어오지 않습니다."라고 말했습니다. 다크 모드의 화면 또는 웹 사이트는 일반적으로 라이트 모드의 화면보다 시각적으로 훨씬 더 매력적입니다.

또한 결정적이지는 않지만 널리 알려진 이론에 따르면 다크 모드는 화면에서 방출되는 블루라이트를 줄여준다고 합니다. 2018년 Harvard Medical School에서 수행한 연구에 따르면 잘 시간에 장치를 사용하여 블루라이트에 노출되면 멜라토닌 생성이 방해를 받아 수면에 영향을 미친다고 합니다.

이러한 모든 요인이 다크 모드의 인기에 영향을 미쳤습니다. 하지만 다크 모드에서 설계하는 것은 어떨까요? 단순한 색 반전에 불과할까요? 다크 모드 설계에 대해 좀 더 자세히 알아보겠습니다.

다크 모드의 단점

다크 테마를 만드는 것은 색을 반전시키고 음영을 조정하는 데 그치지 않습니다. 웹사이트 또는 응용 프로그램을 위한 다크 모드 테마를 설계할 때 고려해야 할 사항이 여러 가지 있습니다. 응용 프로그램에서 다크 모드를 개발하는 방법을 논의하기 전에 하지 말아야 할 일을 살펴보겠습니다.

다크 모드의 가장 큰 문제는 빛 번짐 현상입니다. 어두운 배경에서 밝은 텍스트를 읽으면 홍채가 확장되어 더 많은 빛을 받아들입니다. 그러면 안압이 증가해 빛 번짐 현상이 발생합니다.

다크 모드는 낮 시간 중 또는 조명 상태가 좋을 때만 사용하는 응용 프로그램 또는 웹사이트에 도움이 안 됩니다. 조명 상태가 좋은 곳에서 다크 모드를 사용하면 유용성이 줄어들고 텍스트 가독성이 떨어질 수 있습니다.

또한 색과 대비가 제대로 균형을 이루지 못하면 색 음영이 매우 다르게 작동할 수 있습니다. 또한 색 균형이 잘 맞지 않으면 사용자가 불편할 수 있습니다.

공간이 흰색인 경우 자동으로 공간이 더 넓은 것 같다는 인상을 줍니다. 밝은 배경이나 흰색 배경에서 보기 좋게 표시되는 컴포넌트가 많은 디자인은 다크 테마에서 어수선하게 느껴질 수 있습니다.

이러한 이유로 다크 테마에서 올바른 색 균형을 맞추는 것이 중요합니다.

다크 모드 디자인

확인한 것처럼 다크 테마 UI를 디자인하는 것은 간단한 일이 아닙니다. 다크 테마 UI를 디자인할 때 고려할 몇 가지 사항에 대해 살펴보겠습니다.

브랜드 고려

웹 응용 프로그램에 다크 테마가 있어야 하는지 여부를 결정할 때 브랜드 스토리와 대중에게 전달하고자 하는 메시지를 고려해야 합니다. 예를 들어, 영화 스트리밍 플랫폼은 다크 테마에 매우 적절하지만 뱅킹 응용 프로그램은 적절하지 않을 수 있습니다.

완전한 검은색 피하기

완전한 검은색 화면에 완전 흰색의 텍스트와 아이콘을 표시하면 시각적 인터페이스가 보기 좋지 않을 수 있습니다. 진한 회색이 더 적절합니다. Material Design의 디자인 문서에 따르면 color #121212가 가장 적절한 배경색이라고 합니다.

고채도 색 피하기

고채도 색은 어두운 배경에 적합하지 않습니다. 채도가 너무 높으면 읽기 힘들고 배경에서 흔들리는 것처럼 보입니다. Material Design에서는 다크 테마의 경우 200 ~ 50 범위의 색을 사용할 것을 권장합니다.

반투명 오버레이를 사용하여 높이 주기

Material Design의 문서에 따르면 "표면의 높이가 높을수록(표면을 광원 가까이 높임) 표면은 더 밝아집니다."

다크 모드에서는 광원이 위에 있다고 가정합니다. 레이어가 뒤로 더 멀어질수록 음영이 더 어두워집니다. Material Design에서는 컴포넌트 표면에 반투명 오버레이를 사용하여 높이 주기를 제안합니다.

또한 더욱 자연스러운 느낌을 주기 위해 그림자의 음영을 보존해야 합니다. 다음은 다양한 오버레이 값입니다.

읽을 수 있는 대비 수준 사용

읽을 수 있도록 텍스트를 잘 표시하려면 텍스트와 배경 간 대비가 충분해야 합니다. Material Design에 따르면 대비 수준은 15.8:1이어야 합니다. 디자인에서 적절한 대비를 유지하지 못하면 화면을 볼 때 눈이 피로할 수 있습니다.

포커스 색에 더 어두운 흰색 사용

포커스 색은 사용자가 텍스트를 선택했거나 버튼을 클릭하여 어떤 것을 설정했음을 보여 줍니다. 이를 위해 순백색을 사용하면 떨림 문제가 발생하거나 너무 밝아져 가독성이 떨어집니다. "조금 어두운 흰색"을 사용하는 것이 더 낫습니다. 불투명 값을 이동하는 것도 조금 어두운 흰색을 만드는 데 도움이 됩니다.

일반적으로 허용되는 색 체계는 다음과 같습니다.

• 강조된 텍스트: 불투명도 87%

• 중간 텍스트: 불투명도 60%

• 비활성화된 텍스트: 38%

  다음 비교 자료는 텍스트가 어떻게 표시되는지 이해하는 데 도움이 됩니다.

테마 컬러 사용 자제

테마 컬러는 요소를 돋보이게 만드는 색입니다. 테마 컬러는 자제해서 사용해야 하며 기본색과 마찬가지로 다크 테마에 동일하게 생동감 넘치는 음영을 주면 안 됩니다. 테마 컬러가 너무 밝으면 디자인이 눈에 거슬리게 됩니다.

아이콘에 일관된 색 구성표 사용

아이콘, 확장 가능한 벡터 그래픽 등의 색 팔레트는 디자인의 다른 색 구성표와 동일한 원칙을 따라야 합니다. 순백색이거나 채도가 높아야 합니다.

이미지의 밝기 및 대비 고려

다크 모드의 중요한 고려사항은 이미지입니다. 어두운 배경 위의 밝은 이미지는 매력적이지 않을 수 있습니다. 따라서 다크 디자인에 이미지를 추가하기 전에 밝기와 대비를 낮추는 것이 좋습니다. 한 가지 예로 다음 그림을 살펴보세요.

디자인의 정서적인 영향 고려

배경색에 따라 디자인의 색이 다르게 표현될 수 있습니다. 밝은 표면 위에서 눈이 피로하지 않은 색 구성표는 어두운 배경에서 눈에 피로감을 줄 수 있습니다.

부족하거나 너무 과도한 색, 색조, 밝기 등은 전달하고자 하는 메시지를 완전히 바꿔놓을 수 있습니다.

이러한 예는 Material Design에서 살펴볼 수 있습니다.

색 블록을 사용한 디자인은 흰색 또는 밝은 배경에서 좋아 보일 수 있지만 다크 모드에서는 효과가 떨어질 수 있습니다. 오른쪽 이미지는 동일한 컴포넌트를 다크 디자인에서 구현하는 훨씬 더 나은 방법을 보여 줍니다.

다크 테마 디자인으로 전환하기 전에 디자인이 전달하는 정서적인 영향과 메시지를 이해해야 합니다.

사용자가 선택하도록 하기

다크 모드와 라이트 모드 간에 선택은 항상 사용자의 몫이어야 합니다. 일부 사용자는 다크 모드보다 라이트 모드를 선호할 수 있고 그 반대일 수도 있습니다. 또한 디자인이 접근 가능한지 확인하고 싶을 것입니다. 예를 들어, 시각 장애가 있는 사람은 다크 모드에서 더 나은 사용자 경험을 할 수 있습니다.

사용자에게서 선택권을 빼앗는 것은 끔찍한 UI 경험입니다. 따라서 디자인에는 다크 모드와 라이트 모드 간에 전환할 수 있는 토글 또는 버튼이 있어 사용자가 선호하는 모드를 선택할 수 있어야 합니다. 다음 섹션에서는 몇 가지 실례를 살펴보겠습니다.

다크 모드 또는 라이트 모드 옵션

사용자에게 다크 모드 또는 라이트 모드를 선택하거나 표시할 수 있는 몇 가지 방법이 있습니다. 운영 체제 기본값을 적용하거나 사용자가 모드를 선택할 수 있도록 토글 버튼을 제공할 수 있습니다. 또한 사용자 기본 설정을 저장하는 방법을 제공할 수도 있습니다.

Mac OS와 같은 일부 운영 체제에서는 시스템 설정에서 다크 또는 라이트 테마 기본 설정을 선택할지 묻는 메시지가 표시됩니다. 따라서 시스템 설정을 사용하여 웹페이지의 테마를 설정할 수 있습니다. 이 작업을 수행하기 위한 순수 CSS 또는 JavaScript의 두 가지 방법이 있습니다.

순수 CSS 방법은 prefers-color-scheme 미디어 쿼리입니다. prefers-color-scheme 미디어 쿼리를 사용하면 테마의 동작을 지정할 수 있습니다.

예를 들어, CSS-Tricks에 대한 예와 마찬가지로 텍스트와 링크가 있는 웹페이지가 있다고 가정해 보겠습니다. 운영 체제 설정이 "라이트"인 경우 이 페이지는 다음과 같이 표시됩니다.

이 페이지를 구현하기 위해 사용한 CSS 스타일시트는 다음과 같습니다.

@media (prefers-color-scheme: light) {  
  body {  
    color: #000000;  
    background: white;  
  }  
​
  body a {  
    color: #809fff;  
  }  
}  

그러나 사용자가 시스템 기본 설정을 다크로 설정했다고 가정하면 이 스타일시트는 미디어 쿼리를 활성화합니다.

@media (prefers-color-scheme: dark) {  
  body {  
    color: #eee;  
    background: #121212;  
  }  
​
  body a {  
    color: #809fff;  
  }  
}

이 페이지는 다음과 같이 표시됩니다.

순수 CSS 메서드 대신 이 데모에서 보여 주는 것처럼 JavaScript window.matchedMedia() 메서드를 사용할 수 있습니다.

물론 앞에서 언급한 것처럼 웹페이지에 토글 버튼을 제공하여 사용자에게 더 확실한 선택권을 줄 수도 있습니다. 다음은 버튼을 사용하여 모드 간에 전환할 수 있는 방법을 보여 주는 간단한 코드 조각입니다. 다음과 같이 버튼 리스너 이벤트를 처리합니다.

const btn = document.querySelector(".btn-toggle");  
const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");  
​
btn.addEventListener("click", function () {  
  if (prefersDarkScheme.matches) {  
    document.body.classList.toggle("light-theme");  
  } else {  
    document.body.classList.toggle("dark-theme");  
  }  
});

사용자가 버튼을 눌러 다크 모드로 전환하면 다음과 같이 코드가 dark-theme CSS를 적용합니다.

body.dark-theme {  
  --text-color: #eee;  
  --bkg-color: #121212;  
}

다크 모드와 라이트 모드를 모두 지원하는 웹페이지의 모양은 다음과 같습니다.

전체 코드는 CodePen에서 확인할 수 있습니다.

공통 프레임워크에서 다크 모드 지원

다크 모드가 점점 더 많이 사용되기 때문에 공통적으로 사용되는 많은 프레임워크에서 다크 모드를 사용한 빌드를 지원합니다. 몇 가지 예는 다음과 같습니다.

Material UI

Material UI는 개발자 친화적이고, 확장 가능하며, 간단한 테마 설정 유틸리티를 제공합니다. 테마 설정을 통해 프로젝트의 모든 디자인 측면을 사용자 정의하여 디자인 측면이 다크 모드를 지원하도록 하고 비즈니스 요구에 부합할 수 있습니다.

Vuetify

Vuetify는 Vue.js를 사용하는 세련된 UI 프레임워크입니다. Material Design의 디자인 사양에 맞는 라이트 모드와 다크 모드 간의 전환을 지원합니다. Vuetify는 기본적으로 라이트 모드를 선택하지만 쉽게 다크 모드로 전환할 수 있습니다. Vuetify에서는 사용자 정의가 쉽습니다.

Nebular

EVA Design System을 기반으로 하는 Nebular 라이브러리는 최고의 Angular용 UI 라이브러리 중 하나입니다. Nebular는 기본 테마, 우주 테마, 다크 테마 등 사용자 정의 가능한 테마를 기본적으로 제공합니다. UI Kitten이라고 하는 Nebular의 모바일 버전은 다크 모드를 지원합니다.

Smelte

Smelte는 Tailwind CSS를 기반으로 하고 Material Design의 지침을 따릅니다. 다크 모드를 지원하며 다크 모드를 설정하거나 사용자 정의하도록 합니다. 컴포넌트에 대해 다크 모드 설정을 true로 설정하면 다크 모드를 켤 수 있습니다.

Blueprint

Blueprint UI 라이브러리를 사용하면 다크 모드와 라이트 모드를 쉽게 전환할 수 있습니다. Blueprint에서 다크 모드로 전환은 컨테이너 요소에 bp3-dark 속성을 적용하는 것만큼 쉽습니다.

Rebass

Rebass의 캐치프레이즈는 "우리 컴포넌트는 모두 테마 설정 가능성을 염두에 두고 빌드되었습니다"입니다. Rebass의 컴포넌트는 테마 설정에 대한 광범위한 지원을 제공하고 테마 설정 API를 간단하게 구현합니다.

React Native Paper

React Native Paper UI 라이브러리 즉, Paper는 세 번째 버전에서 다크 테마를 지원합니다.

Paper는 기본적으로 사용자 정의 가능하고 프로덕션 환경에서 사용할 수 있는 React의 기본 컴포넌트로, Google Material Design의 디자인 원칙을 따릅니다.

이들은 다크 모드를 지원하는 몇 가지 라이브러리일 뿐입니다. 다크 모드에 대해 동일하거나 유사한 지원을 제공하는 수천 개의 UI 라이브러리가 있습니다. 이러한 라이브러리 외에 다크 모드 또는 다크 테마와 함께 패키지로 제공되는 UI 도구 키트가 있습니다.

그 중 하나는 Wijmo - JavaScript 기반 UI 컴포넌트입니다. Wijmo는 대화형 메뉴와 데이터 그리드에서 차트 및 그래프까지 40개가 넘는 사용자 정의 가능한 위젯이 포함된 UI 도구 키트로, 다크 모드가 지원됩니다.

결론

대부분의 사람이(또는 최소한 열성 Android 사용자) 다크 모드를 사용하고 있고 한동안은 계속 사용할 것 같습니다. 하지만 살펴본 것처럼 웹사이트 또는 응용 프로그램에 맞춰 다크 테마를 디자인하는 것은 그리 간단하지 않습니다. 매력적인 다크 테마를 구현하려면 많은 것을 고려해야 합니다.

또한 많은 UI 라이브러리가 다크 모드로 응용 프로그램 빌드를 지원하는 것도 살펴보았습니다. 라이브러리를 사용하여 응용 프로그램을 빌드하는 것은 처음부터 다크 모드를 디자인하는 것보다 좋은 방법일 수 있습니다. 디자인 및 계획 시 어려움이 있더라도 여러분의 응용 프로그램에서 다크 모드를 지원할 수 있는지 살펴보는 것은 가치 있는 일입니다.

다크 모드에서 디자인하는 데 관심이 있으면 GrapeCity의 Wijmo를 살펴보세요.