Credits: Eddie Lobanovskiy
기술의 빠른 발전으로 인해 애니메이션은 시각적 고급스러움을 위해 사용하기 보다는 사용자가 기대하는 기능적 요구사항이 되었습니다. 애니메이션은 인터페이스에 존재하는 많은 기능적 문제를 해결해주며 인터페이스가 생기 있으면서도 진정으로 사용자를 위한다고 느끼게 해줍니다. 모바일 인터페이스의 기능성과 감성적인 힘을 향상시켜주는 ‘애니메이션 핵심 요령’을 살펴보도록 하겠습니다.
1. System Status
항상 앱의 백스테이지에서는 많은 수의 프로세스가 진행 중인 경우가 많이 있습니다. 가령 데이터가 서버로부터 다운로드되고 있거나, 계산이 진행 중이거나 할 때는 이러한 프로세스에는 언제나 시간이 걸리기 마련입니다. 사용자에게는 앱이 고장난 것이 아니며 프로세스가 진행 중인 상태임을 알려줘야 합니다. 프로세스에 대한 시각적 싸인은 사용자가 앱에 대해서 통제감을 가질 수 있게 해주는 것이 사용자에게 안정감과 도움을 줄 수 있을 것 입니다.
Loading Indicators
로딩 시간은 대부분의 디지털 제품에서 피할 수 없는 상황입니다. 애니메이션이 이 문제를 해결해 주진 못하겠지만, 사용자에게는 분명 ‘기다림’은 큰 문제가 아닌 것으로 만들어 줍니다. 기다림을 줄일 수 없을 때라도, 기다림을 조금 더 즐겁게 만들어 줄 수는 있습니다. 창의적인 프로세스 인디케이터는 사용자가 지각하는 시간을 줄여줄 수 있습니다. 애니메이션은 사용자의 제품에 대한 지각에 영향을 미쳐서 실제보다 더 좋은 제품이라고 느끼게 해 줍니다.
기다리는 잠깐의 시간 동안 흥미롭게 볼 수 있는 무언가를 사용자에게 제공해 준다면,
사용자는 기다림 그 자체에 덜 집중하게 됩니다.
Credits: Ramotion
Pull to refresh
이 그룹에서 유명한 애니메이션은 “pull down to refresh” 애니메이션으로, 모바일 디바이스에서 콘텐츠가 업데이트되는 프로세스에 적용됩니다.
팁 : pull down to refresh 애니메이션은 앱의 디자인 아웃라인과 매치가 되어야 합니다.
앱이 미니멀한 디자인을 따르고 있다면, 이 애니메이션 역시 그래야 합니다.
Credits: Zee Young
Notifications
움직임은 그 자체로 이목을 끌기 때문에 알림에 애니메이션 효과를 주는 것은 사용자의 경험에 지나치게 침범하지 않으면서도 즐겁게 알림을 줄 수 있는 방법입니다.
움직이는 오브젝트는 즉시 사용자의 이목을 끌게 됩니다.
Credits: Arjun Kani
2. Navigation and Transitions
애니메이션이 가장 기본적으로 활용되는 사례는 전환 효과입니다. 페이지의 레이아웃에 방금 발생한 변화가 무엇인지, 무엇이 변화를 촉발했는지, 그 변화를 나중에 다시 주려면 어떻게 해야 하는지 등을 사용자가 이해할 수 있도록 도움을 주기 위해 이런 유형의 애니메이션이 사용됩니다. 고전적인 사례로는 숨겨진 콘텐츠를 보여주는 햄버거 버튼이 있습니다.
모션 디자인은 정보를 전달하면서도 재미있는 방향으로 효과적으로 유저의 이목을 끌 수 있습니다.
Credits: Gal Shir
여기서는 보통 햄버거 애니메이션이 가장 많이 고려되는 옵션일 텐데, 내비게이션에 활용될 수 있는 애니메이션은 다음과 같이 다양합니다.
Transport between navigational context
디자이너는 애니메이션을 활용하여 사용자가 찾고 있는 콘텍스트로 매끄럽게 이동하도록 도와주며, 스크린 상의 요소 배치에 생긴 변화를 설명합니다. 전환 효과는 서로 다른 UI 상태 사이에서 다리 역할을 해줌으로, 스크린 상에 변화가 생겼을 때 어떤 일이 일어나고 있는 것인지 사용자가 이해할 수 있게 해줘야 합니다.
Visual hierarchy and connection between elements
애니메이션은 인터페이스 상의 오브젝트를 표현하고 오브젝트끼리 어떻게 상호작용하는지 보여주는 데 유용합니다. 애니메이션은 요소가 서로 어떻게 연결되어 있는지 보여줍니다.
Credits: Vitaly Rubtsov
Function change
어떤 경우에, 디자이너는 특정 조건하에 기능적으로 변화하는 액션 버튼을 디자인하라는 요구를 받기도 합니다. 보통 전반적인 공간이 제한된 모바일 디자인에서 많이 발견할 수 있습니다.
“재생”과 “정지” 버튼은 다중상태 버튼 중 아마 가장 흔하게 사용되는 사례일것입니다.
Credits: KREATIVA Studio
이런 유형의 애니메이션은 사용자가 그것을 사용할 때 어떻게 바뀌는지 보여 줍니다. 아래 사례를 보면, 유저가 플로팅 액션 버튼(floating action button)을 누르면 플러스 싸인이 연필 모양으로 바뀝니다. 연필은 가장 주된 작성 기능을 보여주는 것 입니다. 이러한 작은 디테일이 ‘다음에 일어날 일을 추측해야만 하는 상황’과 ‘두 상태에서 아이콘이 어떤 의미인지 이미 아는 상황’의 차이를 만듭니다.
버튼은 “플러스”에서 “연필”로 모양이 바뀌면서 버튼의 기능이 바뀌었음을 보여줍니다.
Credits: Material Design
3. Visual Feedback
시각적 피드백은 어떤 인터페이스에서든 매우 중요합니다. 사용자가 통제감을 느낄 수 있게 해주는데, 사용자에게 통제감이란 언제든 시스템의 현 상태를 알고 이해한다는 것을 의미합니다.
Acknowledgement
버튼이나 컨트롤 같은 사용자 인터페이스 요소는 유리 뒤에 존재한다 할지라도 실제 유형의 물체로 보이게 만들어야 합니다. 물리적 세계에서 쓰는 버튼이나 컨트롤, 그 외 다른 오브젝트들은 우리가 해당 오브젝트에 가하는 행동에 대한 반응을 보입니다. 사람들은 사용자 인터페이스 컨트롤에 대해서도 같은 수준의 반응성을 기대합니다. 이러한 갭을 줄이기 위해서, 인풋이 발생하는 즉시 인지하여, 마치 직접 조작하는 것처럼 보이고 느껴지도록 시각적 모션 단서가 움직여야 합니다.
유저의 탭에 반응을 보여주는 버튼
Credits: Material Design
Visualize the results of the actions
애니메이션은 인터랙션의 모든 지점을 개선해 줄 수 있으며 사용자가 수행하는 액션을 보강해 줄 수 있습니다. 아래 Stripe의 사례를 보면, 사용자가 “Pay”를 클릭하면, 결제가 성공적으로 되었음을 보여주기 전에 스피너가 잠깐 나타납니다. 체크표시 애니메이션은 사용자가 쉽게 결제를 했다고 느끼게 해주는데, 사용자는 이런 중요한 디테일을 좋아합니다.
시각적 반응은 인게이지먼트를 높일 수 있으며 유저를 기쁘게 해줄 수 있습니다.
Imagecredit: Michaël Villar
Conclusion
애니메이션은 정교하게 사용되면 강력한 힘을 발휘합니다. 어떤 디자인에든 생명을 불어 넣어주며, 사용자가 일상적인 태스크를 수행할 때도 몰입할 수 있게 해주며, 당연히 여러분이 군중 속에서 눈에 띄게 만들어 줄 것입니다. 잘 디자인된 애니메이션은 공들여 만들었다는 느낌을 받게 해줍니다.
| 
KIMDIRECTOR STORY
