괜스레 저렇게

괜스레 저렇게는 김괜저(@gwenzhir)의 블로그이오니 잘 읽으세요.

뉴스레터 구독

나는 블로그에 다크 모드를 추가했다.

다크 모드란 일반적으로 희거나 밝은 색 배경에 어두운 색 전경을 쓰기 마련인 스크린 UI의 색상을 어두운 배경에 밝은 전경으로 반전시켜 조도가 낮은 환경에서 여백이 아닌 주요 요소들이 돋보이게끔 하는 기능을 말한다. 다크 모드가 있으면 방문자는 자신의 환경이나 취향에 맞게 경험을 조절할 수 있어서 좋고, 개발자는 더 중요하지만 정작 만들기 싫은 기능 개발은 뒷전으로 하고 요즘 유행에 편승할 수 있어서 좋다.

다크 모드를 추가하려면 몇 가지 결정을 내려야 한다.

  1. 이용자의 다크 모드 설정을 어떻게 기억할 것인가?
  2. 사이트 모든 요소의 색상을 어떻게 변경할 것인가?
  3. 이용자가 다크 모드를 어떻게 설정할 수 있게 할 것인가?

1. 이용자의 다크 모드 설정을 어떻게 기억할 것인가?

이용자는 수시로 다크 모드와 기본 모드를 오갈 수 있어야 하고, 최근에 유행한 기능이기 때문에 기대치에 맞춰 사이트를 새로고침하지 않고 동적으로 바뀌어야 한다. 동시에 사이트내 링크를 타고 이동할 때 모드가 바뀌면 안 되기 때문에 이용자의 설정을 기억해 두어야 한다. 설정값은 백엔드와 프론트엔드 양쪽에서 읽고 쓰기 쉽고 빨라야 한다. 이에 더해 만약 회원제 사이트라면 회원 개인의 설정도 반영되어야 하지만 나는 아직 이 문제는 없었다. 워드프레스에서 이를 가장 편리하게 구현할 수 있는 것은 세션이어서 세션에 저장하기로 했다. 차후 회원 설정 연동이 추가되어야 할 때 쉽게 작업할 수 있도록 설정값을 반환하는 함수를 따로 만들어 사용하는 정도의 최소한의 대비만 해 두었다.

2. 사이트 모든 요소의 색상을 어떻게 변경할 것인가?

이미 구축된 사이트 모든 요소의 색상을 다시 설정하는 것은 시간과 노력이 많이 필요한 일일 수 있다. 다행히 SCSS에서 색상을 모두 추상화한 변수들을 사용해 지정하고 있었기 때문에 적당한 색상 디자인을 완성하는 것은 그렇게 수고스럽지 않았다. 단순히 모든 것을 반전시키면 눈이 아픈 대비가 나올 뿐 아니라 그림자 등의 입체 요소가 해괴해지기 때문에 어두운 버전을 새로 만든다고 생각하고 해야 한다.

문제는 이미 상당히 고도화된 구조로 SCSS를 관리하고 있기 때문에 색상에 관한 스타일만 따로 분리해낸다거나, 이들만 부모 셀렉터의 변경으로 자동으로 변경사항이 상속되게 하는 방식은 적용하기 어려웠다. 그래서 처음에 생각했던 상위 클래스를 변경해 모드를 바꾸는 안은 진작 폐기되었고, 대신 두 개의 스타일시트를 개별 생성하여 갈아끼우는 방식을 사용하기로 했다. <link>disabled 속성이 있다는 사실은 이번에 처음 알게 됐다. 이 때 스타일을 갈아끼우는 동안 찰나라도 양쪽 스타일 모두로부터 사이트가 버림받는 일이 없도록 기본 모드 스타일은 늘 적용된 상태를 유지해야 했는데, 이를 위해 두 스타일시트의 로딩 순서도 설정값에 따라 바뀌게끔 했다.

3. 이용자가 다크 모드를 어떻게 설정할 수 있게 할 것인가?

기능이 많은 앱이라면 다크 모드 같은 것은 설정 속 깊숙한 곳에 토글 메뉴로 두어 이용자가 필요할 때에만 찾게 하겠지만 나처럼 이렇다 할 기능이 없는 블로그의 경우 ‘어떻게 읽을 것인가’는 꽤 중요한 설정이다. 그리고 이런 멋있는 것을 내가 만들었다는 사실을 가급적 모르는 방문자가 없게끔 하는 것은 이번 작업의 우선순위 5위 안에 꼽는 중요한 목표였다. 그래서 최상위 메뉴 우측 방을 비워 거기에 다크 모드 아이콘을 넣고, 그것을 누를 때마다 모드가 토글되게끔 했다.

적당한 다크 모드 아이콘을 넣는 것도 고민이 됐다. ‘다크 모드’에서 가장 먼저 연상되는 아이콘인 초승달 모양은 쉽게 정할 수 있었는데, 여기에서 기본 모드(또는 ‘라이트 모드’)로 돌아오는 아이콘은 정하기 어려웠다. 처음에는 햇님 모양을 써 보았지만 톱니와 분간이 힘들었을 뿐 아니라, 토글이기 때문에 한 버튼이 눌릴 때마다 바뀌는 것이라는 연속성이 부족했다. 그래서 조금 잔머리를 굴려 초승달 우측 상단에 가위표를 넣어 ‘초승달 그만’을 전달하고자 했다.

이렇게 완성된 다크 모드는 주말 내로 끝낸다는 목표를 달성하기 위해 군데군데 아쉬운 점들이 있지만 얘기 안 하면 모르겠지! (다크 모드가 자꾸 풀리는 몇 가지 상황을 포착했는데 다음 주에 고쳐야겠다.) 이제 아까 다크 모드를 완성한 나를 위해 미리 요리해 놓은 저녁을 먹어야겠다.

답글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다.

광고