모션의 기본: 지속시간 · 이징 · 전환
Microsoft가 모션을 사용하는 방법
모션이 적용되는 마이크로소프트의 다양한 제품들마이크로소프트가 모션을 사용하는 방법
디자인 시스템의 파운데이션 중 하나인 모션(Motion)은 단순한 시각적 효과를 넘어, 사용자의 주의를 끌고 맥락을 전달하며 사용성을 향상시키는 핵심 도구입니다.
마이크로소프트는 Fluent 2 디자인 시스템을 통해 이러한 모션의 원칙을 체계화하고 있으며, 그 중심에는 지속시간(Duration), 이징(Easing), 전환(Transition), 동작 배열(Choreography)과 같은 핵심 요소들이 있습니다.
이번 글에서는 마이크로소프트의 모션 원칙을 바탕으로, 이 네 가지 요소가 어떻게 모션을 설계하고 경험을 완성하는지 함께 살펴보겠습니다. (본문에 동적 이미지가 포함되어 모바일보다 PC에서 더 원활하게 작동될 수 있습니다.)
마이크로소프트의 모션 원칙
모션은 관계와 전환을 정의하여 사람들이 변화를 인식하고 목표를 향해 나아가도록 돕습니다. 좋은 모션 디자인은 경험에 인간적인 감성과 즐거움을 더하고, 더 정교하고 만족스러운 느낌을 줄 수 있습니다. 마이크로소프트가 정의하는 네 가지 모션 원칙에 대해 먼저 알아보겠습니다.
Functional (좌) · Natural (우)Functional(기능적인)
모션은 경험의 기능을 지원하기 위해 목적과 의도를 가지고 적용됩니다. 다음 단계가 무엇인지 식별하고, UI에서 어떤 변화가 있었는지 알리며, 사용자가 달성한 성과를 축하하는 데 모션을 사용할 수 있습니다.
Natural(자연스러운)
Fluent 2의 경험에서 모션은 관성, 중력, 무게, 속도 같은 물리 법칙을 따름으로써 유연하고 실제처럼 느껴집니다. 이는 애니메이션을 더 신뢰할 수 있고 예측 가능하게 만듭니다.
Consistent (좌) · Appealing (우)Consistent(일관된)
모션 디자인에서의 일관성은 마이크로소프트의 경험을 하나로 통합하고, 제품 간의 흐름을 개선합니다. 일관된 모션은 익숙함을 제공하고 Fluent의 디자인 원칙인 ‘확실히 마이크로소프트다운(Unmistakably Microsoft)’ 원칙을 강화합니다.
Appealing(매력적인)
즐거운 애니메이션은 사람들의 관심을 끌어당깁니다. 모션을 사용해 매력적인 순간을 디자인하면 사용자가 제품에 더 친근감을 느끼고 기억에 남는 경험을 만들어낼 수 있습니다.
요소의 크기, 이동 거리를 고려한 자연스러운 모션이 필요합니다.Duration(지속시간)
애니메이션은 느려서 지루하거나 너무 빨라서 갑작스럽게 느껴지지 않도록 균형을 맞춰야 합니다. 요소의 크기와 이동 거리를 고려하여 자연스럽고 빠르게 느껴지도록 만들어야 하며, 큰 요소는 작은 요소보다 더 긴 애니메이션 시간이 필요합니다. 사람들을 기다리게 하지 않으면서도 빠르고 부드러운 모션을 목표로 합니다.
빠르고 자연스러운 지속시간(좌)과 부자연스러운 지속시간(우)왼쪽처럼 빠르고 자연스러운 지속시간을 사용해야 합니다. 오른쪽처럼 부자연스러운 지속시간은 거슬리고 갑작스럽게 느껴질 수 있습니다.
Easing(이징, 완화)
이징은 애니메이션에 일정하고 뻣뻣한 움직임이 아닌 자연스럽고 유기적인 느낌을 부여합니다. 애니메이션에는 선형(linear), ease-in, ease-out, ease-in-out과 같은 다양한 이징 유형을 적용할 수 있습니다. 적절한 이징 함수를 선택하면 애니메이션이 자연스럽고 매력적으로 느껴져 사용자 경험이 향상됩니다.
Linear easing (선형 이징)
선형 이징은 애니메이션이 시작부터 끝까지 일정한 속도로 움직인다는 의미입니다. 이 방식은 부자연스럽게 느껴질 수 있으므로, 회전과 같이 일정한 속도가 필요한 경우에만 사용합니다.
주로 사용되는 경우: 로딩 스피너의 회전, 반복되는 애니메이션 루프, 일정 속도의 회전 등
특징: 일관된 속도, 예측 가능하지만 감성적 요소는 낮음
주의점: 자연스럽지 않기 때문에, 대부분의 UI 전환에는 적합하지 않음
Ease-in (이즈 인)
Ease-in 애니메이션은 느리게 시작해서 점점 빨라집니다. 마치 무거운 물체가 힘을 받아 점점 가속되는 듯한 효과를 주기 때문에, 새로운 요소가 등장할 때 자주 사용됩니다.
주로 사용되는 경우: 화면 외부에서 요소가 등장할 때, 팝업이 튀어나올 때 등 특징: 출발이 부드럽고, 뒤로 갈수록 에너지가 느껴짐
장점: 사용자의 주의를 차분하게 끌어오며 몰입도를 높임
Ease-out (이즈 아웃)
Ease-out 애니메이션은 빠르게 시작해서 점점 느려집니다. 어떤 요소가 멈추거나 사라질 때, 또는 최종 위치에 안착할 때 자주 사용됩니다.
주로 사용되는 경우: 버튼을 눌렀을 때의 반응, 요소가 퇴장하거나 멈출 때
특징: 안정감 있는 마무리, 마지막 지점에서의 인지 시간을 확보
장점: 동작을 마무리하는 데 안정감과 신뢰감을 줌
Ease-in-out (이즈 인 아웃)
Ease-in-out 애니메이션은 느리게 시작해서 중간에 빨라졌다가 끝에서 다시 느려집니다. 동작 전체가 자연스럽게 이어지므로 화면 전환이나 인터페이스 전반에서 자주 사용됩니다.
주로 사용되는 경우: 화면 전환, 모달 열기/닫기, 대부분의 자연스러운 인터랙션
특징: 시작과 끝 모두 부드럽고, 중심에서는 속도가 살아 있음
장점: 사용자의 흐름을 방해하지 않고 매끄럽게 연결함. 균형감 있는 인터랙션에 적합
Transitions(전환)
전환은 애니메이션을 통해 콘텐츠를 등장시키거나 사라지게 하거나 변경합니다. 전환은 효과적인 UI 모션 디자인의 핵심입니다. 전환은 사람들이 UI의 작동 방식을 이해하도록 돕고, 고품질의 느낌을 부여합니다. 마이크로소프트가 사용하는 네 가지 일반적인 전환은 다음과 같습니다.
등장과 퇴장을 표현하는 전환Enter and Exit (등장 및 퇴장)
화면에 요소를 등장시키거나 사라지게 합니다. 이 요소들은 화면 밖에서 들어오거나 화면 안에서 사라질 수 있습니다. 이 패턴은 메뉴, 다이얼로그, 기타 상호작용 요소들이 화면에 나타났다 사라질 때 주로 사용됩니다.
깊이나 높이를 변화시키는 전환Elevation (깊이 변화)
Elevation 패턴은 UI에서 깊이나 높이의 변화를 시각적으로 나타냅니다. 이 패턴은 버튼 상태, 드래그 앤 드롭 인터랙션, 윈도우, 계층 구조 생성 등에 자주 사용됩니다. 깊이의 변화를 통해 사용자가 요소 간의 관계를 쉽게 인식할 수 있도록 도와줍니다.
빠른 페이드를 통한 전환Top level (최상위 화면 전환)
Top level 전환은 서로 다른 페이지나 목적지 간을 이동할 때 사용됩니다. Top level의 요소는 화면에서 큰 공간을 차지하므로, UI 요소를 슬라이드 하거나 움직이기보다는 빠른 페이드 전환을 사용합니다. 이 접근 방식은 UI의 일관성을 유지하고, 의도하지 않은 계층 구조나 혼란을 피할 수 있도록 도와줍니다.
컨테이너의 레이아웃이나 위치를 변경하는 전환Container transform (컨테이너 변환)
Container transform은 UI 내 컨테이너 요소의 레이아웃이나 위치를 변경하는 것을 의미합니다. 이는 크기 조정이나 위치 변경을 통해 이루어집니다. 컨테이너 변환은 반응형 디자인에서 자주 사용되며, 웹사이트나 앱의 레이아웃을 다양한 화면 크기나 방향에 맞게 조정할 때 활용됩니다.
Choreography (동작 배열)
Choreography는 안무라는 뜻으로, 여기서 말하는 코레오그래피는 애니메이션 내 움직임의 배열과 순서를 말합니다. 잘못 구성된 코레오그래피는 애니메이션이 조악해 보이거나, 전환이 지나치게 길게 느껴질 수 있습니다.
Staggering (계단식 애니메이션)
Staggering은 하나 이상의 애니메이션 시작을 지연시키는 과정입니다. 이는 많은 항목이 한꺼번에 나타날 때 부드럽게 보이도록 하거나, 사람들의 시선을 특정 방향으로 유도하는 데 활용할 수 있습니다.
계단식 애니메이션을 활용하여 집중을 유도(좌) · 요소가 함께 움직여 모호함을 유발(우)애니메이션을 계단식으로 분산시킬지, 동시에 종료되게 할지는 상황에 따라 적절히 판단해야 합니다. 전체 애니메이션 지속시간을 염두에 두고, 애니메이션 사이의 오프셋은 짧게 유지해야 합니다. 동일한 콘텐츠를 반복적으로 로드할 경우, 서로 다른 애니메이션 오프셋을 적용하는 것도 고려할 수 있습니다. 간격을 점점 좁히는 식으로 오프셋을 프로그래밍하는 것이 적절할 수 있습니다. 애니메이션 부모 요소에 바인딩된 항목 리스트가 있다면, 부모의 타이밍도 함께 고려해야 합니다.
대부분의 경우 계단식 애니메이션이 바람직합니다. 요소가 너무 많아 계단식으로 표현하면 시간이 너무 오래 걸리는 경우에만, 동시 애니메이션을 사용할 수 있습니다.
Hierarchy (위계)
Hierarchy는 요소가 애니메이션 되는 순서를 의미합니다. 애니메이션의 계층 구조를 설정하면 사용자에게 중요한 UX 요소로 시선을 유도하고, 중요한 영역으로의 탐색 흐름을 자연스럽게 만들 수 있습니다.
중요한 요소에는 더 두드러진 움직임과 더 긴 지속시간을 적용해야 합니다. 중요도가 낮은 요소는 동시에 움직이도록 그룹화하여 시각적으로 통일된 흐름을 만들 수 있습니다.
기준에 대해서는 충실하지만, 마이크로소프트만의 고유한 모션에 대해서는 부족해 보입니다.모션은 시각적 만족을 넘어, 인터페이스의 흐름을 정의하고 사용자의 행동을 유도하는 중요한 설계 요소입니다. 잘 설계된 모션은 사용자 경험 속에 자연스럽게 스며들며, 그 존재를 의식하지 않더라도 기능과 감성을 동시에 전달하는 역할을 수행합니다.
마이크로소프트는 Fluent 2 디자인 시스템을 통해 모션의 목적과 역할을 명확히 규정하며, 이를 구성하는 기본 요소들을 제시하고 있습니다. 전환 유형과 코레오그래피에 대한 설명은 모션을 설계할 때 실질적인 참고가 될 수 있어보입니다.
다만, 기본적인 내용에 국한되어 마이크로소프트만의 고유한 모션에 대해서는 찾기 다소 어렵다는 생각이 듭니다. 그럼에도 이러한 원칙과 개념에 대한 정의는 더 나은 제품을 만들기 위한 기준이 될 수 있다는 데에는 의의가 있는 것 같습니다.
마이크로소프트 모션에 대한 자세한 내용은 아래에서 자세히 확인하실 수 있습니다.
