FrontendJun 16, 20221 min readUpdated Jul 30, 2022

React에 벡터 기반 애니메이션 Lottie 추가하기

Lottie는 벡터 기반이기 때문에 아무리 확대해도 깨지지 않는다.

Author

Younggun Park

Frontend engineer and builder · Seoul, South Korea

I'm building Vision AI products at P2ACH AI, writing about frontend systems, AI tooling, and the quiet parts of shipping.

TL;DR

Lottie는 벡터 기반이기 때문에 아무리 확대해도 깨지지 않는다.

On this page

Lottie가 뭔가요?

Lottie는 Airbnb에서 개발한 오픈소스 라이브러리이다.
JSON 기반 애니메이션 파일을 실시간으로 랜더링한다.
JSON을 사용할때 벡터 기반이기 때문에 아무리 확대해도 깨지지 않는다.

React.js에서 사용법

1. 라이브러리 추가하기

TypeScript

yarn add lottie-web

or

npm i lottie-web

2. 멋있는 LottieFile 고르기

2.1. LottieFiles 웹사이트 https://lottiefiles.com 에서 괜찮은 애니메이션을 찾는다.

2.2. JSON 파일 다운로드하기

3. JSON 파일을 프로젝트 폴더에 저장

4. 코드 작성

TypeScript

import React from 'react';
import Lottie from 'react-lottie';
import NotFoundAnimation from 'src/animation/94905-404-not-found.json';

export const NotFound = () => {
    const defaultOptions = {
        loop: true, // 애니메이션 반복
        autoplay: true, // 페이지 로딩 후 바로 재생
        animationData: NotFoundAnimation,
      };
    
    return (
      <>
        <Lottie
					isClickToPauseDisabled
          options={defaultOptions}
          height={500}
          width={500}
        />
      </>
    )
}

isClickToPauseDisabled는 클릭시 애니메이션이 멈추는 기능을 끈다.

결과 화면

reference

FAQ

Common follow-up questions

이 글의 핵심은 무엇인가요?: Lottie는 벡터 기반이기 때문에 아무리 확대해도 깨지지 않는다.
실무적으로 먼저 볼 포인트는 무엇인가요?: 2.1. LottieFiles 웹사이트 https://lottiefiles.com 에서 괜찮은 애니메이션을 찾는다.