Apple WWDC18 — Designing Fluid Interfaces

한 줄 요약

iPhone X의 유체 제스처 인터페이스를 사례로, 인터페이스가 빠른 것만이 아니라 사용자의 생각과 손동작을 직접 이어 주고, 물리적 세계처럼 연속적·예측 가능하게 반응하도록 만드는 모션·제스처 원칙을 설명하는 Apple WWDC18 세션이다.

세션 개요

Apple Human Interface 팀의 Chan, Marcos, Nathan이 발표한다. Apple은 유체감을 단순한 60fps 문제로 보지 않는다. 도구가 마음의 확장처럼 느껴지려면 입력과 결과 사이의 지연이 없어야 하고, 콘텐츠가 손가락에 붙어 움직이며, 사용자가 방향을 바꾸거나 중간에 개입해도 흐름이 끊기지 않아야 한다.

핵심 원칙

직접 조작과 즉각적 피드백

제스처와 콘텐츠가 1:1로 연결되어야 한다. 사용자가 화면의 일부를 움직일 때 콘텐츠가 손가락을 따라가야 하며, 손가락 위치·속도·방향 같은 입력 정보가 지속적으로 반영되어야 한다. 제스처가 끝난 뒤에만 결과를 보여 주는 방식은 유체감을 약화한다.

Interruptibility와 redirection

Apple이 반복해서 보여 주는 중요한 특성은 진행 중인 움직임을 언제든 다시 잡고 다른 방향으로 돌릴 수 있다는 점이다. 앱 전환과 홈 이동처럼 겹치는 제스처를 각각 끝낸 뒤 다음 동작을 시작하는 대신, 하나의 연속된 동작으로 해석한다. 사용자의 생각과 제스처가 병렬로 진행되므로 인터페이스도 입력을 잠그지 않아야 한다.

Behavior over fixed animation

발표는 미리 정해진 keyframe보다 입력과 상태에 따라 계속 계산되는 동적 behavior를 강조한다. 움직임은 현재 위치에서 이어지고, 제스처의 속도와 관성이 다음 움직임으로 전달되어야 한다. 이는 고정 duration의 애니메이션보다 spring·물리 기반 모델이 잘 표현한다.

속도·관성·예측

손가락을 놓는 순간의 velocity를 버리지 않고 계속 이어야 한다. 물체를 던지면 release 위치가 아니라 속도와 감속을 바탕으로 얼마나 더 이동할지 예측하듯, flick·scroll·dismiss 동작도 사용자의 의도를 미래 궤적으로 해석한다. 이때 motion은 사용자의 제스처 방향을 암시해 다음 상태를 이해하게 해야 한다.

경계와 자연스러운 저항

화면 끝이나 콘텐츠 경계에서 딱 멈추면 시스템이 얼어붙은 것처럼 보인다. 대신 rubber-band와 같은 점진적 저항을 사용하면 “더 갈 수는 없지만 여전히 반응하고 있다”는 감각을 준다.

연속성, 공간성, seamless motion

화면 전환은 서로 무관한 장면 교체가 아니라 하나의 연속된 공간 변화처럼 보여야 한다. 위치·크기·속도·방향이 갑자기 바뀌지 않도록 하고, 새로운 화면 요소는 앞선 동작의 의미와 위치를 이어받아야 한다. 발표는 timed animation과 사용자의 gesture가 자연스럽게 연결되는 seamless motion을 여러 데모로 설명한다.

웹 개발로 번역할 때

Pointer Events와 pointer capture로 입력이 요소 경계를 벗어나도 추적한다.
현재 presentation value에서 새 전환을 시작해 중간 개입 시 점프를 피한다.
drag 종료 velocity를 spring의 초기 velocity로 넘긴다.
transform과 opacity 중심으로 애니메이션하고 display-synced loop를 사용한다.
하드 스톱 대신 rubber-band 저항을 구현한다.
제스처 시작부터 가능한 의도를 병렬로 감지하고, 확정된 뒤 경쟁하는 인식을 취소한다.

이 번역은 Emil Kowalski의 apple-design 스킬에서 웹용 규칙으로 구체화되어 있다. 다만 Apple 세션의 원칙과 특정 웹 라이브러리의 API는 동일하지 않으므로, 구현 시 플랫폼의 입력 모델과 접근성 요구를 다시 검증해야 한다.

LLM Wiki

탐색기