https://misosos.github.io/tags/darkmode/DarkModeHugo Blox Builder (https://hugoblox.com)ko-krThu, 02 Oct 2025 00:00:00 +0000https://misosos.github.io/media/sharing.pnghttps://misosos.github.io/tags/darkmode/https://misosos.github.io/playground/ui-components/darkmode-toggle/Thu, 02 Oct 2025 00:00:00 +0000https://misosos.github.io/playground/ui-components/darkmode-toggle/<p>요즘 웹사이트의 필수 기능이 된 다크모드를 직접 구현해보며 그 원리를 이해하고 싶었습니다.</p> <p>가장 먼저 React의 useState를 이용해 &rsquo;light&rsquo;와 &lsquo;dark&rsquo; 상태를 관리하고, TailwindCSS의 dark: 클래스가 어떻게 동작하는지 알아보는 것부터 시작했습니다. 단순히 상태를 바꾸는 것에서 더 나아가, 사용자가 설정한 테마가 새로고침 후에도 유지되도록 localStorage에 값을 저장하고 불러오는 기능도 실험해 보았습니다.</p> <p>기능 구현 후에는 시각적인 완성도를 높이는 데 집중했습니다. 테마가 바뀔 때 배경색이 부드럽게 전환되도록 transition-colors를 적용해보고, Framer Motion을 이용해 토글 스위치 자체가 조금 더 재미있게 움직이도록 만들어보았습니다.</p> <p>단순해 보이는 토글 하나에도 상태 관리, 데이터 영속성, 사용자 경험을 위한 시각적 디테일까지 여러 요소를 고민해볼 수 있는 의미 있는 실험이었습니다.</p>