Dark mode, 터미널에서 시작해 트렌드가 되기까지

한 줄로

원래는 컴퓨터의 기본 상태였습니다. 종이 메타포가 35년간 그것을 가렸습니다. 2018년 iOS Mojave가 다시 풀어줬습니다.

어디서 왔나

1970년대 컴퓨터 터미널은 검은 바탕에 녹색(또는 호박색) 글자가 기본이었습니다. 이유는 단순했습니다. CRT 모니터에서 가장 적은 인광체로 글자를 표현하려면 검은 배경에 발광 문자가 효율적이었습니다. 다크 모드가 원본이었습니다.

1984년 매킨토시가 흰 배경에 검은 글자로 뒤집은 게 결정적 분기점입니다. 종이 메타포, "컴퓨터는 책상 위의 종이"를 시각화한 것이 산업 표준이 됐습니다. 이후 35년 동안 모든 OS, 모든 웹사이트가 흰 배경을 기본으로 삼았습니다.

다시 풀린 건 2018년. Apple이 macOS Mojave를 발표하면서 시스템 전체 단위의 다크 모드를 도입했습니다. 다음 해 iOS 13(2019), Android 10(2019)이 따라갔고, 2020년에는 거의 모든 앱에 다크 모드가 들어갔습니다.

이유는 세 가지입니다.

OLED 디스플레이의 보급: 검은 픽셀이 진짜로 꺼져서 배터리를 아낍니다. 야간 사용 증가: 침대에서 폰을 보는 시간이 길어졌습니다. 눈의 피로 호소: 의학적 근거는 약하지만 사용자 인식이 강합니다.

지금 우리가 쓰는 방식

CSS prefers-color-scheme: 시스템 설정 따라 자동 전환. OKLCH 컬러: 명도가 일정한 컬러 공간으로 다크/라이트 양쪽에서 같은 강도. 그림자보다 elevation: 다크 모드에서 그림자는 안 보이니까, 더 밝은 회색으로 깊이 표현합니다.

바이브 메이커가 챙길 한 가지

다크 모드를 만들 때 "흰색을 검은색으로 뒤집기"는 가장 흔한 실수입니다. 순수 검정(#000)과 순수 흰색(#FFF)은 둘 다 피해야 합니다. 다크 모드의 본문 배경은 보통 #121212 같은 어두운 회색, 텍스트는 #E0E0E0 정도의 밝은 회색을 씁니다. 대비가 너무 높으면 글자가 떨어 보입니다.

관련

Auto mode · Color contrast · OKLCH