모션 디자인 원칙에 대한 가이드

 

모션은 디지털 제품의 사용자 경험에 큰 영향을 주지만 인터페이스 요소가 기본적인 모션 디자인 원칙을  지키지 않으면 않으면 사용성이 저하된다. 사용자 인터페이스의 맥락에서 모션은 시각적인 장식 이상이다. 제품 참여를 강화하고 디자인 커뮤니케이션의 범위를 확장하는 강력한 힘이라고 할 수 있다.

 

 

우리가 사는 세계는 하나의 움직임이라고 할 수 있다. 찰나의 순간에도 잎이 떨리고 폐가 움직이며 숨을 쉰다. 디지털 제품 디자인의 영역에서 모션은 손쉽게 일상을 연장해서 만든 제2의 자연인 것처럼 보인다.

UI 요소에 애니메이션을 처음 만들어 보면 몇 시간 동안 만들어 보았지만 아마추어 같은 결과가 나오곤 한다. 카드가 화면에서 미끄러지는 것 같은 단순한 동작도 어색해 보인다. 왜 그럴까?

이론적으로 UI 요소를 움직이게 하는 것은 간단하다. 미리 정해진 경로에 시작과 끝점을 정의하면 소프트웨어가 그 사이를 동작으로 연결시키는 애니메이션을(tween) 만든다. 하지만 현실 세계와는 다르게 동작한다. 도구와 기술은 필수적이지만 원칙이 적용되어야 힘을 얻는다. 모션으로 디지털 제품의 사용성을 향상하려고 한다면 무수한 사용 사례에 적용될 수 있는 변하지 않는 행동 규칙을 기반으로 해야 한다.

 

 

모션 디자인의 기원

 

 

모션 디자인과 UX의 결합은 비교적 새로운 현상이라고 할 수 있지만 그 뿌리는 디즈니에 있다. Frank Thomas와 Ollie Johnston은 월트 디즈니의 가장 높이 평가되는 애니메이터 이자 Pinnochio , Bambi , Fantasia와 같은 고전 작품의 주요 제작자 중 한 명이다. 애니메이션의 12 가지 기본 원칙은 영화, TV 및 디지털 콘텐츠의 모션 그래픽에 여전히 영향을 미치고 있다.

디즈니 원칙은 애니메이션 스토리 텔링을 위해 물리적 동작의 필수 법칙을 적용한다. 그 법칙들은 그려진 캐릭터가 움직이면서 감정을 표현할 수 있도록 해 주지만 현대 사용자 인터페이스의 인터렉티브 한 모션의 니즈를 충분히 만족시켜주지는 못한다.

디자이너들은 이 차이를 해소하려고 노력했다. 애니메이션 전문가 Jorge R. Canedo Estrada 가 디즈니를 각색 한 모션 디자인의 10 가지 원칙이 좋은 예시이다. 그러나 이 원칙도 디지털 제품 디자인에 전체적으로 적용하기 위해서는 조정이 필요하다.

 

• Gif 이미지 : 10 Principles of Motion Design by Jorge R. Canedo Estrada.
• 애니메이션 12가지 기본 원칙 참고 : https://vimeo.com/93206523

 

Willenskomer는 UX in Motion의 12 가지 원칙을 다음과 같이 수립하였다  :

 

• 모션 디자인과 UI 애니메이션 구분
• 모션이 사용성을 증진시키는 방법에 대한 설명
• 핵심 모션 동작의 작동원리에 대한 분석

 

 

모션 디자인과 UX : 중요한 차이점

 

모션 디자인의 원칙을 다루기 전에 Willenskomer의 선언문 전체에 나타나는 주요 차이점을 이해하는 것이 중요하다.

 

모션은 장식 이상이다

모션 디자인은 UI 애니메이션과 동의어가 아닙니다. 이는 UI 애니메이션이 거의 항상 UX와 관련이 없는 외관을 꾸미는 것으로 인식되기 때문에 중요한 부분이다. 동작은 장식이 아니라 행동(behavior)이며 행동은 사용자 경험을 돕거나 방해할 수 있다.

 

두 가지 상호 작용 유형 : 실시간(Real-time) vs. 비 실시간(Non-real-time)

모션 디자인은 실시간과 비 실시간이라는 두 가지 기본적인 상호 작용과 관련이 있다.

실시간 상호 작용은 사용자가 화면에서 UI 요소를 조작할 때 즉각적인 피드백을 제공한다. 즉, 모션 동작은 사용자 입력에 즉시 반응한다.

비 실시간 상호 작용은 사용자가 입력을 한 후에 발생합니다. 즉, 조작을 계속하기 전에 사용자가 잠시 행동을 중지하고 조작의 결과로 나 나타나는 동작을 지켜봐야 한다.

 

• Gif 이미지 : 실시간 상호 작용 : 모션 동작은 사용자 입력에 즉시 반응한다.
• Gif 이미지 : 비 실시간 상호 작용 : 상호 작용 후 사용자는 잠시 기다렸다가 모션 동작을 볼 수 있다. 

 

모션은 사용성을 향상한다.

모션 디자인은 다음의 4 가지 방식으로 사용성을 향상한다.

 

• 기대(Expectation) : 사용자가 UI 요소와 인터렉션 할 때 어떤 모션을 기대하는가? 모션이 사용자의 기대와 같이 움직이는가, 아니면 혼란을 유발하는가?
• 연속성(Continuity) : 인터렉션이 사용자 경험 전반에 걸쳐 일관되게 동작하는가?
• 내러티브(Narrative) : 인터렉션 및 인터렉션이 만들어내는 모션 동작이 사용자가 의도한 이벤트의 논리적인 진행 순서에 맞춰 일어나는가?
• 관계(Relationship) : UI 요소의 공간적, 미적, 계층적 속성이 서로 연관된 방식이 사용자 의사 결정에 어떤 영향을 미치는가? 모션은 다양한 요소들의 관계에 어떤 영향을 미치는가?

 

 

디지털 제품을 위한 12가지 모션 디자인 원칙

 

 

1. Easing

Easing은 실제 사물의 속도가 시간이 지남에 따라 빨라지거나 느려지는 현상을 나타낸다. Easing은 모션을 보여주는 모든 UI 요소에 적용된다.

Easing의 반대는 선형(Linear) 모션입니다. 선형 모션으로 움직이는 UI 요소는 순간적으로 멈춘 상태에서 최대 속도로, 최대 속도에서 멈춘 상태로 이동합니다. 이러한 행동은 실제 세계 어디에도 존재하지 않으며 사용자에게 멈춰있는 것처럼 보인다.

Gif 이미지 : UI 카드는 빠르게 이동하지만 Easing이 적용되어 매끄럽게 움직인다.

 

2. 오프셋(Offset) 및 지연(Delay)

여러 UI 요소가 동시에 이동하는 경우 사용자는 각 요소들을 유사한 것들로 인식하고, 각 요소에 고유한 기능이 있을 수 있다는 것을 간과하기 쉽다.

오프셋 및 지연은 동시에 이동하는 UI 요소 사이에 계층을 만들어 서로 관련되어 있지만 차이가 있다는 것을 전달한다. 완전히 동일하게 움직이지 않고 타이밍, 속도 및 간격이 엇갈리게 되어 미묘한 “연속”효과가 나타난다.

사용자가 화면 사이를 이동할 때 오프셋 및 지연은 여러 가지 상호 작용이 존재한다는 것을 보여준다.

Gif 이미지 : 이 암호 화폐 앱은 한 번에 여러 UI 요소를 보여준다. 각 요소들은 사용자에게 각 요소들이 연관되어 있지만 구별되어 있는 요소라는 것을 알리기 위해 약간 엇갈리게 표시된다.

 

3. 페어런팅(Parenting)

Parenting은 한 UI 요소의 속성을 다른 요소의 속성에 연결한다. 상위 요소의 속성이 변경되면 하위 요소의 연결된 속성도 변경된다. 모든 요소 속성은 서로 연결될 수 있다.

예를 들면 상위 요소의 위치는 하위 요소의 배율에 연결될 수 있다. 부모 요소가 이동하면 자식 요소의 크기가 증가하거나 감소한다.

Parenting은 UI 요소 간의 관계를 만들고 계층을 설정하며 여러 요소가 사용자와 한 번에 커뮤니케이션할 수 있도록 한다. 이러한 이유로 Parenting은 실시간 상호 작용에 사용될 때 가장 효과가 있다.

Gif 이미지 : 파란색 슬라이더의 위치는 배경의 불투명도, 전구 주변의 광선 효과 확산 및 조명 강도 눈금의 숫자 값을 제어한다.

 

4. 변환(Transformation)

하나의 UI 요소가 다른 요소로 바뀔 때 변환이 발생한다. 다운로드 버튼이 프로그래스 바로 바뀐 후 완료 아이콘으로 바뀌는 것이 변환의 예이다.

UX 관점에서 변환은 목표 대비 사용자의 상태를 보여주는 효과적인 방법이다. 이는 UI 요소가 시작과 종료가 있는 프로세스 (예 : 파일 다운로드)에 연관되어있을 때 특히 유용하다.

Gif 이미지 : UI 요소가 변환되며 다운로드의 시작, 중간 및 완료를 나타낸다.

 

5. 값의 변화(Value Change)

값을 표현(숫자, 텍스트 기반 또는 그래픽)하는 것은 디지털 인터페이스에서 많이 볼 수 있으며, 은행 앱에서 개인 캘린더, 전자 상거래 사이트까지 다양한 제품에서 볼 수 있다. 이러한 표현은 실제 데이터와 연동되어 변화한다.

값의 변화는 동적으로 변화하는 데이터의 속성을  전달함으로써 사용자에게 데이터가 상호 작용하며 영향을 받을 수 있다는 것을 알려준다. 움직임 없이 값이 변화하면 사용자가 데이터와 상호작용 할 수 있다는 느낌이 줄어든다.

Gif 이미지 : 모션과 함께 값이 도입되어 사용자가 데이터에 영향을 미칠 수 있다는 것을 보여준다.

 

6. 마스킹(Masking)

마스킹은 UI 요소의 일부를 전략적으로 드러내거나 숨기는 것이다. 요소 경계의 모양과 크기를 변경함으로써 마스킹은 요소를 식별 가능하게 유지하면서 사용 맥락이 바뀌었다는 것을 알려준다. 사진 및 일러스트레이션의 세부적인 부분을 보여주는 것이 좋은 예이다.

사용성 관점에서 마스킹을 사용하여 일련의 인터렉션 과정에서 사용자가 진행하고 있는 부분을 보여줄 수 있다.

Gif 이미지 : 캡처한 이미지를 포함한 결과를 나타내는 인터렉션을 보여주기 위해 마스킹이 사용되었다.

 

7. 오버레이(Overlay)

2D 공간에는 깊이가 없어서 UI 요소가 X 또는 Y 축을 따라서만 이동할 수 있다. 오버레이는 UI의 2D 공간에서 전경과 배경이 구분되는 것처럼 보여준다. 오버레이는 깊이를 표현함으로써 사용자의 필요에 따라 요소를 숨기거나 표시할 수 있다.

오버레이를 사용할 때는 정보 계층구조를 고려해야 한다. 예를 들어, 사용자가 메모 작성 앱에서 가장 먼저 보게 되는 것은 메모 목록이다. 메모 목록을 보여주고 나서 오버레이를 사용하여 삭제 또는 보관과 같은 각 메시지에 대한 보조 옵션을 보여줄 수 있다.

 Gif  이미지 : 사용자는 오버레이를 통해 노트 앱의 항목을 빠르게 보관하거나 삭제할 수 있다.

 

8. 복제(Cloning)

복제는 하나의 UI 요소가 다른 요소로 분할되는 동작 동작이다. 중요한 정보 또는 상호 작용 옵션을 강조할 수 있는 좋은 방법이다.

인터페이스 내에서 UI 요소가 나타날 때 기존에 존재하는 요소와 이어져 있다는 것을 명확히 표현해 주어야 한다. 요소가 갑자기 나타나거나 사라지면 사용자는 수행하려는 인터렉션에 확신을 가지기 어렵다.

Gif 이미지 : 사용자는 색상이 있는 원이 “노트 추가”아이콘에서 시작된 것임을 분명하게 인식할 수 있기 때문에 자신 있게 원을 클릭할 수 있다.

 

9. 은폐(Obscuration)

젖빛 유리문을 생각해 보라. 열려면 행동이 필요하지만 문 밖에 있는 것을(어느 정도는) 식별할 수 있다.

은폐는 같은 방식으로 작동한다. 사용자에게 인터렉션을 요구하는 인터페이스를 제공하면서 이어지는 화면에 대한 힌트를 표시한다. 탐색 메뉴, 암호 화면 및 폴더 / 파일 창을 일반적인 예로 들 수 있다.

Gif 이미지 : 은폐는 사용자에게 중요한 인터렉션을 제공하면서 다음 화면을 예측할 수 있도록 한다.

 

10. 시차(Parallax)

두 개 이상의 UI 요소가 동시에 이동하지만 속도가 다른 경우 시차가 발생한다. 시차의 의도는 계층을 나타내는 것이다.

인터랙티브 요소는 더 빠르게 움직이며 전경에 나타난다.

Non-인터렉티브 요소는 느리게 이동하고 배경으로 나타난다.

Parallax는 사용자를 인터렉티브 UI 요소로 유도하면서 Non-인터렉티브 요소도 남겨두면서 통합적인 디자인을 만든다.

Gif 이미지 : 시차를 사용하면 가장 중요한 인터렉티브 요소가 가장 빠르게 이동하는 반면 Non-인터렉티브 요소는 느리게 이동하고 배경으로 후퇴한다.

 

11. 차원(Dimensionality)

차원은 마치 실제 세계의 사물과 같이 UI 요소에 여러 개의 인터렉티브 요소가 있는 것처럼 보여준다. 요소를 접거나, 뒤집거나, 떠 있거나, 사실적인 깊이 속성이 부여된 것처럼 보이게 하는 것이다.

차원은 UI 요소의 다른 속성들이 연결되어 화면을 원활하게 전환할 수 있도록 해준다.

Gif 이미지 : 차원은 2D UI 요소가 실제 세계의 사물과 같이 여러 개의 인터렉티브 요소를 가지고 있는 것을 의미한다.

 

12. 돌리와 줌(Dolly and Zoom)

돌리(카메라 이동) 및 줌을 통해 사용자는 UI 요소를 공간적으로 “이동”하거나 크기를 늘려 더 많은 세부 정보를 볼 수 있다.

• 돌리(Dolly) : 돌리는 사용자의 시점이 UI 요소에 가까워지거나 멀어질 때 발생한다. 카메라를 들고 꽃을 가까이서 찍기 위해 걸어가는 사람을 상상해 보라.
• 줌(Zoom) : 줌을 사용하면 사용자의 시점과 UI 요소가 고정된 상태로 유지되지만 화면 내에서 요소의 크기가 커지거나 줄어든다. 사람이 제자리에 있고 카메라의 줌 기능을 사용하여 꽃을 더 크게 보이게 한다고 상상해 보라.

 

돌리 : 사용자의 시점이 배경 이미지에 가까워지는 것처럼 보인다.

줌 : 사용자의 시점이 이미지에 가까워지지 않는다. 이미지의 배율이 증가한다.

 

 

모션은 커뮤니케이션이다.

 

 

인터랙티브한 경험은 활발하면서 섬세한 형태의 움직임을 필요로 한다. 모션 디자인의 원칙이 유지되면 가장 초보적인 UI 요소도 커뮤니케이션을 정교하게 만들어 줄 수 있다. 원칙을 무시하면 모션은 자연계에서 찾을 수없는 모습을 보여준다. 미적으로 화려해 보여도 그로 인해 어설프게 보이게 된다.

모션 디자인과 디지털 제품 UX의 관계는 빠르게 발전하고 있다. 모션에 대한 원칙적인 접근 방식은 트렌드, 도구, 기술의 일시적인 유용성에 과도하게 의존하지 않도록 해준다. 

 

 

원문 출처 : https://uxdesign.cc/a-guide-to-motion-design-principles-7f05f10ccd79

 

김준범님이 브런치에 게재한 글을 편집한 뒤 모비인사이드에서 한 번 더 소개합니다.