Framer Motion

특징

• React 전용

• 레이아웃 변화 감지 애니메이션 (layout prop)

• Drag / Drop / Gesture 처리에 특화

• AnimatePresence로 컴포넌트 입출력 제어 가능

단점

• React 환경 외에서는 사용 불가.

• 복잡한 타임라인 애니메이션에는 부적합

추천상황

• React 웹앱에서 컴포넌트 간 전환, 간단한 인터랙션, 모션 UI

• 예: 탭 전환, 모달 등장, 리스트 애니메이션, 드래그 카드 인터페이스

예시 코드

// 설치: npm install framer-motion
import { motion, AnimatePresence } from "framer-motion";
import { useState } from "react";

const itemVariants = {
  hidden: { opacity: 0, y: 30 },
  visible: (i: number) => ({
    opacity: 1,
    y: 0,
    transition: { delay: i * 0.1 }
  }),
  exit: { opacity: 0, y: -20, transition: { duration: 0.2 } }
};

export default function AnimatedList() {
  const [items, setItems] = useState([1, 2, 3, 4]);

  return (
    <div>
      <button onClick={() => setItems(prev => prev.slice(0, -1))}>Remove</button>
      <ul>
        <AnimatePresence>
          {items.map((item, i) => (
            <motion.li
              key={item}
              custom={i}
              initial="hidden"
              animate="visible"
              exit="exit"
              variants={itemVariants}
              style={{ marginBottom: "10px", background: "#ddd", padding: "10px" }}
            >
              Item {item}
            </motion.li>
          ))}
        </AnimatePresence>
      </ul>
    </div>
  );
}

결과

GSAP (GreenSock Animation Platform)

특징

• DOM, SVG, Canvas, WebGL 등 대부분 대상 지원

• Timeline 기반으로 복잡한 시퀀스 애니메이션 구현 가능

• 렌더링 최적화가 잘 되어 있어 성능 우수

• Vue/React/Three.js 등 다양한 환경과 통합 가능

단점

• 명령형 문법 → React에서는 구조가 복잡해짐

• 유료 플러그인 사용시 유료 라이선스 필요 (ScrollSmoother 등)

추천 상황

• 고난도 타임라인 애니메이션, SVG + 텍스트 효과, Scroll 기반 인터랙션

• 예: 랜딩 페이지 Hero 섹션, 마이크로 인터랙션, 고급 모션 디자인

예시

Lottie

특징

• After Effects로 만든 JSON 기반 애니메이션을 실행

• 디자이너와의 협업 최적화 (Bodymovin 플러그인 이용)

• 코드 한 줄로 고품질 애니메이션 실행 가능

• 모바일/웹/앱 모두 지원 (iOS, Android, Flutter, React Native 등)

• 해상도 독립적 (벡터 기반)

단점

• 커스터마이징이 어렵고 JSON이 크면 성능 저하

• 런타임 비용 있음 (JS 파일 크기 + 렌더링 비용)

추천 상황

• 디자인 퀄리티가 중요한 앱, 디자이너가 직접 제작한 모션 사용 시

• 예: 로딩 스피너, onboarding guide, empty state UI

Three.js + Tween.js

특징

• Three.js: 3D WebGL 렌더링 라이브러리

• Tween.js: 숫자 기반의 시간 애니메이션 보조 라이브러리

• 3D 환경에서 자유롭게 씬 구성 + 애니메이션 제어

단점

• 러닝커브 높음 (3D 수학/렌더링 지식 필요)

• UI 요소와의 결합은 어렵고 무거울 수 있음

추천 상황

• WebGL 기반 3D 인터랙션, 포트폴리오, 몰입형 경험 디자인

• 예: 3D 제품 뷰어, 인터랙티브 전시, 캐릭터 애니메이션

토스에서 활용하는 방법

나의 궁금증

화려함을 얻는 대신 무엇을 희생할까, 어떻게 최적화할까

1. 렌더링 비용 증가
1. DOM 기반 애니메이션은 브라우저의 reflow 와 repaint 를 유발할 수 있다. reflow 에 대해서 잘 모르면 이 글을 참고하자.
2. 개선 전략

전략	설명
transform, opacity만 애니메이션	GPU 가속이 적용되어 reflow 발생 없음
레이아웃 트리 변경 최소화	DOM 노드 삽입/제거보다 visibility, display 제어
바운딩/측정 연산은 batch 처리	offsetHeight, getBoundingClientRect()는 묶어서 처리
가상화(Virtualization) 사용	리스트가 많다면 react-window, @tanstack/react-virtual 도입
will-change 적절히 활용	will-change: transform으로 렌더링 최적화 힌트 주기 (주의해서 사용)

2. 초기 LCP 지연
1. LCP 란, 보통 사용자가 페이지를 열었을 때 “눈에 보이는 주요 콘텐츠가 얼마나 빨리 나타났는가” 를 의미한다.
2. SEO에 불리해진다.
3. 개선 전략

전략	설명
prefetch, preload 적극 활용	주요 리소스는 HTML head에서 선 로드
애니메이션은 뷰포트 진입 이후 실행	IntersectionObserver로 lazy animate

 

3. 번들 사이즈 증가
1. 초기 로딩 시간도 길어지고 속도도 느려진다.
2. 캐싱 효율도 떨어진다.
3. 개선 전략
1. Dynamic Import로 Lazy-load 하기
2. Framer Motion의 LazyMotion API 사용
3. GSAP의 Modular Import 사용

SSR 환경에서 괜찮을까

마무리