9단계로 시작하는 모션그래픽
Get started with motion design in 9 step
모션그래픽은 어려운 만큼 매력적인 결과물을 제공합니다. 저도 요새 모션그래픽에 푹 빠져있습니다. 모션그래픽에 관심이 있어 시작하고 싶으신 마음이 있으시다면, 이 글을 추천합니다.
https://uxdesign.cc/motion-in-ux-design-9-points-to-get-started-e891974dc7ee
*지금부터는 위 글에 대한 번역입니다.
9단계로 시작하는 모션그래픽
Get started with motion design
in 9 steps
Start breathing life into your creations
여러분의 창작물에 숨결을 불어넣어 보세요
‘움직인다’는 것은, 생명력과 즐거움으로 가득하다는 의미입니다. 애니메이션은 정적인 것에 생명을 불어넣어줍니다. 소프트웨어의 측면에서 봤을 때 이것은 단순히 즐거운 것 이상으로, 문제를 해결해 줍니다.
사람들은 주변 세상의 움직임을 익히 봐왔습니다. 그리고 어떠한 소프트웨어의 일관성 있는 애니메이션을 보게 된다면, 살아있고 자연스럽다고 느낍니다.
산업 사회의 선두에 있는 사람들은, 그들의 서비스를 좀 더 ‘자연스럽게’ 보이게끔 노력하고 있습니다. 모션 디자인, 모션 UX, UX 연출과 같은 세련된 단어들도 인기를 얻고 있습니다.
기억하세요 - 모션은 무의식적으로 앱의 정체성을 만들어 나갑니다. 레이아웃, 간격, 타이포그래피, 그리고 색깔이 그런 것처럼요.
아이폰에서 스크롤이 끝났을 때 느낄 수 있는 그 탄력 있는 반동을 느껴보셨나요? 이렇게 사소해 보이는 디테일이 애플 제품의 정체성을 형성하는데 큰 역할을 하고 있습니다.
좋습니다, 이제 모션을 사용해봅시다.
관찰하세요
모션을 보는 눈을 키우세요. 움직이는 걸 볼 수 없다면, 만들 수도 없습니다. 여러분이 가장 좋아하는 앱을 사용하면서, 화면 안에서 어떤 식으로 움직임이 일어나는지 관찰하세요. 다시 한번 보고, 왜 여러분 마음에 들었는지 생각하고, 움직임의 디테일을 찾아보세요. 모양, 크기, 위치, 색깔 등 바뀌는 모든 것을 관찰하세요. 모션이 작던지 크던지 중요하지 않습니다. 전체 화면에서 어떤 부분에 모션이 있는지 찾는 게 중요합니다.
애니메이션은 그냥 레이어 덩어리가 아닙니다.
애니메이션은 더 깊은 의미를 내포하고 있습니다. 창작자로서, 여러분은 의식적으로 이 생각에서부터 시작해야 합니다. 만약 디자인 단계에 있다면, 프로토 타입에 시간의 개념을 적용시키세요. 만약 개발 단계에 있다면, 코드를 모듈로서 구성(https://blog.prototypr.io/architecting-ios-development-at-zomato-cf894 a 7 fa5 e3)하여 UI에서 쉽게 움직이게끔 만드세요.
팁 - 여러분의 애니메이션에 들어있는 정체성을 깊게 생각하면, 그것 자체로 개성이 될 것이고, 여러분이 어떤 걸 만들고자 하는지에 대한 심도 깊은 관점을 제공할 것입니다.
어떤 부분에 모션을 넣어야 할까요?
여러분의 서비스에서 모션이 소개될만한 곳은 화면이 전환되는 부분, 사용자가 서비스와 상호작용 하는 부분, 또는 사용자가 어떤 걸 기다리는 부분을 생각할 수 있습니다.
모션 UX의 종류
여러분은 서비스에 들어있는 모션을 각각 Transition(내용이 바뀌거나/사용자가 다른 화면으로 넘어갈 때), Micro-Interactions(Twitter의 좋아요 버튼처럼), Graphical Animations(Zomato주문 앱의 스플래시 화면에서 사람이 스쿠터를 점프해서 넘어가는 것과 같은)으로 분류할 수 있습니다.
모션을 통해 공간 정보를 제공하세요
만약 UI 요소가 화면 오른쪽에서 시작한다면, 사용자는 자연스럽게 머릿속으로 요소의 위치가 오른쪽이라고 생각합니다. 예를 들어, 만약 햄버거 메뉴 버튼이 화면 왼쪽 위에 있다면, 그 메뉴는 반드시 왼쪽에서부터 동작해야 합니다. 여러분의 애니메이션이 올바르게 사용자들과 소통하는지 알아보기 위해서, 사람들에게 보여주고 그들이 하는 말을 들으세요. 오해의 소지를 없앨 수 있는 가장 간편한 방법입니다.
Duration, Timing Curve, Animation Path, Initial&Final Values와 같은 개념을 익히세요
이 변수들은, 여러분의 애니메이션을 구성해줍니다. 이 변수들에 익숙해지고, 조절해보세요. 이 변수들을 조절할 수 있을 때, 비로소 좋은 모션을 만들 수 있습니다. UI에 있어서, 구글은 좋은 가이드라인을 가지고 있습니다(https://material.io/guidelines/motion/material-motion.html).
한없이 기다리게 하지 마세요
애니메이션이 끝날 때까지 사람들을 기다리게 하지 마세요. 만약 진짜로 기다려야 한다면, 의미 있는 애니메이션으로 기쁘게 해야 합니다. 항상 애니메이션은 문제 해결에 사용되어야 함을 명심하세요. 그래서 애니메이션이 들어간 로딩 화면이 존재하는 것입니다. 더불어 애니메이션으로 서비스의 무게를 무겁게 하지 마세요. 이건 영화가 아닙니다.
프로의 팁 - 즐거운 사용자 경험을 위해서 애니메이션을 간소화하고, 서비스 스토리 라인에 어울리는 애니메이션을 만드세요.
사용할 툴
Lotti2, Adobe Animate CC, After Effects, Sketch2 AE, Framer, Origami, Animatic App, UIDynamics는 모션 디자인을 위한 툴들입니다. 한번 확인해보세요.
저는 시작하기 전에 먼저 펜과 종이를 통해 아이디어를 구체화하길 추천합니다. 그런 후에 아무 소프트웨어를 사용해보세요. 이 글의 경우, 저는 손그림을 Animatic App을 사용하여 만들었습니다. 이 앱은 애니메이션을 간단하게 하고 집중할 수 있게 도와줍니다.
마음에 드는 애니메이션을 저장하세요
마음에 드는 애니메이션을 저장하세요. 계속해서 돌려보고, 느리게 재생해서 요소들이 어떤 식으로 움직이는지 이해해보세요. 모방을 통해서도 배워보세요. 제 컴퓨터는 제가 마음에 들어 저장한 GIF 파일로 가득합니다. Dribble에서도 GIF를 저장할 수 있습니다. 더불어, 애니메이션을 그대로 녹화하려면 Giphy Capture을 사용해보세요. 꽤나 잘 됩니다.
보너스 - 모션에 대한 두려움을 떨쳐내세요
아직도 망설여지시나요? 일단 앉아서 진정해보세요. 맛있는 것도 먹고요. 좋아하는 노래도 틀어놓으세요. 핸드폰을 끄고, 종이와 펜을 가져오세요. 아니면 한숨 잔 뒤에 하는 것도 기분 좋은 편안한 선택이겠군요. 펜을 쥐고 마음 가는 대로 그려보세요. 다른 종이를 가져와 다른 그림을 그려보세요. 그렇게 몇 장의 종이를 통해 스토리보드를 만들어보세요. 그렇게 시작하는 겁니다. 일단 시작해보세요!
