React 애니메이션 비교: Framer Motion vs CSS

서론

React 프로젝트에서 애니메이션은 사용자 경험을 크게 좌우한다. 간단한 토글 효과부터 복잡한 인터랙션까지 선택지는 다양하다. 대표적으로 CSS 기반 애니메이션과 Framer Motion 같은 라이브러리가 있다. 이 글은 두 접근법의 작동 원리와 장단점, 성능 고려사항을 초보자도 쉽게 이해할 수 있게 설명한다.

CSS 애니메이션 기본

원리와 장점

CSS 애니메이션은 브라우저의 기본 렌더링 엔진을 활용한다. 선언형으로 작성하기 때문에 코드가 간결하다. 작은 효과나 상태 기반 전환에 적합하다. 또한 추가 라이브러리 설치가 필요 없어서 번들 크기에 영향을 주지 않는다. react css 애니메이션이라는 검색어로 찾는 예제들이 많다.

간단한 예제

아래 예제는 토글로 색과 위치를 바꾸는 CSS 전환이다.

/* App.css */
.box {
  width: 120px;
  height: 120px;
  background: #4f46e5;
  transition: transform 300ms ease, background-color 300ms ease;
}
.box.open {
  transform: translateX(120px) rotate(10deg);
  background: #06b6d4;
}

/* App.jsx */
import React, { useState } from 'react';
import './App.css';

function App() {
  const [open, setOpen] = useState(false);
  return (
    <div>
      <div className={open ? 'box open' : 'box'} onClick={() => setOpen(!open)}>Hello</div>
    </div>
  );
}

export default App;

Framer Motion 기본

원리와 장점

Framer Motion은 React에 최적화된 애니메이션 라이브러리다. 선언적 API와 제어 가능한 상태 전환, 제스처 반응, 레이아웃 애니메이션 등을 제공한다. 복잡한 시퀀스나 드래그, 스프링 기반 모션을 손쉽게 구현할 수 있어 개발 생산성이 높다. 특히 대화형 UI 구현이 많은 앱에서 유용하다.

간단한 framer motion react 예제

아래 예제는 프레임 모션의 기본 사용법을 보여준다. motion 컴포넌트를 사용해 초기, 애니메이션, 종료 상태를 정의한다.

/* 설치: npm install framer-motion */

import React from 'react';
import { motion } from 'framer-motion';

function MotionBox() {
  return (
    <motion.div
      initial={{ opacity: 0, y: -20 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0 }}
      transition={{ duration: 0.4 }}
      style={{ width: 120, height: 120, background: '#ef4444' }}
    >Hello</motion.div>
  );
}

export default MotionBox;

리액트 애니메이션 성능 비교

성능은 애니메이션 설계에서 가장 중요한 요소다. '리액트 애니메이션 성능'을 고려할 때 핵심은 레이아웃 쓰래시(layout thrash)를 피하고 GPU 가속 가능한 속성(transform, opacity)을 활용하는 것이다. CSS 애니메이션은 브라우저 최적화가 잘 되어 있어 단순 트랜지션에서 우수하다. 반면 Framer Motion은 내부적으로 requestAnimationFrame과 최적화를 사용하지만, 복잡한 레이아웃 애니메이션이나 많은 요소를 동시에 애니메이트할 때 비용이 커질 수 있다.

실무 기준으로는 다음을 권장한다.

• 간단한 이동·페이드: CSS로 구현하고 transform/opacity 사용
• 복잡한 시퀀스나 제스처: Framer Motion 사용
• 많은 요소 동시 애니메이션: batching이나 stagger 적용 고려
• 레이아웃 변화가 잦을 때: 레이아웃 애니메이션 사용은 신중

선택 기준

프로젝트 규모

작은 프로젝트나 정적인 효과 위주면 CSS가 간단하고 빠르다. 대형 애플리케이션에서 일관된 인터랙션과 재사용 가능한 애니메이션 로직이 필요하면 Framer Motion이 편리하다.

개발 생산성

Framer Motion은 상태 기반 애니메이션 정의와 controls 제공으로 복잡한 흐름을 쉽게 관리한다. 반면 CSS는 설계가 단순하므로 디자이너와 협업하기 쉽다.

실무 팁과 주의사항

• 가능하면 transform과 opacity 속성만 애니메이트한다. 레이아웃 재계산 비용을 줄인다.
• wilI-change를 남용하지 않는다. 성능 이득은 제한적이며 메모리 사용이 늘어날 수 있다.
• 애니메이션이 많은 경우 DevTools로 프레임 드롭을 확인한다.
• 프레임 모션의 layout 애니메이션은 강력하지만 렌더 비용을 측정하면서 적용한다.
• 접근성(감각 과부하 대응)에 유의해 최소한의 옵션으로 줄일 수 있도록 설정한다.

마무리

결론적으로 단순 전환은 react css 애니메이션으로 충분하고, 복잡한 인터랙션과 높은 재사용성이 필요하면 Framer Motion이 효율적이다. 또한 리액트 애니메이션 성능을 확보하려면 transform/opacity 중심 설계와 배치 전략이 중요하다. 마지막으로 구현 전 요구사항과 사용자 환경을 고려해 적절한 도구를 선택하는 것이 가장 실용적이다.