1. Lottie란?

Lottie는 앱 및 웹 개발자들이 복잡한 애니메이션을 구현하고 관리하는 데 도움을 주는 애니메이션 라이브러리다.

---

2. Lottie를 사용하는 이유

(1) 디자이너와 개발자의 협업을 간소화

Lottie를 사용하면 디자이너와 개발자 간의 협업이 원활해진다. 디자이너가 Adobe After Effects와 같은 툴을 사용하여 애니메이션을 디자인하고, JSON 파일로 내보내면 개발자는 해당 파일을 앱 또는 웹에 쉽게 통합할 수 있다.

(2) 경량화된 애니메이션

Lottie는 벡터 기반의 애니메이션을 지원하므로 이미지 기반 애니메이션보다 훨씬 경량화되어 있기 때문에 앱 또는 웹의 성능 향상에 도움을 준다.

(3) 플랫폼 호환성

Lottie는 Android, iOS, 웹 등 다양한 플랫폼에서 사용할 수 있기 때문에 다양한 앱 및 웹 프로젝트에 쉽게 통합할 수 있다.

---

3. Lottie 파일 적용 방법

(1) 원하는 애니메이션 다운로드

LottieFiles에서 원하는 애니메이션을 json파일로 다운받는다.

다운로드 받은 파일은 프로젝트의 public 폴더 안에 저장해놓는다.

(2) Lottie 라이브러리 설치

npm install --save react-lottie-player

(3) Lottie import

import Lottie from "react-lottie-player";

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

"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>
    )
}