[Lottie에 대한 조사 및 도입고민]

https://github.com/modulersYJ/ganoverflow-front/issues/57 <- 해당 issue에 작성했던 글임.

---

게시판에서 에러페이지가 발생한만큼, 에러페이지, 로딩페이지를 지금 시점에서 도입해보면 어떨까 생각하여, 제안합니다~

에러 페이지, 로딩 페이지 관련 Next.js 레퍼런스

https://nextjs.org/docs/app/building-your-application/routing
https://nextjs.org/docs/app/api-reference/file-conventions/not-found
https://nextjs.org/docs/app/api-reference/file-conventions/error
https://nextjs.org/docs/app/building-your-application/routing/error-handling
https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming

---

Lottie 사용에 대한 제안

저는 이번에 참가한 해커톤에서 디자이너님 요구를 통해 처음으로 Lottie를 사용해봤는데요, Adobe에서 공개된 애니메이션 파일을 고르고 전용 react-lottie 라이브러리를 통해 적용만 하는 것으로, 매우 간편하게, 아주 나이스한 애니메이션 디자인을 적용할 수 있어 정말 만족했던 스택이에요.

홍래님도 분명 접해보거나 사용해보셨을 수 있다고 생각하지만, 제가 해커톤 당시 급하게 뇌빼고 해당 스택을 사용했던 만큼 lottie에 대해 개인적인 조사 및 정리 겸 홍래님께도 관련 내용 공유드리고 에러 및 로딩 등에 도입해보면 어떨지 여쭤보고자 해요.

Lottie란?

(그렇다고 하네요)

Lottie는 Airbnb에서 만든 라이브러리로, Adobe After Effects에서 생성된 애니메이션을 JSON 데이터로 변환해 웹, 모바일 앱 등에서 사용할 수 있게 해주며, 이 JSON 파일이 Lottie 파일이라고 합니다. (json 파일이니 만큼, 타 확장자에 비해 비교적 나은 성능을 보여주겠죠?)

Lottie의 장단점에 대해.

장점

• 크기: 벡터 기반이므로, GIF나 비디오보다 작은 용량으로 고화질 애니메이션을 사용할 수 있다네요. 매우 훌륭합니다!
• 플랫폼 간 호환성이 뛰어나다고 합니다. 안드, IOS, 웹 등등..
• 코드를 통해 애니메이션의 속도, 크기, 반복 횟수 등을 조절할 수 있어서 개발자 입장에서 매우 간편해보여요.

Lottie의 단점:
과연 있나 싶긴 하지만, 하나 발견한 것은 매우 복잡한 애니메이션의 경우, After Effect(어도비 모션그래픽 툴-아시죠?)에서 표현된 고급 표현기능을 그대로 가져오지 못한다 정도인 것 같네요. 사실 Lottie는 우리가 만들어 사용할 것이 아니라, 오픈소스에서 긁어오는 것을 목표로 하기 때문에 큰 문제가 안되겠네요.

Lottie 공홈 탐방 및 소스얻기

위와 같이 원하는 애니메이션을 검색하고 확장자를 지정하여 얻을 수 있습니다. 일반적으로는 json으로 얻어 사용하면 되겠습니다.

react-lottie, lottie-react 라이브러리 비교, 사용법

아래 리액트에서 대표적인 두가지 라이브러리가 있네요.

npm install lottie-react

npm install react-lottie

react-lottie vs lottie-react

• 둘이 무슨차이인지, 뭐가 더 나을지 싶어 우선 npm trend를 통해 두 라이브러리 사용량 등을 조회해봤습니다.
  

• lottie-react는 업데이트가 비교적 최근에 있었고, react-lottie는 5년 마지막 업데이트였지만, 최근의 사용량을 보면 여전히 react-lottie쪽이 약우세하네요.

• 다만, Lottie측 공홈에 걸린 오픈소스 레포를 참고해보면, lottie-react는 있지만, react-lottie는 없습니다.

• 조사 결과 성능 차이는 거의 없다고 합니다. 하지만, lottie-react는 더 최근에 만들어진 라이브러리로, 최신 React 기능과 hook을 통한 사용이 가능하므로, 일부 사용 사례에서 더 효율적인 성능이나 코드 최적화가 가능할 수 있다고 합니다.

• 실제 용례 비교 : lottie-react측이 더 최신 리액트 트렌드를 반영하고 있네요, 다만 명시적으로 관리하는 react-lottie측이 더 대중적인 만큼 아직은 더 편해보이긴 합니다. 둘의 사용은 지극히 기호의 차이이거나, 리액트 버전호환성 문제 정도로 갈리겠네요!

react-lottie: Lottie의 옵션을 설정 객체로 관리, 애니메이션의 상태나 이벤트를 제어하기 위해선 별도의 API나 메서드를 사용해야 한다고 하네요.

//react-lottie
import React from 'react';
import Lottie from 'react-lottie';
import animationData from './animation.json';

function App() {
  const defaultOptions = {
    loop: true,
    autoplay: true, 
    animationData: animationData,
    rendererSettings: {
      preserveAspectRatio: 'xMidYMid slice'
    }
  };

  return <Lottie options={defaultOptions} />;
}

lottie-react: Hook (useLottie) 또는 컴포넌트를 제공하여 사용이 더 직관적이며, Props를 통해 애니메이션의 옵션을 직접 설정할 수 있다고 하네요!

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

function App() {
  return <Lottie animationData={animationData} loop autoplay />;
}

---

@hongregii
홍래님께서도 에러페이지, 로딩페이지, 로티 도입에 동의해주시면 제가 빠르게 우선순위 두고 도입해볼게요!!