모바일 UI 디자인 애니메이션 3가지 원칙
UX 디자인 배우기 #120
Today UX 아티클
Nick Babich의 3 Key Uses for Animation in Mobile UI Design를 번역한 글입니다.
기술의 빠른 발전으로 인해 애니메이션은 시각적 고급스러움을 위해 사용하기보다는 유저가 기대하는 기능적 요구사항이 되었습니다. 애니메이션은 인터페이스에 존재하는 많은 기능적 문제를 해결해주며 인터페이스가 생기 있으면서도 진정으로 유저를 위한다고 느끼게 해줍니다.
모바일 인터페이스의 기능성과 감성적인 힘을 향상시켜주는 ‘애니메이션 핵심 요령’을 살펴보겠습니다.
시스템 상태
항상 앱의 백스테이지에서는 많은 프로세스 진행 중입니다. 가령 데이터가 서버로부터 다운로드되고 있거나, 계산이 진행 중이죠. 이러한 프로세스에는 언제나 시간이 걸립니다. 유저에게 앱이 고장 난 것이 아니며 프로세스가 진행 중인 상태임을 알려줘야 합니다. 프로세스에 대한 시각적 싸인은 유저가 앱에 대한 통제감을 가질 수 있게 해줍니다.
로딩 인디케이터
로딩 시간은 대부분의 디지털 제품에서 피할 수 없는 상황입니다. 애니메이션이 이 문제를 해결해 주진 못하겠지만, 분명 ‘기다림’을 별로 큰 문제가 아닌 것으로 만들어줍니다.
기다리는 줄을 줄일 수 없을 때라도, 기다림을 조금 더 즐겁게 만들어 줄 수는 있습니다.
창의적인 프로세스 인디케이터는 유저가 지각하는 시간을 줄여줄 수 있습니다. 애니메이션은 유저의 제품에 대한 지각에 영향을 미쳐서 실제보다 더 좋은 제품이라고 느끼게 해 줍니다.
기다리는 잠깐의 시간 동안 흥미롭게 볼 수 있는 무언가를 유저에게 제공해준다면, 유저는 기다림 그 자체에 덜 집중하게 됩니다. Credits: Ramotion당겨서 세로고침
이 그룹에서 유명한 애니메이션은 “당겨서 새로고침” 애니메이션으로, 모바일 디바이스에서 콘텐츠가 업데이트되는 프로세스에 적용됩니다.
Credits: Zee Young팁: 당겨서 새로고침 애니메이션은 앱의 디자인 아웃라인과 매치가 되어야 합니다. 앱이 미니멀한 디자인을 따르고 있다면, 이 애니메이션 역시 그래야 합니다.
알림
움직임은 그 자체로 이목을 끌기 때문에 알림에 애니메이션 효과를 주는 것은 유저의 경험에 지나치게 침범하지 않으면서도 즐겁게 알림을 줄 수 있는 방법입니다.
움직이는 오브젝트는 즉시 유저의 이목을 끌게 됩니다. Credits: Arjun Kani내비게이션과 전환 효과
애니메이션이 가장 기본적으로 활용되는 사례는 전환 효과입니다. 페이지의 레이아웃에 방금 발생한 변화가 무엇인지, 무엇이 변화를 촉발했는지, 그 변화를 나중에 다시 주려면 어떻게 해야 하는지 등을 유저가 이해할 수 있도록 도움을 주기 위해 이런 유형의 애니메이션이 사용됩니다. 고전적인 사례로는 숨겨진 콘텐츠를 보여주는 햄버거 버튼이 있습니다.
모션 디자인은 정보를 전달하면서도 재미있는 방향으로 효과적으로 유저의 이목을 끌 수 있습니다. Credits: Gal Shir여기서는 보통 햄버거 애니메이션이 가장 많이 고려되는 옵션일 텐데, 내비게이션에 활용될 수 있는 애니메이션은 다음과 같이 다양합니다.
유저가 찾고 있는 곳으로 이동시켜 주기
디자이너는 애니메이션을 활용하여 유저가 찾고 있는 콘텍스트로 매끄럽게 이동하도록 도와주며, 스크린 상의 요소 배치에 생긴 변화를 설명합니다.
전환효과는 서로 다른 UI 상태 사이에서 다리 역할을 해줌으로, 스크린 상에 변화가 생겼을 때 어떤 일이 일어나고 있는 것인지 유저가 이해할 수 있게 해줘야 합니다. 시각적 계층구조와 요소 간 연결
애니메이션은 인터페이스 상의 오브젝트를 표현하고 오브젝트끼리 어떻게 상호작용하는지 보여주는 데 유용합니다.
애니메이션은 요소가 서로 어떻게 연결되어 있는지 보여줍니다. Credits: Vitaly Rubtsov기능 변화
어떤 경우에, 디자이너는 특정 조건하에 기능적으로 변화하는 액션 버튼을 디자인하라는 요구를 받기도 합니다. 보통 전반적인 공간이 제한된 모바일 디자인에서 많이 발견할 수 있습니다.
“재생”과 “정지” 버튼은 다중상태 버튼 중 아마 가장 흔하게 사용되는 사례일것입니다. Credits: KREATIVA Studio이런 유형의 애니메이션은 유저가 그것을 사용할 때 어떻게 바뀌는지 보여줍니다. 아래 사례를 보면, 유저가 플로팅 액션 버튼(floating action button)을 누르면 플러스 싸인이 연필 모양으로 바뀝니다. 연필은 가장 주된 작성 기능을 보여주는 것이죠. 이러한 작은 디테일이 ‘다음에 일어날 일을 추측해야만 하는 상황’과 ‘두 상태에서 아이콘이 어떤 의미를 가지는지 이미 아는 상황’의 차이를 만듭니다.
버튼은 “플러스”에서 “연필”로 모양이 바뀌면서 버튼의 기능이 바뀌었음을 보여줍니다. Credits: Material Design시각적 피드백
시각적 피드백은 어떤 인터페이스에서든 매우 중요합니다. 유저가 통제감을 느낄 수 있게 해주는데, 유저에게 통제감이란 언제든 시스템의 현 상태를 알고 이해한다는 것을 의미합니다.
버튼이나 컨트롤 같은 유저 인터페이스 요소는 유리 뒤에 존재한다 할지라도 실제 유형의 물체로 보이게 만들어야 합니다.
물리적 세계에서 쓰는 버튼이나 컨트롤, 그 외 다른 오브젝트들은 우리가 해당 오브젝트에 가하는 행동에 대한 반응을 보입니다. 사람들은 유저 인터페이스 컨트롤에 대해서도 같은 수준의 반응성을 기대합니다.
이러한 갭을 줄이기 위해서, 인풋이 발생하는 즉시 인지하여, 마치 직접 조작하는 것처럼 보이고 느껴지도록 시각적 모션 단서가 움직여야 합니다.
유저의 탭에 반응을 보여주는 버튼 Credits: Material Design액션의 결과 시각화
애니메이션은 인터랙션의 모든 지점을 개선해 줄 수 있으며 유저가 수행하는 액션을 보강해줄 수 있습니다.
아래 Stripe의 사례를 보면, 유저가 “Pay”를 클릭하면, 결제가 성공적으로 되었음을 보여주기 전에 스피너가 잠깐 나타납니다. 체크표시 애니메이션은 유저가 쉽게 결제를 했다고 느끼게 해주는데, 유저는 이런 중요한 디테일을 좋아합니다.
시각적 반응은 인게이지먼트를 높일 수 있으며 유저를 기쁘게 해줄 수 있습니다. Imagecredit: Michaël Villar툴과 튜토리얼
튜토리얼을 따라가다 보면 안드로이드나 iOS 프로젝트에 이러한 애니메이션을 적용하는 데 도움이 될 것입니다.
Adobe After Effects를 활용해서 애니메이션 만들기
Graphics & Animation 활용해서 앱 만들기 관련 가이드라인은 안드로이드 앱에 모션을 추가할 수 있도록 도와줍니다.
iOS 프로젝트에서 커스텀 애니메이션 활용하기: https://youtu.be/Of4flwvlYz4
결론
애니메이션은 정교하게 사용되면 강력한 힘을 발휘합니다. 어떤 디자인에든 생명을 불어넣어주며, 유저가 일상적인 태스크를 수행할 때도 몰입할 수 있게 해주며, 당연히 여러분이 군중 속에서 눈에 띄게 만들어 줄 것입니다. 잘 디자인된 애니메이션은 공들여 만들었다는 느낌을 받게 해줍니다.
전민수 UX 컨설턴트 소개
(UX 실무 경력: 27년차 UX 전문가: LG전자, 서울시청 등 약 300회 이상 UX 컨설팅 수행)
(UX 강사 경력: 23년차: 삼성전자, SK텔레콤, KT 등 약 1,000회 이상 UX 강의 진행)
https://brunch.co.kr/@ebprux/1332
[실시간 Live 강좌] (PM/PO/UI/UX/리서치) 수강생 모집 중
(이비피알유엑스 라이브클래스에서 매월 최소 1개에서 최대 4개 강좌 (온라인) 줌 Live 강좌 진행) (PM/PO/UI/UX/리서치/UX 방법론&프로세스 프레임웍)
[VOD 강좌] (PM/PO/UI/UX/리서치) 수강생 모집 중
(인프런에서 총 20개 VOD UX 강좌를 오픈했습니다)
(PM/PO/UI/UX/리서치/UX 방법론&프로세스 프레임웍)
https://www.inflearn.com/users/196290
