Lottie 애니메이션

Lottie 애니메이션

Lottie란?

• Airbnb에서 만든 애니메이션 렌더링 라이브러리
• After Effects에서 만든 애니메이션을 JSON으로 변환해서 웹/앱에서 재생 가능
• SVG 또는 Canvas로 부드럽고 가벼운 애니메이션을 구현

애니메이션 고르기: LottieFiles 사용법

https://lottiefiles.com/

LottieFiles: Download Free lightweight animations for website & apps.

 

여기서 원하는 애니메이션을 찾고, 미리보기하고, 다운로드 또는 URL 복사해서 사용할 수 있다.

애니메이션 고르는 과정

1. 사이트 접속 → https://lottiefiles.com
2. 상단 검색창에서 키워드 입력 (예: “loading”, “success”, “email”)
3. 마음에 드는 애니메이션 클릭
4. 다음 중 하나 선택:
   • Download JSON (프로젝트에 직접 넣고 쓰기)
   • Copy Lottie Animation URL (외부 링크로 바로 불러오기)

Lottie 사용법 (React 버전)

1. 설치

npm install lottie-react

2. 애니메이션 적용 코드 (React 컴포넌트)

▶ JSON 파일로 사용하는 경우

// components/MyLottie.jsx
import React from "react";
import Lottie from "lottie-react";
import animationData from "../assets/animation.json"; // 다운로드한 JSON 파일

const MyLottie = () => {
  return (
    <Lottie
      animationData={animationData}
      loop={true}
      style={{ width: 300, height: 300 }}
    />
  );
};

export default MyLottie;

 

▶ URL로 불러오려면?

lottie-react는 URL 직접 불러오기는 기본 지원 안 함
→ 대신 fetch로 JSON을 가져오고 state에 넣으면 된다!

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

const RemoteLottie = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch("https://assets10.lottiefiles.com/packages/lf20_touohxv0.json")
      .then(res => res.json())
      .then(setData);
  }, []);

  return data ? <Lottie animationData={data} loop={true} /> : <p>Loading...</p>;
};

export default RemoteLottie;

Lottie 사용법 (Vanilla JS 버전)

1. 설치 방법

HTML에 CDN으로 직접 추가하거나 npm 설치

▶ CDN 방식 (빠르게 적용 가능)

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

2. 적용 코드 예시 (CDN + URL)

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

<script>
  lottie.loadAnimation({
    container: document.getElementById("lottie"),
    renderer: "svg",
    loop: true,
    autoplay: true,
    path: "https://assets10.lottiefiles.com/packages/lf20_touohxv0.json"
  });
</script>

3. JSON 파일 직접 넣는 경우

<script>
  lottie.loadAnimation({
    container: document.getElementById("lottie"),
    renderer: "svg",
    loop: true,
    autoplay: true,
    animationData: yourJsonObject // animation.json import or embed
  });
</script>

정리 요약

항목	설명
애니메이션 고르기	LottieFiles
애니메이션 포맷	.json
웹에서 사용하는 방법	React: lottie-react / Vanilla JS: lottie-web
사용 방식	JSON 직접 import 또는 URL로 fetch

 

참고

https://velog.io/@sjoleee_/React-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-Lottie