모션 — 움직임에도 문법이 있다

화면의 움직임이 하는 일은 셋이다. ① 인과(이 패널이 어디서 나와서 어디로 갔나), ② 피드백(입력을 들었다는 대답), ③ 성격(브랜드의 몸짓). 넷째 역할인 '장식'은 없다. 셋 중 아무것도 안 하는 움직임은 소음이고, 소음은 뺄수록 좋다.

속도에는 통용되는 구간이 있다. UI 전환은 대략 150~300ms다. 100ms 아래는 즉시로 느껴져서 인과가 안 보이고, 500ms를 넘으면 기다림이 시작된다. 작은 요소(버튼·토글)는 짧게, 크고 멀리 가는 것(패널·페이지)은 길게 잡는다. 직접 느껴 보자.

• 이징(easing) — 등속(linear)은 기계 티가 난다. 자연의 물체는 가속하고 감속한다. 들어올 땐 감속(ease-out), 나갈 땐 가속(ease-in)이 기본형이다.
• 스크롤을 훔치지 않는다 — 스크롤 속도를 바꾸거나 가로채는 연출은 사용자의 손을 뺏는 짓이다. 조작감은 언제나 사용자 소유여야 한다.
• 움직임 최소화 설정을 존중한다(15강). 이 데모도 그 설정이면 조용해진다.