다이나믹 인터페이스를 위한 애니메이션 디자인
애니메이션을 통한 의미 전달과 사례
회사 블로그에도 올라간 글이지만 조금 더 끄적이며 브런치에 옮겨본다.
오늘날 하드웨어의 발달과 함께 정보 표현 기술의 발달은 정보의 전달과 탐색에 있어 정적(Static) 인터페이스에서 다양한 모션을 이용한 동적(Dynamic) 인터페이스의 구현을 가능하게 하였다. 이러한 동적인 인터페이스는 웹 사이트뿐만 아니라 모바일 기기의 인터페이스에서도 강력하게 적용되고 있다.
이런 추세와 더불어 마이크로 인터랙션(Microinteractions)이라는 용어가 등장하기도 했다. 마이크로 인터랙션이란 어떠한 제품이나 서비스를 이용 시 세밀한(그리고 기분 좋은) 피드백을 사용자에게 제공하는 것을 말한다. 이러한 방식이 필수 요소는 아니지만 애니메이션이 적용된 인터페이스는 사용자에게 더 나은 피드백, 주목성, 재미 등을 제공한다.
많은 디자이너들이 애니메이션 인터랙션을 활용 및 적용하고 있는 추세다. 디자인 커뮤니티인 드리블(dribble) 에는 매일 수십/수백 개의 멋지게 움직이는 인터페이스들이 게시된다.
https://dribbble.com/shots/3218661-Headphones
https://dribbble.com/shots/3219301-List-and-Detail-animated
https://dribbble.com/shots/3213188-The-studio
https://dribbble.com/shots/3208710-Movie-site-interaction
애니메이션이 적용되어 멋지게 움직이는 인터페이스 디자인을 보면 어떤 생각이 드는가? 객체가 마치 생명력과 개성을 가진 것처럼 인터페이스에 감동과 매료되기도 하며, 신기함과 귀여움도 느끼곤 한다. 저러한 애니메이션들은 그저 움직이고 좋아 보이는 것이 아닌 많은 이야기들을 담고 있다.
애니메이션은 움직이는 그림으로 사고와 감정을 커뮤니케이션하는 예술이다.
디즈니 캐릭터의 움직임이나 표정을 보면, 특정 시점에 캐릭터가 무슨 생각을 하고 감정은 어떤지 알 수 있다.
표정 변화를 통해사고의 과정을 인지한다http://colorings.net/2016/08/24/disney-princess-ariel-cartoon-drawings/
어떠한 서비스가 사용자의 액션과 환경에 대해 반응하는 것을 시각적으로 보여주면, 서비스가 상황을 어떻게 인지하고 있는지 그리고 사용자가 다음에 무엇을 할 수 있는지를 알려줄 수 있다. 거기에 애니메이션을 통해 상호 작용을 추구한다면 단순히 텍스트, 이미지에 반응해야 하는 것보다 훨씬 더 흥미로운 과정이 될 것이다.
구글은 머티리얼 디자인 가이드를 통해 애니메이션을 이렇게 설명하고 있다.
AuthenticMotion / Responsive Interaction / Meaningful Transaction / Delightful Details
(from GoogleMaterial Design Guide)
AuthenticMotion : 사물의 모양이 그것이 어떻게 행동하는지를 나타내는 것처럼, 개체의 움직임을 보면 그것이 가벼운지, 무거운지, 유연한지, 단단한지, 작은지, 큰지를 보여준다. 모션은 아름다움과 우아함으로 공간적 관계, 기능성, 그리고 의도를 묘사한다.
http://codepen.io/ryanbrownhill/pen/mJeQyq? editors=110
Responsive Interaction : 반응형 상호 작용은 사용자 입력으로 시기적절하고, 사리에 맞으며, 마음에 드는 화면 반응을 생성함으로써 앱에 대한 깊은 탐구를 고취시킨다. 각각 의상호 작용은 사려 깊고, 어쩌면 기발하겠지만, 결코 산만하지 않아야 한다.
http://blog.webbb.be/material-design-animation-examples/
Meaningful Transaction : 모션 디자인은 알리는 것뿐만 아니라 즐거움을 주는 방법으로 사용자의 주의를 효과적으로 이끌 수 있어야 한다. 사용자들의 시선을 어디에 두어야 할지, 어떤 단계로 행동을 취해야 할 지안 내해 주어, 전체적인 사용자의 경험을 아름답게 한다.
http://blog.webbb.be/material-design-animation-examples/
Delightful Details : 모든 모션 요소들은 서비스의 Seamless 한 경험과 미 그리고 기능을 위해 함께 작용하여, 사용자들에게 정보를 알려주고 서비스의 완결성을 높여준다. 사용자들은 모션의 아주 작은 디테일에도 주목을 한다.
https://dribbble.com/shots/1214864-Dining-time
동적 인터페이스를 제작할 때는 사물이 어떻게 움직이고 실제로 어떻게 행동하는지에 대한 깊은 이해가 필요하다. 사용자는 스크린에서 어떤 대상을 볼 때 자연스러운 움직임을 기대하고, 그러한 사용자를 사로잡기 위해서는 시각/감정의 몰입과 피드백이 필요한 것을 잊지 말아야 한다.
동적(Dynamic) 인터페이스는 스크린 기반의 서비스에서만 적용되는 것이 아니다. 최근 연구가 활발한 로봇에서도 그 사례를 찾아볼 수 있다.
위의 로봇은 Social Robot을 지향하는 JIBO라는 가정용 로봇이다.
외관이 참 단출하다. 1개의 눈/정보 표현을 위한 스크린이 탑재된 머리, 로봇을 고정하는 몸통.
마치 디즈니 애니메이션, 월-이(Wall-E)가 떠오른다. 다리나 바퀴가 없는 고정형 로봇이기 때문에 몸통과 고개를 가능한 다양하게 움직일 수 있으며 귀여운 표정으로 자신의 감정 상태를 사람에게 전달한다. 이러한 것들을 통해 사용자와의 교감 수준이 기존에 우리가 봐왔던 로봇들과는 큰 차이를 보이고 있다.
Wall-E, 로봇이지만 생물과 유사한 개체라고 인식된다http://pizzacinema.net/cine/de-big-hero-6-a-mazinger-z-los-mejores-robots-de-pelicula/2
지보의 움직임과 표현, 즉 연출의 방식은 디즈니의 애니메이션 기법과 유사하다.
Exaggeration (과장)
실제의 동작 그대로를 애니메이션으로 재현하면 그 동작이 상당히 지루하거나 어떤 행동을 할지 알 수 없기 때문에 캐릭터들은 그 동작을 과장하여 표현한다.
https://www.slashgear.com/jibo-delayed-to-2017-as-social-robot-hits-more-hurdles-20464725/
지보의 제한된 몸 구성으로 인한 행동 표현의 제약을 과장된 움직임으로 감정/행위/피드백을 역동적으로 표현하여 사용자에게 의미를 전달한다.
Squashand Stretch (찌그러짐과 늘어남)
애니메이션에 등장하는 모든 물체들은 찌그러짐과늘어남을 통해 그 움직임이 더욱 현실감 있게 표현된다. 정도와 튀는 속도 조절에 따라 물체가 무거운지, 유연한지, 탄력이 있는지 차이를 줄 수 있다.
https://www.entrepreneur.com/article/242047
지보는 눈 모양을 조절하여 자신의 상태(기다림/알림/반응 등)를 표현한다.
Arc of motion (동작이 그리는 호/곡선)
캐릭터 또는 사람은 회전하거나 움직일 때 직선이 아닌 곡선으로 움직인다.
예를 들어 얼굴을 왼쪽에서 오른쪽으로 돌려볼 때눈의 위치는 수평이 아니라 약간 아래로 곡선을 그리며 회전하고, 걸어갈 때나 뛰어갈 때도 캐릭터의 중심점이 그리는 path는 곡선을 그린다.
https://www.indiegogo.com/projects/jibo-the-world-s-first-social-robot-for-the-home#/
지보는 사람의 움직임과 유사하게 곡선 형태로 움직여 자신의 행동을 표현한다.
몇 가지의 예만 들었지만 이러한 기법을 통해 기존 로봇(관절이 딱딱한/그저 사람 모양인)과 다른 사용성과 감성(피드백, 주목성, 재미 등)을 사용자에게 전달해 주고 있다.
동적(Dynamic) 인터페이스는 수많은 상호 작용과 애니메이션으로 구성되어 있으며 애니메이션은 하나의 단순한 움직임이 아닌 다양한 오브젝트의 유기적 결합 및 사용자의 심리적 요인을 고려해야 한다.
UX 디자이너는 이러한 것들을 컨트롤하고 숙련함으로써 사용자에게 자신의 의도를 명확하게 전달해야 한다. 그저 좋아 보이는/미려해 보이는 애니메이션을 무분별하게 인터페이스에 적용하는 것은 지양해야 함은 말이 필요 없다. 인터페이스 디자인은 스타일을 표현하는 것도 중요하지만, 해결해야 할 문제에 대해 이해하는 것에서부터 시작된다.
참고 자료 출처
https://paulstamatiou.com/design-provide-meaning-with-motion/
https://medium.freecodecamp.com/the-principles-of-ux-choreography-69c91c2cbc2a#.27lhj2un2
https://medium.com/@pasql/transitional-interfaces-926eb80d64e3#.oxg9aydui
