핵심 요약
카카오엔터테인먼트는 웹에서 다크모드를 구현하는 다양한 접근법을 비교하고, 실무에 바로 적용 가능한 권장 방식으로 body 클래스와 CSS 변수 기반 구현을 제시했습니다.
구현 방법
- 비추천 방식의 한계: 시스템 컬러모드 의존성, 구형 OS/웹뷰의 제약을 지적합니다.
- 권장 방법: HTML의 body에 color mode 정보를 저장하고 JavaScript로 초기값을 적용(로컬스토리지 사용), 필요 시 앱 웹뷰의 UA 값을 활용해 동기화합니다. 또한 prefers-color-scheme의 기본값 반영과 모드 변경 시 실시간 반영도 가능하도록 구성합니다.
- CSS 관리: 색상 값을 CSS 변수로 정의해 두 모드에 대응하고, 컴포넌트는 선언된 변수를 사용합니다.
- 렌더링 고려: SSR/CSR 상황과 render-blocking 리소스를 고려해 최초 렌더링 지연을 최소화하는 전략을 제시합니다.
- 추가 구현 포인트: 다크/라이트 토글 스위치를 통한 사용자 제어와, 필요 시 두 방식의 조합 활용이 가능합니다.
주요 결과
- 외부에서 전달받은 컬러모드 값과 자체 정책을 모두 유지해 운영 가능하다는 점을 강조합니다.
- CSS 변수 도입으로 색상 관리가 간결하고 확장성이 높아집니다.
- 웹뷰, SSR 여부에 따라 유연하게 동작하도록 구성할 수 있습니다.
