GIF보다 작고 또렷한 로티 애니메이션 제작 ‘Lottielab’

모션 디자인은 정적인 이미지에 비해 많은 것을 표현하고 알릴 수 있어 자주 사용됩니다. 모션을 서비스에 적용할 때 기존에는 GIF 포맷을 많이 활용했는데요. GIF는 픽셀 이미지가 연속적으로 배치되어 있어, 용량이 더욱 무거워질 수밖에 없습니다. 또한 사각형의 픽셀이 모여서 만들어진 이미지로 확대 시 계단현상이나 깨짐이 나타날 수 있다는 단점이 있습니다.

이런 상황에서 등장한 대안이 바로 로티(Lottie)인데요. 에어비앤비에서 개발한 오픈소스 라이브러리입니다. JSON 기반의 애니메이션 파일을 실시간으로 렌더링 하는 방법을 활용하고 있으며, 벡터 방식으로 구성되어 있어 아무리 확대해도 깨지지 않는 장점을 갖고 있습니다. 또한 용량이 작고 해상도 저하가 없으며 개발 시 상대적으로 쉬운 적용이 가능합니다. 오늘 소개하는 ‘Lottielab’은 이러한 로티 기반의 파일을 편집하거나, 새로운 애니메이션을 손쉽게 만들 수 있도록 도와주는 서비스입니다.

직관적이고 쉬운 애니메이션 제작 방법

저도 현재 담당하고 있는 서비스에 모션 디자인을 적극적으로 활용하고 있습니다. 다만 직접 편집하기는 어렵다는 생각을 늘 갖고 있었는데요. 애프터 이펙트 등을 사용했는데, 이런 툴은 학습에 꽤 많은 시간이 들기 때문에 작업이 쉽지 않았습니다. 그러다 ‘Lottielab’을 알게 되었는데 팀 디자이너와 함께 확인해 본 결과, 로딩 애니메이션 등 비교적 표현 방식이나 메시지가 명확한 애니메이션의 경우, 충분히 빠르게 작업하는 데 도움이 된다고  판단했습니다.

‘Lottielab’은 기본적으로 가입 후 사용이 가능하지만, 이 서비스를 통해 만들어진 샘플은 바로 확인해 볼 수 있습니다. 나름의 카테고리도 적용되어 있어 전체를 기본으로 아이콘, 일러스트레이션, 로딩 애니메이션, 컬렉션 등에 따라 확인이 가능합니다. 로티에 대한 기본 내용을 모르거나, 이곳에서 어느 정도의 애니메이션을 제작할 수 있는지에 대해 궁금하다면 샘플을 먼저 확인하는 것을 추천합니다.

위 이미지는 가입 후 가장 먼저 만나게 되는 화면입니다. 대시보드 역할을 하게 되며, 왼쪽으로는 작업 중인 애니메이션 리스트를 확인할 수 있는 ‘Drafts’, 토글과 로딩 애니메이션 제작에 필요한 정보를 제공해 주는 ‘Learn’, 그리고 이메일 주소 등 개인 정보 확인 및 변경이 가능한 ‘User settings’ 세 가지 주요 메뉴를 확인할 수 있습니다. 

대시보드에서 또 하나 핵심은 바로 팀을 관리할 수 있는 기능으로 로그인 시 기본 팀이 하나 생성되어 있으며, 팀은 추가로 생성할 수 있습니다. 팀 안에서는 폴더를 별도로 생성할 수 있는데, 팀에서 관리하는 애니메이션의 종류, 적용하는 화면이나 서비스 등에 따라 유용하게 사용할 수 있습니다.

작업은 두 가지 방법으로 시작할 수 있는데요. 하나는 로티 파일을 가져와서 편집하는 방법, 또 하나는 백지상태에서 애니메이션을 생성하는 방법입니다. 로티 파일의 경우 공개된 것이 많아 검색을 통해 쉽게 찾을 수 있는데, 대표적인 곳은 로티 공식 사이트 내 무료 애니메이션입니다. 저는 소개를 위해 새로운 로티 파일 만들기를 선택했고, 위 이미지는 편집 화면의 기본 모습입니다. 

애니메이션을 제작하기 위해 기본적으로 필요한 건, 모양이나 형태라고 할 수 있는데요. ‘Lottielab’에서는 원형, 사각형 등의 도형은 물론 펜 기능을 지원해, 조금 더 디테일한 표현이 가능한 환경을 제공합니다. 또한 이미지를 첨부할 수도 있는데 png, jpg, svg는 물론 피그마 파일을 불러올 수도 있습니다. 왼쪽 아래로는 레이어도 확인할 수 있어, 작업할 때 선택한 레이어에 따른 편집이 가능합니다.

편집할 대상을 선택하면 (위 이미지에서는 노란색 사각형) 오른쪽에 상세 편집 도구가 펼쳐지는 걸 확인할 수 있습니다. 사각형을 원형으로, 다시 원형을 사각형으로 바꿀 수 있는 도구가 제공되며, 위치와 사이즈를 조절할 수 있는 기능을 같은 공간에서 함께 활용할 수 있습니다. 더불어 투명도를 적용할 수 있고, 컬러를 변경하거나 외곽선을 적용하는 기능도 제공합니다. 시간에 따른 애니메이션을 적용하기 전, 이렇게 컬러나 모양 등을 하나씩 매만지며 첫 번째 단계를 준비할 수 있습니다. 

애니메이션에 활용될 기본 내용이 정리되었다면, 시간(초 기준)에 따라 변화하는 모습을 적용할 차례입니다. 편집 화면 가운데 상단을 보면 애니메이션 편집으로 전환할 수 있는 토글이 있고, 활성화하면 하단에 재생 버튼과 함께 시간에 따라 어떻게 모습이 바뀌면 되는지 설정할 수 있는 도구가 있습니다. 

원하는 시간을 클릭한 뒤, 어떻게 바뀔 것인지 (컬러, 모양, 방향 등) 편집하면 해당 시간에 작업한 모양을 확인할 수 있습니다. 이런 식으로 시간에 따라 편집한 내용을 지정하는 방법으로 전체 애니메이션을 확인하며 작업을 진행할 수 있죠.

위 이미지는 기본 제공되는 로딩 애니메이션 파일을 통해, 시간에 따라 어떻게 모습이 바뀌는지 확인한 모습입니다. 로딩 애니메이션의 경우 원형을 기반으로 테두리만 적용한 상태에서, 시간에 따라 위치를 바꾸는 방법으로 쉽게 제작할 수 있습니다. 개인적으로 모션 제작, 편집 툴을 많이 써본 건 아니지만 스크롤 없이 한 화면에서 시간에 따라 바뀌는 모습을 쉽게 편집하고 확인할 수 있다는 점이 좋았습니다. 함께 사용해 본 팀원들 역시 이 부분을 가장 만족스럽게 생각했습니다.

작업이 완료된 후엔 세 가지 방법으로 내보낼 수 있습니다. 하나는 로티 파일, 또 하나는 GIF, 그리고 대표적인 영상 포맷 중 하나인 MP4입니다. GIF와 MP4는 재생속도, 반복 횟수나 프레임 등을 직접 설정할 수 있어 좀 더 상세한 조건에 따라 활용할 수 있습니다.

한 번은 꼭  써봐야 하는 이유

‘Lottielab’은 현재 베타서비스 중으로 여러 기능을 무료로 사용할 수 있습니다. 로티 기반의 애니메이션을 편집할 수 있는 서비스는 많지만, 제가 사용해 본 서비스 중 난이도가 가장 쉽다는 장점도 있습니다. 또한 팀을 만들고 초대해 함께 협업할 수 있는 환경을 제공하며, 팀 내에 폴더를 별도로 생성해 성격에 따라 관리할 수 있다는 점 역시 매력적이라고 생각합니다.

물론 아쉬운 점도 있습니다. 예제를 제공하긴 하지만 이를 바로 편집할 수 있는 기능은 제공하지 않습니다. 이곳을 통해 만든 샘플을 공개할 수 있는 기능을 만들어, 서로 작업한 건 활용할 수 있도록 하거나 제공되는 샘플을 확인 후 직접 편집할 수 있다면, 더 쉬운 방법으로 애니메이션을 생성할 수 있을 겁니다. 아마 이후 정식 서비스가 론칭된다면 기대해 봐도 좋겠습니다.

<참고>

Lottielab

요즘IT의 모든 콘텐츠는 저작권법의 보호를 받는 바, 무단 전재와 복사, 배포 등을 금합니다.