Lottie란 무엇인가? 초보자도 이해하는 애니메이션 솔루션

Lottie란?

Lottie는 Adobe After Effects에서 제작한 애니메이션을 JSON 파일 형태로 웹이나 앱에서 사용할 수 있게 해주는 오픈소스 라이브러리이다.

디자이너가 만든 벡터 기반의 애니메이션을 개발자가 코드 한 줄로 쉽게 사용할 수 있어, 최근에는 웹사이트나 모바일 앱에서 로딩 애니메이션, 버튼 효과 등으로 많이 활용되고 있다.

 

https://lottiefiles.com/kr/

무료 로티 애니메이션, 모션 그래픽을 위한 모든 플러그인과 도구를 한 곳에 - 로티파일즈/LottieFi

 

 

---

왜 Lottie를 사용할까?

1. 가볍고 빠르다

기존의 애니메이션은 GIF 또는 mp4 영상으로 처리해야 했지만, 용량이 크고 화질도 떨어진다.

Lottie는 벡터 기반이므로 용량이 작고 선명하다.

 

2. 반응형으로 확장 가능

벡터 기반이기 때문에 해상도에 구애받지 않고 어떤 화면에서도 깔끔하게 표현된다.

즉, 모바일, 태블릿, 데스크탑 모두에서 잘 보인다.

 

3. 제어가 가능하다.

Lottie는 JavaScript로 애니메이션을 직접 제어할 수 있다.

예를 들어, hover, click, scroll 에 따라 애니메이션을 재생하거나 멈출 수 있다.

 

---

어떻게 만들어지나?

Lottie 애니메이션은 After Effects + Bodymovin 플러그인을 통해 만들어지며, 이 과정을 통해 .json파일로 추출된다.

---

예시코드

<script src="https://unpkg.com/lottie-web@latest/build/player/lottie.min.js"></script>
<div id="lottie"></div>
<script>
  lottie.loadAnimation({
    container: document.getElementById('lottie'),
    renderer: 'svg',
    loop: true,
    autoplay: true,
    path: 'checkmark.json'
  });
</script>