Next.js에서 Lottie 애니메이션 사용하기

개요

웹에서 애니메이션을 구현할 때 간단한 동작은 CSS로, 섬세한 동작은 GSAP 등의 라이브러리를 사용해 구현할 수 있습니다.
이와 같은 방법도 애니메이션을 구현하는 좋은 방법이지만, 프로그래밍 기반이기 때문에 코드를 통해 모든 애니메이션을 제어해야 합니다. 하지만 Lottie를 사용하면,

🎨 애니메이션을 애니메이션 제작 도구(Adobe After Effects, Figma 등...)로 제작하고
💻 JSON 파일 결과물을 불러와 코드에서 애니메이션을 그대로 사용할 수 있습니다.

본 글에서는 Lottie가 무엇인지 알아보고, Next.js에서 Lottie 애니메이션을 사용하는 방법을 알아보겠습니다.

Lottie

Lottie는 Airbnb에서 만든 라이브러리로 애니메이션 제작 도구를 통해 섬세한 애니메이션을 구현하고 만든 애니메이션을 JSON 형식으로 추출해, 웹이나 앱에서 손쉽게 재생할 수 있도록 도와줍니다.
만약 디자이너가 After Effects를 사용해 애니메이션을 제작해 준다면, 개발자는 복잡한 코드 작성 없이도 JSON 파일을 통해 디자이너의 의도 그대로 인터랙션을 구현할 수 있습니다.
애니메이션 제작 도구 사용 방법을 모른다 해도, LottieFiles에서 무료 애니메이션 파일을 제공하기 때문에 다운로드하여 사용할 수 있습니다.

Lottie 애니메이션을 만들 수 있는 제작 도구 종류 자세한 사항은 링크 참조

Lottie를 선택해야 하는 이유

개요에서 한 번 얘기했다시피, 애니메이션을 구현할 수 있는 방법은 여러 가지가 있습니다.
그중에서도 왜 Lottie를 선택해야 하는지 Lottie의 특징과 장점에 대해 알아보겠습니다.

1. 섬세한 애니메이션을 복잡한 코드 작성 없이 구현 가능
JSON 기반의 애니메이션 파일을 불러와 사용하는 것만으로 간단하게 애니메이션을 구현할 수 있습니다.

2. 작은 파일 크기
파일 크기가 작아 이미지 시퀀스나 비디오보다 가볍고 빠릅니다.

	PNG	SVG	GIF	Lottie
이미지 파일 크기	큼	작음	큼	작음
이미지 확대	가능하나 깨짐	가능	가능하나 깨짐	가능
애니메이션 효과	일반적으로 지원하지 않음	지원함	지원함	지원함
투명 배경	지원함	지원함	지원함	지원함
커스터마이징 난이도	보통	보통~어려움	어려움	쉬움
사용자 인터랙션 (UI)	미지원	지원함	미지원	지원함

3. 자유로운 크기 조정
벡터 형식으로 렌더링 하기 때문에 해상도의 영향을 받지 않고 확대하거나 축소할 수 있습니다.

4. 다양한 플랫폼 지원과 라이브러리
하나의 JSON 파일로 다양한 플랫폼(iOS, 안드로이드, 웹, React Native)에서 동일한 애니메이션을 사용 가능합니다.

5. 상호작용성
프레임 단위 제어, 반복, 정지, 속도 조절 등 제어가 가능합니다.

JSON 파일을 기반으로 한 애니메이션으로 가벼운 크기를 갖고 있는 Lottie (출처: LottieFiles)

Next.js에서 Lottie 애니메이션 사용

많은 장점을 갖고 있는 Lottie! Next 환경에서는 lottie-react를 사용하여 쉽게 애니메이션을 구현할 수 있습니다.
지금부터 Next.js에서 Lottie 애니메이션을 사용하는 방법에 대해 알아보겠습니다.

1. 애니메이션 JSON 파일 준비

먼저, LottieFiles에서 원하는 애니메이션을 검색하고 작업공간에 저장합니다.
색상이나 속도와 같은 가벼운 커스텀이 가능하며 위 이미지와 같이 작업공간에서 JSON 파일을 다운로드할 수 있습니다.

2. lottie-react 라이브러리 설치
Lottie를 쉽게 제어할 수 있도록 돕는 lottie-react 라이브러리를 설치합니다.

npm install lottie-react

3. 컴포넌트에서 Lottie 애니메이션 사용
Next.js app 디렉토리 구조에서는 Lottie 컴포넌트를 사용하는 파일 맨 위에 "use client" 를 작성해야합니다.

'use client'

import Lottie from 'lottie-react'
import lottieStar from '@/public/lottie-star.json'

export default function LottieStar() {
  return <Lottie animationData={lottieStar} />
}

📘 Tip: TypeScript 설정
JSON 파일은 TypeScript 환경에서 resolveJsonModule 설정이 있어야 import가 가능합니다.
tsconfig.json에 아래와 같은 설정이 필요합니다.

{
  "compilerOptions": {
    "resolveJsonModule": true,
  }
}

📘 Tip2: Error: document is not defined
lottie-react는 dynamic 을 통해 불러오지 않으면, Error: document is not defined 에러를 노출했습니다. (#123)
그래서 아래와 같은 방식으로 사용해야 했었는데요, 이 문제에 대한 PR이 최근 병합되어 dynamic 을 사용하지 않고도 사용할 수 있게 되었습니다. (저도 글을 작성하며 알게 되어 코드를 수정했다는 TMI..)

'use client'

import dynamic from 'next/dynamic'
import lottieStar from '@/public/lottie-star.json'
const Lottie = dynamic(() => import('lottie-react'), { ssr: false })

export default function LottieStar() {
  return <Lottie animationData={lottieStar} />
}

lottie-react 활용

lottie-react

lottie-react 를 통해 ref로 애니메이션을 제어(play, stop, pause, goToAndPlay 등) 하거나, 스크롤 기반 애니메이션 제어 등의 여러 가지 활용이 가능합니다. 몇 가지 활용법을 소개하도록 하겠습니다.

✨ 주요 옵션

• animationData: 애니메이션 JSON 데이터
• loop: 반복 재생 여부 (기본값: true)
• autoplay: 자동 재생 여부
• lottieRef: 애니메이션을 제어하기 위한 참조
• speed: 애니메이션 재생 속도 (기본값: 1)
• style: 스타일 적용
• initialSegment: 시작할 프레임 범위 지정
• onComplete: 애니메이션 완료 시 콜백
• onLoopComplete, onEnterFrame 등...: 다양한 콜백 함수로 애니메이션 제어 가능

상태에 따라 애니메이션 제어

lottieRef를 통해 재생, 정지, 특정 프레임 이동 등 다양한 제어가 가능합니다.
아래 예제는 버튼을 통해 애니메이션이 재생, 정지를 제어하는 코드입니다.

'use client'

import { useRef, useEffect, useState } from 'react'
import Lottie, { LottieRefCurrentProps } from 'lottie-react'
import lottieStar from "@/public/lottie-star.json"

export default function ControlledLottie() {
  const lottieRef = useRef<LottieRefCurrentProps | null>(null)
  const [play, setPlay] = useState(false)

  useEffect(() => {
    if (play) {
      lottieRef.current?.play()
    } else {
      lottieRef.current?.stop()
    }
  }, [play])

  return (
    <>
      <button onClick={() => setPlay(!play)}>{play ? '정지' : '재생'}</button>
      <Lottie
        lottieRef={lottieRef}
        animationData={lottieStar}
        loop={false}
        autoplay={false}
      />
    </>
  )
}

useLottie, useLottieInteractivity 훅을 통해 스크롤 제어

lottie-react는 이를 위해 두 가지 훅을 제공합니다.
아래 예제는 이 두 가지 훅을 사용하여 스크롤 기반 애니메이션을 제어하는 코드입니다.

'use client'

import { useLottie, useLottieInteractivity } from 'lottie-react'
import lottieLikeButton from "@/public/lottie-like-button.json"

const style = {
  height: 300,
  border: 3,
  borderStyle: 'solid',
  borderRadius: 7,
}

const options = {
  animationData: lottieLikeButton,
}

export default function ControlledLottie() {
  const lottieObj = useLottie(options, style)
  const Animation = useLottieInteractivity({
    lottieObj,
    mode: 'scroll',
    actions: [
      {
        visibility: [0.4, 0.9],
        type: 'seek',
        frames: [0, 38],
      },
    ],
  })

  return Animation
}

마무리

Lottie는 개발자가 디자인된 애니메이션을 쉽게 구현하고 제어할 수 있는 도구입니다.
로딩 스피너, 페이지 전환 애니메이션 등 다양한 UI 요소에 활용할 수 있을 것 같으며, 가벼운 애니메이션은 직접 구현해도 좋지만 복잡한 애니메이션을 구현하거나 플랫폼에 생기를 불어넣을 매체가 필요하다 느낄 때 Lottie 선택을 고려해 볼 만할 것 같습니다.