React에서 Lottie 사용하기

 

웹서비스를 만들때 종종 gif와 같은 움직이는 애니메이션을 넣고싶을때가 많다! 이때 간단한 애니메이션인데 전부 gif로 넣게되면 용량도 크고 퍼포먼스도 저하시키는 문제들이 생긴다.

 

lottie는 이러한문제를 해결하면서 웹서비스를 예쁘게 꾸며줄수 있는 애니메이션을 사용할수있게 해준다!!

 

Lottie란?

Lottie는 After Effects 애니메이션을 JSON 파일로 변환해 웹/앱에서 가볍게 사용할 수 있도록 해주는 라이브러리이다.
React에서도 쉽게 사용할 수 있다!!

 

Lottie의 장점

🎥 고퀄리티 애니메이션을 가벼운 JSON 파일로 제공해서 퍼포먼스에 부담이 적음

🛠️ 코드로 세밀한 제어가 가능 (루프, 속도 조절, 특정 타이밍 이벤트 등)

📱 반응형, 모바일 최적화도 편리하게 적용 가능

🎨 After Effects로 제작한 애니메이션을 개발자가 쉽게 사용할 수 있음

💬 파일 하나로 다양한 플랫폼(Web, iOS, Android 등)에서 재사용 가능

 

설치

npm install lottie-react

위 명령어를 통해 간단히 설치가능하다.

 

사용 방법

(1) 애니메이션 파일 준비

애니메이션 파일(JSON)은 LottieFiles 사이트에서 무료로 다운로드할 수 있다.
다운받은 파일을 프로젝트 폴더에 저장해주자. (예: src/assets/lottie/animation.json)

(2) 기본 예제

// src/components/LottieAnimation.tsx
import Lottie from "lottie-react";
import animationData from "../assets/lottie/animation.json";

const LottieAnimation = () => {
  return (
    <div style={{ width: 300, height: 300 }}>
      <Lottie
        animationData={animationData}
        loop
        autoplay
        style={{ width: "100%", height: "100%" }}
      />
    </div>
  );
};

export default LottieAnimation;

 

✅ 설정:

animationData: 사용할 애니메이션 JSON 파일

autoplay: 컴포넌트 렌더링 시 자동 재생

loop: 애니메이션 반복 재생 여부

추가로 lottie-react에서는

speed (속도 조절)

onComplete (애니메이션 완료 이벤트)

onLoopComplete (루프 완료 이벤트)

onEnterFrame (프레임마다 이벤트)
같은 옵션도 쉽게 제어할 수 있다!

 

(3) App.tsx에서 사용하기

// src/App.tsx

import LottieAnimation from "./components/LottieAnimation";



function App() {

  return (

    <div>

      <h1>Hello Lottie!</h1>

      <LottieAnimation />

    </div>

  );

}


export default App;

 

사용예시

아래는 이번 MT용 보물찾기 사이트를 제작하면서 직접 사용해본 예시화면과 코드이다. 간단한 효과여서 별다른 애니메이션 설정은 하지않고 json그대로 적용하였다!

import styled from "styled-components";
import twingkle from "@assets/lottie/Twingkle.json";
import Lottie from "lottie-react";

const Logo = () => {
  return (
    <Wrapper>
      {/* 왼쪽 반짝이 */}
      <Twingkle top={-20} left={-75} />
      {/* 오른쪽 위 반짝이 */}
      <Twingkle top={-65} right={-65} />
      {/* 오른쪽 반짝이 */}
      <Twingkle bottom={-55} right={-75} />
      MT사이트
    </Wrapper>
  );
};

export default Logo;

// Wrapper 스타일
const Wrapper = styled.div`
  display: flex;
  position: relative; /* 자식 absolute 기준 */
  ${({ theme }) => theme.fonts.logo50}
  color: ${({ theme }) => theme.colors.font.white};
`;

// Twingkle Props 타입 정의
interface TwingkleProps {
  top?: number;
  left?: number;
  right?: number;
  bottom?: number;
}

// Twingkle 컴포넌트
const Twingkle = ({ top, left, right, bottom }: TwingkleProps) => {
  const style: React.CSSProperties = {
    position: "absolute",
    width: 130,
    height: 130,
    pointerEvents: "none", // 클릭 방지
  };

  // 위치 props 적용
  if (top !== undefined) style.top = `${top}px`;
  if (left !== undefined) style.left = `${left}px`;
  if (right !== undefined) style.right = `${right}px`;
  if (bottom !== undefined) style.bottom = `${bottom}px`;

  return <Lottie animationData={twingkle} loop autoplay style={style} />;

 

 

https://velog.io/@movingun/React%EC%97%90%EC%84%9C-Lottie-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0