Lottie를 사용한 웹 애니메이션 개발하기

13 Oct 2023

javascript

웹 페이지에 동적이고 멋진 애니메이션을 추가하고 싶다면, Lottie는 좋은 선택일 수 있습니다. Lottie는 Airbnb에서 개발된 오픈 소스 라이브러리로, 플랫 디자인 애니메이션을 웹에서 사용할 수 있도록 도와줍니다. 이 블로그 포스트에서는 Lottie를 사용하여 웹 애니메이션을 개발하는 방법을 알아보겠습니다.

Lottie란?

Lottie는 JSON 형식의 애니메이션 파일을 사용하여 자바스크립트로 웹 애니메이션을 구현하는 데 도움을 주는 라이브러리입니다. Lottie는 Adobe After Effects와 같은 애니메이션 디자인 도구를 사용하여 생성된 애니메이션을 웹에 쉽게 통합할 수 있도록 지원합니다.

Lottie 설치

Lottie를 사용하기 위해서는 먼저 Lottie의 JavaScript 라이브러리를 설치해야 합니다. npm을 사용하여 다음 명령을 실행하여 Lottie를 설치합니다.

npm install --save lottie-web

Lottie 웹 애니메이션 개발

Lottie를 이용한 웹 애니메이션을 개발하기 위해서는 아래 단계를 따릅니다.

HTML에 Lottie 애니메이션을 보여줄 요소를 만듭니다.

<div id="lottie-animation"></div>

JavaScript에서 Lottie 애니메이션을 로드하고 표시할 요소를 선택합니다.

const animationContainer = document.getElementById('lottie-animation');

Lottie 애니메이션 파일(.json)을 로드합니다.

const animationData = require('./animation.json');

Lottie 애니메이션을 초기화하고 설정합니다.

const animation = lottie.loadAnimation({
  container: animationContainer,
  renderer: 'svg',
  loop: true,
  autoplay: true,
  animationData: animationData,
});

웹 페이지에 원하는 위치에 Lottie 애니메이션을 추가합니다.

animation.setSubframe(true);
animation.setQuality('high');
animation.setSpeed(2);

애니메이션을 제어하고 싶을 때는 animation.play()와 animation.pause()와 같은 메소드를 사용할 수 있습니다.

animation.play();

이제 Lottie를 사용하여 웹 애니메이션을 개발하는 방법을 간단히 알아보았습니다. Lottie는 강력하고 다양한 기능을 제공하는 라이브러리이므로 자세한 사용 방법을 공식 문서에서 확인하는 것이 좋습니다.

Lottie 공식 문서: https://airbnb.io/lottie/

#webdevelopment #animation