[Lottie Files] json 파일로된 영상을 재생시켜보자!

💡 회사 소개 사이트 작업 중, 디자이너분께서 동영상 파일을 평범한 mp4 파일 대신에 json 파일로 전달해주셔서 나는 띠용?! 했다..
나는 당연하게 mp4 파일을 주실 줄 알았는데, json 파일이면 이걸 어떻게 재생시켜야 되는거지,,? 하고 알아보니 Lottie Files를 이용하면 가능하다는 것을 알게되었다! 그래서 그 과정을 적어보려고 한다!

프로젝트 환경

Next.js + Typescript

Lottie Files

💡 Lottie Files ?
Android, iOS, 웹 브라우저, React 등과 호환되는 고품질 JSON 인코딩 애니메이션이다.

설치

npm install --save react-lottie-player

사용법

import Lottie from "react-lottie-player";
import video from "../../public/videos/data.json";

• 위와 같이 영상 파일인 json 파일과 Lottie 태그를 import 시켜준 뒤

<Lottie loop play animationData={video} />

• 가져오기한 태그를 이용해서 jsx에 간단하게 적용시켜주면! 화면에 영상이 잘 재생되는 것을 볼 수 있을 것이다!!!

json 파일을 이용해서 영상을 재생할 수 있다는 점이 신기했다!