[React] AF 플러그인으로 애니메이션 간단 구현 (lottie / bodymovin / adobe effects)

오늘은 video 태그의 autoplay 가 아이폰 저전력 모드 (iphone low power mode) 에서는 작동하지 않는 문제를 애니메이션을 구현하는 방법으로 해결하며  FE-designer AF 협업 세미나를 진행했던 내용을 포함해 작성하려고 한다.

 

상황 

기존에는 메인에서 adobe-effects 를 사용해 만들어진 gif / video 형식을 가진 에셋들이 여러 개 포함 되어있었다.

다소 복잡한 애니메이션들이 많은 페이지였으나 당시 리소스를 생각해 현련한 애니메이션이 들어가는 부분은 1차로 gif 파일로 받았던 기억이 난다. gif로 받고 나니 용량이 큰 탓에 렌더링 속도에 이슈가 있어 이런 저런 방법을 찾아보다가 파일 형식을 webm 과 mp4로 바꾸고 렌더링 속도에 문제가 없을 정도로 용량도 대폭 줄여 문제를 해결했던 기억이 있다.

이번 문제는 로그인 기능 구현 도중 아이폰 저전력 모드에서는 video 의 autoplay 기능이 작동하지 않는다는 것을 알게 되었고, 로그인의 오버뷰 페이지에서 새로운 동적 에셋이 추가되어야 하는 상황이라 이를 해결하기 위한 방안을 모색해 보았다.

강제로 autoplay 를 재생시키는 방법도 있었고, 유저 인터랙션에 의해 작동하도록 할 수도 있었으나 그게 과연 좋은 방안인 걸까?하는 고민을 했었고, 백엔드 선배님께서는 애니메이션 그자체로 구현하는 것이 가장 좋은 방법일 것 같다는 의견을 주셨다.

---

-- 참고 링크 : video 태그를 유지하고 해결하는 방법 (https://shaktisinghcheema.com/how-to-autoplay-video-on-mobile-devices-on-low-power-mode/)

---

그렇다면 애니메이션 작업을 하기 위해선 디자이너님에게 어떤 형식으로 파일을 받아 커뮤니케이션을 하고 프론트에선 어떻게 보여줘야 하는 것일까 고민이 들었다.

다이나믹하게 움직이는 애니메이션에 대한 협업 경험이 없다보니 아무것도 모르는 상태였고 우선 먼저 리서치 후에 가이드 공유를 하는 게 효율적일 것이라는 생각이 들었다.

디자이너분이 작업한 애니메이션은 adobe-effects 를 통해 구현되었다는 것을 확인했고, 분명 디자이너 툴이니 개발자와 협업하는 데 도움을 줄 수 있는 무엇인가가 있을 거라는 약간의 확신으로 정보를 찾기 시작했다.

 

Tools

디자이너 - AF 플러그인 bodymovin

개발자 - Lottie

 

위 두 가지 툴을 찾아냈고, 주말에 AF 를 직접 설치하고 여러 방법으로 json으로 추출하여 직접 클라이언트에 구현해 보면서 알맞은 포맷을 찾아 적용해냈다.

세미나를 위해 작성한 발표 문서 중 일부를 발췌하여 조금 더 설명하고자 한다.

---

특징 및 이점 

Bodymovin (Adobe After Effects 플러그인)

• After Effects 프로젝트를 JSON 형식으로 내보내서 웹에서 Lottie 애니메이션으로 사용할 수 있음. 특히 웹 디자이너와 개발자들 사이에서 인기가 많음
• Lottie는 Airbnb에서 개발한 라이브러리로, 애니메이션을 웹, 모바일, 그리고 앱에서 원활하게 렌더링할 수 있도록 도움. JSON 형식으로 된 Bodymovin 애니메이션은 사이즈가 작고, 스케일링이 쉽고, 원활하게 작동하기 때문에 성능이나 퀄리티에서 타협하지 않고도 복잡한 애니메이션 구현이 가능.
• 디자이너는 After Effects 내에서 직접 애니메이션을 제작한 후, 개발 없이 바로 웹사이트나 앱에 적용할 수 있다. 디자인과 개발 프로세스가 효율성 증대.

 

Lottie 특징 (Lottie 특징) 

-로띠는 json에 멈춰있는 svg들을 순서대로 넣어놓은 것을 재생하는 것-

•  Airbnb에서 개발한 오픈 소스 라이브러리, 애니메이션을 JSON 형식으로 가져와서 웹사이트, 모바일 애플리케이션, 데스크톱 애플리케이션 등에서 렌더링하는 데 사용. 디자이너가 작성한 애니메이션을 애플리케이션에 더 쉽게 통합할 수 있도록 하는 것이 주 목적
• Adobe After Effects에서 작성된 애니메이션을 Bodymovin 플러그인을 통해 JSON 형식으로 내보낸 후, 이를 다시 불러와 렌더링할 수 있다. 디자이너가 코드를 작성하거나 애니메이션을 프레임 별로 분해할 필요 없이 복잡한 애니메이션 구현 가능
• 벡터 애니메이션을 지원, 해상도에 관계없이 고해상도 이미지를 유지 가능, 이는 애플리케이션의 성능을 향상시키고, 다양한 해상도의 디스플레이에서 깨끗하게 보이는 애니메이션을 제공.
•  iOS, Android, React Native, Web 등을 지원. 동일한 애니메이션을 여러 플랫폼에서 쉽게 재사용할 수 있다.

 

Bodymovin (디자이너) + Lottie (개발자) 조합의 이점

• 고품질 애니메이션: Bodymovin을 이용하면 After Effects로 만든 복잡하고 고품질의 애니메이션을 웹사이트에 쉽게 통합할 수 있습니다. 이는 사용자 경험을 향상시키는 데 큰 도움이 됩니다.
• 경량화: Bodymovin은 JSON 형식으로 애니메이션 데이터를 내보냅니다. 이는 전통적인 GIF나 비디오 파일에 비해 훨씬 작은 파일 크기를 가집니다. 즉, 더 빠른 로딩 시간과 더 나은 성능을 제공합니다.
• 확장성: JSON 형식으로 내보낸 애니메이션은 벡터 기반이므로, 다양한 크기와 해상도의 화면에 쉽게 맞출 수 있습니다.
• 플랫폼 독립성: Bodymovin으로 생성된 JSON 파일은 Lottie 라이브러리를 이용해 웹뿐만 아니라 iOS, Android 등 다양한 플랫폼에서 사용할 수 있습니다. 이는 디자이너와 개발자가 한 번의 작업으로 여러 플랫폼에 애니메이션을 제공할 수 있게 합니다.
• 인터랙티브: Lottie를 이용하면 애니메이션을 사용자의 행동에 반응하도록 만들 수 있습니다. 예를 들어, 버튼 클릭이나 드래그 같은 사용자의 행동에 따라 애니메이션의 상태를 바꾸는 것이 가능합니다.
• 간편한 통합: React / Vue 는 Lottie-web, react-lottie, vue-lottie 등의 라이브러리를 통해 Bodymovin 애니메이션을 쉽게 통합할 수 있습니다. 이를 통해 컴포넌트에 애니메이션을 간편하게 추가할 수 있습니다.

디자이너와 개발자는 사용자 경험을 향상시키며, 동시에 개발 및 유지 보수 과정 간소화 가능

---

lottie-react를 통한 코드 구현

추천 (react v18^ support) lottie-react 

참고 : 기존에 react-lottie 라이브러리를 사용했었으나, 리액트 18버전 이상을 지원하지 않는 의존성 문제로 최근에 위 라이브러리로 교체했습니다 

 

Component.tsx

 

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

const Component = () => {
  return (
    <div>
    	{...el}
        <Lottie
          autoPlay
          loop
          animationData={flamingoAnimation}
          style={{cursor: 'default'}}
        />
    </div>
  );
};

bodymovin을 통해 추출 한 json을 프로젝트에 추가하고, Lottie 애니메이션을 적용하고싶은 곳에서 Lotte 를 불러온 뒤 위와 같이 설정하면 예쁜 애니메이션을 확인할 수 있다.

 

구현 결과물

너무 예쁘다

---

 

직접 AF를 설치하고 json 으로 추출하여 구현하는 과정까지 진행하면서 처음엔 팀 내 디자이너분께 설명을 드리기 위해 + 커뮤니케이션 가이드를 위해 문서를 정리했는데

사실 FE - designer 는 대체로 인터렉티브를 좋아하지만(개인적인 생각) 현실적인 리소스 문제로 적용하지 못하고 있는 경우가 대부분이다 보니 모두 이런 방법이 있다는 것을 알고 있다면 여러가지로 조금이나마 도움이 되지 않을까 하여 개발자 + 디자이너를 대상으로 사내에 작은 세미나를 열었다.

세미나에서는 툴 설명과 함께 가이드 문서를 공유드렸고, 디자이너 분들의 반응이 좋았던 걸로 기억해 조금 뿌듯했던 기억으로 남아있다.

 

뜬금없지만 Fe 와 디자이너 모두 마음 속 그 어느 곳엔 항상 인터렉티브한 ui에 대한 욕구를 갖고 있지 않을까.. 하는 생각을 한다