[도움되는 사이트들] Lottie 생성 방법

Lottie를 생성하려면 Adobe After Effects에서 작업한 애니메이션을 Bodymovin이라는 플러그인을 사용하여, 영상 파일 대신 json이라는 데이터 파일을 생성해야 합니다. 그런데, Adobe After Effects는 유료에다가 Lottie 생성하고자 결제하기에는 너무 비쌉니다. 그래서 무료로 간단히 Lottie를 생성할 수 있는 방법을 찾아보았습니다.

 

우선 왜 Lottie로 생성해야할 지 알아보겠습니다.

이미지가 이루어지는 방식에는 2가지가 있습니다. 비트맵과 벡터입니다.

우선, 비트맵은 점들이 모여서 이미지를 이루는 방식입니다. 컴퓨터에 부담이 덜 가기 때문에 주로 이 방식을 사용합니다. 그러나, 비트맵은 사이즈를 늘이거나 줄이는 등의 변경이 되면 원본 이미지에 손상이 가는 단점이 있습니다.

벡터는 점과 점을 수학적으로 계산하여 표현하는 방식입니다. 이미지 사이즈를 변경해도 손상이 가지 않는 장점이 있습니다. 그러나 이미지가 복잡해질수록 컴퓨터에 부담을 주게 됩니다.

 

Gif는 이중 비트맵 방식으로 만들어져있습니다. 비트맵으로 이루어진 이미지들의 연속이기때문에 용량이 큽니다. Lottie는 벡터방식이기 때문에 용량이 적고 이미지를 변경해도 해상도 저하가 없습니다. 모바일에서는 간단한 애니메이션들이 많이 쓰이기에 벡터방식인 Lottie가 더 적합하다 볼 수 있습니다.

 

문제는 Gif는 오래되고 일반적인 방식이기에 자료가 많은데 Lottie는 한정된 소스밖에 없다는게 아쉬운 점입니다. 그래서 Gif를 Lottie로 만드는 방법을 알아보겠습니다.

 

1. Gif -> MP4

우선 Gif를 MP4 영상으로 변환해줍니다.

 

Online GIF to MP4 Video converter (ezgif.com)

Online GIF to MP4 Video converter

 

2. MP4 -> Lottie

만들어진 MP4를 Lottie로 만들어 줍니다

 

Video to Lottie / Forrest O. / Observable (observablehq.com)

Video to Lottie

 

밑에 Frame count 에 어느정도 큰 수를 넣어야 Lottie가 부드럽게 만들어집니다.

 

장점은 다양한 Gif 자료를 Lottie로 만들 수 있다는 것입니다. 단점은 Lottie를 컨트롤 하려고 Key값을 사용해 컨트롤 하려고 하면, 다룰 수 있는 키값이 없을 수 있습니다. After Effects로 만들면 Lottie의 요소들을 분리해서 다룰 수 있는 키값들을 볼 수 있는데, 영상을 Lottie로 만들면 그냥 이미지를 만드는 벡터값들만 보일 가능성이 높습니다.