UI Animation
Mobile에 사용되는 UI 애니메이션 & 트랜지션
다양한 애플리케이션이 많이 출시되고 있는 요즘, 디자인 트렌드는 스큐어모피즘을 넘어 플랫디자인이 강세라고 할 수 있습니다. Flat Design 이란 말 그대로 평면 디자인이라는 뜻입니다. 컬러와 타이포, 심플한 아이콘을 사용하고, 과도한 그림자나 그라디언트 효과 등을 최소한으로 사용하거나 효과를 주지 않고, 심플하게 제작하는 것이 특징이라고 할 수 있습니다.
https://www.pinterest.com/pin/328762841527072248/ https://www.pinterest.com/pin/328762841527072234/이러한 플랫디자인이 유행하면서 심플해진 아이콘과, 컬러 덕분에 사용자들은 애플리케이션을 사용함에 있어서 기능에 더욱 집중할 수 있고, 쉽게 필요한 기능에 다가갈 수 있게 되었습니다. 그와 동시에 빠질 수 없게 된 것이 바로 UI Animation과 Transition입니다. 플랫디자인의 심플하고 직관적인 아이콘들은 사용자들에게 버튼이나 앱의 기능을 쉽게 이해할 수 있게 만들었다면, 아이콘에 입혀진 애니메이션이나 트랜지션 효과들은 동적인 느낌을 더해 사용자들이 재미를 느낄 수 있도록 도와주는 역할을 하고 있습니다. 다음과 같은 사례들을 통해 UI Animation이 주는 효과를 좀 더 확실히 알 수 있습니다.
Loading Animation
어떤 작업을 기다릴 때 우리는 항상 로딩 중이라는 문구를 볼 수 있습니다. 작업을 실행하면서 꼭 필요한 로딩 시간을 어떻게 하면 사용자들이 큰 불편 없이 기다릴 수 있는 방법에는 로딩 애니메이션이 있습니다. 로딩 애니메이션은 사용자들에게 기다림은 막연한 지루함이 아니라 하나의 즐거움이라는 것을 선사합니다. 어플과 연관된 일러스트 애니메이션이나, 속도감이 빠른 모션을 통해 체감시간을 줄여주는 효과를 주고 있습니다. 또한 페이스북이나 인스타그램의 경우 사용자가 마지막으로 접속했던 화면을 로딩 화면으로 제공함으로써, 체감시간을 줄여주고 있습니다.
로딩아이콘이 빠르게 애니메이션 되면서 기다리는 사용자가 느끼는 체감시간을 줄여주는 효과를 줍니다. http://dribbbleboard.com/#Humdinger
비행기 아이콘을 통해 로딩화면이 마치 비행기가 목적지에 도착한 느낌을 제공해 재미를 줍니다. https://www.pinterest.com/pin/32876284152707271
https://dribbble.com/shots/1228325-Barpass-Loader-GIF▲로딩 화면에 애플리케이션과 연관 있는 아이콘과 애니메이션을 제공함으로써 애플리케이션의 기능을 미리 엿볼 수 있습니다.
Change Animation
버튼 A가 B로 바뀌는 형식의 UI 애니메이션입니다. 다르게 생긴 두 버튼이 애니메이션을 통해 자연스럽게 연결됨으로써 하나의 버튼으로 보이기 때문에, 별다른 설명 없이 사용자의 시선을 유도하고, 버튼이 어떠한 기능을 담고 있는지, 어떠한 역할을 하는지 자연스럽게 인지할 수 있습니다. 아이콘의 개수가 많아진다면 아무리 플랫 한 디자인이라도 답답한 느낌을 받을 수 있습니다. 때문에 이 애니메이션을 사용하면 두개의 버튼을 다른 장소에 위치시킬 필요가 없고, 하나의 버튼만 화면에 보여줄 수 있기 때문에, 효율적으로 화면을 활용할 수 있다는 것이 장점입니다.
https://dribbble.com/shots/1894827-Share-Results▲로딩아이콘이 result아이콘으로 자연스럽게 전환되면서 시선을 버튼으로 유도하고, 집중할 수 있도록 도와주는 애니메이션.
https://www.pinterest.com/pin/328762841527080293/▲서치버튼이 텍스트 입력창으로 변하면서 사용자들이 버튼의 기능을 쉽게 확인할 수 있고, 녹음 버튼으로 변경되면서 한 공간에 두 가지 아이콘을 액션에 따라 보여주고 있습니다.
https://dribbble.com/shots/2028391-Server-iOS-Interactions▲우측 버튼을 탭 하면 X 버튼으로 변하면서 자연스럽게 설정창이 내려오는 애니메이션.
Appear Animation
하나의 버튼에서 다른 기능의 버튼, 혹은 리스트들이 등장하는 애니메이션입니다. 보통 메뉴나 오버플로우 같은 버튼에 많이 활용되고 있으며, 분리되거나 확장되는 애니메이션을 통해 버튼 내에 포함되어 있는 기능들을 자연스럽게 보여줍니다. 메뉴 버튼과 리스트 화면 사이에 연결해주는 애니메이션이 없다면 원모 양의 버튼과 사각형 모양의 리스트는 잘 어우러지지 않을 것입니다. 때문에 버튼 사이에 원에서 퍼져나가는 모션이나, 분리되는 모션을 보여줌으로써 다른 모양의 버튼이지만 자연스러운 연결을 보여주고 있습니다.
https://cocoapods.org/pods/KYGooeyMenu▲메뉴 버튼을 누르면 +모양의 버튼에서 X모양으로 자연스럽게 전환되고, 동일한 모양의 버튼이 분리되어 나와 부가기능을 보여주고 있습니다.
https://www.tumblr.com/search/aur%C3%A9lien%20salomon▲메뉴 버튼을 누르면 그 안에 속해 있는 리스트로 연결되며 버튼과 리스트 형식의 UI가 자연스럽게 이어질 수 있도록 도와주고 있습니다.
https://dribbble.com/shots/1968869-Spinnin-App-Menu-Animation▲좌측 상단 메뉴 버튼의 모양이 확장되고, X아이콘으로 전환되며 리스트들이 나타나는 형식으로, 화면이 전환되는 효과도 함께 보여주고 있습니다.
Story Animation
애플리케이션과 연관되는 귀여운 일러스트를 활용한 애니메이션입니다. 애플리케이션의 내용을 담고 있는 일러스트나, 아이콘에 어울리는 모션을 줌으로써 한편의 애니메이션을 보는듯한 느낌을 받을 수 있습니다. 이를 통해 어플의 아이덴티티를 사용자에게 더 깊게 각인시킬 수 있는 효과를 가져오고, 기능을 좀 더 기억하기 쉽도록 도와주는 효과를 제공합니다.
https://www.pinterest.com/pin/328762841527036755/▲My files라는 버튼 기능에 걸맞게 폴더모양의 아이콘이 열리면서 저장된 리스트를 보여주고, 닫힐 때에도 파일이 접히듯이 들어가는 모션을 통해 버튼의 기능을 확실하게 보여주고 있습니다.
https://www.pinterest.com/pin/328762841527036767/▲로딩이 되는 과정이 종이비행기가 풍경 사이로 날아갔다 되돌아오는 모션을 통해 아이콘과 배경 이미지가 하나의 그림으로 느낄 수 있습니다.
http://wouterraateland.tumblr.com/▲귀여운 일러스트 애니메이션을 통해 로딩 시간을 지루하지 않게 연출하였고, 화면 전환 후 로딩에 쓰인 모션과 동일 한 모션을 주어 자연스럽게 버튼의 위치를 인식할 수 있습니다.
Transition
앞서 보여드렸던 예시들은 버튼 애니메이션이 대부분 이었다면, 이번에 보여드릴 예시는 화면 전환 효과입니다. 버튼애니메이션은 서로 이어지는 기능들 사이에 존재해 사용자들의 체감시간을 줄여주었다면 Transition은 다른 새로운 기능의 화면으로 넘어갈 때 보이는 효과라고 할 수 있습니다. 사용자가 한눈에 화면이 변한 것을 알 수 있도록 배경색을 함께 바꾸어 주거나, 레이아웃을 재 배열하는 식으로 많이 사용하고 있습니다.
https://www.pinterest.com/pin/328762841527037586/▲사용자가 탭 하는 부분의 파일이 색종이처럼 전체 화면으로 퍼져 나감과 동시에 색깔 또한 변화를 주어 사용자가 선택한 버튼의 위치와 전환된 화면임을 확실히 전달해 주고 있습니다.
https://dribbble.com/shots/1749645-Contact-Sync▲사용자가 스위치 버튼을 on/off 할 때 스위치 버튼의 원모 양 버튼의 애니메이션과 배경색 또한 함께 변화시켜서 더 직관적으로 사용자의 선택을 보여줍니다.
https://www.pinterest.com/pin/328762841527036999/▲색상과 레이아웃의 변화, 애니메이션의 변화를 통해 서로 다른 화면을 확실히 인지시켜 주고, 과하지 않은 색상 변화와 애니메이션을 통해 사용자가 부담을 느끼지 않도록 해줍니다.
Application case
이러한 애니메이션 효과들은 많은 애플리케이션에 적용되어 보이고 있고, 간단히 다운받아 사용할 수 있습니다. 그중에서 이러한 애니메이션들의 효과가 극대화되는 애플리케이션은 날씨 애플리케이션이라고 생각합니다. 굳이 텍스트를 읽지 않아도 아이콘과 그에 따른 애니메이션 효과들로 충분히 날씨를 인식할 수 있기 때문입니다. 또한 구글의 메테리얼디자인에 적용된 애니메이션들 역시 사용자들의 반응을 적극적으로 이끌어 내고 있음을 알 수 있습니다. 단순히 투명도값만 적용되었던 프레스 효과 대신 버튼이 확장되고, 다른 버튼으로 변화하면서 사용자들은 어떠한 버튼을 눌렀는지, 그 버튼은 어떠한 기능을 하는지 좀 더 편리하고 자연스럽게 인지하고, 연상할 수 있게 되었습니다.
https://www.pinterest.com/pin/405886985144604144/▲날씨 아이콘과 애니메이션 효과로 사용자는 빠르게 날씨에 대한 정보를 인식할 수 있습니다.
https://www.pinterest.com/pin/328762841527037645/▲하루 날씨를 리스트 형식으로 보여주고, 그 안에 날씨 아이콘이 애니메이션 되면서 그날의 날씨를 간단하게 알 수 있습니다.
https://www.google.com/design/▲구글 매테리얼 디자인 애니메이션
▲Elevate 두뇌 트레이닝 애플리케이션.
여러 가지 애니메이션 효과를 사용해 사용자들이 지루하지 않고 게임을 즐기듯이 플레이할 수 있도록 제작되었습니다.
▲Flipboard 나의 매거진을 만들어서 한데 모아 기사를 볼 수 있는 애플리케이션.
Flip이라는 앱의 아이덴티티에 걸맞은 화면 전환 효과를 사용해 진짜 잡지의 느낌을 받을 수 있습니다.
앞서 사례를 살펴보았듯이 작은 버튼 애니메이션에서부터 크게는 컬러와 레이아웃이 모두 변하는 트랜지션효과까지 사용자의 반응을 중요시하는 애니메이션들을 활용한 애플리케이션이 많이 등장하고 있습니다. 다양한 UI 애니메이션을 조사하면서 어떤 애니메이션이 제일 좋은 애니메이션인가 보다는 어떤 효과가 어떤 애플리케이션에 어울릴 것인지, 어떤 화면에 어울릴 것인지를 먼저 생각해야 함을 깨달았습니다. 같은 애니메이션일지라도 애플리케이션의 색상, 아이콘 타입에 따라 사용자는 전혀 다른 느낌을 받을 수 있기 때문입니다. 또한 과도한 애니메이션을 오히려 눈을 피로하게 하고, 기능에 집중할 수 없음으로 강약을 조절하여 적절한 위치와 상황에 사용해야 효과를 극대화할 수 있습니다. 애플리케이션의 콘셉트, 컬러, 아이콘에 맞는 애니메이션을 적용한다면 경쟁력 있는 UI 디자인을 완성할 수 있을 것이라 생각합니다.
ETC
UI Animation 사례 모음
https://www.pinterest.com/diqn329/ui-animation/
UI Animation 사이트
http://uigifs.com/ http://inboxpixels.com/ http://capptivate.co/
구글 매테리얼 디자인 가이드
https://www.google.com/design/spec/material-design/introduction.html
*참고사이트
http://www.worldweb.co.kr/articles/articles_view.html?idno=16076
