Lottie 애니메이션 사용 방법

1. Lottie 애니메이션 JSON 파일 준비

• LottieFiles 웹사이트에서 원하는 애니메이션을 다운 받거나 URL 복사
• 다운로드 받은 JSON파일을 프로젝트에 넣는다. (위치 예시 : public/animations)

2. 라이브러리 설치

• npm

npm install lottie-react

• yarn

yarn add lottie-react

3. Lottie 애니메이션 사용 예시

import React from 'react';
import Lottie from 'lottie-react';
import animationData from '../public/animations/your-animation.json';// JSON 파일 경로export default function LottieAnimationExample() {
  return (
    <div style={{ width: 300, height: 300 }}>
      <Lottie animationData={animationData} loop={true} autoplay={true} />
    </div>
  );
}

4. 추가 설정 및 제어

• ref를 통해 애니메이션의 재생, 일시정지, 정지 등을 제어할 수 있음

import React, { useRef } from 'react';
import Lottie from 'lottie-react';
import animationData from '../public/animations/your-animation.json';

export default function LottieControlled() {
  const lottieRef = useRef(null);

  const handlePlay = () => {
    lottieRef.current.play();
  };

  const handlePause = () => {
    lottieRef.current.pause();
  };

  return (
    <div>
      <Lottie ref={lottieRef} animationData={animationData} loop={true} autoplay={false} />
      <button onClick={handlePlay}>Play</button>
      <button onClick={handlePause}>Pause</button>
    </div>
  );
}

5. 주의 사항

• Lottie 애니메이션은 클라이언트 측에서만 렌더링됨. Next.js에서는 "use client";를 추가해야됨.
• public 폴더
  • Next.js의 public 폴더에 있는 파일은 정적 자원으로 간주되어, import 시 경로를 /animations/example.json과 같이 절대 경로로 사용