모션 디자인이 어려울 필요는 없습니다.(Motion Design Doesn’t Have to Be Hard)

이 글은 Jonas Naimark Motion Design Doesn’t Have to Be Hard 글을 번역했습니다. 저의 모든 글은 허가를 받고 진행 하였습니다.

모션은 UI를 표현하고 사용하기 쉽게 도와줍니다. 많은 잠재력을 가지고 있음에도 불구하고, 모션은 아마도 모든 디자인 분야들 중에서 가장 이해되지 않을 것입니다. 이는 UI 디자인 제품군의 최신 구성 요소 중 하나이기 때문일 수 있습니다. 시각 및 상호작용 설계는 초기 GUI로 거슬러 올라가지만 모션은 현대 하드웨어가 애니메이션을 부드럽게 렌더링할 때까지 기다려야 했습니다. UI 모션과 기존 애니메이션 간의 겹침 역시 혼란스럽게 합니다. 디즈니의 12가지 기본 원칙(12 basic principles)을 익히는 데 일생 일대의 시간을 할애해야 할 수 있습니다. 이는 UI 동작이 비슷하게 복잡하다는 것을 의미하는가? 사람들은 종종 저에게 모션 디자인을하는 것은 복잡하거나 올바른 가치를 선택하는 것이 모호하다고 말합니다. 저는 UI에 가장 중요한 영역에서는 모션 설계가 단순할 수 있고 단순해야 한다고 주장합니다.

어디서부터 시작하나요

모션의 주요 작업은 사용자가 UI 요소 간의 관계를 설명하여 앱을 탐색 할 수 있도록 돕는 것입니다. 모션은 또한 애니메이션 아이콘, 로고 및 일러스트레이션으로 캐릭터를 앱에 추가 할 수 있습니다. 그러나 표현력을 추가하는 것보다 사용성을 확립하는 것이 우선되어야합니다. 캐릭터 애니메이션 기술을 익히기 전에 먼저 네비게이션 전환에 중점을 두어 강력한 모션 기반을 디자인하는 것으로 시작하십시오.
전환 패턴
네비게이션 전환을 디자인할 때는 단순성과 일관성이 중요합니다. 이를 위해 두 가지 유형의 모션 패턴 중에서 선택합니다.
  1. 컨테이너 기반의 전환
  2. 컨테이너가 없는 전환

컨테이너 기반의 전환

presentation
텍스트, 아이콘 및 이미지와 같은 요소는 컨테이너 안에 그룹화됩니다.
컴포지션에 버튼, 카드 또는 리스트와 같은 컨테이너가 포함 된 경우 전환 디자인은 컨테이너의 애니메이션을 기반으로합니다. 컨테이너는 일반적으로 눈에 보이는 가장자리를 기준으로 쉽게 배치 할 수 있지만 구분선이 없는 리스트 항목처럼 전환이 시작될 때까지 보이지 않을 수도 있습니다. 이 패턴은 세 단계로 나뉩니다.
1. Material’s standard easing을 사용하여 컨테이너에 애니메이션을 적용합니다 (급속한 속도로 가속한 다음 서서히 정지합니다). 이 예에서는 컨테이너의 치수와 코너 반지름이 원형 버튼에서 화면을 채우는 사각형으로 애니메이션됩니다.
presentation
2. 컨테이너에 들어 있는 요소를 너비에 맞게 축척합니다. 요소는 상단에 고정되고 컨테이너안에 마스킹됩니다. 이렇게 하면 컨테이너와 내부 요소 사이에 명확한 연결이 생성됩니다.
presentation
* 애니메이션은 컨테이너 내부에서 요소의 크기가 조절되고 마스크되는 방법을 설명하기 위해 속도가 느려졌습니다.
3. 전환하는 동안 종료되는 요소는 컨테이너가 가속 될 때 사라집니다. 컨테이너가 감속 할 때 점차적으로 변하는 요소. 요소가 빠르게 움직일 때 요소가 희미 해지면서 손의 효과가 원활하게 전달됩니다.
presentation

*요소가 종료되고 패이드를 사용하여 입력하는 방법을 설명하기 위해 애니메이션 속도가 느려짐
이 패턴을 컨테이너와 관련된 모든 전환에 적용하면 일관된 스타일을 설정할 수 있습니다. 또한 시작 컴포지션과 종료 컴포지션 간의 관계는 애니메이션 컨테이너로 연결되므로 명확하게 나타납니다. 이 패턴의 유연성을 나타 내기 위해 여기서는 다섯 가지 구성에 적용됩니다.
presentation
* 시작 및 종료 컴포지션이 컨테이너에 연결되는 방법을 보여주기 위해 애니메이션 속도가 느려짐
일부 컨테이너는 Material’s standard easing을 사용하여 화면 밖에서 단순히 미끄러져 들어옵니다. 슬라이드하는 방향은 연관된 구성 요소의 위치에 의해 알려줍니다. 예를 들어 왼쪽 상단의 탐색 창 아이콘을 탭하면 컨테이너가 왼쪽에서부터 슬라이드됩니다.
presentation
컨테이너가 화면 경계 내에서 들어 오면 페이드 인 (fade in) 및 스케일 업 (scale up)됩니다. 0 % 배율로 애니메이션을 적용하는 대신 전환시 과도한주의를 끌지 않도록 95 %에서 시작합니다. 스케일 애니메이션은 Material’s deceleration easing를 사용합니다. 즉, 속도가 최고 속도에서 시작하고 부드럽게 속도가 느려지는 것을 의미합니다. 종료하려면 컨테이너를 크기 조정하지 않고 간단히 페이드 아웃하십시오. 이탈 애니메이션은 새로운 콘텐츠에 주의를 집중시키기 위해 입구보다 섬세하게 디자인되었습니다.
presentation

* 애니메이션은 컨테이너가 페이드 및 스케일 애니메이션으로 입력하는 방법을 설명하기 위해 속도가 느려졌습니다.

컨테이너가 없는 변환

일부 구성에는 사용자를 새로운 대상으로 유도하는 하단 네비게이션 메뉴의 아이콘을 탭하는 것과 같이 전환 디자인을 기반으로하는 컨테이너가 없습니다. 이 경우 두 단계 패턴이 사용됩니다.
  1. 페이드 아웃으로 시작 컴포지션을 종료 한 다음 페이드 인으로 최종 컴포지션을 입력합니다.
  2. 최종 컴포지션이 페이드 인 되면서 Material’s deceleration easing 기능을 사용하여 미묘하게 확장됩니다. 다시 말하지만, 스케일은 오래된 컴포지션을 강조하기 위해 입력하는 컴포지션에만 적용됩니다.
presentation
* 컨테이너가 없는 장면 전환이 페이드와 스케일링을 사용하는 방법을 설명하기 위해 애니메이션 속도가 느려짐
시작 컴포지션과 끝 컴포지션이 명확한 공간적 또는 순차적 관계를 갖는 경우 공유 모션을 사용하여 이를 강화할 수 있습니다. 예를 들어 스테퍼 구성 요소를 탐색할 때 시작 및 끝 구성은 사라질 때 수직 슬라이딩 동작을 공유합니다. 이렇게하면 세로 레이아웃이 강화됩니다. 온 보딩 흐름에서 다음 버튼을 탭하면 컴포지션이 수평 슬라이딩 동작을 공유합니다. 왼쪽에서 오른쪽으로 이동하면 순서대로 진행되는 개념이 강화됩니다. 공유 모션은 Material’s standard easing를 사용합니다.
presentation
수직 및 수평 공유 동작을 설명하기 위해 애니메이션 속도가 느려짐

모범 사례

단순하게 유지하십시오.
네비게이션 전환은 높은 빈도와 사용성과의 밀접한 관계를 고려하여 일반적으로 스타일보다 기능성을 선호해야 합니다. 이것은 그들이 결코 스타일화 되어서는 안된다고 말하는 것이 아니라, 단지 스타일 선택이 브랜드에 의해 정당화된다는 것을 확신하십시오. 눈길을 끄는 동작은 일반적으로 작은 아이콘, 로고, 로더 또는 빈어있는 상태와 같은 요소에 가장 적합합니다. 아래의 간단한 예는 Dribble에서 많은 관심을 끌지 못할 수 있지만 더 유용한 앱이 될 것입니다.
presentation
애니메이션이 다른 모션 스타일을 보여 주기 위해 느려짐

적절한 시간과 완화를 선택하십시오.

네비게이션 전환은 신속하고 빠른 속도로 기능의 우선 순위를 지정하여 방향 감각을 잃지 않는 시간을 사용해야 합니다. 재생 시간은 애니메이션이 차지하는 화면의 양에 따라 선택됩니다. 일반적으로 네비게이션 전환이 화면의 대부분을 차지하므로, 300ms의 긴 기간은 좋은 경험 법칙입니다. 대조적으로, 스위치와 같은 소형 구성요소는 100ms의 짧은 지속 시간을 사용합니다. 영상 효과가 너무 빠르거나 느린 경우에는 적절한 균형이 이루어질 때까지 25ms 단위로 지속 시간을 조정하십시오.
Easing은 애니메이션 속도를 높이고 느리게하는 속도를 나타냅니다. 대부분의 네비게이션 트랜지션은 Material’s standard easing을 사용하는데, 이것은 비대칭 이징 타입입니다. 이는 요소가 신속하게 속도를 높이고 천천히 감속하여 전환이 끝나면 주의를 집중시키는 것을 의미합니다. 이 유형의 여유 작업은 실제 세계의 객체가 즉시 시작되거나 정지하지 않기 때문에 애니메이션의 자연스러운 품질을 제공합니다. 전환이 뻣뻣 해지거나 로봇 식으로 보일 경우 대칭 일 가능성이 있거나 선형 Easing이 잘못 선택되었습니다.
presentation
다양한 완화(easing) 유형을 설명하기 위해 애니메이션 속도가 느려짐
이 글에 요약된 패턴과 모범 사례는 실용적이고 미묘한 모션 스타일을 설정하기 위한 것입니다. 이는 대부분의 앱에 적합하지만 일부 브랜드는 보다 강력한 스타일 표현을 요구할 수 있습니다. 모션 스타일에 대한 자세한 내용은 여기(here)를 참조하십시오.
네비게이션 전환이 처리되면 앱에 캐릭터를 추가하는 문제가 시작됩니다. 이것은 단순한 패턴이 불충분하고 애니메이션의 기술이 진정으로 빛을 발하는 곳입니다.
presentation
캐릭터 애니메이션은 실망스러운 오류를 가중시킬 수 있습니다.
모션의 가능성에 대해 더 알고 싶으시면, Material motion guidelines을 꼭 읽어보시기 바랍니다.

이 글은 번역 글입니다. 원본 링크입니다.




안녕하세요! Early adopter입니다.페이스북 [DTF] 디자인 번역 공장 - Design Translation Factory 그룹도 많이 가입해주시길 바랍니다.
"보버"에서 "디자인 번역 공장" 연재를 저와 함께 해주실 분을 찾습니다. 하단 "리뷰" 또는 "페이스북"으로 편하게 메시지 주세요!
PS. 제가 사용하는 블로그 "보버"에 "함께 쓰는 블로그"라는 기능이 요번에 추가됐네요 ㅋ (미디엄에 퍼블리케이션 같은 기능..)
하단 링크 글을 보시면 "디자인 번역 공장"에 어떻게 함께 연재할 수 있는지 자세히 설명되어있습니다. 또는 쉽게 FB 메시지 주세요!
https://bit.ly/2L6WsZp