Lottie를 활용한 3D 애니메이션

Lottie는 JSON 기반 애니메이션을 쉽게 웹사이트에 적용할 수 있도록 해주는 강력한 도구입니다. 웹에서 3D 애니메이션을 구현할 때 가벼운 용량과 부드러운 렌더링이 중요한데, Lottie를 활용하면 이를 효과적으로 해결할 수 있습니다.

특히, Adobe After Effects에서 제작한 애니메이션을 JSON 형식으로 변환하여 웹페이지에서 활용할 수 있어 개발자와 디자이너 모두에게 유용한 솔루션입니다.

 

이 글에서는 Lottie를 활용하여 웹사이트에 3D 애니메이션을 적용하는 방법에 대해 살펴보겠습니다.

 

출처 : https://airbnb.io/lottie/#/community-showcase

 

 

2. Lottie란 무엇인가?

Lottie는 Airbnb에서 개발한 오픈소스 라이브러리로, JSON 형태의 애니메이션을 웹, 모바일, 데스크톱 애플리케이션에 쉽게 삽입할 수 있도록 해줍니다. 기존 GIF나 동영상 애니메이션보다 훨씬 가벼우면서도 고품질의 애니메이션을 구현할 수 있습니다.

 

LottieFiles: Download Free lightweight animations for website & apps.

 

Lottie의 주요 특징

• 가벼운 파일 크기: 기존 GIF 또는 MP4보다 훨씬 가벼운 JSON 파일 사용
• 벡터 그래픽 지원: 확대해도 깨지지 않는 선명한 애니메이션 제공
• 인터랙티브 가능: 사용자 입력(스크롤, 클릭 등)에 반응하는 애니메이션 구현 가능
• 다양한 플랫폼 지원: 웹, iOS, Android에서 모두 활용 가능

 

3. Lottie를 활용한 3D 애니메이션 구현 방법

 

1) Lottie 애니메이션 적용 기본 코드

Lottie 애니메이션을 웹사이트에 적용하려면 lottie-web 라이브러리를 사용합니다.

설치 방법

npm install lottie-web

기본적인 적용 코드

import lottie from 'lottie-web';

lottie.loadAnimation({
  container: document.getElementById('lottie-container'),
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'animation.json'
});

위 코드에서는 animation.json 파일을 로드하여 자동 재생되는 애니메이션을 적용합니다.

 

2) Lottie와 ScrollTrigger를 활용한 인터랙티브 3D 애니메이션

 

Lottie는 GSAP의 ScrollTrigger와 결합하여 스크롤과 연동된 애니메이션을 만들 수 있습니다.

gsap.registerPlugin(ScrollTrigger);

let animation = lottie.loadAnimation({
  container: document.getElementById('lottie-container'),
  renderer: 'svg',
  loop: false,
  autoplay: false,
  path: 'animation.json'
});

ScrollTrigger.create({
  trigger: '#lottie-container',
  start: 'top center',
  end: 'bottom center',
  onUpdate: (self) => {
    animation.goToAndStop(animation.totalFrames * self.progress, true);
  }
});

이 방식은 사용자의 스크롤에 따라 애니메이션이 동적으로 재생되도록 설정하는 예제입니다.

 

3) Lottie Interactivity를 활용한 클릭 기반 애니메이션

Lottie Interactivity 라이브러리를 사용하면 클릭 이벤트 등 특정 사용자 행동에 반응하는 애니메이션을 만들 수 있습니다.

import LottieInteractivity from "lottie-interactivity";

LottieInteractivity.create({
  player: "#lottie-container",
  mode: "cursor",
  actions: [
    {
      type: "click",
      forceFlag: true
    }
  ]
});

위 코드에서는 사용자가 클릭할 때마다 애니메이션이 재생되도록 설정합니다.

 

 

 

4. Lottie 3D 애니메이션 적용 시 주의할 점

 

1) 퍼포먼스 최적화

Lottie 애니메이션을 사용할 때는 JSON 파일 크기를 최소화하는 것이 중요합니다. 필요 없는 레이어를 제거하고, 애니메이션 속도를 최적화하여 부드러운 사용자 경험을 제공해야 합니다.

2) 반응형 디자인 고려

웹사이트가 다양한 해상도에서 정상적으로 작동하도록 SVG 렌더링을 활용하고, preserveAspectRatio 속성을 적절히 설정하는 것이 중요합니다.

3) 접근성(Accessibility) 보장

애니메이션이 화면에서 중요한 정보를 전달하는 경우, 대체 텍스트를 제공하거나, 애니메이션을 끌 수 있는 옵션을 제공해야 합니다.