React에서 Lottie 애니메이션 쉽게 사용하고 활용하는 방법!

안녕하세요, 👋

웹사이트나 앱에 생동감을 불어넣고 싶으신가요?

그렇다면 Lottie 애니메이션이 좋은 해답이 될 수 있습니다!

요즘 웹/앱 개발 트렌드를 살펴보면 사용자 경험을 획기적으로 개선하기 위해 애니메이션을 적극적으로 활용하는 추세인데요, Lottie는 이러한 요구를 충족시켜주는 훌륭한 도구입니다.

이번 포스팅에서는 React에서 Lottie를 어떻게 사용하는지, 그리고 어떤 방식으로 활용할 수 있는지 쉽고 재미있게 설명해 드리겠습니다.

Lottie, 대체 무엇일까요?

Lottie는 Airbnb에서 개발한 애니메이션 라이브러리입니다.

After Effects와 같은 툴에서 제작된 애니메이션을 JSON 형태의 파일로 내보내(Export) 웹, 앱 등 다양한 플랫폼에서 사용할 수 있도록 지원합니다.

마치 레고 블록처럼, 미리 만들어진 애니메이션을 조립하여 원하는 곳에 간편하게 적용할 수 있는 것이죠!

왜 Lottie를 사용해야 할까요?

가볍고 빠릅니다: JSON 기반이라 파일 크기가 작고, 벡터 기반이라 해상도에 영향을 받지 않습니다. 덕분에 로딩 속도 걱정 없이 깔끔한 애니메이션을 보여줄 수 있습니다. 웹 애니메이션 성능을 높이는 데 효과적입니다.
커스터마이징이 용이합니다: JSON 파일을 수정하여 애니메이션의 색상, 속도, 트리거 등을 자유롭게 변경할 수 있습니다. Lottie 애니메이션 편집이 간편하다는 장점이 있습니다.
다양한 플랫폼을 지원합니다: 웹(React, Vue, Angular), iOS, Android 등 다양한 플랫폼에서 사용할 수 있습니다. 한 번 만든 애니메이션을 여러 곳에서 재활용할 수 있다는 의미입니다! 크로스 플랫폼 애니메이션 구현에 유용합니다.
개발 생산성 향상에 기여합니다: 디자이너가 제작한 애니메이션을 그대로 활용할 수 있어 개발 시간을 단축할 수 있습니다. 디자이너와 개발자 간의 협업 효율성도 높일 수 있겠죠? 애니메이션 개발 효율을 향상시키는 데 도움이 됩니다.

React에서 Lottie, 어떻게 사용할까요?

React에서 Lottie를 사용하는 방법은 아주 간단합니다. **lottie-react**라는 라이브러리를 이용하면 Lottie 애니메이션을 컴포넌트처럼 쉽게 다룰 수 있습니다.

1. 라이브러리 설치

먼저, lottie-react 라이브러리를 설치해야 합니다. 터미널을 열고 다음 명령어를 입력해주세요.

npm install lottie-react
# 또는
yarn add lottie-react

2. JSON 파일 준비

Lottie 애니메이션은 JSON 파일 형태로 제공됩니다. After Effects에서 Bodymovin 플러그인을 사용하여 내보내거나, LottieFiles와 같은 플랫폼에서 무료 또는 유료로 제공하는 애니메이션을 다운로드받을 수 있습니다. Lottie JSON 파일을 확보하는 것이 중요합니다.

3. React 컴포넌트에서 Lottie 사용

이제 React 컴포넌트에서 **lottie-react**를 사용하여 Lottie 애니메이션을 보여줄 차례입니다. 다음은 간단한 예제 코드입니다.

import React from 'react';
import Lottie from 'lottie-react';
import animationData from './animation.json'; // JSON 파일 경로

const MyLottieAnimation = () => {
  return (
    <Lottie
      animationData={animationData}
      loop={true}
      autoplay={true}
      style={{ width: 200, height: 200 }}
    />
  );
};

export default MyLottieAnimation;

코드 설명:

animationData: JSON 파일의 내용을 담고 있는 변수입니다. import 문을 사용하여 JSON 파일을 불러와서 할당해야 합니다.
loop: 애니메이션을 반복할지 여부를 결정하는 속성입니다. **true**로 설정하면 애니메이션이 계속 반복됩니다.
autoplay: 컴포넌트가 마운트될 때 애니메이션을 자동으로 시작할지 여부를 결정하는 속성입니다. **true**로 설정하면 자동으로 시작됩니다.
style: 애니메이션의 크기, 위치 등을 조절하는 속성입니다.

4. 옵션 설정으로 애니메이션 제어하기

**lottie-react**는 다양한 옵션을 제공하여 애니메이션을 세밀하게 제어할 수 있도록 지원합니다. 몇 가지 유용한 옵션을 살펴볼까요?

segments: 애니메이션의 특정 구간만 재생하고 싶을 때 사용할 수 있습니다. 예를 들어, **segments={[10, 20]}**이라고 설정하면 10프레임부터 20프레임까지만 재생됩니다.
speed: 애니메이션의 재생 속도를 조절할 수 있습니다. 1보다 큰 값을 설정하면 빨라지고, 1보다 작은 값을 설정하면 느려집니다.
direction: 애니메이션의 재생 방향을 설정할 수 있습니다. 1은 정방향, -1은 역방향입니다.
isStopped: 애니메이션을 멈추거나 다시 시작할 수 있습니다.
isPaused: 애니메이션을 일시 정지하거나 다시 재생할 수 있습니다.

import React, { useState } from 'react';
import Lottie from 'lottie-react';
import animationData from './animation.json';

const MyLottieAnimation = () => {
  const [isStopped, setIsStopped] = useState(false);

  return (
    <div>
      <Lottie
        animationData={animationData}
        loop={true}
        autoplay={true}
        isStopped={isStopped}
        style={{ width: 200, height: 200 }}
      />
      <button onClick={() => setIsStopped(!isStopped)}>
        {isStopped ? 'Play' : 'Stop'}
      </button>
    </div>
  );
};

export default MyLottieAnimation;

이 예제에서는 isStopped 상태를 사용하여 애니메이션을 멈추거나 다시 시작하는 버튼을 만들었습니다. React Lottie 컨트롤의 예시입니다.

Lottie, 어디에 활용하면 좋을까요? 💡

Lottie는 웹/앱 개발의 다양한 영역에서 활용될 수 있습니다. 몇 가지 실무 사례를 살펴볼까요?

로딩 애니메이션: 웹 페이지나 앱이 로딩되는 동안 지루함을 덜어주고 사용자 경험을 향상시킬 수 있습니다. 로딩 화면 애니메이션으로 사용자 이탈을 방지할 수 있습니다.
인터랙션 애니메이션: 버튼 클릭, 스크롤, 마우스 오버 등 사용자의 액션에 반응하는 애니메이션을 만들어 웹/앱에 생동감을 불어넣을 수 있습니다. 인터랙티브 애니메이션을 통해 사용자 몰입도를 높일 수 있습니다.
온보딩 애니메이션: 새로운 사용자가 웹/앱의 기능을 쉽게 이해하도록 도와주는 애니메이션을 만들 수 있습니다. 온보딩 애니메이션은 사용자 교육에 효과적입니다.
아이콘 애니메이션: 정적인 아이콘 대신 움직이는 아이콘을 사용하여 사용자 인터페이스를 더욱 매력적으로 만들 수 있습니다. 아이콘 애니메이션은 UI/UX를 개선합니다.
데이터 시각화: 복잡한 데이터를 이해하기 쉽도록 애니메이션으로 표현할 수 있습니다. 애니메이션 데이터 시각화는 정보 전달력을 높입니다.

Lottie의 강력한 대안, Rive! 🚀

Lottie가 유용한 도구인 것은 사실이지만, Rive라는 강력한 대체제도 있다는 점을 알아두시면 좋습니다! Rive는 실시간 인터랙티브 벡터 그래픽을 제작할 수 있는 툴입니다. Lottie와 마찬가지로 애니메이션을 웹, 앱 등 다양한 플랫폼에서 사용할 수 있도록 지원합니다.

Rive의 장점

더욱 강력한 인터랙션: Rive는 애니메이션에 사용자의 입력에 따라 반응하는 인터랙션을 추가하기가 훨씬 쉽습니다. Rive 인터랙션 기능은 Lottie보다 강력합니다.
더욱 효율적인 파일 크기: Rive는 애니메이션을 렌더링하는 방식이 달라서 Lottie보다 파일 크기가 더 작을 수 있습니다. 애니메이션 파일 크기 최적화에 유리합니다.
더욱 유연한 애니메이션: Rive는 애니메이션을 만드는 데 더 많은 유연성을 제공합니다. Rive 애니메이션 제작은 더 자유롭습니다.

특히 React Native 환경에서는 Rive를 사용하는 것이 Lottie보다 성능 면에서 더 유리할 수 있다는 의견도 있습니다. React Native 애니메이션 성능을 고려한다면 Rive를 고려해볼만 합니다.

마무리하며

이번 포스팅에서는 React에서 Lottie를 사용하는 방법과 다양한 활용 사례를 살펴보았습니다. Lottie는 웹/앱 개발에 있어서 사용자 경험을 향상시키는 데 매우 유용한 도구라는 것을 알 수 있었습니다. React Lottie 활용은 UX 개선에 효과적입니다.

하지만 Lottie가 모든 상황에 적합한 것은 아닙니다. 프로젝트의 요구 사항과 특성을 고려하여 Lottie와 Rive 중에서 적절한 도구를 선택하는 것이 중요합니다. 애니메이션 라이브러리 선택 시 신중해야 합니다.