
News & 기고POST
Service Management Enterprise Solution 분야의 리더가 되겠습니다.
2024 UI/UX 핵심 트랜드 Dark Mode
작성자
admin
작성일
2024-01-15 09:38
조회
4021
2024 UI/UX 핵심 트랜드 Dark Mode
다크 모드란?
2024 UI/UX Design 주요 트렌드 중 하나인 다크 모드는 사용자 인터페이스에서 밝은 배경화면에 검은 글자 대신 어두운 배경화면에 밝은 글자를 제공하는 테마이다. 2010년대 말부터 구글, 애플, 삼성, 마이크로소프트 등 모두 다크 모드를 지원하기 시작했고 일반적인 웹 사이트에서도 사용자의 옵션 사항으로 제공되고 있는 추세다.
ios 다크모드

Android 다크모드
다크 모드의 이점
다크 모드의 이점을 살펴보면,첫번째, 눈의 피로를 감소시킬 수 있다는 점이다. 기술의 발달로 선명해진 디스플레이는 눈의 피로감을 더욱 가중시켰다. 다크 모드는 화면의 전체적인 밝기와 색상 대비를 낮추어 방출되는 빛의 양을 줄여 눈의 불편함과 피로를 줄이는 데 도움을 준다. 핸드폰, 타블렛 등의 사용자들의 평균적인 이용시간을 조사해보니 저녁 8시부터 새벽 12시까지의 이용률이 가장 높게 나왔다. 이러한 어두운 환경에서는 다크 모드를 사용했을 때 눈의 피로도를 더욱 감소시킬 수 있다.
두번째, 가시성 및 주목도를 향상시킨다는 점이다. 검정 배경에 흰색글씨는 사람의 홍채를 더 조여주는 효과를 주기 때문에 가시성을 향상시킨다. 또한 컨텐츠의 주목도를 향상시키는 효과도 가지고 있다. 영상 서비스 플랫폼이 기본으로 다크모드를 제공하는 이유도 여기에 있다.
세번째, 에너지를 절약할 수 있다는 점이다. 어두운 픽셀은 밝은 픽셀보다 전력을 적게 소비하기 때문에, 결과적으로 어두운 다크 모드는 배터리 수명을 연장하는 데 도움이 될 수 있다.
다크 모드의 단점
다크 모드가 가지는 단점으로 첫번째, 디자인 요소의 통일성을 위한 노력이 필요하다는 점이다. 일반적으로 다크 모드라고 하면 색상을 반전하면 된다고 생각하기 쉽지만, 실제로 색상을 반전시키기만 한다면 디자인의 통일성이 떨어지고 오히려 대비감이 높아져 눈이 피로해질 수도 있다. 다크 모드를 사용할 때는 디자인들이 모두 매끄럽게 혼합될 수 있도록 라이트 모드일 때보다 다양한 배경과 색 구성표를 지정하고 많은 노력과 고려가 필요하다.두번째, 가독성에 문제가 생길 수 있다. 다크 모드에서 적은 양의 컨텐츠는 주목도를 높여주지만, 텍스트의 양이 많아지는 경우에는 밝은 텍스트가 가지고 있는 후광 효과나 흐릿함 때문에 일부 사용자가 텍스트를 읽기 어려운 “할레이션” 효과를 유발할 수 있다. 이러한 문제를 줄이기 위해서는 배경과 컨텐츠의 적절한 명암비를 유지해야 한다.
다크 모드의 적용 방법
다크 모드를 적용하기 위한 방법은 일반적으로 두 가지가 있다.첫번째는 사용자 인터페이스의 시스템에 설정된 Light, Dark 모드에 따라서 스타일시트가 자동으로 적용되는 방식이다.
미디어쿼리 prefers-color-scheme을 이용하면 된다.

이 방법의 경우 사용자가 사이트 내에서 모드를 선택할 수 없다는 단점이 있다. 이 단점을 해결하기 위한 두번째 방법이 있다.
두번째는 사용자가 모드를 선택할 수 있는 버튼 옵션을 부여하여 CSS를 적용하는 것이다. 아래의 예시 이미지와 같이 사용자가 원하는 모드를 클릭하여 직접 제어하도록 한다.

버튼을 이용하여 라이트/다크 모드를 제어
두 가지 방법 모두 사용을 위해서는 세밀한 CSS 스타일 적용이 선행되어야 한다.다크모드의 E-GENE 활용 방향
이미 많은 시스템과 사이트에서 다크 모드를 지원하고 있고, 실제로 사용자의 선호도도 높은 편이다. 2024년 UI/UX 트렌드로 많이 거론되는 다크 모드를 2024 E-GENE7프로젝트에서도 적용할 계획이다. 앞서 소개된 두 가지의 적용 방법 중 미디어쿼리를 이용한 방법 보다는 두번째 버튼 옵션으로 다크 모드를 제공하여 사용자에게 설정 제어의 영역을 넓혀주면 좋은 활용 방향이 될 것이다.㈜에스티이지 R&D 김세나 프로