Dark Mode Toggle

요즘 웹사이트의 필수 기능이 된 다크모드를 직접 구현해보며 그 원리를 이해하고 싶었습니다.

가장 먼저 React의 useState를 이용해 ’light’와 ‘dark’ 상태를 관리하고, TailwindCSS의 dark: 클래스가 어떻게 동작하는지 알아보는 것부터 시작했습니다. 단순히 상태를 바꾸는 것에서 더 나아가, 사용자가 설정한 테마가 새로고침 후에도 유지되도록 localStorage에 값을 저장하고 불러오는 기능도 실험해 보았습니다.

기능 구현 후에는 시각적인 완성도를 높이는 데 집중했습니다. 테마가 바뀔 때 배경색이 부드럽게 전환되도록 transition-colors를 적용해보고, Framer Motion을 이용해 토글 스위치 자체가 조금 더 재미있게 움직이도록 만들어보았습니다.

단순해 보이는 토글 하나에도 상태 관리, 데이터 영속성, 사용자 경험을 위한 시각적 디테일까지 여러 요소를 고민해볼 수 있는 의미 있는 실험이었습니다.