인터페이스 모션 시스템

인터페이스 모션 시스템은(는) 무엇을 하나요?

목적

인터페이스 모션 시스템은 '기능적 모션'(functional motion), 즉 사용자 인터페이스에서 특정 목적을 위해 움직임을 설계하는 방법론을 제공합니다. 장식적 애니메이션을 넘어 지속 시간(duration), 이징 곡선(easing curve), 안무(choreography) 체계를 확립하여 사용자가 공간적 관계를 이해하고, 액션에 대한 피드백을 제공하며, 컨텍스트 전환 시 인지 부하를 줄이는 데 도움을 줍니다.

사용 사례

• UI 라이브러리를 위한 표준 전환 타이밍 및 곡선 정의.
• 복잡한 레이아웃 전환(예: 카드를 전체 화면으로 확장) 설계.
• 사용자 액션에 대한 피드백 모션(예: 성공 체크마크, 로딩 스피너) 구축.
• UI 레이어(Modals, Drawers, Toasts)의 진입 및 퇴장 안무.
• 특정 요소나 변경 사항으로 주의를 유도하기 위해 모션 사용.

사용하지 말아야 할 경우

• 정적 브랜드 미학만 있는 경우: 특정 분위기(예: 미니멀리즘, 브루탈리즘, '종이 같은' 디자인)를 전달하기 위해 의도적으로 모션을 피하는 시각적 스타일.
• 순수 장식적 '쓸모없는' 애니메이션: 기능적 가치가 없고 사용자의 주요 작업을 방해하는 애니메이션(예: 상호작용 없이 움직이는 배경 요소).
• 고지연 환경: 모션 렌더링의 성능 비용이 UX 이점보다 커서 '끊김'이나 지연이 발생하는 환경.

입력

1. 브랜드 성격: 모션이 '빠르고 생산적인'(Snappy/Productive)(빠르고 선형)가 아니면 '자연스럽고 유연한'(Natural/Fluid)(탄력 있고 부드럽고 유기적)인가?
2. 상호작용 맥락: 무엇이 움직이는가? (원자적 요소, 컨테이너, 또는 전체 페이지).
3. 트리거 유형: 모션이 시스템(로딩), 사용자(클릭/호버), 또는 환경(스크롤)에 의해 트리거되는가?
4. 플랫폼 기능: 대상 브라우저나 장치의 기술적 제약.

출력

1. 지속 시간 스케일: 표준화된 타이밍 토큰 세트(예: motion-fast, motion-standard, motion-slow).
2. 이징 팔레트: 다양한 모션 의도를 위한 정의된 베지어 곡선 세트(예: ease-in, ease-out, emphasized).
3. 안무 규칙: 요소가 진입, 퇴장, 그리고 서로에 대해 어떻게 움직이는지에 대한 표준.
4. 모션 토큰 명세: 개발자를 위한 모션 변수 문서.

워크플로

1. 지속 시간 스케일 설정

변경 크기에 기반한 논리적 타이밍 진행 생성:

• 빠름 (100–150ms): 마이크로 인터랙션 및 원자 상태(Hover, Toggle, Active)용.
• 표준 (200–300ms): 중간 크기 전환(Dropdowns, Tooltips, 소규모 확장)용.
• 느림 (350–500ms): 큰 레이아웃 변경 또는 몰입형 전환(Modals, 페이지 수준 변경)용.

2. 이징 곡선 정의

서로 다른 베지어 곡선에 의미론적 의미 부여:

• 표준 (Ease-in-out): 뷰포트 내 한 지점에서 다른 지점으로 이동하는 요소용.
• 진입 (Ease-out): 뷰포트에 나타나거나 진입하는 요소용 (빠르게 시작하고 느리게 끝나 반응성 느낌 제공).
• 퇴장 (Ease-in): 사라지거나 뷰포트를 떠나는 요소용 (느리게 시작하고 빠르게 끝나 목적성 느낌 제공).
• 강조 (복합): 고품질 느낌이 필요한 주요 전환을 위한 사용자 정의 곡선(예: cubic-bezier(0.4, 0, 0.2, 1)).

3. 공간적 멘탈 모델 설계

모션을 사용하여 요소가 어디서 왔고 어디로 가는지 설명:

• 방향 연속성: 드로어가 오른쪽에서 슬라이드 인하면 반드시 오른쪽으로 퇴장해야 함.
• 부모-자식 관계: 자식 요소(예: 메뉴)는 이상적으로 부모 요소(버튼)에서 시작해야 함.

4. 시퀀스 안무 (스태거링)

여러 요소가 동시에 나타날 때 '팝인' 효과 방지:

• 스태거링: 각 요소 사이에 약간의 지연(20–50ms)을 두어 특정 순서로 시선 유도.
• 방향 스태거: 읽는 방향(위에서 아래로 또는 왼쪽에서 오른쪽)으로 항목 스태거링.

5. 접근성 계획 (축소 모션)

모션은 포용적이어야 함:

• '사전 점검': OS 수준에서 '축소 모션'이 활성화된 사용자를 위한 대체 방안 항상 정의.
• 대체 시각 효과: prefers-reduced-motion이 활성화된 경우 모션을 불투명도 페이드 또는 애니메이션 없음으로 대체.

의사 결정 규칙

• '기능 우선' 규칙: 모션이 사용자에게 무엇을 알려주는지 설명할 수 없다면 제거하라.
• 반응형 타이밍: 모바일과 같은 작은 화면에서는 요소가 이동하는 물리적 거리가 더 짧기 때문에 지속 시간을 더 짧게 설정.
• 액션에 대한 속도 우선: 상호작용 피드백(예: 버튼 클릭)은 결과 전환이 더 길더라도 즉각적으로 느껴져야 함(<100ms).
• 무한 루프 금지: 활성 상태이면서 백그라운드를 차단하는 상태를 나타내지 않는 한, 멈추지 않는 루핑 애니메이션(스피너, 펄스)은 피하라.

제약 조건

• 접근성: prefers-reduced-motion을 존중해야 함. 모션은 발작을 유발해서는 안 됨(빠른 깜빡임이나 대규모 고주파 패턴 피할 것).
• 성능: 60fps 성능을 보장하기 위해 '컴포지터 전용(Compositor-only)' 속성(transform 및 opacity)만 사용. width, height 또는 margin 애니메이션은 피할 것.
• 일관성: 전체 사이트에서 동일한 컴포넌트 유형에 동일한 지속 시간과 이징을 사용.

일반적인 실패 패턴

• '멀미' 함정: 전정기관 불편을 유발하는 크고 광범위한 움직임(예: 전체 페이지 슬라이딩) 사용.
• 느린 인터페이스: 지속 시간을 너무 길게 설정(예: 메뉴에 1초)하여 사용자가 기다리게 하고 사이트가 고장난 것처럼 느끼게 함.
• 선형 모션: 물리 세계의 가속/감속과 비교하여 기계적이고 부자연스럽게 느껴지는 '선형' 이징 사용.
• 혼란스러운 방향: 중앙에서 '성장'하지만 아래쪽으로 '슬라이드'하여 퇴장하는 모달, 사용자의 공간 모델을 깨뜨림.
• '지터' 효과: 스태거링 지연이 너무 길어 페이지가 느리게 로딩되는 것처럼 느껴지게 함.

검증 기준

• 모든 전환에 정의된 지속 시간 및 이징 토큰이 있음.
• 지속 시간이 전환 크기에 비례함 (작으면 빠름, 크면 느림).
• 모션이 명확한 공간적 멘탈 모델을 지원함 (논리적 진입/퇴장).
• 다중 요소 표시 시 시선 유도를 위해 스태거링이 사용됨.
• 접근성: prefers-reduced-motion이 명확한 단순화 전략으로 처리됨.
• 성능: 빈번한 애니메이션에 transform과 opacity만 사용됨.
• 피드백 모션(예: 버튼 클릭)이 100ms 이내에 시작됨.