brunch

You can make anything
by writing

C.S.Lewis

by 유플리트 Nov 29. 2024

내가 만든 디자인에 모션 한스푼

지난 번에 “중요한 건 결국 사용자의 경험과 앱의 목적에 맞는 디자인을 선택해야 한다.” 라며 글을 마쳤는데요.
이번에는 사용자 경험(UX) 디자인에 핵심 요소 중 하나인 모션 디자인에 대해서 이야기 해볼까 합니다.

과연 어떻게 모션 디자인을 통하여 사용자의 경험을 개선하고,
실제로 적용하기 위해서 활용할 수 있는 툴에는 어떤 것들이 있을까요?

01.모션 디자인(Motion-Design)이란?

모션 디자인이란 우리가 눈으로 볼 수 있는 모든 인터페이스에서 움직임을 사용하여 사용자의 상호작용과 참여를 향상시키는 것을 의미합니다.
쉽게 말해 그래픽이나 글자, 인물, 조형물 등 다양한 그래픽 요소에 움직임을 준다! 라고 생각하면 됩니다.

<사진출처: 바이스 버사 디자인>

02.사용자 경험 개선하기

우리가 평소에 서비스 내에서 보는 화면들은 모두 정적인 이미지로 구성되어 있어요.
디자이너가 다양한 디자인 제작 툴(포토샵, 일러스트레이터, 피그마, 스케치 등)을 사용하여 디자인을 할 때, 그래픽 또한 모두 멈춘 상태의 이미지죠.
하지만 너무 정적인 그래픽 요소만 제공하다보면, 사용자가 어떤 행동을 해야하고, 이 서비스가 어떤 정보를 어떻게 보여주고 싶어하는지 100% 경험하기 어려울 수 있습니다.
그렇다면 어떻게 모션 디자인을 통하여 사용자의 경험을 개선 할 수 있는지에 대해서 살펴 보겠습니다.

1. 사용자 참여 향상

모션 디자인의 주요 역할 중 하나는 사용자의 주의를 끌고 유지시키는 것입니다. 모션은 사용자에게 감정적인 반응을 유도하고 더 많이 기억하게 만듭니다. 정적인 디자인과 달리, 모션 그래픽은 사용자의 집중을 유도하고, 연속성을 만들며, 관심을 유지시킬 수 있습니다.

<사진출처 : 아이부자 앱 내 캡쳐>

2. 대기 시간 단축

로딩 화면은 사용자에게 짜증나고 지루함을 유발할 수 있지만, 모션 디자인은 대기 시간을 더 견딜 수 있게 만듭니다. 재미있는 애니메이션이나 진행 바 등을 사용하면 대기 시간이 더 짧게 느껴지고 사용자가 덜 지루해집니다.

<사진출처 : KB스타뱅킹 앱 내 캡쳐>

3. 스토리텔링 강화

모션 디자인은 사용성뿐만 아니라 브랜드의 스토리와 개성을 전달하는 데도 중점을 둡니다. 캐릭터, 인포그래픽 또는 제품 시연을 애니메이션화하여 스토리를 생동감 있게 만들 수 있습니다. 애니메이션화된 스토리텔링은 사용자 경험에 깊이와 감정을 더해 사용자가 콘텐츠와 브랜드 자체에 더 쉽게 연결될 수 있도록 도와줍니다.

<사진출처 : 온앤온서울-유튜브 채널>

4. 사용자 피드백 및 검증

03.다양한 툴 활용하기

앞서 나왔던 모션 디자인을 실제로 만들고 적용하기 위해서는 다양한 툴(프로그램)을 활용하여 만들어야 하는데요.
그 중에서도 가장 대중적으로 쓰이고, 또 비교적 익히기 쉬운 몇가지 툴들을 소개 해드릴게요!

1. 애프터 이펙트(After Effect)

첫번째로는 Adobe(어도비) Creative Cloud에서 유료 구독형으로 제공되고 있는 프로그램 중 하나인 애프터 이펙트 입니다.
애프터 이펙트는 서비스의 인포그래픽 영상 제작이나 제품 시연영상, 애니메이션 제작 등에 최적화 된 프로그램인데요.
모션 디자이너라면 모를 수가 없는 가장 대중적인 툴이라고 볼 수 있어요!
이 글을 쓰고 있는 저도 서비스 UI를 디자인 하고 누군가에게 설명하고 어필할 때 주로 사용하고 있어요. :)
애프터 이펙트! 모션 디자인에 관심이 있다면 꼭 공부 해야겠죠?

2. 페이즈(Phase)

페이즈의 제품 소개글 중 “제품 디자이너를 위한 애니메이션 툴 쉽게 애니메이션 만들고 편리하게 코드로 핸드오프까지 끝내 보세요!” 라는
글이 있는데요. 글만 봐도 어떠한 툴인지 짐작이 가지 않나요?

페이즈는 웹 브라우저 기반의 2D 모션 그래픽 제작에 특화된 툴로, 직관적인 타임라인 인터페이스와 실시간 렌더링을 제공하고 있어요.
페이즈의 장점 중 하나는 얼핏보면 피그마인가? 할 정도로 피그마와 비슷한 UI를 띠고 있는데요. 피그마를 사용해본 디자이너라면 기능 하나, 둘 조작해보면 직감적으로 어떻게 동작하는지 이해할 수 있어요. 또한 웹 브라우저 기반임에도 불구하고 동시 협업이 가능해요!

제가 주로 사용하는 애프터 이펙트의 경우에는 작업하고, 렌더링하고, 피드백 받고를 반복하는 과정에서 많은 시간들이 소요 되는데요.
반면에 페이즈는 작업자와 함께 같은 화면을 동시에 보면서 협업하니까, 피드백을 반영하는데에 시간이 많이 단축되겠죠?

3. 피그마(Figma)

이제는 저에게는 없으면 불편하다 싶을 정도로 디자이너의 필수 툴이 되어버린 피그마입니다.
GUI 디자인부터 프로토타입은 물론, 최근에는 슬라이드쇼 까지 실시간 협업이 가능하도록 업데이트 된 디자인 협업 툴이에요.
프로토타입 구성에 있어 기본적인 화면 전환 모션(Transition Motion) 또한 제공 되고 있어, 감각이 전혀 없는 디자이너도 쉽게 프로토타입을 만들 수 있어요! 앞서 말한 페이즈 처럼 실시간 협업을 주로 하기 때문에 피드백 받거나 소통하는데에 작업 시간이 매우 효율적이겠죠?

4. 로티(Lottie)

로티는 가벼운 애니메이션을 제작하는 것 부터 팀과 함께 협업하여 웹사이트, 앱, 소셜 미디어 등 다양한 곳에 쉽게 적용할 수 있는 올인원 모션솔루션이에요. 또한 디자이너가 만든 모션들을 프로젝트 단위로 구분하여 라이브러리화 할 수 있다는 장점이 있어요.
쉽게 말해 ‘모션 디자인의 도서관!’ 이라고 할까요(?)

그리고 로티는 다양한 플러그인 또한 제공하고 있는데요. 내가 애프터 이펙트를 통하여 만든 모션을 서비스에 적용하거나, 피그마에서 만든 내 디자인으로 모션을 만들 수 있게 훌륭한 연동을 보여주고 있는 서비스 입니다.

04.결론

이처럼 모션 디자인은 UX 디자인에서 단순한 시각적 요소를 넘어 사용자 경험을 향상시키는 중요한 도구로 자리잡고 있고, 그 경험을 구현하고 표현할 수 있는 다양한 방법도나오고 있죠.

이외에도 주변에는 다양한 기술을 통한 증강현실(AR), 가상현실(VR) 등 기계 학습을 활용한 경험은 사용자 맞춤형 경험을 제공하고, 3D 애니메이션 및 공간 디자인을 통해 더욱 풍부한 경험을 만들고 있습니다.

추후에 기술이 더 발전 된다면, 앞서 소개 해드린 프로그램들 처럼 누구나 쉽게 만들 수 있고, 다양한 공간에서, 다양한 방법으로 협업할 수 있는 시대가 오지 않을까요?

긴 글 읽어 주셔서 감사합니다.

Next Lab. Ben(최민우)

브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari