UX에서 애니메이션을 올바르게 사용하기 위한 최고의 가이드 (The ultimate guide to proper use of animation in UX)

이 글은 Taras Skytskyi The ultimate guide to proper use of animation in UX 글을 번역했습니다. 저의 모든 글은 허가를 받고 진행 하였습니다.

presentation
요즘에는 인터페이스 애니메이션으로 감명을 받거나 놀라는 것이 어렵습니다. 화면 간의 상호 작용을 보여 주며, 응용 프로그램 사용 방법을 설명하거나 단순히 사용자의 주의를 유도합니다. 애니메이션에 관한 글을 조사하면서, 거의 모든 요소가 애니메이션에 대한 특정 사용 사례 또는 일반적인 사실만을 설명하지만 인터페이스 애니메이션에 관한 모든 규칙이 명확하고 실제적으로 설명되는 글은 발견하지 못했습니다. 이 글에서는 새로운 내용을 쓰지 않을 것입니다. 모든 주요 원칙과 규칙을 한 곳에 모아 두고 싶습니다. 인터페이스 애니메이션을 시작하려는 다른 디자이너들은 추가 정보를 검색 할 필요가 없도록 하려는 것입니다.

애니메이션의 지속 시간과 속도

Duration and speed of the animation
요소가 상태 또는 위치를 변경할 때, 애니메이션의 지속 시간은 사용자에게 변경 사항을 알릴 수있을만큼 느려야하지만 동시에 대기 시간을 발생시키지 않을 만큼 빠를 수 있습니다.
presentation
애니메이션에서 적절한 시간을 사용하십시오. 너무 빨리 하지 말고 하품을 하기에 충분한 시간을 주지 마십시오.
많은 연구(Numerous researches)에 따르면 인터페이스 애니메이션의 최적 속도는 200 ~ 500ms 사이라고 합니다. 이 수치는 인간 두뇌의 특정한 특성을 기반으로 합니다. 100ms보다 짧은 애니메이션은 순간적이며 전혀 인식되지 않습니다. 1초 보다 긴 애니메이션은 지연감을 전달하므로 사용자에게는 지루할 수 있습니다.
presentation
인터페이스에서 더 좋은 애니메이션의 지속 시간
모바일 기기의 경우 Material Design Guidelines 에서는 애니메이션의 지속 시간을 200-300ms로 제한할 것을 권장하고 있습니다. 태블릿의 경우 지속 시간이 30%길어야 합니다 (약 400-450ms). 이유는 간단합니다 : 화면의 크기가 커지므로 객체가 위치를 변경할 때 객체가 더 긴 경로를 극복합니다. 웨어러블 기기의 경우, 더 짧은 화면에서 이동 거리가 더 짧기 때문에 지속 시간은 따라서 30% 더 짧아야 합니다 (약 150-200ms).
presentation
모바일 장치의 크기가 애니메이션의 지속 시간에 영향을 줍니다.
웹 애니메이션은 다른 방식으로 처리됩니다. 우리는 브라우저에서 웹 페이지를 거의 즉시 열어 보는 것에 익숙해져 있기 때문에 다른 화면(상황)들 간에 신속하게 이동할 수 있기를 기대합니다. 따라서 웹 전환 시간은 모바일 장치보다 약 2배 짧아야 합니다 (150-200ms 사이). 다른 경우에는 사용자가 필연적으로 컴퓨터가 정지되거나 인터넷 연결에 문제가 있다고 생각할 것입니다.
그러나, 웹 사이트에 장식용 애니메이션을 만들거나 특정 요소에 대한 사용자의 관심을 끌려고 한다면, 이러한 규칙들은 잊어 버리십시오. 이러한 경우 애니메이션이 더 길어질 수 있습니다.
presentation
컴퓨터의 대형 스크린 = 느린 애니메이션? 말도 안 되는 얘기예요.
플랫폼에 관계없이 애니메이션의 지속 시간은 이동 거리뿐 아니라 객체의 크기에도 좌우된다는 점을 기억해야 합니다. 작은 요소나 작은 변화의 애니메이션은 더 빨리 움직여야 합니다. 따라서 크고 복잡한 요소가있는 애니메이션은 조금 더 오래 지속될 때 더 좋아 보입니다.
같은 크기의 움직이는 물체 중에서 가장 짧은 거리를 통과한 물체가 첫 번째 정지 대상입니다.
큰 물체와 비교할 때 작은 물체는 더 큰 오프셋을 만들기 때문에 느리게 움직입니다.
presentation
애니메이션의 길이는 대상의 크기와 이동 거리에 따라 다릅니다.
물체들이 충돌할 때, 충돌 에너지는 물리적 법칙에 따라 균등하게 분배되어야합니다. 따라서 바운스 효과를 제외하는 것이 좋습니다. 이치에 맞는 예외적인 경우에만 사용하십시오.
presentation
튀는 효과는 주의를 분산시키기 때문에 사용하지 마십시오.
개체의 움직임은 깨끗하고 명확해야하므로 모션 블러-motion blur는 사용하지 마십시오 (예, After Effects 사용자분들.. 이번에는 사용하지 마세요). 최신 모바일 장치에서도 효과를 재현하기가 어렵고 인터페이스 애니메이션에 전혀 사용되지 않습니다.
presentation
애니메이션에서 흐림-blur 효과를 사용하지 마십시오.
목록 항목 (뉴스 카드, 이메일 목록 등)은 모양이 매우 짧게 지연되어야합니다. 새로운 요소의 각 항목은 20에서 25 ms까지 지속되어야 합니다. 요소의 느린 출현은 사용자를 짜증나게 할 수 있습니다.
presentation
목록 항목에 대한 애니메이션은 20~25ms 사이에서 지속되어야 합니다.

Easing

Easing은 물체의 움직임을 보다 자연스럽게 만들어줍니다. 이것은 애니메이션의 필수 원칙(principles of the animation) 중 하나입니다. 이 환상의 개요는 2명의 주요 디즈니 애니메이터 인 - Ollie Johnston과 Frank Thomas가 쓴 "The Illusion of Life: Disney Animation"에 자세히 설명되어 있습니다.
애니메이션이 기계적이고 인위적으로 보이지 않게하려면 물체가 실제 세계의 모든 살아있는 물체와 같이 약간의 가속 또는 감속으로 움직여야합니다.
presentation
선형 애니메이션에 비해 easing 애니메이션이 자연스러워 보입니다.

Linear motion

물리적인 힘에 영향을 받지 않는 물체는 선형으로, 즉 일정한 속도로 움직입니다. 그리고 이 사실 때문에 그들은 인간의 눈에는 매우 부자연스럽고 인위적으로 보입니다.
애니메이션을 위한 모든 응용 프로그램은 애니메이션 커브를 사용합니다. 저는 그것들을 읽는 방법과 그것이 의미하는 것을 설명하려고 합니다. 곡선은 객체의 위치 (y축)  동일한 시간 간격 동안 변화 (x 축). 현재의 경우 이동은 선형이므로 객체는 같은 거리에서 같은 시간에 이동합니다.
presentation
The curve of linear motion
예를 들어 선형 모션은 객체의 색상이나 투명도가 변경 될 때만 사용할 수 있습니다. 일반적으로 객체가 위치를 변경하지 않을 때 상태에 사용할 수 있습니다.

이지-인 또는 가속 곡선

Ease-in or acceleration curve
처음에는 물체의 위치가 천천히 변하고 속도는 점진적으로 증가한다는 것을 곡선에서 볼 수 있습니다. 즉, 물체가 일정한 가속도로 움직이고 있음을 의미합니다.
presentation
Acceleration curve
이 곡선은 물체가 최고 속도로 화면 밖으로 날아갈 때 사용해야합니다. 그것들은 시스템 알림 또는 인터페이스 카드일 수 있습니다. 하지만 이러한 유형의 커브는 개체가 화면을 영원히 떠나고 이를 회수하거나 반환 할 수 없는 경우에만 사용해야 합니다.
presentation
카드를 화면 밖으로 던지기위한 가속 곡선
애니메이션 커브는 올바른 분위기를 표현하는 데 도움이 됩니다. 아래 예제에서 모든 물체의 이동 시간과 거리는 동일하지만 커브의 작은 변화만으로도 애니메이션의 분위기에 영향을 줄 수 있음을 알 수 있습니다.
그리고 물론 커브를 변경하여 가능한 한 실제 세계와 비슷하게 객체를 이동할 수 있습니다.
presentation
지속 시간과 거리가 같지만 분위기가 다릅니다.

이지-아웃 또는 감속 곡선

Ease-out or deceleration curve
이지 인 커브 (ease-in curve)의 반대로 대상물이 긴 거리를 빠르게 커버하고 마침내 멈출 때까지 천천히 속도를 줄입니다.
presentation
Deceleration curve
이 유형의 커브는 요소가 화면에 나타날 때 사용되어야 합니다. 화면에서 최고 속도로 튀어 나오고 완전히 멈출 때까지 점차 속도가 느려집니다. 이 기능은 화면 외부에서 나타나는 다른 카드나 오브젝트에도 적용 할 수 있습니다.
presentation
멋진 등장을 위한 감속 곡선

이지-인-아웃 또는 표준 곡선

Ease-in-out or standard curve
이 곡선은 처음에는 물체의 속도가 빨라지고 다시 0으로 떨어지게 합니다. 이러한 유형의 모션은 인터페이스 애니메이션에 가장 자주 사용됩니다. 애니메이션에 사용할 모션 유형이 의심될 때마다 표준 곡선을 사용하십시오.
presentation
Standard curve
머티리얼 디자인 가이드 라인-Material Design Guidelines에 따르면 비대칭 곡선을 사용하여 보다 자연스럽고 사실적인 표정을 만드는 것이 좋습니다. 커브의 끝은 시작보다 더 강조되어야 하므로 가속 시간이 느려지는 시간보다 짧습니다. 이 경우, 사용자는 요소의 최종 이동에 더 많은 주의를 기울여서 새로운 상태로 이동합니다.
presentation
대칭 및 비대칭 표준 곡선의 차이점 보기
개체를 화면의 한 부분에서 다른 부분으로 이동할 때 쉽게 사용할 수 있습니다. 이런 경우 애니메이션은 눈길을 끄는 극적인 효과를 피할 수 있습니다.
presentation
스크린상의 카드의 움직임과 그에 상응하는 비대칭 곡선
요소가 화면에서 사라지지만 사용자가 언제든지 이전 위치로 되돌릴 수 있는 경우 동일한 이동 유형을 사용해야 합니다. 특히 내비게이션 드로어에 관한 것입니다.
presentation
탐색 드로어는 표준 곡선으로 화면에서 숨 깁니다.
이 예제에서 많은 초보자들이 무시하는 기본적인 규칙을 따릅니다. - 시작 애니메이션은 종료 애니메이션과 동일하지 않습니다. 내비게이션 드로워의 경우와 마찬가지로 감속 곡선과 함께 나타나고 표준 곡선과 함께 사라집니다. 게다가 Google Material Design에 따르면 객체의 출현 시간은 더 많은 관심을 끌기 위해 더 길어야 합니다.
presentation
측면 메뉴의 나타나고 사라짐은 감속과 그에 따른 표준 곡선으로 충족됩니다.

cubic-bezier() 함수는 곡선을 설명하는 데 사용됩니다. 이것은 4개의점을 기준으로 하기 때문에 cubic이라고 합니다. 첫 번째 점은 좌표가 0;0 (왼쪽 하단), 그리고 마지막은 좌표 1;1 (우측 상단)이 이미 그래프에 정의 되어 있습니다.
이를 바탕으로 그래프상의 두 점만을 설명할 필요가 있습니다. 이 점은 cubic-bezier () 함수의 인수로 주어집니다 : 처음 두 개는 첫 번째 점의 좌표 x  및 y, 두 번째 점은 두 번째 지점의 좌표 xy
커브로 작업을 단순화하려면 easings.net 및 cubic-bezier.com 사이트를 사용하는 것이 좋습니다. 첫 번째 매개 변수는 가장 자주 사용되는 커브 목록을 포함 합니다. 매개 변수는 프로토타입 도구에 복사할 수 있습니다. 두 번째 소스는 커브의 다른 매개 변수로 재생하고 개체가 어떻게 움직이는지 즉시 볼 수 있는 기능을 제공합니다.
presentation
cubic-bezier () 함수에 대한 다양한 유형의 커브와 매개 변수

인터페이스 애니메이션의 안무

Choreography in interfaces animation
발레 안무와 마찬가지로, 주요 아이디어는 한 상태에서 다른 상태로 전환하는 동안 사용자의 관심을 한 방향으로 유도하는 것입니다.
안무에는 두 가지 유형이 있습니다. 즉, 평등하고 종속적인 상호작용입니다.

동일한 상호 작용

Equal interaction
동일한 상호 작용은 모든 객체의 모양이 하나의 특정 규칙에 따르는 것을 의미합니다.
이 경우 모든 카드의 모양은 사용자의 관심을 한 방향으로, 즉 위에서 아래로 안내하는 하나의 흐름으로 인식됩니다. 명령을 따르지 않으면 사용자의 주의가 산만해질 것입니다. 모든 요소의 동시 출현은 나쁘게 보일 것입니다.
presentation
사용자의 주의를 한 방향으로 유도해야 합니다.
표 보기의 경우 조금 더 복잡합니다. 여기에서 사용자의 초점은 대각선으로 향해야하므로 요소를 하나씩 보여주는 것은 좋지 않습니다. 각 요소를 하나씩 표시하면 애니메이션이 지나치게 길어지며 사용자의 관심은 지그재그 형으로 잘못될 것입니다.
presentation
카드 표 모양 보기를 위한 대각선 모양

하위 상호 작용

Subordinate interaction
종속적인 상호 작용이란 모든 사용자의 관심을 끌 수 있는 하나의 중심 개체가 있고 다른 모든 요소는 하위 개체라는 사실을 의미합니다. 이 유형의 애니메이션은 순서 감각을 제공하고 주요 내용에 더 많은 관심을 불러 일으킵니다.
다른 경우에는 사용자가 따라야 할 대상을 알기가 매우 어려워서 주의를 분산시킬 수 있습니다. 따라서 애니메이션할 요소가 여러 개 있는 경우 동작 순서를 명확하게 정의하고 한 번에 최소의 개체로 애니메이션해야 합니다.
presentation
오직 하나의 중심적인 물체와 그것에 종속된 다른 모든 물체만 애니메이션할 가치가 있다. 그렇지 않으면 사용자는 어떤 개체를 따라야 하는지 모를 수 있습니다.
머티리얼 디자인-Material Design에 따르면, 움직이는 물체의 크기가 불균형 적으로 변할 때 직선보다는 호를 따라 움직여야 합니다. 그것은 움직임을 보다 자연스럽게 만들어 줍니다. "불균형적으로"나는 증가 / 감소에 의한 대상의 높이와 너비의 변화가 비대칭적으로 수행된다는 것을 의미합니다. 즉, 속도가 다른 것입니다 (예 : 정사각형 카드가 직사각형으로 변함).
presentation
크기가 불균형하게 변화하는 물체의 움직임은 호를 따라 배열되어야 합니다.
선을 따라 이동하는 동작은 객체의 크기를 비례적으로 변경할때 사용됩니다. 이러한 움직임의 실행이 훨씬 용이하기 때문에 불균형 호 이동 규칙은 종종 무시됩니다. 응용 프로그램의 실제 예를 보면, 여러분은 선형 운동의 지배를 볼 수 있을 것입니다.
presentation
크기의 비례적 변화가 일직선으로 수행됩니다.
커브의 동작은 두 가지 방법으로 수행할 수 있습니다. 첫 번째로 Vertical out - 물체가 수평으로 이동하기 시작하고 수직 이동으로 끝나는 것입니다. 두 번째 Horizontal out- 수평 출력 객체는 수직으로 이동하기 시작하고 수평 이동으로 끝납니다.
커브를 따라 오브젝트의 이동 경로는 스크롤링 인터페이스의 기본 축과 일치해야합니다. 예를 들어, 다음 이미지에서 인터페이스를 위아래로 스크롤 할 수 있으므로 카드가 세로로 바깥쪽으로 펼쳐집니다 - 우선 오른쪽에서 아래로. 반대 방향으로 움직이면 카드가 먼저 수직으로 올라가고 수평으로 움직입니다.
presentation
카드를 펼치거나 접는 방향은 인터페이스의 축과 일치해야 합니다.
움직이는 물체의 경로가 서로 교차하면 서로 이동할 수 없습니다. 개체는 속도를 늦추거나 가속시켜 다른 개체의 움직임에 충분한 공간을 남겨 두어야합니다. 또 다른 옵션 - 그들은 단지 다른 물건을 밀어 버립니다. 왜 그럴까요? 인터페이스의 모든 객체가 하나의 평면에 있다고 가정하기 때문입니다.
presentation
움직이는 동안 물체는 서로 지나치지 않고 다른 물체의 움직임을 위한 공간을 남겨야 합니다.
다른 경우, 움직이는 물체가 다른 물체 위로 올라올 수 있습니다. 그러나 다시는 다른 물체들을 통해 용해되거나 움직이지 않아야 합니다. 왜일까요? 우리는 인터페이스의 요소가 물리 법칙에 따라 행동한다고 믿기 때문에 현실 세계의 견고한 물체는 그렇게 할 능력이 없습니다.
presentation
물체가 다른 물체 위로 올라와 움직일 수 있습니다.

결론

위에서 언급한 모든 규칙과 원칙을 요약하면 인터페이스의 애니메이션은 물리적 환경(마찰, 가속 등)에서 우리가 알고 있는 움직임을 반영해야 합니다. 실제 세계에서 객체의 동작을 흉내내면 사용자가 인터페이스에서 기대하는 것을 이해할 수 있는 시퀀스를 만들 수 있습니다.
애니메이션이 올바르게 제작된 경우 이해하기 어렵고 사용자의 목표에서 주의가 산만하지 않습니다. 만약 그렇다면, 여러분은 그것을 부드럽게 하거나 아예 제거해야 합니다. 이것은 애니메이션이 사용자의 속도를 늦추거나 작업을 수행하지 못하도록 해서는 안 된다는 것을 의미합니다.
그러나 애니메이션이 과학보다 예술이라는 점을 잊지 마십시오. 따라서 사용자에 대한 의사 결정을 실험하고 테스트하는 것이 더 좋습니다.
Facebook으로 연락주세요

참조 및 추가 자료 :

  • Discover the expanded Material Design motion guidelines
  • Школа мобильного дизайна — Анимация в интерфейсах
  • Designing Interface Animation: Meaningful Motion for User Experience
  • Creating Usability with Motion: The UX in Motion Manifesto
  • Jedi Principles of UI Animation
  • Getting started with UI motion design

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



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