한 줄 요약 스위치 하나를 누르면 해가 달로 바뀌고 하늘색구름별까지 낮밤으로 한꺼번에 전환되는 토글이에요.
이럴 때 필요해요
다크모드 전환 버튼은 그냥 "딸깍" 바뀌면 밋밋해요. 사용자가 모드를 바꾸는 그 순간에 작은 장면 전환을 보여주면, 기능이 훨씬 기억에 남고 "이 사이트 신경 썼네" 하는 인상을 줍니다. 설정 토글, 다크모드 스위치, 온보딩의 분위기 전환처럼 상태가 둘로 나뉘는 곳에 잘 어울려요.
어떻게 동작하나
모든 화면 요소가
night라는 하나의 true/false 상태를 바라봐요. 그래서 스위치를 누르면 노브하늘해달구름별이 동시에 반응해요.하늘 그라데이션은 CSS에서 직접 부드럽게 전환되지 않아요. 그래서 낮 하늘과 밤 하늘 두 장을 겹쳐 놓고, 밤 하늘의 투명도(opacity)만 01로 올려 크로스페이드시켜요.
별은 밤에만 서서히 나타나며
@keyframes로 깜빡이고, 구름은 낮에만 보이며 천천히 떠다녀요 둘이 자연스럽게 교차해요.해와 달은 같은 자리에 겹쳐 두고, 한쪽은 사라지고(scale 축소 + opacity 0) 한쪽은 떠오르며(scale 확대 + opacity 1) 바뀌어요. 토글 노브는
translateX로 좌우로 미끄러져요.
핵심은 이거예요
그라데이션은 직접 애니메이션이 안 된다는 걸 우회하는 게 포인트예요 두 장을 겹쳐 투명도만 바꾸면 어떤 배경이든 부드럽게 갈아끼울 수 있어요. 그리고 모든 요소를 night 한 값에 연결해 두면, 장면 전체가 한 박자로 움직여요.
놓치기 쉬운 것
별 위치를 난수로 만들면 서버/브라우저가 서로 다르게 그려 깨질 수 있어요 고정된 좌표 배열로 둬요.
해달을 양옆에 따로 두기보다 같은 자리에서 교차시키면 시선이 안 흩어져요.
깜빡임드리프트 애니메이션은 모션에 민감한 사용자를 위해
prefers-reduced-motion에서 줄이는 걸 고려하세요.
이런 곳에 써요
사이트 헤더의 다크모드 전환 버튼
설정 화면의 테마/분위기 선택
온보딩랜딩에서 "낮밤" 같은 상태 변화를 보여줄 때