Lottie.js를 활용한 SVG 애니메이션 적용법

Lottie.js는 JSON 기반의 애니메이션 파일을 활용하여 웹에서 가볍고 부드러운 SVG 애니메이션을 구현할 수 있는 라이브러리입니다. 이 글에서는 JSON 애니메이션 활용법과 웹 성능 최적화 전략, 그리고 실제 적용 사례를 중심으로 효과적으로 사용하는 방법을 알아봅니다.

---

1. JSON 애니메이션 활용: Lottie.js의 기본 개념

Adobe After Effects에서 제작한 애니메이션을 Bodymovin 플러그인을 통해 JSON 파일로 변환하고, 이를 웹에서 렌더링하는 방식으로 동작합니다.

📌 Lottie.js의 특징

✅ 벡터 기반 → SVG와 Canvas를 활용하여 고해상도 지원

✅ 가벼운 파일 크기 → JSON으로 최적화된 애니메이션 제공

✅ 코드 제어 가능 → JavaScript를 사용해 애니메이션 동작 제어

📌 기본 사용법: Lottie.js 설치 및 설정

🔹 CDN 방식으로 추가

<script src="<https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.9.6/lottie.min.js>"></script>

🔹 NPM으로 설치

npm install lottie-web

📌 JSON 애니메이션 로드하기

JSON 애니메이션을 웹페이지에 적용하는 기본 코드입니다.

var animation = lottie.loadAnimation({
  container: document.getElementById("lottie-container"), // 애니메이션이 들어갈 요소
  renderer: "svg", // 렌더링 방식: svg, canvas, html 중 선택
  loop: true, // 반복 여부
  autoplay: true, // 자동 재생 여부
  path: "animation.json", // JSON 파일 경로
});

<div id="lottie-container" style="width: 300px; height: 300px;"></div>

✅ Tip: renderer: "canvas" 옵션을 사용하면 복잡한 애니메이션을 더욱 부드럽게 렌더링할 수 있습니다.

---

2. 웹 성능 최적화를 위한 Lottie.js 활용법

Lottie 애니메이션을 최적화하여 웹페이지의 로딩 속도를 높이는 방법을 살펴보겠습니다.

📌 1) SVG vs Canvas 선택

• renderer: "svg" → 선명한 벡터 애니메이션을 원할 때
• renderer: "canvas" → 성능을 우선하며 부드러운 렌더링을 원할 때

📌 2) 애니메이션 압축하기

Bodymovin에서 “Glyphs” 옵션 비활성화 → 불필요한 폰트 데이터를 제거하여 용량 축소 가능

📌 3) Lazy Loading 적용

스크롤 위치에 따라 애니메이션을 로드하면 초기 로딩 속도를 개선할 수 있습니다.

document.addEventListener("DOMContentLoaded", function () {
  var observer = new IntersectionObserver(
    function (entries) {
      entries.forEach(function (entry) {
        if (entry.isIntersecting) {
          lottie.loadAnimation({
            container: entry.target,
            renderer: "svg",
            loop: true,
            autoplay: true,
            path: entry.target.dataset.lottie,
          });
          observer.unobserve(entry.target);
        }
      });
    },
    { threshold: 0.5 }
  );

  document.querySelectorAll(".lottie-lazy").forEach(function (element) {
    observer.observe(element);
  });
});

<div class="lottie-lazy" data-lottie="animation.json"></div>

✅ Tip: IntersectionObserver를 활용하면 페이지에 보일 때만 애니메이션이 로드되어 성능이 향상됩니다.

---

3. 실제 적용 사례: Lottie.js 활용한 인터랙티브 UI

📌 1) 버튼 클릭 시 애니메이션 실행

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

document.getElementById("play-button").addEventListener("click", function () {
  animation.goToAndPlay(0, true);
});

<div id="lottie-button" style="width: 100px; height: 100px;"></div>
<button id="play-button">애니메이션 실행</button>

✅ 사용 사례

• “좋아요” 버튼 클릭 애니메이션
• 결제 완료 후 체크 애니메이션

---

📌 2) 페이지 로딩 애니메이션

로딩 중일 때 사용자에게 피드백을 제공하는 애니메이션을 적용할 수 있습니다.

var loadingAnimation = lottie.loadAnimation({
  container: document.getElementById("loading-animation"),
  renderer: "svg",
  loop: true,
  autoplay: true,
  path: "loading.json",
});

window.onload = function () {
  document.getElementById("loading-animation").style.display = "none";
};

<div id="loading-animation" style="width: 150px; height: 150px;"></div>

✅ 사용 사례

• AJAX 요청이 완료될 때까지 로딩 화면 유지
• 웹사이트 초기 로딩 시 애니메이션 제공

---

기능	활용법
JSON 애니메이션 활용	After Effects → Bodymovin 변환
웹 성능 최적화	Lazy Loading, Canvas 활용
실제 적용 사례	버튼 인터랙션, 로딩 애니메이션

✅ Lottie.js는 웹사이트에 부드럽고 가벼운 애니메이션을 추가할 수 있는 강력한 도구입니다. SVG 애니메이션을 최적화하여 웹 성능을 유지하면서도 직관적인 UI를 제공해보세요! 🚀