어떤 애니메이션 라이브러리를 쓸까?

👀 들어가며…

이번 프로젝트에서는 애니메이션 효과가 일부 들어간다. 그래서 다른 팀원이 애니메이션 라이브러리 도입을 제안했다. 애니메이션 라이브러리를 사용해본 경험이 없어서 무엇을 선택해야 할지 잘 모르겠다. 이번 기회에 애니메이션 라이브러리를 탐색하고 어떤게 더 적합한지 스스로 생각해보는 시간을 가져보자.

🤔 과연 필요할까?

우선 먼저 생각해볼 것. 과연 애니메이션 라이브러리가 필요한가?

냅다 라이브러리 도입 결정! 보다는 정말 프로젝트에 라이브러리가 필요한지 생각해볼 필요가 있다. 왜냐면 애니메이션 라이브러리를 사용한 경험이 없기 때문에 배우는 시간도 필요하고, CSS로 충분하다면 라이브러리 도입은 쓸데없이 과한 선택이 될 수 있기 때문이다.

기획/디자인을 봤을때 애니메이션 효과가 어느정도로 들어갈지 정확하게 파악이 안됐다. 확실하게 정해진것은 몇 개 되지 않았는데 이것만으로 라이브러리를 도입하기는 조금 과할것 같다는 판단이 들었다. 그래서 PM과 디자이너에게 얼마나 적용할 것인지 여쭤보았고 필요한곳에 적극적으로 사용할것이라는 답을 받아서 애니메이션 라이브러리 도입을 확정지을 수 있게 되었다.

🔍 어떤게 있을까?

지금까지 애니메이션 라이브러리를 한 번도 써본 적이 없다. 대충 Framer Motion과 GSAP가 유명하다는것 정도만 알지 어떤 라이브러리가 있는지, 어떤 부분이 다른건지는 알지 못한다. 또 이것 외에도 괜찮은 라이브러리가 있을 수 있으니 성급하게 결론내지 말고 우선 어떤 라이브러리가 있는지 탐색해보자.

Framer Motion 리액트용 모션 라이브러리. 유명한 웹 사이트 빌더인 Framer에서 개발

GSAP 전문가를 위해 제작된 매우 강력한 자바스크립트 애니메이션 라이브러리

React Spring 상태 기반 리액트 애니메이션 라이브러리. 스프링 애니메이션을 우선적으로 지원한다고 함

Anime.js 경량 자바스크립트 애니메이션 라이브러리

React Motion 스프링 기반 리액트 애니메이션 라이브러리. React Spring과 다르게 스프링 모션만 지원한다고 함

Lottie.js 복잡한 애니메이션을 보여줘야할때 사용함. JSON으로 내보낸 어도비 애프터 이펙트 애니메이션을 파싱해 렌더링하는 라이브러리인데, 1~5번과는 성격이이 좀 다름

구글링했을때 이런것들이 나왔다. 사용자가 많고 유명한 것들로 추렸다. 이 중 성격이 다른 Lottie.js를 제외하고 나머지를 비교해보자.

⛳️ 기준을 세우자

비교하기 전 명확한 판단 기준이 있어야 한다. 현재 팀의 상황을 고려해 아래와 같은 기준을 세웠다.

1. 프로젝트에 적합한가?

프로젝트는 타입스크립트, 리액트를 기반으로 만들 예정이다. 그래서 타입스크립트, 리액트와 함께 쓰기 편해야 한다. 공식적으로 타입 지원을 해주는지, 리액트 기반인지, 함께 사용하기 쉬운지 등을 확인할것이다. 또한 필요한 기능은 충분히 지원하는지, 기능이 너무 많아 현재 프로젝트에 과한것은 아닌지도 함께 파악할것이다.

2. 사용/학습이 쉬운가?

팀원 대부분이 애니메이션 라이브러리는 처음 사용한다. 그래서 사용법이 쉬워야 하고 금방 익힐 수 있게 문서화가 잘 되어 있어야 한다. 또한 비슷한 조건이라면 많은 개발자가 사용하고 있는 라이브러리를 선택하고 싶다. 왜냐면 구글링했을때 찾을 수 있는 자료가 많아서 빠르게 익숙해질 수 있고 활성화된 커뮤니티가 있어야 문제가 생겼을때 도움을 받기 수월하기 때문이다.

3. 최근까지 유지보수가 되고 있는가?

최근까지 업데이트가 잘 되고있는 라이브러리라면 안정적으로 운영될것이고, 호환성 및 새로운 이슈가 있을때 신속하게 지원할 확률이 높다. 또한 새로운 기능 추가 및 활발한 개선 작업이 되고 있을 가능성이 높기 때문에 안정적인 개발을 위해서 라이브러리 선택 기준에 넣었다.

🙌 자세히 살펴보자

Framer Motion

Framer Motion의 GitHub를 보면 타입스크립트로 코드를 작성했다는 것을 알 수 있다. 또한 공식문서에서는 프로덕션에 바로 사용할 수 있는 ‘React용 모션 라이브러리’라고 소개하고 있다.

문법을 보자. 원하는 애니메이션을 설명하면 Framer Motion이 알아서 애니메이션을 구현해주는게 리액트의 선언적 구문과 비슷하게 느껴진다.

import { motion } from "framer-motion"

export const MyComponent = () => (
  <motion.div
    animate={{
      scale: [1, 2, 2, 1, 1],
      rotate: [0, 0, 270, 270, 0],
      borderRadius: ["20%", "20%", "50%", "50%", "20%"],
    }}
  />
)

공식문서를 보면 스크롤, 트랜지션, SVG Path 등 다양한 기능이 있어서 원하는 애니메이션을 구현하는데 무리가 없다고 판단했다. 또한 예제와 애니메이션을 함께 확인할 수 있어서 필요한 부분이 무엇인지 알기 쉬웠다. 하지만 검색 기능이 없는것은 아쉬웠다.

Jan 6, 2024 기준 하루 전 업데이트가 되었고, 다운로드 수도 많다. 사람들이 많이 쓰는 인기있는 라이브러리이기 때문에 참고할 수 있는 자료가 많아서 빠르게 이해하고 사용할 수 있을 것 같다.

GSAP

GSAP는 프레임워크에 구애받지 않는 ‘자바스크립트’ 라이브러리라고 소개하고 있다. 그래서 따로 타입 정의를 설치해야 하는줄 알았는데, 이 스레드를 보면 GSAP 3에서 공식적으로 타입스크립트 정의가 추가되었다고 한다. GSAP GitHub에서도 type 정의를 찾아볼 수 있다.

또한 프레임워크에 구애받지 않기 때문에 모든 프로젝트에 적용 가능하다. 그리고 useGSAP()라는 훅을 제공해 리액트와 함께 사용할 때 일어날 몇 가지 문제를 해결한다고 한다.

공식문서도 예제 및 애니메이션 동작을 미리 볼 수 있고 Learning 섹션도 있어서 배우기 편하다고 느꼈다. 하지만 기능이 굉장히 많아서 어렵게 느껴지기도 했다.

업데이트도 최근에 되었고, 다운로드 수도 많은 편이다. 공식문서가 굉장히 잘 되어있다는점이 마음에 들었다.

React Spring

이름에서 알 수 있듯 리액트 애니메이션 라이브러리이다. 또한 GitHub를 보면 타입스크립트로 작성했음을 알 수 있고, 공식 문서에서도 타입스크립트와 함께 사용하는 방법을 알려준다.

특이했던 점은 React Spring은 애니메이션을 시간과 곡선의 관점에서 바라보지 않는다. GitHub에서는 ‘spring-physics’라는 표현을 쓰는데, 현실 세계의 스프링이 시간과 곡선으로 움직이는게 아니듯이 자연스러운 움직임을 구현하기 위해 물리학의 관점으로 애니메이션을 바라본다는 의미 같다. 공식 문서에서도 스프링에는 정의된 곡선이나 정해진 지속시간이 없다고 설명하고 있다. 기본적으로 Spring 모션이 우선이지만 명확한 타이밍 지정이 필요한 사용자를 위해 지속시간도 지원하긴 한다.

대표적인 훅인 useSpring을 보면 이러한 관점이 잘 드러나는것 같다. from과 to를 사용해서 움직임을 설명하는데 마치 스프링처럼 동작하는듯한 느낌이 든다.

import { useSpring, animated } from '@react-spring/web'

function MyComponent() {
  const props = useSpring({
    from: { opacity: 0 },
    to: { opacity: 1 },
  })

  return <animated.div style={props}>Hello World</animated.div>
}

여기도 다양한 모션을 지원하고, 공식문서에 예제와 함께 설명이 잘 되어 있어서 빠르게 배울 수 있을것 같다. 또한 최근에 업데이트 되었고 다운로드 수도 많은 편이다. 다만 아직까진 시간과 곡선의 관점이 더 익숙해서 스프링의 개념이 와닿진 않았다.

Anime.js

Anime.js는 경량 자바스크립트 애니메이션 라이브러리이다. 타입스크립트와 함께 사용하려면 타입 정의 패키지 를 설치해야 한다. 리액트는 수동으로 바인딩 하는 방법으로 함께 사용하거나 react-anime.js 또는 react-anime 패키지를 사용하면 된다고 하는데 공식적으로 지원하는 형태는 아닌것 같다.

다른 애니메이션 라이브러리에 비해 기능은 많지 않다. 공식문서는 애니메이션 움직임과 함께 예시 코드가 있어서 참고하기 편했다.

React Motion

이름에서도 알 수 있듯 리액트 애니메이션 라이브러리이다. 타입스크립트와 함께 사용하려면 타입 정의 패키지 설치가 필요하다.

React Spring과 마찬가지로 물리 법칙의 관점으로 애니메이션을 바라본다. 차이점은 React Motion은 지속시간을 지원하지 않는다.

다른 애니메이션 라이브러리와 다르게 GitHub 리드미에 있는 설명이 전부다. 그만큼 지원하는 기능도 많지 않다. 그리고 마지막 업데이트가 몇 년 전이다.

번외) 다운로드 수 비교하기

npm trends 사이트에서 라이브러리를 그래프로 비교해볼 수 있다. 2년 기간을 잡고 다운로드 수를 비교했는데 Framer Motion의 인기가 굉장하다는것을 알 수 있었다.

🎯 이제 결정의 시간…

이것저것 찾아보며 어떤 라이브러리가 좋을지 고민하는 시간을 가졌다. 위의 다섯 개 라이브러리 중에서

타입스크립트, 리액트와 함께 쓰기 편함

(상대적으로) 쉽게 배울 수 있고 사용자가 많아 자료도 풍부함

최근까지 업데이트도 잘 됨

이 세 가지 기준을 모두 충족하는 라이브러리는 Framer Motion이다. React Spring도 괜찮았는데 아무래도 ‘스프링’ 개념이 와닿지 않아서 제외했다.

팀원도 마찬가지로 여러가지를 알아봤고, Framer Motion과 GSAP로 의견이 좁혀졌다. 상의 끝에 Framer Motion으로 결정되었다. GSAP도 정말 좋은 애니메이션 라이브러리지만 기능이 굉장히 많고, 또 일부는 유료기도 하고, 구현해야 할 애니메이션이 복잡하지 않기 때문에 현재 프로젝트에는 적합하지 않을 것 같다는 판단이었다.

👋 마무리

애니메이션 라이브러리 도입을 결정한 후 이것저것 알아보며 다양한 라이브러리의 존재를 알게 되었다. 또 애니메이션을 바라보는 다른 관점도 알게 되었다. 애니메이션을 효과적으로 구현할 수 있게 도와준다는 점은 동일하지만 움직임을 보는 관점이 다르다는게 흥미로웠고 라이브러리의 컨셉이 문법에서 드러나서 비교하는 재미가 있었다. 나중에 기회가 된다면 React Spring도 사용해보고 싶다.

이번에 새삼스럽게 깨달은 점은 어떤 언어/라이브러리를 쓰느냐에 따라 고려해야 할게 달라진다는 점이다. 자바스크립트로 프로젝트를 진행했다면 타입 지원까지 고려하지 않아도 됐을텐데, 이런 부분까지 고려해야 더 편하게 개발할 수 있을 것 같아서 여러 기준 중 하나로 삼게 되었다.

아무튼 Framer Motion 도입이 결정되었으니 여러 애니메이션을 예쁘게 잘 구현할 수 있었으면 좋겠고 한결 더 생동감 있는 서비스가 되길 기대해 본다.

📌 참고

각 라이브러리 공식문서

The top animation libraries for React in 2023