[React] LottieFiles 애니메이션 적용하기

안녕하세요 오늘은 lottie 애니메이션을 적용해보도록 하겠습니다

Lottie란?

• Lottie는 애니메이션 파일 형식(JSON) + 재생 라이브러리를 의미합니다. 
• 원래는 After Effects(영상 툴)에서 만든 애니메이션을, Bodymovin 플러그인으로 “벡터 기반 JSON 데이터”로 추출한 게 시작이었으며 JSON에는 위치, 크기, 색, 모양, 타이밍 같은 애니메이션 정보가 다 들어 있습니다. 
• 그래서 GIF처럼 무거운 픽셀 덩어리가 아니라, 벡터/수학적 계산 기반으로 움직이는 거라 용량이 적다는 장점이 있습니다. 

Lottie를 쓰는 이유

 

• 가벼움 → GIF보다 용량이 훨씬 작고, 확대해도 깨지지 않습니다.
• 제어 가능 → 단순히 자동 재생만 되는 게 아니라, 재생/정지, 구간 반복, 속도 조절까지 가능합니다.
• 범용성 → 웹(React, Vue), 모바일(Android, iOS, Flutter) 등 대부분의 환경에서 동일하게 동작합니다.

단순한 스피너 대신 귀여운 애니메이션을 활용해 사용자 대기 체감 시간을 감소시킬 수 있고 

성공, 실패 등과 같은 상태 전달을 직관적으로 표현할 수 있습니다. 

 

먼저 lottie 설치 해줍니다. 

npm i lottie-react

 

 

 

새로 컴포넌트 파일을 작성해줍니다. 

import { useEffect, useState, useRef } from "react";
import Lottie from "lottie-react";

export default function LottieDemo() {
  const [data, setData] = useState(null);
  const [err, setErr] = useState("");
  const ref = useRef(null);

  useEffect(() => {
    // ✅ CORS 열려 있고 안정적인 URL
    const url = "https://assets10.lottiefiles.com/packages/lf20_qp1q7mct.json"; // 귀여운 고양이

    fetch(url)
      .then((r) => {
        if (!r.ok) throw new Error(`HTTP ${r.status}`);
        return r.json();
      })
      .then(setData)
      .catch((e) => setErr(e.message));
  }, []);

  return (
    <div style={{ display: "grid", placeItems: "center", height: "100vh" }}>
      <h1>🔥 Lottie Demo</h1>

      {data ? (
        <Lottie
          lottieRef={ref}
          animationData={data}
          loop
          autoplay
          style={{ width: 300, height: 300 }}
        />
      ) : (
        <p style={{ opacity: 0.7 }}>
          {err ? `로드 실패: ${err}` : "로딩 중..."}
        </p>
      )}
    </div>
  );
}

 

 

라우팅에 등록하여 동작을 확인하겠습니다

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Header from "./components/Header";
import Home from "./pages/Home";
import MyInfo from "./pages/MyInfo";
import LottieDemo from "./components/LottieDemo"; // ✅ 추가

export default function App() {
  return (
    <Router>
      <Header />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/myinfo" element={<MyInfo />} />
        <Route path="/lottie" element={<LottieDemo />} /> {/* ✅ 추가 */}
      </Routes>
    </Router>
  );
}

 

 

아래 사이트에서 원하는 애니메이션을 선택해 json 파일을 다운로드 받아 프로젝트에 추가할 수 있습니다. 

https://lottiefiles.com/

LottieFiles: Download Free lightweight animations for website & apps.