다크 모드

macOS 모하비에 다크 모드가 추가되면서 웹에서도 다크 모드를 제공하는 곳이 늘었다. 대표적으로 트위터가 지원하고, 이 블로그의 기반이 된 Dan Abramov의 Overreacted도 지원한다. 이런 웹페이지를 밤에 침대에 누워서 보다가 하얀 배경의 웹페이지에 들어가게 되면 고통스럽다. 특히 LCD 디스플레이인 iPhone7을 쓰고 있어서 더 밝은 빛이 눈을 찌른다. 그래서 블로그를 공개하기 전에 꼭 다크 모드를 적용하고 싶었다.

먼저 다크 모드를 쉽게 만들 수 있는 라이브러리가 있는지 알아보려고 ‘gatsby dark mode’로 검색해서 gatsby-plugin-dark-mode를 찾아냈다. Dan의 Overreacted에 구현된 것을 쓰기 편하게 만든 것이라고 한다. OS에서 다크 모드를 사용중이면 자동으로 다크 모드 적용이 되고, 스위치을 사용해서 껐다 켤 수 있으며 이 설정이 브라우저에 저장이 된다.

다크 모드에 알맞은 색상은 직접 찾아야했다. 검색해보니 무조건 새카만 배경이 좋은 것이 아니었다. 배경이 검을 수록 화면 밝기는 줄어들지만, 글자 색상과의 대비가 커지기 때문에 눈이 불편해진다. 글자 색상도 마찬가지로 밝은 하얀색이 아니라 배경 보다 조금 밝은 회색을 골라야 한다. 또한 이 색상 선택에는 하나의 왕도가 없다. macOS나 앱, 웹페이지는 각자의 디자인에 어울리는 색상을 선택한 것이다. 심지어 macOS의 다크 모드의 색상은 뒷 배경에 따라 변해서 쉽게 가져다 쓸 수 없다.

결국 나는 가장 익숙한 다크 모드 색상을 가져와 쓰기로 했다. 바로 VS Code에서 사용하는 색상 테마인 One Dark Pale이다. 다양한 색상 테마를 시도해보다가 결국 정착한 내게 가장 편한 색상 테마이다. 그냥 가져와서 쓰기 보다는 약간 과학적인 수정을 거쳤다. One Dark Pale의 배경과 글자색, 블로그의 배경과 글자색을 coolors에 입력하고 Hue 값을 한가지 값으로 맞춰서 같은 색조를 가지도록 했다. 이렇게 수정한 4가지 색상을 블로그에 적용시켰다.

마지막으로 다크 모드를 켜고 끄는 스위치를 만들어야 했다. Overreacted는 ☀️와 🌙로 다크 모드 스위치라는 것을 알린다. 트위터 앱에서는 꺼진 전구와 켜진 전구 아이콘을 사용하고, 트위치 웹에서는 ‘어두운 모드’라는 라벨로 확실하게 알린다. 나는 더욱 단순하게 스위치 배경 색상만 다르게 했다. 불친절한 UI다. 하지만 화면 우상단에 있어 다들 한번쯤 사용해 볼 것이고, 사용한 뒤에는 어떤 동작을 하는지 확실하게 알 것이라 생각했다. 물론 내 수고도 많이 줄어들었다.

큰 시각적 변화를 만들어 배포한 뒤에는 그 웹페이지에 들어오는 것이 즐거워진다. 여러 조명과 다른 시간대에서 켰다 껐다 하기만해도 즐겁다. 이 블로그를 읽는 여러분에게도 작은 즐거움과 더 큰 편안함이 전해지기를 바란다.

웹 프론트엔드, 음악, 책 등등
by 조용준