디자인 시스템별 모션 원칙 요약
🍎 Apple Human Interface Guideline
애플 휴먼 인터페이스 가이드라인에서 요구하는 모션 원칙은 다음과 같다.
앱의 목적에 필수적이지 않다면 애니메이션을 적용하지 않는다.
일반적으로 애니메이션에 의존하지 않고 앱을 사용할 수 있어야한다.
동작 감소(Reduce Motion)를 켤 경우 애니메이션이 제거된다.
확대, 축소, 회전 또는 여러 동작이 포함된 애니메이션을 산만해지거나 메스꺼움을 겪는 경우 동작 감소기능을 사용할 수 있다. 아래 요소를 고려한다.
바운스 효과를 줄이거나 사용자 손가락에 1:1로 대응하기
Z 축 레이어 변경 - 깊이 효과를 애니메이션 처리하지 않음
블러 In & Out 트랜지션 없음
Slide 옆으로 미는 효과는 Fade 흐리게 나타나기 효과로 대체
사람들이 영상이나 모션 효과를 제어하게 한다.
영상 자동재생이나 효과를 피하기 위해 버튼이나 조작 가능한 행동 유도 장치를 제공한다.
움직이거나 깜박이는 요소를 표시 할 때는 주의한다.
미묘한 움직임이나 깜박임으로 사용자의 시선을 유도할 수 있지만 산만해보일 수 있으며 시각 장애인에게 유용하지 않다.
게다가 깜박거리는 일부 요소는 간질 발작을 일으킬 수 있다. 모든 경우에 정보를 전달하는 유일한 방법으로 움직임이나 깜박임을 사용하지 않는다.
🤖 Google Material Design
구글 머티리얼 디자인은 모션에 대해 세가지 원칙을 가진다. Informative 유익함, Focused 집중, Expressive 표현
이 원칙을 기반으로한 활용법은 다음과 같다.
모션은 계층 요소를 이해하는데 도움이 되어야 한다.
모션은 사용자 행동에 대한 순차적인 피드백과 현재 상태를 제공한다.
모션은 사용방법을 제안한다.
모션은 캐릭터에 상호작용을 부여한다.
Duration
지속시간을 결정하는 요소는 Complexity 복잡성, Exit & Closing 나가기 & 닫기, Area 영역 사이즈로 구분한다.
복잡성은Simple Animation과 Complex Animation으로 나뉜다. Simple Animation은 셀렉션 컨트롤에 해당하는 토글, 체크박스 등은 상태가 변화하는 애니메이션으로 100ms 이다. Complex Animation은 햄버거 아이콘이 닫기로 변하는 것과 같이 형태가 변하는 애니메이션이다. Simple Animation보다 더 긴 200ms~500ms의 지속시간을 가진다.
나가기 & 닫기의 경우 상황을 종료시키는 인터랙션이기 때문에 진입 애니메이션보다 항상 퇴장 애니메이션의 속도가 빠르다.
영역 사이즈는 컴포넌트의 사이즈가 클 수록 지속시간이 길어진다.
Easing
Standard 표준 이징, Decelerate easing 감속 이징, Accelerate easing 가속 이징 으로 나뉜다.
표준 이징은 가속보단 감속을 더 길게 해 애니메이션이 끝날 때 집중시킨다.
💻 IBM Carbon Design System
IBM 카본 디자인 시스템에서 모션은 커뮤니케이션과 사용자 경험을 쌓는 강력한 도구이다. 모션은 복잡한 경험을 제안하고 사용자가 나아갈 수 있도록 도와준다.
Basic
Style
IBM에서 모션은 크게 Productive Motion 생산적 모션과 Expressive Motion 표현적 모션 두가지 스타일로 분류한다.
생산적 모션: 사용자가 업무를 마치는데 집중하는 순간에 적절하다. 버튼의 상태, 드롭다운, 추가적인 정보 확인, 표를 시각화는 등의 마이크로인터랙션에 적용한다.
표현적 모션: 사용자의 시선을 끌고 생산적인 경험 사이에 리드미컬한 휴식을 위해 중요한 순간에 가끔씩 적용한다. 새 페이지 열기, 중요한 버튼 클릭, 시스템 얼럿, 노티피케이션 박스등의 중요한 순간에 사용한다.
Easing
카본 디자인 시스템은 자연스러움과 효율성을 중시하기 때문에 Linear, Elastic (스프링), Bouncing 은 사용하지 않는다.
기본 Standard-easing, 진입 Enterance-easing, 퇴장 Exit-easing을 지원한다.
Duration
지속시간은 스타일과 모션의 사이즈에 따라 계산한다. 생산적인 모션은 표현적인 모션보다 더 빠르다. 더 먼거리를 이동하거나 사이즈를 크게 변경할 수록 지속시간은 길어진다.
IBM Motion Generator (모션 제너레이터)를 이용해 지속시간을 커스텀 해보고 모션스펙을 확인할 수 있다.
Choreography
🖼 Microsoft Fluent Design System
마이크로소프트 플루언트 디자인시스템에서 모션 원칙은 다음과 같다.
Physical 물리적, Functional 효율적, Continuous 연속적, Contextual 문맥적
Timing & Easing
타이밍은 UI에서 진입, 종료 또는 이동하는 객체에 대해 동작을 자연스럽게 만드는 중요한 요소이다.
화면에 진입하는 오브젝트나 배경은 빠르지만 확실히 보여야 한다. 일반적으로 화면에서 계층구조를 보여주기 위해 진입이 퇴장보다 더 많은 시간을 사용한다.
퇴장하는 오브젝트나 배경은 매우 빨라야 한다. 사용자는 UI가 어디로 사라졌는지 알아야 한다. 하지만 UI를 없앤다면 최대한 빠르게 없어져야 한다.
화면에서 전환되는 오브젝트는 이동하는 만큼 적절한 지속시간을 사용해야한다.
Fluent 모션의 타이밍
Fluent 모션 타이밍은 사용자가 순간으로 인식하는 최대 시간이기 때문에 기준으로 500ms (0.5 초)를 사용한다. 이 수치는 사용자가 순간으로 감지하는 최대 시간이다. 종료는 150ms, 진입은 300ms, 이동은 500ms보다 같거나 작은 속도를 사용한다.
Easing
플루언트에서 진입은 감속, 퇴장은 가속, 이동은 표준 이징(easeInOut)을 사용한다.
Last updated
