밝음과 어둠 사이: iPhone 스타일 테마 전환

그 전: 의식 없는 전환

테마 버튼은 세 상태를 순환했다: 자동 → 라이트 → 다크. 아이콘은 즉시 바뀌고, 페이지는 순간적으로 뒤집혔다. 기능은 완전했다——하지만 그 “딸깍”은 노을이 아니라 전등 스위치 같았다.

iPhone은 어떻게 하는가

iOS는 테마가 바뀔 때 결코 “딸깍”하지 않는다. 세 층이 동시에 일어난다:

1. 아이콘의 스프링 진입——새 아이콘은 0.4배 축소와 -100° 회전 상태에서, 시스템 스프링 커브를 따라 제자리로 돌아온다. 오래된 것은 삭제된 것이 아니라, 회전하며 나타난 것에게 자리를 물려준 것이다
2. 버튼의 반동——탭의 순간 0.86까지 줄어들었다가 튕겨 돌아온다. 손끝이 눈보다 먼저 “닿았다”를 안다
3. 페이지 전체의 크로스페이드——View Transitions API가 이전 프레임과 새 프레임을 담아, 0.5초에 걸쳐 교차 용해한다. 스킨 교체가 아니라, 세계 전체가 함께 빛을 바꾸는 것이다

하나의 걸쇠

한 세부가 모든 것을 망칠 뻔했다: 이 애니메이션들을 상태에 걸면, 첫 렌더링 때 스스로 재생되어 버린다——아무도 페이지를 보기도 전에, 아이콘이 혼자 회전해버린 것이다.

해법은 걸쇠다: theme-switched 클래스는 사용자가 진짜로 처음 누른 뒤에만 붙는다. 애니메이션은 인터랙션을 위해 존재하지, 렌더링을 위해서가 아니다.

저하는 품위의 일부

prefers-reduced-motion 사용자에게는 깔끔한 즉시 전환을. 미지원 브라우저는 페이지 크로스페이드를 자동으로 건너뛰고, 아이콘 애니메이션은 유지된다. 모든 사용자가 완전한 기능을 받는다——템포만 다를 뿐이다.

모션은 보고 싶은 사람에게 주는 선물이지, 모두를 향한 관문이 아니다.