[NextJS] Lottie를 사용해 보자!

🏄 Lottie란?

에어비앤비에서 개발한 JSON 기반의 애니메이션 라이브러리이다.
벡터 기반의 애니메이션이며, 웹에서 SVG로 저장이 된다.

GIF와 어떻게 다른가

GIF는 비트맵 방식으로 이루어져 있다. 픽셀 하나하나 색상이 칠해져 있어 용량이 크고, 확대할 경우 화질 저하가 일어난다.

반면 Lottie는 벡터 기반이기 때문에 용량이 적고, 확대해도 화질 저하가 일어나지 않는다.

🔍 Lottie를 사용해 보자

학교 웹 프로그래밍 시간에 실습 중인 해당 자기소개 웹 페이지에,
Lottie 파일을 추가해 인터랙티브하고 멋진 페이지를 만들어 보자 :)

Lottie 파일 다운로드하기

먼저 Lottie Files에서 회원 가입 / 로그인을 진행한 후,
좌측 상단의 로고를 눌러 메인 페이지로 이동한다.

우측 상단의 검색창에 원하는 검색어를 넣고 검색해 준다.
나는 '프론트엔드 개발자' 키워드에 맞는 developer를 검색했다.

애니메이션을 선택한 후, 우측 상단의 Download 버튼을 눌러준다.

Lottie JSON을 선택해 JSON 파일로 저장해 준다.

다운로드된 파일은 public 폴더 아래에 저장해 주었다!

react-lottie-player 설치

npm install --save react-lottie-player

해당 명령을 터미널에 입력해 Lottie 파일을 사용할 때 필요한 라이브러리를 설치해 준다.

Lottie Import하기

import Lottie from "react-lottie-player";

import lottieJson from "../../../public/Lottie.json";

react-lottie-player에서 Lottie를 Import하고,
다운로드 받았던 JSON 파일을 public에서 Import 해 주자.

'안녕하세요, 프론트엔드 개발자 김소마입니다.' 부분의 오른쪽에 Lottie 파일을 넣기 위해, 해당 컴포넌트인 Hero.tsx에 Import 했다.

"use client"

import Image from "next/image";
import Lottie from "react-lottie-player";
import lottieJson from "../../../public/Lottie.json";


export default function Hero() {
    return (
        <div className="bg-lightGray px-24 py-32">
            <div className="flex justify-between items-center mx-auto max-w-7xl">
                <div className="flex flex-col gap-8">
                <div className="flex flex-col gap-5 text-6xl font-bold whitespace-nowrap">
                    <h1>안녕하세요,</h1>
                    <h1>프론트엔드 개발자</h1>
                    <h1>김소마입니다.</h1>
                </div>
                <span className="text-gray-500">
                    Visual Studio Code editing. Redefined. Free. Built on open source.
                    Runs everywhere.
                </span>
                </div>
                <div>
                    {/* Lottie 파일 넣을 부분 */}
                </div>
            </div>
        </div>
    )
}

<Lottie loop animationData={lottieJson} play />

그리고 이렇게 Lottie 컴포넌트의 animationData Props에 lottieJson을 전달하고, 필요하다면 추가적인 Props를 넣어 주면 된다.
무한히 반복되는 애니메이션을 넣고 싶다면, loop와 play Props를 넣어 주면 된다. 이에 대한 설명은 공식 문서에서 볼 수 있다!

적용 화면

Lottie 애니메이션이 성공적으로 적용됐다 🎶