모바일앱에서의 애니메이션
모바일 앱에서의 ‘애니메이션’은 자칫 지루하거나 단조롭게 느껴질 수 있는 UI를 생동감 있게 보여줄 수 있는 가장 좋은 방법 중 하나인데요. 최근의 앱들을 살펴보면 대부분이 애니메이션을 상황에 맞게 활용하고 있으며, 그 종류 역시 다양해지고 있는 추세입니다. 얼마전 소개드렸던 ‘Airbnb’의 ‘Lottie’ 역시 모바일앱에서 활용할 수 있는 애니메이션 라이브러리를 제공해주는 서비스였고, 앞으로도 관련 서비스는 물론 사용 방법이 점점 많아지지 않을까 하는 생각이듭니다. 오늘은, 모바일앱에서 사용자를 위해 한 번쯤은 고려해야할 애니메이션 3가지에 대해 정리해보고자 합니다.
‘Lottie’는 ‘Adobe’의 ‘After Effects’를 활용한 애니메이션을 실시간으로 랜더링 해주는 툴으로, iOS와 Android는 물론 React Native에서 활용가능한 애니메이션 라이브러리를 제공해줌.보통은 화면 크기에 맞는 여러 이미지와 함께 수많은 코드를 작성해야 하는데, ‘Lottie’를 활용하면 오픈 소스를 활용하여 풍부한 애니메이션을 쉽게 적용 가능함. ‘Lottie’에서 제공하는 라이브러리의 경우 ‘bodymovin’이라고 불리는 ‘After Effects’에 의해 출력된 ‘Json‘을 기반으로 구성되어 있으며, ‘shape layers, masks, alpha mattes, trim paths, dash patterns’ 등의 기능을 지원. (자세한 내용 확인 : 이번주에 만난 매력적인 디자인 툴 4)
1.시스템 상태
사용자가 앱을 사용하는 동안, 백그라운드에서는 수많은 과정들이 벌어지게 되는데요! 서버로부터 데이터를 받아오는 것이 대표적인 것 중 하나로, 이 경우 유저의 사용 경험에도 영향을 끼칠 수 있습니다. 때문에 이런 상황에서는 앱이 멈췄거나 잘못된 것이 아니라는 사실을 사용자에게 보여줄 필요가 있죠. 그렇지 않을 경우 즉각적인 이탈로 이어질 수 있습니다.
(1)로딩중이라는 안내
대부분의 모바일 앱에서 로딩 과정은 불가피합니다. 로딩이라는 과정 자체를 애니메이션이 해결해줄 수 있는 것은 아니지만 사용자로 하여금 로딩중이라는 상태에 대해 명확하게 인식하고, 지루하지 않게 기다릴 수 있는 ‘인내심’을 심어줄 수 있습니다. 애니메이션은 제품에 대한 사용자의 인식에 영향을 미치므로 실제보다 더 좋아 보입니다.
(2)당겨서 새로고침 하기
모바일 웹에서는 물론 모바일 앱에서도 익숙하게 쓰이고 있는 새로고침 방법 중 하나인데요! 구글 크롬의 경우 페이지를 당겨 새로고침 뿐만아니라 탭 추가 및 삭제를 쉽게 할 수 있도록 업데이트를 진행하기도 했습니다. 그만큼 우리에게 익숙한 제스처가 바로 화면을 위에서 아래로 당기는 것이라고 할 수 있죠. ‘새로고침’ 역시 로딩이 필요하기에 그 순간을 채워줄 애니메이션은 효과적으로 활용될 수 있습니다. 위의 사례처럼 서비스 로고를 다시 한 번 재치있게 보여줄 수도 있고요 🙂
(3)알림
앱을 사용하는 과정에서 ‘알림’을 꼭 봐야하는 서비스라면, 알림 아이콘에 애니메이션을 추가하는 것도 매력적인 방법 중 하나입니다. 보통 알림은 앱이 종료된 상태에서, 정해진 상황에 맞춰 전달되는것이 일반적이기 때문이죠. ‘플로우‘와 같은 업무용 서비스의 경우 여러개의 프로젝트(그룹의 개념)가 오픈되어 있는데요! 현재 보고 있지 않은 다른 프로젝트의 상황을 알려줄 때, 예를 들어 파일이 업로드 되거나 글이 등록되었을 때 위와 같은 알림 애니메이션을 활용하면 사용자에게 자연스럽게 이를 알릴 수 있지 않을까 싶네요.
2.메뉴 그리고 전환
애니메이션은 ‘전환’을 통해 사용자에게 페이지와 페이지 또는 기능과 기능 사이의 연결고리 역할을 하기도 합니다. 위의 이미지와 같이 햄버거 메뉴를 예로 들면, 햄버거 메뉴를 선택했을 때 기존 화면에서 어떻게 전환이 되며, 특정 메뉴를 선택했을 때에는 어떤 전환이 발생하는지 사용자가 알 수 있도록 도와주는 것이죠. 뿐만아니라 인터페이스를 구성하는 각각의 요소들이 어떻게 상호작용하는지를 설명해주기도 합니다. 때문에 사용성을 해치지 않는 선에서 애니메이션을 활용해야 하며, 맥락에 맞게 설계하는 것이 중요하죠. 사용자가 메뉴를 눌렀을 때, 어색하게 느끼거나 불필요하다고 느끼는 경우, 되려 독이될 수 있습니다.
모바일앱의 경우 활용할 수 있는 공간이 제한적이기에 상황에 맞게 아이콘을 ‘전환’시킬 수 밖에 없습니다. 대표적인 것으로는 우측 하단에 ‘+’아이콘을 배치하여, 이를 선택하면 다양한 기능을 활용할 수 있도록 숨겨져 있던 아이콘들이 노출되게 하는 것입니다. 다만, 이렇게 상황에 맞춰 변경되는 아이콘의 경우 연관성이 높아야 하는데요! 위의 사례와 같이 재생과 일시정지를 애니메이션으로 연결시켜주거나, 연필 아이콘을 탭했을 때 콘텐츠를 작성하는 여러가지 방법을 노출 시켜주는 것이 대표적이라 할 수 있습니다.
3.시각적인 피드백
유저가 앱을 사용함에 있어, 시각적인 피드백을 제공해주는 것은 정말 중요한 작업 중 하나인데요. 여러개의 선택지가 있고, 그 중 하나를 선택했을 때 제대로 선택이 되었다는 것을 명확하게 보여줘야 합니다. 위의 이미지를 보면, 선택한 버튼이 입체적으로 노출되어 피드백을 주고 있는데 이런 장치가 필요하다는 것이죠.
조금더 나아가, 위와 같이 선택된 메뉴가 무엇인지 명확하게 보여주면서 애니메이션을 통해 탭이 이동되었다는 점을 보여주는 것도 하나의 방법입니다. 선택된 메뉴의 아이콘을 진하게 보여주는 것 보다 조금 더 구체적인 피드백을 유저에게 제공해줄 수 있기 때문입니다.
