React에서 Lottie 사용하기
React에서 Lottie 사용하는 방법에 대해서 공유합니다.
Lottie란?
Lottie is a library for Android, iOS, Web, and Windows that parses Adobe After Effects animations exported as JSON with Bodymovin and renders them natively on mobile and on the web! - Lottie Docs-
Lottie는 애프터 이펙트에서 만든 애니메이션을 JSON 파일로 추출된 것을 render 시켜주는 라이브러리입니다.
Lottie를 왜 사용해야할까요?
Gif의 단점
애니메이션을 만들 때 사용하는 파일 형식은 gif입니다. gif는 비트맵으로 이루어진 이미지를 여러개 모아서 짧은 짤 같은 사진을 만들어줍니다. gif는 비트맵이라서 확대하면 깨진다는 것과 이를 보완하기 위해 사이즈를 키우면 파일 용량이 커지고, 여러 이미지로 이루어진 파일이기 때문에, 커지는 파일 용량은 더 많다는 단점이 있습니다.
Lottie의 장점
이러한 단점을 해결해주는 것이 바로 Lottie입니다. Lottie는 애니메이션을 JSON으로 기록되게하는데, 벡터 방식으로 이루어져있습니다. 그래서 다음과 같은 이점이 있습니다.
- JSON 형식이라서 파일 용량이 적다.
- 벡터 기반이라서 크기를 키워도 해상도 저하가 없다.
- 애니메이션에 스크롤, 클릭, 호버링 등의 상호작용을 적용할 수 있다.
- ios, web, android, react native에서 수정없이 바로 사용할 수 있어 개발자에게 편하다.
React에서 어떻게 사용할까요?
우선, 우리 서비스에서 lottie를 사용하는 것이 로딩을 위한 것이 큰데, 이를 지원하는 가장 컴팩트한 라이브러리가 lottie-react 여서 이 라이브러리를 통해 사용하기로 했습니다.
추가적인 기능이 많은 다른 라이브러리가 있는데, 우리는 그렇게 까지 필요하지 않고, 용량도 커서 사용하지 않기로 했습니다.react-lottie-player
먼저 lottie-react 을 설치해줍니다.
npm i lottie-react
yarn add lottie-react
다음과 같이 선언하면 간단하게 사용할 수 있습니다.
import Lottie from "lottie-react";
import React from "react";
import lottieExample from "../../asset/lottie/lottieExample.json";
export default function App() {
return (
<Lottie animationData={lottieExample} loop style={{ width: "24px", height: "24px" }} />
);
}
사용하고자 하는 컴포넌트에 <Lottie> 컴포넌트를 선언하고, animationData 속성에 lottie json 파일을 import한 것을 넣어줍니다.
추가로 무한 반복을 하고 싶다면 loop={true} 또는 loop 를 속성을 넣어줍니다.
그리고 style 속성으로 스타일을 정해주면 됩니다.
디자이너와의 협업
react를 사용하는 중에 lottie를 도입한다고 할 때, 디자이너님이 lottie의 파일 형식을 어떻게 추출하면 좋을지 얘기를 할 겁니다. .lottie 확장자와 .json 확장자가 있는데, 저 같은 경우에는 json 확장자만 사용할 수 있었습니다