gif를 대신할 새로운 애니메이션 이미지 파일을 소개합니다.
Lottie란
Airbnb에서 만든 json 기반 애니메이션 랜더링 라이브러리입니다.
예전에는 애니메이션 이미지 파일로 gif 를 많이 사용을 하였습니다.
하지만, gif는 아래와 같은 문제점를 가지고 있었습니다.
- 비트맵 방식을 사용으로 이미지 확대시 깨짐현상이 발생
- 픽셀당 색상 설정이 되어있다보니 사이즈가 커질수록 용량도 커짐
- 최대 256색 표현
이에 반해 Lottie는 백터 기반이라 해상도 저하가 없고, 용량도 작은 편입니다.
하지만 script 기반으로 애니메이션을 구현하다보니 png나 gif 등 일반적인 이미지에 비해서 사용방법이 단순하진 않습니다.
사용방법
여러 플랫폼에서 사용이 가능하며, Lottie 사이트에서 각 플랫폼별 사용방법을 확인 할 수 있습니다. 여기서는 웹에서 간단하게 구현하는 방법을 살펴보려고 합니다.
웹에서는 간단하게 Lottie 라이브러리를 가져오고,
lottie 라는 클래스를 사용하여 data-animation-path 속성에 값으로 json으로 된 이미지 경로를 넣어주면 됩니다. 아래처럼요.
See the Pen Lottie 사용 예제 by niizguy (@niizguy) on CodePen.
div.lottie 에서 이미지의 width와 height값을 지정해야합니다.
그럼 간단하게 json 형식의 애니메이션 파일을 웹에서 사용할 수가 있습니다.
크롬을 비롯한 ie11에서도 사용이 가능하기 때문에 아주 활용도가 높고,
실제로 최근 프로젝트에서도 gif 대신 사용하여 만족도가 높았습니다.
애니메이션 이미지를 사용해야한다면 Lottie도 한번 사용해보세요!