[번역]UX에서 적절한 애니메이션효과를 위한 가이드 2
2편 - 인터페이스 애니메이션 연출
이 글은 1편과 2편으로 나누어집니다. 1편을 먼저 확인하시려면 아래 링크를 참고해주세요.
UX에서 적절한 애니메이션효과를 위한 가이드 - 2
[원문]The ultimate guide to proper use of animation in UX
Choreography
in interfaces animation
인터페이스 애니메이션 연출
발레공연과 마찬가지로 어떤 상태에서 다른 상태로 변화하는 동안 사용자의 주의를 한 방향으로 이끄는 것은 중요한 일입니다. 이러한 연출에는 두 가지 유형이 있는데 동일한 인터렉션과 종속적인 인터렉션입니다.
Equal interaction
동일한 인터렉션
이 경우 모든 카드들의 등장은 위에서 아래로 사용자의 주의를 같은 방향으로 이끄는 하나의 흐름처럼 인식됩니다. 이렇게 하지 않으면 사용자의 주의가 흐트러지고 한 순간에 모든 요소의 등장이 나쁘게 보여집니다.
사용자의 주의를 한 방향으로 유도해야 합니다.표를 보여줘야할 때는 더 복잡해집니다. 이 때는 사용자의 초점이 대각선으로 향하기 때문에 요소들을 하나씩 표현하는 것은 좋지 않습니다. 각 요소를 하나씩 드러내면 애니메이션이 지나치게 길어지고 사용자의 주의력이 지그재그처럼 변하게 됩니다.
사선방향으로 등장하는 카드형 표Subordinate interaction
종속된 인터렉션
종속된 인터렉션은 사용자의 모든 주의를 이끄는 하나의 특정 오브젝트를 가져야한다는 의미입니다. 그리고 다른 모든 요소들은 그것에 종속됩니다. 이러한 애니메이션 유형은 요소들 간 위계를 느끼게 하고 주요 컨텐츠에 더욱 집중할 수 있도록 합니다.
그렇지 않으면 사용자가 어떤 오브젝트를 따라가야하는지 어려워서 주의가 분산될 수 있습니다. 그러므로 원하는 애니메이션을 주고싶은 요소들이 여러개가 된다면, 그 움직임의 순서를 명확하게 정하고 가능한 적은 요소에 애니메이션을 주어야 합니다.
하나의 특정 오브젝트만 애니메이션을 주고 나머지는 종속되도록 하는 것이 중요합니다. 그렇지 않으면 사용자는 어떤 오브젝트를 따라가야하는지 모를 수 있습니다.매터리얼 디자인에 따르면, 오브젝트가 불균형하게 사이즈를 변형하면 그들은 직선보다 아치곡선를 그리면서 움직이게 됩니다. 그래야 움직임이 더 자연스러워집니다. '불균형하게'라는 건 오브젝트의 높이와 너비의 증가/감소 변화가 비대칭적으로 이루어지며 서로 다른 속도로 진행 되는 것을 의미합니다. (예를 들어, 정사각형 카드가 직사각형으로 변화되는 경우가 있습니다.)
불균형하게 사이즈를 변경하는 오브젝트의 이동은 아치곡선을 따라야합니다.직선을 따라가는 이동은 오브젝트가 사이즈를 균형있게 변화할 때 사용됩니다. 이렇게 제작하는 것이 훨씬 편하기 때문에, 불균형한 아치형 이동규칙은 종종 간과되기도 합니다. 어플리케이션의 실제 사례들을 보면, 직선 이동이 대부분이라는 걸 확인할 수 있습니다.
이미지 균형적인 사이즈 변화는 직선 이동으로 해결할 수 있습니다.커브형 이동은 두가지 방법으로 가능합니다. 첫번째는 Vertical out 으로 오브젝트가 처음에 수평으로 이동하다가 마지막에 수직으로 움직입니다. 두번째는 Horizontal out으로 오브젝트가 수직으로 이동하다가 마지막에 수평으로 이동하는 것입니다.
커브곡선을 따르는 오브젝트의 이동경로는 스크롤 인터페이스의 주축과 일치해야 합니다. 예를 들어, 다음 이미지처럼 인터페이스를 위아래로 스크롤 할 수 있는 경우 카드가 오른쪽에서 아래로 Vertical out 방식으로 펼쳐집니다. 돌아갈 때는 반대로 카드가 먼저 수직으로 올라갔다가 수평으로 이동하게 됩니다.
이미지 카드가 펼쳐지는/접혀지는 방향은 인터페이스의 주축과 일치해야합니다.만약 움직이는 오브젝트의 경로가 다른 것과 교차된다면, 서로를 통과해서 움직일 수 없습니다. 오브젝트의 속도를 느리게 하거나 더 빠르게 만들어 다른 오브젝트로부터 움직이기에 충분한 여유공간을 마련해야 합니다. 아니면 그냥 다른 오브젝트를 밀면 되는데, 인터페이스의 모든 오브젝트들이 한 면 안에 있기 때문에 가능합니다.
이미지 움직이는 동안, 오브젝트들은 서로 교차되면 안됩니다. 다른 오브젝트의 이동을 위해 여유공간을 남겨야 합니다.다른 경우에는, 움직이는 오브젝트가 다른 오브젝트 위로 떠오를 수도 있습니다. 그러나 다른 오브젝트를 통과해서 지나거나 분해하지는 않습니다.
우리는 인터페이스의 요소들이 물리적 규칙을 따른다고 믿고 현실의 어떤 솔리드 오브젝트도 그럴 수 없다고 생각하기 때문입니다.
이미지 오브젝트는 다른 오브젝트들 위로 떠올라야 움직일 수 있습니다.Conclusions
결론
위에서 언급한 모든 규칙과 원칙들을 요약하면, 인터페이스 안의 애니메이션은 우리가 알고 있는 물리적인 세계의 움직임인 마찰, 가속 등을 반영해야 합니다. 현실 속 오브젝트의 행동을 따라하면, 인터페이스에서 기대되는 것을 유저들이 이해할 수 있도록 시퀀스를 만들 수 있습니다.
제대로 구현된 애니메이션은 크게 눈에 띄지 않으며 목표로부터 사용자의 주의가 멀어지게 않게 합니다. 만약 그렇지 않다면, 애니메이션을 부드럽게 하거나 아예 없애버릴 필요가 있습니다. 즉, 애니메이션이 유저의 속도를 느리게 하거나, 작업을 수행하지 못하게 해서는 안된다는 것을 의미합니다.
그러나 애니메이션이 과학보다 예술이라는 것을 잊어서는 안됩니다. 따라서 당신의 결정을 유저들에게 실험하고 테스트하는 것이 더 좋습니다.
