UIUX 역량강화 스터디 : AE 3편
스피너(Spinner)와 로티(Lottie) JSON 애니메이션
스터디 3편은 「스피너 애니메이션(Spinner Animation)」과
「로티(Lottie) JSON 제작」 제작 실습입니다.
#도트와 스피너 로딩 애니메이션
(Dot and Spinner Loading Animation)
2편 도트 로딩 애니메이션에서는 도트 객체를 이용하여 레이어의 기본 프로퍼티를 학습하였고, 3편 「스피너 로딩 애니메이션(Spinner Loading Animation)」에서는 화려하게 회전하는 객체의 움직임을 디자인하고, 이를 기하학적으로 그려내는 법과 로티(Lottie, JSON) 출력을 위한 그라디언트 컬러링 실습 및 탐구를 진행하게 됩니다.
#실습 3 - 스피너 애니메이션(Spinner Animation) 6개
도트 타입 샘플에서는 타임라인 내 레이어의 기본적인 5개 프로퍼티를 실습했다면, 스피너 타입에서는 모양 레이어(Shape Layer)의 콘텐트에 삽입되는 추가(Add) 속 프로퍼티를 경험해 봅니다.
(막간의 퀴즈2) 2번과 5번에 적용된 그라디언트는 무엇이 다를까요?3편과 마찬가지로 실습 순서는 샘플 의도에 따라 1 > 2 > 4 > 5 > 3 > 6 으로 진행됐으며, 각 샘플을 메인 스크린에 띄워두고 원의 크기와 선 두께 정도만 제공하여 참여자들이 직접 움직임을 따라 만들어보도록 안내했습니다. 첨삭을 거쳐 작업 오류와 오차를 보완하는 과정은 도트 애니메이션보다 더욱 다이내믹했습니다.
실습 전 샘플을 유심히 관찰하는 참여자들이제는 어느 정도 기초가 쌓여 모션을 만들어 내는 해답을 스스로 풀어갈 수 있게 된 아홉 명의 참여자들입니다.
실습에 들어가기 전 샘플을 관찰하는 시간에 열정이 과한 누군가가 샘플 3번 폭죽의 낱알이 몇 개인지 세어보기 시작합니다. 모두들 암담해하는 모습에, 애프터 이펙트가 같은 어도비 사에서 제공하는 일러스트레이터와 기저가 같다는 사실을 상기시켜 주었습니다. 우리는 걱정할 것 없이 똑똑한 컴퓨터에게 간단한 몇 가지 명령을 내릴 줄만 알면 됩니다.
#스피너 로딩 애니메이션 - 1번, 2번
1번 샘플은 ‘패스 다듬어 자르기(트림 패스, Trim Path)’ 기능을 이용합니다. 트림 패스만으로 0에서 100, 다시 100에서 0이 되는 애니메이션을 구현하는 것이 키 포인트입니다. 이때 이징(Easing)은 ‘easeInOutCubic’을 적용하며, 그라디언트는 모양 레이어(Shape Layer) 콘텐트에 ‘그라디언트 선(Gradient Stroke)’을 삽입합니다. 참여자는 실습을 통해 트림 패스 기능의 원리를 이해할 수 있습니다. (실습 약 15분 소요, 난이도 하)
2번 샘플은 트림 패스로 고정된 길이를 만들고, 약 4.5바퀴를 빠르게 회전한 후 정지합니다. 이때, 중력의 힘으로 미끄러져 내려오다가 다시 가속하는 느낌의 이징을 구현해 내는 것이 핵심입니다. 2번 샘플의 그라디언트는 1번 샘플과는 달리 별도의 컬러 레이어를 만들어 적용합니다. 만들어진 컬러 레이어에 ‘레이어 스타일(Layer Style) > 그라디언트 오버레이(Gradient Overlay)’ 효과를 적용한 뒤 이를 트랙 매트(Track Matte)로 반영합니다. (실습 약 30분 소요, 난이도 중)
#스피너 로딩 애니메이션 - 4번, 5번
4번 샘플은 동작 흐림(Motion Blur) 효과 없이 유사한 효과를 연출해 내는 것이 키 포인트입니다. 트림 패스를 이용해 길이에 탄성을 줄 수 있는 객체를 그려주고, 콘텐트에 ‘반복(Repeater)’ 기능을 삽입하여 반대 방향의 객체가 자동으로 그려지게 만듭니다. 그런 다음 레이어를 2개 복사하여 길이와 투명도를 다르게 해 따라오는 꼬리를 연출하고, 이징은 ‘easeInOutExpo’을 사용합니다. 컬러는 ‘효과(Effect) > 그라디언트 경사(Gradient Ramp)’를 이용합니다. (실습 약 20분 소요, 난이도 중)
5번 샘플은 트림 패스로 길이가 고정된 원을 그리고, 한 바퀴를 자연스럽게 회전합니다. 여기서 핵심은 복사한 3개의 레이어 각각에 이징으로 속도에 차등을 주어 선두를 따라가는 모양이 되도록 하는 것입니다. 2번 샘플과 같은 ‘레이어 스타일(Layer Style) > 그라디언트 오버레이(Gradient Overlay)’ 효과를 사용했으나 이번에는 해당 컴포지션에 직접 적용합니다. 2번 샘플과의 차이점은 객체를 따라 그라디언트 영역이 가변 된다는 것입니다. (실습 약 30분 소요, 난이도 중)
#스피너 로딩 애니메이션 - 3번, 6번
3번 샘플은 여러 레이어를 중첩하고 시간과 이징을 조절하여 불꽃놀이 같은 움직임을 연출합니다. 핵심은 ‘반복(Repeater)’ 기능입니다. 복잡한 구성을 무한히 반복시켜줘야 하므로 프레임 계산의 난도가 높은 편입니다. 컬러는 ‘효과(Effect) > 생성(Generate) > 4색 그라디언트(4-color gradient)’를 해당 컴포지션에 적용하였습니다. (실습 1시간 이상 소요, 난이도 상)
안정적인 무한 반복 애니메이션을 위한 레이어 구성마지막 6번 샘플은 6개의 도트가 위치와 비율만으로 흐름이 있는 한 가닥의 움직임을 만들며, ‘반복(Repeater)’과 회전을 통해 스피너를 완성합니다. 타임 리맵 표현식(Expression)에서 loopOut(’pingpong’)을 적용한 역재생이 포인트입니다. 이징 또한 부드럽게 브레이크 되는 느낌을 표현해야 하므로 난도가 높습니다. 그라디언트는 별도의 컴포지션에 마스크 페더(Mask Feather) 값을 부여한 3가지 컬러 레이어를 쌓아 시각적으로 그라디언트 효과를 연출한 뒤 트랙 매트로 적용하였습니다. (실습 약 40분 소요, 난이도 상)
#실습작 리뷰
참여자들은 스터디 세 번째 파트, 「스피너 로딩 애니메이션(Spinner Loading Animation)」 을 통해 모양 레이어(Shape Layer) 콘텐트에 삽입되는 추가(Add) 프로퍼티 중 유용한 기능을 경험했으며 좀 더 심화된 무한 반복 프레임 계산과 이징을 실습할 수 있었습니다.
전원이 실무자인 스터디 참여자들은 이 스피너 샘플로 학습한 내용을 실용적으로 받아들였습니다. 도트 실습을 마친 후에는 각자의 개성을 연출할 수 있는 과제를 주는 것이 좋겠다는 생각을 했는데, 준비한 스피너 샘플의 방향성이 이와 일치하여 더욱 즐겁게 참여하는 모습을 볼 수 있었습니다.
8명의 스터디 참여자들이 완성한 스피너 애니메이션 6개. 각자 다른 점을 찾아보세요!#로티(Lottie)로 가보자고!
도트와 스피너 로딩 애니메이션 샘플 실습을 모두 마쳤다면 이제는 로티(Lottie) JSON으로 변환해 볼 차례입니다.
* 관련 URL : http://lottiefiles.com
lottiefiles.com로티(Lottie)는 에어비앤비(Airbnb)에서 개발한 JSON 기반의 애니메이션 처리 라이브러리로써, 최소한의 코드로 자세한 벡터 애니메이션을 구현할 수 있다는 것이 특징입니다. iOS와 안드로이드, React Native 등 많은 운영체제와 프레임 워크에서 지원되기 때문에 원 소스 멀티 유스(one source multi-use)가 가능한 애니메이션 기술이라고 할 수 있습니다.
또한 개발자가 디자이너를 거치지 않고도 일시정지, 크기 조절, 역회전, 반복 구간 수정 등 애니메이션의 동작을 통제할 수 있습니다.
이러한 장점들을 지니고 있기 때문에 만약 서비스 고도화 백로그에 UIUX 인터랙션 디자인이 포함되어 있다면 도입을 고려해볼 만한 기술입니다. 피그마(Figma)와 어도비 XD에서도 활용이 가능하기 때문에, UX팀 디자이너들을 대상으로 스터디를 진행하게 된 이유가 되기도 했습니다.
#바디무빙(Bodymovin) 플러그인
애프터 이펙트에서 로티(Lottie) JSON을 출력하는 방법은 바로 바디무빙(Bodymovin) 플러그인을 활용하는 것입니다.
활성화된 컴포지션에서 Bodymovin 플러그인을 이용해 결과물을 출력하면 *.json 파일을 얻을 수 있습니다. 하지만 JSON 파일은 실행해봤자 코드만 보이기 때문에, 시각 애니메이션으로 재생하려면 lottiefiles.com/ 에 로그인하여 내 라이브러리에 업로드해야 합니다. 이 과정은 살짝 번거로우니, 테스트 과정에서는 출력 시 demo를 함께 선택하여 *.html 결과물을 함께 출력하는 것이 간편합니다.
#로티(Lottie) JSON으로 가능한 것과 불가능한 것
먼저, 도트 로딩 애니메이션 샘플을 로티(Lottie)로 출력했을 때의 문제 상황을 살펴보겠습니다.
로티 출력 시 3번, 6번 샘플은 의도한 효과가 구현되지 않습니다샘플의 모든 움직임은 정상적으로 구현되지만 특수 효과가 적용되어있는 3번, 6번 샘플은 효과가 제거된 모습으로 출력되었습니다. JSON은 코드로 치환이 가능한 벡터 데이터만 출력할 수 있기 때문에 화면 해상도 영역에만 영향을 주는 특수 효과는 JSON으로 출력되지 않습니다. 따라서 이러한 한계를 알고 애니메이션을 디자인하는 것이 중요합니다.
다음은 스피너 로딩 애니메이션 샘플을 로티(Lottie)로 출력했을 때의 문제 상황입니다.
로티 출력 시 대부분의 모션은 구현되지만, 그라디언트 컬러링은 1번 샘플만 살아남았습니다첫 번째로, 모션은 대부분 정상적으로 구현되지만 4번 샘플의 트림 패스(Trim Path) 기능이 비정상으로 출력된 모습을 확인할 수 있습니다. 4번 샘플은 트림 패스 기능의 시작(Start), 끝(End) 키프레임에 각기 서로 다른 이징을 적용하여 길이에 탄성을 부여한 스피너인데, 로티 출력 시에는 시작, 끝 키프레임에 적용된 서로 다른 이징이 정상적으로 출력되지 않기 때문입니다.
두 번째는 그라디언트 컬러링의 오류입니다. 스피너 샘플을 로티로 출력할 때 일반적인 컬러는 대부분 정상적으로 출력됩니다. 그러나 그라디언트는 1번 샘플을 제외하고는 출력되지 않았음을 확인할 수 있습니다. 1번 샘플은 모양 레이어(Shape Layer)에 추가(Add) 프로퍼티로 삽입된 ‘그라디언트 선(Gradient Stroke)’ 효과로, 벡터 값 전환이 가능한 데이터이기에 JSON으로 그라디언트 속성이 출력된 것입니다.
다만, 이것 역시 기능의 한계로 그라디언트 ‘속성’만 부여할 수 있을 뿐, 색상 값이나 색상 정지 위치는 의도한 대로 반영되지 않습니다. 이러한 오류는 lottiefiles.com 라이브러리에 업로드한 후 로티 에디터(Lottie Editor)를 이용해 시작-끝 컬러를 수정하여 *.json으로 다시 저장할 수 있습니다.
로티 라이브러리에 JSON 업로드 후, 로티 에디터를 이용해 툴 없이도 컬러를 편집할 수 있습니다.여담으로, 3 컬러 그라디언트는 위와 같은 일반적인 바디무빙-로티 에디터 출력 방법을 이용해서는 출력할 수 없습니다. 실무에서 3 컬러 그라디언트가 필요할 경우에는 JSON 코드를 직접 수정하여 사용합니다. 이 과정은 JS에 대한 이해가 필요하여 이번 스터디에서는 생략했습니다.
이렇게, 3편과 4편에 걸쳐 실습한 12개의 로딩 애니메이션을 통해 UX팀이 역량을 강화한 과정과 로티(Lottie)로 출력되는 유효한 기능에 대해 스터디한 내용을 담았습니다.
로티(Lottie) 라이브러리 샘플은 아래 링크에서 확인할 수 있습니다. (로그인이 필요합니다)
다음 편은 스터디의 마지막 파트, 「창작 로딩 애니메이션(Creative Loading Animation)」 6개 제작에 대한 리뷰와 스터디 갈무리가 이어집니다.
'UIUX 역량강화 스터디 : 디테일이 강한 After Effects'는 총 네 편의 시리즈로 이어집니다.
디테일이 강한 After Effects 1편 '애펙 기초와 개발 친화적 모션 디자인'
디테일이 강한 After Effects 2편 '도트(Dot)와 무한 반복 애니메이션'
디테일이 강한 After Effects 3편 '스피너(Spinner)와 로티(Lottie) JSON' ◀ 지금 보는 글
디테일이 강한 After Effects 4편 '창작 로딩 애니메이션과 스터디 갈무리'
