스킬 자체의 표현으로
Apple Design은 Apple의 WWDC 인터페이스 강연, 특히 Designing Fluid Interfaces(WWDC 2018)를 유동적이고 물리적인 웹 UI를 만들기 위한 규칙으로 정제한 것입니다. 드래그, 스와이프, 시트, 스프링, 모멘텀, 중단 가능한 전환, 반투명 재질과 깊이감, 타이포그래피(광학적 크기, 자간, 행간), 모션 감소 동작 등 제스처 기반 인터페이스를 다루는 디자이너와 개발자를 대상으로 합니다.
핵심 원리는 모션이 현재 화면상의 값에서 시작해야 하고, 사용자의 속도를 이어받아 모멘텀을 앞으로 투영해야 하며, 언제든 붙잡고 되돌릴 수 있어야 한다는 것입니다. 스프링은 본질적으로 중단 가능하고 속도를 인식하기 때문에 고정된 지속 시간의 애니메이션을 대체하며, 이 skill은 공통 어휘로 사용되는 Apple의 8가지 디자인 원칙으로 마무리됩니다.
산출물
- :active 상태에서 100ms ease-out 전환으로 컨트롤을 확대하는 프레스 피드백 CSS.
- 임계 감쇠 기본값과 모멘텀 바운스 변형을 나란히 보여주는 모션 스프링 호출.
- 기본값 0.998의 decelerationRate로 모멘텀 투영을 구현하는 project() 헬퍼.
- 반투명 툴바를 불투명 배경으로 교체하고 블러를 없애는 투명도 감소 CSS.
작동 방식
- 01포인터 다운 시 즉시 반응
피드백은 릴리스가 아니라 프레스에 속합니다. 컨트롤이 눌리는 즉시 강조 표시하고, 약 300ms의 탭 지연을 포함해 입력 경로상에서 필수적이지 않은 모든 것을 회귀로 취급합니다.
- 02포인터를 1:1로 추적
캡처를 사용하는 포인터 이벤트를 활용해 포인터가 요소의 경계를 벗어나도 추적이 유지되도록 하고, 요소의 중심으로 스냅시키는 대신 사용자가 붙잡은 지점을 존중해야 합니다.
- 03움직임을 중단 가능하게 만들기
움직이는 요소는 이동 중에도 붙잡을 수 있고 되돌릴 수 있어야 하며, 사용자는 방향을 바꾸기 위해 현재 애니메이션이 끝나기를 기다릴 필요가 없어야 합니다.
- 04스프링으로 움직임을 모델링하기
스프링은 목표값을 바꾸는 것만으로 새 입력을 받아들이므로 움직임이 계속 이어집니다. 고정 시간 스크립트에는 다시 목표로 삼을 대상이 없습니다.
- 05릴리스 속도를 그대로 전달하기
드래그와 애니메이션 사이에 이음새가 생기지 않도록, 놓는 순간의 포인터 속도를 스프링에 그대로 전달합니다. API가 상대 속도를 요구할 경우 남은 거리로 정규화합니다.
- 06모멘텀을 계산한 뒤 스냅시키기
손가락을 놓은 위치에서 그대로 스냅시키지 마십시오. 스크롤 감속처럼 정지 위치를 예측하고, 그 예측 지점에서 가장 가까운 스냅 대상을 선택하십시오.