Lottie를 활용한 애니메이션 추가

1.Lottie란?

Lottie는 Airbnb에서 개발한 오픈소스 라이브러리로, 벡터 애니메이션을 간편하게 추가할 수 있는 도구입니다.

JSON 형식으로 저장된 애니메이션 데이터를 불러와 웹, iOS, Android 등 다양한 플랫폼에서 높은 품질의 애니메이션을 구현할 수 있습니다.

Lottie는 2017년에 처음 선보였으며, 애니메이션 이미지를 화면에 표현하고자할때 사용하기 적합한 도구입니다.

이 Lottie의 특징과 장점, 그리고 실제 React에서 사용한 사례를 바탕으로 해당 내용에 대해 정리하고자합니다.

2 Lottie의 작동원리

Lottie 애니메이션은 Adobe After Effects에서 작성한 애니메이션을 Bodymovin이라는 플러그인을 사용하여 JSON 형식으로 내보낸 후, Lottie 라이브러리를 이용해 웹과 앱에 쉽게 적용할 수 있습니다. JSON 데이터는 벡터 기반으로 작동하기 때문에 해상도에 영향을 받지 않아 선명한 애니메이션을 구현할 수 있습니다.

3. Lottie의 장점

만약 화면에 움직이는 아이콘을 넣고 싶다고 했을때 어떤식으로 처리할 수 있을까요?

CSS animation : @keyframes규칙을 이용한 애니메이션 처리 방법
SVG : 벡터 기반 그래픽을 표현하는 XML포멧을 사용
gif : 움직이는 그림파일 형식인 gif을 사용
Lottie

여러 방법이 있겠지만 각 장점과 특징을 정리하면 아래와 같습니다.

방법	장점	특징
CSS	- 브라우저 지원이 우수 - 쉽게 작성 및 수정 가능	- 주로 간단한 애니메이션 구현에 적합 - 선언적 방식
GIF	- 호환성이 좋음 - 작성 및 적용이 쉬움	- 비트맵 형식으로 확대 시 픽셀화 - 파일 크기가 상대적으로 큼 - 애니메이션 제어가 제한적
SVG	- 벡터 기반으로 확대 시 선명함 - 풍부한 애니메이션 가능	- XML 포맷으로 웹에서 직접 사용 가능 - 자바스크립트를 이용한 애니메이션 제어 가능
Lottie	- 용량 최적화 - 높은 품질 - 크로스 플랫폼 호환성 - 쉬운 사용법 및 유연한 커스터마이징	- 벡터 기반 애니메이션 - Adobe After Effects와 Bodymovin 플러그인을 이용한 애니메이션 작성 - JSON 형식으로 애니메이션 데이터 저장

즉 Lottie의 경우 핵심장점이 바로 용량 최적화부분 입니다.

구체적인 장점은 아래와 같습니다

용량 최적화: Lottie 애니메이션은 JSON 형식으로 압축되어 용량이 작아서 기존의 GIF나 비디오 파일에 비해 획기적으로 용량을 절약할 수 있다.
높은 품질: Lottie 애니메이션은 벡터 기반으로 작동하여 해상도에 영향을 받지 않아 다양한 디스플레이 크기에 맞게 자유롭게 확대 및 축소할 수 있다.
크로스 플랫폼 호환성: Lottie는 웹, iOS, Android 등 다양한 플랫폼에서 지원된다.
쉬운 사용법: Lottie 애니메이션은 복잡한 코딩 없이도 쉽게 웹과 앱에 적용할 수 있다.
유연한 커스터마이징: Lottie 애니메이션은 동적 데이터를 사용해 색상, 크기, 속도, 텍스트 등을 실시간으로 변경할 수 있다.

Q. 여기서 왜 용량이 다른 방법에 비해 적은이유는?

JSON 형식의 데이터 표현: Lottie는 애니메이션 정보를 JSON 형식으로 저장한다. JSON(JavaScript Object Notation)은 텍스트 기반의 데이터 교환 형식으로, 간결하고 가벼워서 용량이 적은 편이다. 애니메이션 정보를 JSON 형식으로 저장하면, 애니메이션의 시간 경과에 따른 변화를 묘사하는 키 프레임 데이터와 속성 값들을 효율적으로 저장할 수 있다.

벡터 기반 애니메이션: Lottie는 벡터 그래픽을 기반으로 하기 때문에, 이미지가 확대되거나 축소될 때 품질 손실이 없다, 비트맵 기반의 애니메이션(예: GIF)은 픽셀 단위로 이미지를 저장하므로, 이미지의 해상도가 높아질수록 용량이 빠르게 증가하지만 Lottie와 같이 벡터 기반의 그래픽은 확대와 축소에 대한 품질손실이 없다.

4. 사용 방법

https://accounts.lottiefiles.com/register 사이트를 통해 원하는 lottie를 다운받습니다.
yarn add react-lottie 를 다운받습니다
필요한 위치에 아래와 같은 코드를 삽입합니다

import Lottie from "react-lottie";
import handLottie from "lotties/hand.json"; // 다운받은 lottie json파일 경로

const TestPage = () = > {
const getLottieOptions = (lottie: any) => {
  return {
    loop: true,
    autoplay: true,
    animationData: lottie,
    rendererSettings: {
      preserveAspectRatio: "xMidYMid slice",
    },
  };
};



return (
    <>
        { ... }
          <Lottie
            options={getLottieOptions(quizBoardLottie)}
            height={300}
            width={300}
          />

        { ... }

          );
}

export default TestPage;

그럼 위 화면과 같이 정상적으로 lottie파일이 표현됩니다👍

(코드가 사용된 곳 : github)

커스텀?

일반적으로 웹사이트 자체에서 커스텀이 가능하지만 유료기능인 경우가 있어서 색을 바꾸고 싶거나 변화를 주고싶을때는 직접 코드를 수정해야합니다.

저는 기존의 주황색이였던 모습을 노란색으로 바꾸고 싶어 Json내부에 색을 의미하는 코드부분을 직접 수정하여 원하는 이미지로 수정할 수 있었습니다.

(원하는 색은 노란색 달이였지만 기본적으로 주황색을 가졌다😥)

{...}

     {
              "ty": "fl",
            // 이전코드 :   "c": { "a": 0, "k": [1, 0.666999966491, 0, 1], "ix": 4 },
           :  "c": { "a": 0, "k": [1, 1, 0, 1], "ix": 4 },   // 수정코드
              "o": { "a": 0, "k": 100, "ix": 5 },

           },

{...}

(원하는 색으로 수정!)

참고자료

https://fe-paradise.tistory.com/

https://sso-feeling.tistory.com/559

teawon