[번역]UX에서 적절한 애니메이션효과를 위한 가이드 1
1편 - 애니메이션 시간과 속도, 가속 및 감속곡선
이 글은 '어떤 애니메이션을 적용하면 좋을까?'라는 질문에 단순히 예쁘고 보기 좋으니까 선택하라는 말 대신, 타당한 이유와 근거 심지어 과학적인 배경까지 들어 설명하고 있습니다. 그래서 저 뿐만 아니라 좋은 사용자 경험을 위해 인터렉션을 고민하는 분들에게 도움이 될 거 같아 번역하게 되었습니다.
UX에서 적절한 애니메이션효과를 위한 가이드 - 1
[원문]The ultimate guide to proper use of animation in UX
최근 인터페이스 애니메이션으로 인상적이거나 놀랍게하는 것이 어려워졌습니다. 인터페이스 애니메이션은 스크린들 사이의 인터렉션을 보여주고, 어플리케이션 사용방법을 설명하거나 또는 단순히 사용자의 주의를 이끕니다. 애니메이션에 대한 아티클들을 살펴보는 동안, 저는 대부분이 단순히 구체적 사례나 애니메이션에 대한 일반적 사실만 다루고 있다는 걸 알았습니다. 그러나 어떤 아티클에서도 인터페이스 애니메이션에 대한 명확하고 사실적으로 설명된 규칙들을 보지 못했습니다. 이 글에 저는 새로운 무언가를 적을 수는 없지만, 그저 인터페이스 애니메이션을 시작하고자하는 다른 디자이너들이 추가정보를 찾을 필요 없도록 주요원칙과 규칙들을 한 공간에 모아두고자합니다.
애니메이션 지속시간과 속도
요소들이 상태나 위치를 변경할 때, 애니메이션의 지속시간은 사용자에게 변화를 느낄 수 있을만큼 느려야 하지만, 동시에 기다림이 필요하지 않을만큼 충분히 빨라야 합니다.
적절한 지속시간을 시용합니다. 너무 빠르게 해서도 안되고 사용자가 하품하기에 충분한 시간을 주어서도 안됩니다.
많은 조사를 통해 인터페이스 애니메이션을 위한 최적의 속도는 0.2~0.5초(200~500ms)라는 것을 알아냈습니다. 이러한 지표는 인간 뇌의 특성에서 비롯됩니다. 0.1초보다 짧은 애니메이션은 순식간이라 전혀 알아차리지 못합니다. 반면에 1초보다 긴 애니메이션은 지연된다는 느낌을 주고 자칫 사용자가 지루하게 느낄 수 있습니다.
인터페이스에서 더 나은 애니메이션 시간을 제공하도록 합니다.매터리얼 디자인 가이드라인 역시 모바일기기에서 애니메이션 시간을 0.2~0.5초로 제안하고 있습니다. 태블릿을 위한 지속시간은 30% 늘어나야 합니다.(대략 0.4~0.45초) 이유는 굉장히 단순한데, 스크린 사이즈가 더 커서 오브젝트가 위치를 변경할 때 더 긴 경로로 움직이기 때문입니다. 웨어러블 기기에서는 지속시간이 30% 줄어들어야 합니다.(대략 0.15~0.2초) 작은 스크린에서는 움직이는 거리가 짧아지기 때문입니다.
모바일기기의 사이즈는 애니메이션 시간에 영향을 줍니다.웹 애니메이션은 다른 방식으로 처리됩니다. 우리는 브라우저에서 웹페이지를 빠르게 여는 것에 익숙해져 있기 때문에, 다른 상태로 최대한 빠르게 이동하기를 기대합니다. 그래서 웹 전환의 지속시간은 모바일기기보다 0.15초~0.2초 더 짧아야 합니다. 그렇지 않으면 사용자는 불가피하게 컴퓨터가 정지되거나 인터넷 연결에 문제가 있다고 생각할 것입니다.
컴퓨터의 큰 스크린 = 느린 애니메이션? 절대 아닙니다!당신은 플랫폼에 관계없이 애니메이션의 시간이 이동경로 뿐만 아니라 오브젝트의 사이즈에 따라 다르다는 것도 기억해야 합니다. 변화가 크지 않은 작은 요소나 애니메이션은 더 빠르게 움직여야 합니다. 따라서, 크고 복잡한 요소들은 짧게 지속될 때 더 나아 보입니다.
애니메이션의 시간은 오브젝트의 사이즈와 이동거리에 따라 달라집니다.오브젝트들이 충돌할 때, 충동에너지는 물리적인 원칙에 따라 그들에게 균등하게 나누어집니다. 그러므로 바운스효과를 제거하는 것이 낫습니다. 타당한 예외 경우에만 사용하면 됩니다.
주의를 산만하게 하는 바운스효과는 사용을 피합니다.오브젝트들의 움직임은 명확하고 날카로워야 합니다. 그러므로 모션블러를 사용하면 안됩니다. (애프터이펙트 사용자들을 말하는 게 아님) 현대의 모바일 기기에서 모션블러를 재현하는 것은 어렵고 인터페이스 애니메이션에서도 전혀 사용되지 않습니다.
애니메이션에서 블러효과를 사용하면 안됩니다.리스트 아이템 (뉴카드, 이메일 목록 등)은 이들의 등장 간격이 매우 짧게 지연되어야 합니다. 새로운 요소 각각의 발생은 0.02초~0.25초 지속되어야 합니다. 요소들의 느린 등장은 사용자를 화나게 할 것입니다.
리스트아이템을 위한 애니메이션은 0.02~0.25초간 지속되어야 합니다.Easing
완화
Easing은 오브젝트의 움직임을 더욱 자연스럽게 만들어줍니다. 이것은 애니메이션의 기본원칙 중 하나이며, 디즈니의 메인 애니메이션 제작자인 Ollie Johnston과 Frank Thomas 두 사람이 쓴 책 <The Illusion of Life: Disney Animation>에 더 자세하게 설명되어 있습니다.
애니메이션이 기계적이고 인공적으로 보이지 않도록 하려면 오브젝트는 물리적 세계 속에 살아있는 모든 오브젝트들처럼 약간의 가속이나 감속을 가지고 움직여야 합니다.
Linear motion
선형 운동
어떠한 물리적 힘에도 영향을 받지 않는 오브젝트들은 선형으로 움직이는데, 즉 일정한 속도로 움직입니다. 이런 이유로 인간의 눈에는 그들이 매우 부자연스럽고 인위적으로 보이게 됩니다.
애니메이션을 적용할 경우 애니메이션 곡선을 활용합니다. 이제 그 곡선을 어떻게 읽고 무엇을 의미하는지 설명하고자 합니다.
곡선은 동일한 시간 간격 동안(X축) 오브젝트들의 위치(Y축)가 어떻게 변화하는지를 보여줍니다. 지금의 경우에는 선형 운동이므로 오브젝트가 동시에 같은 거리를 이동합니다.
선형운동곡선예를 들어, 선형 운동은 오브젝트가 색상이나 투명도를 변경될 때만 사용할 수 있습니다. 일반적으로, 오브젝트가 위치를 변경하지 않는 상황에서 가능합니다.
Ease-in or acceleration curve
완화증가곡선 또는 가속곡선
우리는 곡선에서 오브젝트의 위치가 서서히 변하며 속도가 점차 증가하는 시작점을 볼 수 있습니다. 그것은 오브젝트가 일정한 가속도로 이동하는 것을 의미합니다.
가속곡선이 곡선은 오브젝트가 빠른 속도로 화면을 벗어날 때 주로 사용되며 시스템 알림 또는 카드형 인터페이스의 경우 활용됩니다. 그러나 이러한 곡선은 스크린에서 오브젝트들이 아예 사라질 때, 불러오기나 되돌리기가 더 이상 어려운 경우에만 사용되는 걸 기억해야 합니다.
화면에서 카드가 사라지는 것을 위한 가속곡선애니메이션 곡선은 정확한 느낌을 표현하는 데에 도움이 됩니다. 아래 예를 보면, 모든 오브젝트의 이동시간과 이동거리가 동일하다는 걸 알 수 있습니다. 그러나 곡선의 아주 작은 변화가 애니메이션의 전체적인 느낌에 영향을 주고 있습니다.
동일한 이동시간과 이동거리를 갖지만 서로 다른 느낌Ease-out or deceleration curve
완화감소곡선 또는 감속곡선
이것은 ease-in곡선(점차 속도가 증가하는)과 반대됩니다. 그래서 오브젝트가 빠르게 긴 거리를 이동하면서 마지막 지점까지 서서히 속도가 줄어듭니다.
감속곡선이런 곡선타입은 요소가 빠른 속도로 화면에 떠오르거나, 완전히 멈출 때까지 속도가 서서히 줄어들 때 사용됩니다. 화면 밖으로부터 나타나는 카드나 오브젝트들에게 적용됩니다.
적절한 등장을 위한 감속곡선Ease-in-out or standard curve
완화증가감소곡선 또는 표준곡선
이 곡선은 오브젝트가 출발할 때 속도를 얻고나서 다시 0으로 서서히 돌아오도록 합니다. 이러한 모션유형은 인터페이스 애니메이션에서 가장 빈번하게 사용됩니다. 애니메이션에서 어떤 유형의 모션을 사용해야할지 확신이 들지 못할 때마다 이 표준곡선을 사용하면 됩니다.
표준곡선매터리얼 디자인 가이드에 따르면, 움직임을 더 자연스럽고 현실적으로 느끼게 하려면 비대칭 곡선을 사용하는 게 낫다고 합니다. 감속시간보다 가속시간을 짧게하기 위해 곡선의 시작점보다 끝점이 더 강조되어야 합니다. 이러한 경우, 사용자들은 요소의 마지막 이동과 새로운 상태에 더 주의를 기울이게 됩니다.
대칭/비대칭 표준곡선 사이의 차이Ease-in-out은 오브젝트가 스크린의 어느 한 지점에서 다른 지점으로 이동할 때 사용됩니다. 이 때, 시선을 사로잡거나 드라마틱한 효과의 애니메이션은 피해야합니다.
화면 속 카드의 이동에 대한 비대칭 곡선요소가 화면에서 사라지지만 사용자가 언제든 다시 되돌릴 수 있는 경우에는 동일한 이동을 사용해야 합니다. 특히 내비게이션 드로어에 관한 것입니다.
표준곡선으로 화면에서 사라지는 내비게이션 드로어아래는 많은 입문자들이 놓치는 기본적인 규칙에 대한 예시입니다. 시작하는 애니메이션은 끝나는 애니메이션과 동등하지 않습니다. 내비게이션 드로어 같은 경우, 감속곡선으로 나타났다가 표준곡선으로 사라집니다. 게다가 구글 매터리얼 디자인에 따르면 더 많은 주의를 끌기 위해 오브젝트의 등장시간이 길어져야합니다.
사이드메뉴가 나타나고 사라지는 것은 그에 맞는 감속 및 표준곡선에 의해 이루어집니다.곡선을 설명할 때 cubic-bezier()라는 함수가 사용됩니다. 4개의 점을 기본으로 하고 있어 큐빅(입방체)이라고 불립니다. 좌표가 0인 첫번째 점(왼쪽아래)과 좌표가 1인 마지막 점(오른쪽위)은 이미 그래프에 정의되어 있습니다.
이를 바탕으로 남은 두개의 점만 이해하면 됩니다. 괄호 속 네 자리 중 앞의 두 자리는 첫번째 점의 x와 y이고, 뒤의 두 자리는 두번째 점의 x와 y입니다.
곡선을 사용해 작업을 간소화하고 싶다면 easings.net 또는 cubic-bezier.com 사이트를 권장합니다. easings.net은 가장 자주 사용되는 곡선, 즉 프로토타이핑 도구에 복사가 가능한 매개변수 목록이 나와 있습니다. cubic-bezier.com에는 곡선에 다른 매개변수를 적용해 재생할 수 있으며 오브젝트가 어떻게 움직이는지 바로 확인할 수 있습니다.
cubic-bezier () 함수를 위한 다양한 종류의 곡선과 매개변수들원문이 꽤 긴 편이라 1편, 2편으로 나누어 공유하려고 합니다. 1편은 애니메이션의 시간과 속도, 그리고 오브젝트의 이동곡선에 대한 이야기를 주로 다루었습니다.
다음 2편에서는 사용자의 주의를 집중시킬 수 있는 애니메이션 연출방법에 대한 이야기를 다루어 보겠습니다. 서툰 번역이 있었다면 언제든 알려주세요. 그럼 다음글에서 만나요 :)
