벨로그에 다크모드 적용하기

다크모드를 고려하지 않았던 서비스에, 다크모드를 도입하는 이야기를 글로 풀어냈습니다.
UX디자이너의 관점, 그리고 개발자의 관점을 모두 더해 글을 작성했습니다.

- 기술 선택
- 벨로그는 리액트와 Styled Components 사용중
- Styled Components의 ThemeProvider는 JS로 테마를 설정하기 때문에 시스템 테마를 기본으로 보여주는 것이 제한적임. 시스템 테마를 따라가려면 브라우저단에서 JS를 한번 호출해줘야 하기 때문에, 기본 테마를 고정시킬 것이 아니라면 SSR을 적용한 벨로그에는 적합하지 않음.
- CSS Variable을 사용하면 시스템 테마를 기본값으로 사용하게 만들 수 있음
- CSS in JS 환경에서 CSS Variable을 사용하기 위해서, 색상을 JS 객체로 관리하고, 실수 방지 및 TypeScript의 자동완성을 누릴 수 있도록 유틸 함수 작성해서 사용중

- 다크모드 팔레트 고민
- 배경색, 텍스트색, 테두리색, Primary, Destructive 색을 기준으로 색들을 정함
- 배경색의 경우 처음엔 1 2 3 4 명도 레벨 별로 정리를 했었는데 막상 실제 UI에선 1:1 대응이 되지 않을 때가 있어서, 예외 상황을 대응하기 위하여 조금 변경하여 관리
- 텍스트 색을 정할 때는 대비율이 적당한지 확인하는게 중요. WebAIM 이라는 곳에서 WCAG 에 통과하는지 볼 수 있음
- Primary, Destructive 색은 기존 색을 그대로 어두운 배경에서도 잘 대비되어 보이지만, Desaturated 색을 쓰면 조금 더 다크 테마에 어울리는 느낌

- 색상 교체 작업
- IDE 의 도움을 받아서 자동 교체할 수 있는 것들은 처리
- 나머지 예외 색상들은 직접 보면서 적당한 색상으로 설정
- 기존에 만들었던 색상으로 구현하기에 어색한 경우엔 팔레트에 새 색상을 그때 그때 추가해가면서 관리
- 실제로 이 작업에 공수가 가장 많이 들어갔음

- 다크테마 토글 기능
- SVG 두개를 rotate, scale CSS 트랜지션을 통해 트랜지션 효과 구현
- 사용자가 다크테마를 토글하면 사용자 설정을 로컬스토리지와 쿠키에 저장함
- 로컬스토리지는 CSR에서, 쿠키는 SSR에서 사용함

한번 다크 테마 적용을 해보고 나니, 다크 테마를 고려하고 하지 않은 UI에 다크 테마를 적용하는 것은 엄청나게 힘든 일을 느꼈음. 앞으로 기획할 땐 무조건 다크 테마를 고려하고 디자인 할 것이며, 색상을 사용할땐 gray1, gray2 이런식으로 색상 이름을 사용하는 대신에 text1, text2 이런식으로 용도별로 네이밍을 하면 추후 좀 더 편할 것으로 판단함