모션
모션 (Motion)
모션은 관계와 전환을 정의해 사람들이 변화를 인지하고 목표를 향해 나아가도록 도와줘요. 좋은 모션 디자인은 경험에 인간미(humanity)와 즐거움을 더하면서, 더 정교하고 만족스럽게 만들기도 해요.
출처: 문서
본문
모션 원칙 (Motion principles)
기능적 (Functional)
모션은 경험의 기능성을 위해 목적과 의도를 갖고 적용돼요. 다음 단계를 식별하고, UI의 변화를 알리고, 달성한 것을 축하하는 데 모션을 사용하세요.
자연스러운 (Natural)
Fluent 2 경험의 모션은 관성, 중력, 무게, 속도 같은 물리 법칙을 따라 유동적이고 실제처럼 느껴져요. 이렇게 하면 애니메이션이 더 그럴듯하고 예측 가능해져요.
일관된 (Consistent)
모션 디자인의 일관성은 Microsoft 경험을 통합하고 제품 간 흐름을 개선해요. 일관된 모션은 친숙함을 주고 Fluent의 '분명한 Microsoft' 원칙을 강화해요.
매력적인 (Appealing)
즐거운 애니메이션은 사람들을 끌어들이죠. 모션으로 매력적인 순간을 설계하면 사람들이 제품과 공감하게 되고 더 기억에 남는 경험을 만들어요.
지속 시간과 이징 (Duration and easing)
지속 시간과 이징은 객체가 얼마나 오래 움직이는지, 그리고 이동 중에 속도가 어떻게 변하는지 설명해요. 이 둘을 제대로 맞추면 사람들이 모션을 알아차리고 그것이 전달하는 것을 해석할 충분한 시간을 갖게 돼요.
지속 시간 (Duration)
애니메이션은 너무 느리게 느껴지지도, 너무 갑작스럽지도 않게 균형을 잡아야 해요. 요소의 크기와 이동 거리를 고려해 자연스럽고 빠르게 느껴지게 하세요. 작은 요소보다 큰 요소에 더 많은 시간을 주세요. 사람들을 기다리게 하지 않으면서 빠르고 부드러운 모션을 목표로 해요.
빠르고 자연스러운 지속 시간 사용하기 (Use quick, natural durations)
부자연스러운 지속 시간은 거슬리고 갑작스러울 수 있어요 (Unnatural durations can be jarring and abrupt)
이징 (Easing)
이징은 애니메이션에 균일하고 딱딱한 움직임이 아닌, 자연스럽고 유기적인 느낌을 주는 것이에요. 지연 시간에 적용할 수 있는 여러 유형의 이징이 있어요. 선형(linear), 이즈인(ease-in), 이즈아웃(ease-out), 이즈인아웃(ease-in-out) 등이죠. 올바른 이징 함수를 선택하면 메이커는 자연스럽고 매력적인 애니메이션을 만들어 사용자 경험을 개선할 수 있어요.
선형 이징 (Linear easing)
선형 이징은 애니메이션이 처음부터 끝까지 일정한 속도로 움직인다는 뜻이에요. 이 유형은 부자연스럽게 느껴질 수 있어요. 회전처럼 일관된 속도가 필요한 경우에만 사용하세요.
이즈인 (Ease-in)
이즈인 애니메이션은 천천히 시작했다가 빨라져요.
이즈아웃 (Ease-out)
이즈아웃 애니메이션은 빠르게 시작했다가 느려져요.
이즈인아웃 (Ease-in-out)
이즈인아웃 애니메이션은 천천히 시작하고, 중간에 빨라졌다가, 끝나기 전에 다시 느려져요.
전환, 즉 실제의 모션 (Transitions, or motion in practice)
전환은 애니메이션을 통해 콘텐츠를 도입하거나, 닫거나, 변경해요. 효과적인 UI 모션 디자인의 핵심이죠. 전환은 사람들이 UI가 어떻게 작동하는지 이해하도록 돕고 높은 품질의 룩앤필을 줘요. 모션에 대해 말할 때, 전환이라는 용어는 UI의 대부분의 애니메이션을 설명해요.
우리가 사용하는 가장 흔한 네 가지 전환은 다음과 같아요.
- Enter and Exit (등장과 퇴장)
- Elevation (고도)
- Top level (최상위 레벨)
- Container transform (컨테이너 변형)
등장과 퇴장 (Enter and exit)
등장과 퇴장은 UI의 요소를 도입하거나 닫아요. 이 요소들은 화면 밖에서 또는 화면 경계 안에서 등장하고 퇴장할 수 있어요. 이 패턴은 화면에 나타나고 사라지는 메뉴, 다이얼로그, 다른 상호작용 요소에 흔히 사용돼요.
고도 (Elevation)
고도 패턴은 사용자 인터페이스의 고도나 깊이 변화를 시각적으로 나타내는 데 사용돼요. 이 패턴은 버튼 상태, 드래그 앤 드롭 상호작용, 창, 요소 계층 만들기에 흔히 사용돼요. 고도로 깊이 변화를 나타내면, 화면 요소 간 관계에 대한 시각적 단서를 제공해 명확하고 직관적인 경험을 만들어요.
최상위 레벨 (Top level)
최상위 레벨 전환은 서로 다른 페이지와 목적지 사이를 이동하는 데 사용돼요. 최상위 레벨의 요소는 크고 화면 공간을 많이 차지하므로, UI 요소를 화면에 넣고 빼며 움직이거나 미끄러지게 하는 대신 빠른 페이드 전환을 사용하세요. 이 접근은 UI를 일관되고 명확하게 유지해 의도치 않은 계층과 혼란을 피해요.
컨테이너 변형 (Container transform)
컨테이너 변형은 UI에서 컨테이너 요소의 레이아웃이나 위치를 바꾸는 과정을 말해요. 크기 조정 및/또는 위치 변경을 통해 이루어져요. 컨테이너 변형은 반응형 디자인에서 웹사이트나 앱의 레이아웃을 다양한 화면 크기나 방향에 맞게 조정하는 데 흔히 사용돼요.
안무 (Choreography)
안무(choreography)는 애니메이션에서 움직임의 배열과 순서를 말해요. 안무가 나쁘면 애니메이션이 저렴해 보이거나 끝나기까지 과도한 시간이 걸릴 수 있어요.
스태거링 (Staggering)
스태거링은 하나 이상의 애니메이션의 시작을 지연시키는 과정이에요. 큰 항목 집합의 등장을 부드럽게 하거나, 사람들의 시선을 특정 방향으로 옮기는 데 사용할 수 있어요.
애니메이션을 스태거하는 것이 언제 적절한지, 언제 같은 시간에 끝내야 하는지 주의하세요. 애니메이션의 전체 지속 시간을 염두에 두고 짧은 오프셋을 사용하세요. 같은 콘텐츠를 여러 번 로딩할 때는 다른 애니메이션 오프셋을 사용하는 것을 고려하세요. 더 큰 간격으로 시작해 점차 짧아지게 하며 오프셋을 프로그래매틱하게 변화시키는 것이 적절할 수 있어요. 애니메이션된 부모에 바인딩된 항목 목록을 사용할 때는 부모 애니메이션의 타이밍도 고려하세요.
대부분의 시나리오에서는 스태거 애니메이션이 선호돼요. 스태거가 애니메이션을 끝내는 데 너무 오래 걸리게 만드는 매우 큰 요소 그룹에는 비스태거(non-staggered) 애니메이션만 사용해야 해요.
계층 (Hierarchy)
계층은 요소가 애니메이션되는 순서를 말해요. 애니메이션 계층은 사람들의 주의를 선호하는 순서로 UX 요소에 끌어들일 수 있고, 중요한 영역으로의 내비게이션 흐름을 쉽게 해줘요.
중요한 요소에는 더 두드러진 움직임과 더 긴 지속 시간으로 더 많은 강조를 주세요. 반대로 덜 중요한 요소는 동기화된 타이밍으로 함께 묶어 응집력 있는 시각적 경험을 만들어요.
안무가 집중력을 만드는 데 도움 (Use choreography help build focus)
요소를 함께 움직이면 모호함이 생길 수 있어요 (Moving elements together can create ambiguity)
접근 가능한 모션 디자인 (Accessible motion design)
Fluent의 '하나를 위해, 모두를 위해(one for all, all for one)' 원칙은 UI를 디자인하고 개발하는 모든 측면에서 모든 사람의 요구를 고려한다는 의미예요. 신중한 모션 디자인을 통합하면 우리 제품이 '모든 사람이 더 많은 것을 성취하도록 돕는' Microsoft의 목표에 부합해요.
모션을 인지하지 못하거나 모션에 부정적인 영향을 받을 수 있는 그룹에는 전정 장애(vestibular disorders)가 있는 사람, 저시력자, 화면 읽기 도구 사용자, 또는 시각적 자극에 민감한 사람이 있어요. 다음은 이 그룹들도 앱을 충분히 활용할 수 있게 하는 일반적인 규칙이에요.
WCAG가 권장하듯 앱이나 웹사이트에 '모션 없음(no motion)' 설정을 설계하고 포함하세요.
지속 시간을 짧게 유지하고 움직임을 자연스럽게 하세요.
발작(epileptic seizure)을 유발할 수 있는 플래시, 거슬리는 움직임, 또는 다른 갑작스러운 움직임은 피하세요.
모션을 초점이 있는 요소에 한정하세요. 화면의 다른 영역에 모션을 추가하면 현재 작업에서 주의가 산만해질 수 있어요.
애니메이션으로 전달되는 정보를 전달하는 다른 방법을 고려하세요. 예를 들어 ARIA 라이브 영역(live regions)을 사용해 동적 콘텐츠를 노출하고 알리세요.