1. 2026년 웹 애니메이션 지도 — 코드 / 에디터 / 3D / 인터랙티브 4 분류

2026년의 웹 애니메이션은 한 가지 도구로 끝나지 않습니다. 마케팅 페이지의 스크롤 인터랙션, 제품의 마이크로 인터랙션, 게임/메타버스 같은 3D 씬, 학습 콘텐츠의 상태 머신 기반 인터랙티브 캐릭터 — 각자 다른 도구가 1군입니다.

큰 그림으로 분류하면 네 카테고리로 나뉩니다.

- 코드 우선 라이브러리 — GSAP 3.13, Motion, Anime.js 4, Web Animations API, react-spring, Lenis, AutoAnimate, Mo.js, Tween.js, Popmotion

- 에디터/런타임 도구 — Rive (Editor + Runtime), Lottie / dotLottie (Lottie Files + Airbnb 런타임), Spline (3D), Theatre.js (코드 통합형 타임라인)

- 3D 엔진 — Three.js, React Three Fiber (R3F), Babylon.js, PlayCanvas, WebGPU 직접 사용

- 네이티브 표준 — CSS animations, CSS scroll-driven animations, Web Animations API, View Transitions API

2026년의 가장 큰 사건은 두 가지였습니다. 첫째, 2024년 11월 Webflow 가 GreenSock 을 인수하면서 GSAP 와 모든 유료 플러그인(SplitText, MorphSVG, ScrollSmoother, MotionPath, DrawSVG, Inertia 등)이 MIT 라이선스로 무료가 됐습니다. 둘째, 2024년 10월 Framer 팀이 Framer Motion 을 "Motion" 으로 리브랜드하면서 React 외에 Vue, Vanilla JS 도 동등하게 지원하기 시작했습니다.

이 두 변화로 2026년의 무료 옵션이 갑자기 두 단계 위로 올라갔습니다. 5년 전엔 "GSAP 유료 vs Anime.js 무료" 였다면, 이젠 GSAP 도 Motion 도 다 무료입니다.

이 글은 그 모든 도구를 2026년 5월 기준으로 빠르게 훑어가는 가이드입니다. 입문자는 "어디부터 시작할까", 시니어는 "다음 프로젝트엔 무엇을 추가할까" 를 정하는 데 도움이 될 겁니다.

2. GSAP MIT 무료화 (2024.11, Webflow 인수) — 무엇이 바뀌었나

GreenSock Animation Platform (GSAP) 은 2008년부터 웹 애니메이션의 사실상의 표준이었습니다. 단순한 트윈 엔진을 넘어서, 타임라인 / 스크롤 트리거 / 모핑 SVG / 텍스트 분리 / 관성 / 모션 패스 등 거의 모든 까다로운 애니메이션 케이스에 대한 검증된 해답을 제공합니다.

2024년 11월 Webflow 가 GreenSock 을 인수하면서 큰 변화가 있었습니다. 모든 유료 "Club GreenSock" 플러그인(과거 99달러/년 짜리 SplitText, MorphSVG 같은 것들)이 MIT 라이선스로 무료가 됐습니다. 이제 npm 으로 그냥 받아 쓰면 됩니다.

npm install gsap

Webflow 인수 이후엔 별도 라이선스 키 없이 모든 플러그인 사용 가능

GSAP 3.13 의 핵심 기능을 빠르게 정리하면 다음과 같습니다.

- gsap.to / gsap.from / gsap.fromTo / gsap.set — 기본 트윈 4총사

- gsap.timeline() — 시퀀스를 시간축에서 정확하게 제어

- ScrollTrigger — 스크롤 기반 인터랙션 1등. pin, scrub, snap, markers 디버깅

- ScrollSmoother — Lenis 같은 스무스 스크롤 (과거 유료, 이제 무료)

- SplitText — 글자/단어/줄 단위 분리해서 애니메이션 (과거 유료, 이제 무료)

- MorphSVG — SVG path 간의 변형 (과거 유료, 이제 무료)

- DrawSVG — 라인 드로잉 효과 (과거 유료, 이제 무료)

- MotionPath — path 위로 이동시키기 (과거 유료, 이제 무료)

- Inertia / Draggable — 드래그 + 관성 (과거 유료, 이제 무료)

- Flip — FLIP 기법 (First, Last, Invert, Play) 으로 레이아웃 트랜지션

기본적인 사용 예시를 React 와 함께 보면 다음과 같습니다.

gsap.registerPlugin(ScrollTrigger, SplitText)

export function HeroHeadline({ text }: { text: string }) {

const ref = useRef<HTMLHeadingElement>(null)

useEffect(() => {

if (!ref.current) return

const split = new SplitText(ref.current, { type: 'chars,words' })

const tl = gsap.timeline({

scrollTrigger: {

trigger: ref.current,

start: 'top 80%',

end: 'bottom 20%',

toggleActions: 'play none none reverse',

},

})

tl.from(split.chars, {

opacity: 0,

y: 40,

rotateX: -45,

stagger: 0.02,

duration: 0.6,

ease: 'power3.out',

})

return () => {

tl.kill()

split.revert()

}

}, [text])

return <h1 ref={ref}>{text}</h1>

}

GSAP 의 가장 큰 장점은 30년 가까이 쌓인 안정성과 호환성입니다. IE 시절부터 검증된 트윈 엔진이라, 거의 모든 브라우저 / 디바이스에서 일관된 결과를 보장합니다. 단점은 React/Vue 같은 컴포넌트 모델과의 통합이 useEffect cleanup 으로 직접 관리해야 한다는 점인데, 이를 위해 `@gsap/react` 공식 훅(`useGSAP`) 이 제공됩니다.

언제 GSAP 을 쓰는가:

- 스크롤 기반 마케팅 사이트 (Awwwards 류) — ScrollTrigger 가 사실상 표준

- SVG 가 많이 들어가는 모션 그래픽 — MorphSVG, DrawSVG, MotionPath

- 복잡한 시퀀스 / 카드 셔플 / 텍스트 효과

- 게임 / 인터랙티브 광고에서의 까다로운 타이밍 제어

3. Motion (구 Framer Motion, 2024.10 리브랜드) — React/Vue/Vanilla

2024년 10월 Framer 팀이 Framer Motion 을 "Motion" 으로 리브랜드했습니다. 핵심은 두 가지입니다.

- 이제 React 만이 아니라 Vue, Vanilla JS 도 1등급 시민

- Motion 의 핵심 엔진(Motion One)은 ~3.8KB 의 초경량 라이브러리로 Web Animations API 를 직접 활용

기존의 `framer-motion` 패키지명은 여전히 사용 가능하지만, 새 프로젝트는 `motion` 으로 시작하는 것이 표준이 됐습니다.

npm install motion

React: import { motion } from "motion/react"

Vue: import { motion } from "motion-v"

Vanilla: import { animate, scroll, inView } from "motion"

React 컴포넌트로서의 사용 예시:

export function Card() {

const [open, setOpen] = useState(false)

return (

<>

{open && (

initial={{ opacity: 0, y: 20 }}

animate={{ opacity: 1, y: 0 }}

exit={{ opacity: 0, y: -20 }}

transition={{ type: 'spring', stiffness: 300, damping: 30 }}

>

카드 내용

)}

</>

)

}

Vanilla JS 에서는 더 가볍게:

// 기본 트윈

animate('.card', { opacity: 1, y: 0 }, { duration: 0.5, easing: 'spring' })

// 스크롤 트리거

scroll(

animate('.parallax', { y: [-200, 200] }),

{ target: document.querySelector('.section') }

)

Motion 의 장점:

- 번들 사이즈가 가벼움 (`motion/mini` 는 2.6KB)

- React 의 선언적 모델과 자연스럽게 어울림

- `layoutId` 를 이용한 자동 FLIP 트랜지션 — 다른 라이브러리엔 없는 강력한 기능

- Spring physics 가 1급 — duration 기반과 spring 기반을 자유롭게 섞을 수 있음

언제 Motion 을 쓰는가:

- React/Vue 기반의 제품 UI — 카드 트랜지션, 모달, 페이지 전환

- 디자인 시스템의 마이크로 인터랙션

- 가벼운 마케팅 페이지 (heavy 한 GSAP scroll 까진 필요 없을 때)

GSAP vs Motion 비교는 단순합니다. 마케팅 사이트의 스크롤 인터랙션이 메인이면 GSAP, 제품 UI 의 카드 트랜지션이 메인이면 Motion. 둘을 같이 쓰는 프로젝트도 많습니다.

4. Rive — 인터랙티브 + state machines

Rive 는 2026년 가장 흥미로운 애니메이션 도구입니다. 단순한 트윈 출력이 아니라, "상태 머신(state machine)" 기반의 인터랙티브 애니메이션을 만들 수 있습니다. Lottie 가 "재생만 하는 비디오 같은 애니메이션" 이라면, Rive 는 "사용자 입력에 반응하는 컴포넌트 같은 애니메이션" 입니다.

Rive 의 핵심 구성요소:

- Rive Editor — 데스크톱 + 웹 에디터 (디자이너용)

- Rive Runtime — Web (WASM), iOS, Android, Flutter, React Native, Unity

- State Machine — 입력(input)에 따라 트랜지션 그래프를 그리는 시스템

- Listeners — 마우스 호버 / 클릭 / 드래그를 직접 처리

대표적인 사례는 토글 스위치, 캐릭터의 시선 추적, 패스워드 입력 시 눈을 가리는 동물, 인터랙티브 온보딩 일러스트 등입니다. 한 번 만들어 두면 모든 플랫폼에서 동일하게 동작하는 게 큰 장점입니다.

웹에서 사용 예시:

export function PasswordCharacter({ password }: { password: string }) {

const { rive, RiveComponent } = useRive({

src: '/animations/login-character.riv',

stateMachines: 'Login State Machine',

autoplay: true,

})

const isChecking = useStateMachineInput(rive, 'Login State Machine', 'isChecking')

const numLook = useStateMachineInput(rive, 'Login State Machine', 'numLook')

useEffect(() => {

if (numLook) numLook.value = password.length * 6

}, [password, numLook])

return (

onMouseEnter={() => {

if (isChecking) isChecking.value = true

}}

onMouseLeave={() => {

if (isChecking) isChecking.value = false

}}

/>

)

}

Rive 의 강점:

- 디자이너가 직접 인터랙션 로직을 짤 수 있음 (개발자에게 토스 안 함)

- .riv 파일은 매우 작고 효율적 (벡터 + 본 기반)

- 멀티플랫폼 (웹 / 모바일 / 게임 엔진)

- 무료 plan 도 충분히 강함

단점은 학습 곡선이 있고(Photoshop/Figma 와 다른 패러다임), 일반 모션 그래픽 용도로는 Lottie 보다 비싸 보일 수 있다는 점입니다. 하지만 한 번 익숙해지면 "Lottie 로는 못 만드는" 인터랙션을 만들 수 있습니다.

5. Lottie + dotLottie — Airbnb 의 표준

Lottie 는 2017년 Airbnb 가 공개한 애니메이션 포맷입니다. After Effects 에서 디자이너가 만든 애니메이션을 JSON 으로 추출해 (Bodymovin 플러그인 사용) 웹/iOS/Android 에서 동일하게 재생할 수 있게 합니다.

2026년의 Lottie 생태계는 다음과 같습니다.

- lottie-web — Airbnb 의 공식 웹 런타임 (가장 안정적, 무거움)

- @lottiefiles/react-lottie-player — LottieFiles 의 React 래퍼

- @lottiefiles/dotlottie-web — dotLottie 포맷용 신형 런타임 (Rust + WASM, 더 빠름)

- LottieFiles — 무료 애니메이션 라이브러리 + 에디터 + 협업 툴

dotLottie 는 2022년 LottieFiles 가 도입한 새 포맷입니다. .lottie 확장자로 ZIP 압축된 JSON + 자산을 포함합니다. 기존 .json 보다 ~80% 작고, 하나의 파일에 여러 애니메이션을 묶을 수 있고, 테마/색상 변경 같은 인터랙티브 기능을 지원합니다.

기본 사용 예시:

export function LoadingSpinner() {

return (

src="/animations/loader.lottie"

loop

autoplay

style={{ width: 200, height: 200 }}

/>

)

}

Lottie 의 장점:

- After Effects 라는 산업 표준 도구 그대로 사용

- 한 번 만들면 웹/iOS/안드로이드/React Native/Flutter 다 동작

- LottieFiles 에 무료/유료 라이브러리가 수십만 개

- 마케팅 페이지의 일러스트, 로딩 스피너, 빈 상태 일러스트에 압도적

단점:

- 인터랙티브 하지 않음 (재생만 함, Rive 와 대조)

- 일부 After Effects 효과는 지원 안 됨 (모션 블러, 일부 이펙트)

- 큰 애니메이션은 .json 이 무거워질 수 있음 → dotLottie 로 해결

전형적인 한국/일본 마케팅 페이지에서는 Lottie 가 거의 표준입니다. 토스의 채용 페이지, 라인의 공지 페이지, 야후 재팬의 캠페인 페이지가 다 Lottie 일러스트를 씁니다.

6. Spline — 브라우저 3D

Spline 은 "3D 의 Figma" 라고 불리는 도구입니다. 브라우저에서 직접 3D 모델을 만들고, 머티리얼을 입히고, 인터랙션을 정의해서, React 컴포넌트로 export 할 수 있습니다.

Spline 의 핵심 기능:

- 브라우저 기반 3D 에디터 (Blender 없이 가능)

- 무료 plan 도 무제한 (워터마크 없음)

- @splinetool/react-spline 으로 React 임베드

- 인터랙션 (호버, 클릭, 스크롤) 을 에디터에서 직접 정의

- AR, 비디오 export, 3D 모델 export

기본 사용:

export function Hero() {

return (

)

}

Spline 이 강한 영역:

- 마케팅 사이트의 히어로 3D 씬 (Vercel, Linear, Arc 브라우저 등이 활용)

- 디자이너가 직접 3D 콘텐츠를 만들고 싶을 때

- 빠른 프로토타이핑 (Three.js 코드 없이)

단점:

- 복잡한 3D 씬(많은 폴리곤, 복잡한 셰이더)엔 부적합

- 런타임이 무거울 수 있음 — 모바일 최적화 주의

- 클라우드 의존성 (씬이 Spline 서버에서 호스팅됨)

Spline vs Three.js + R3F 선택은 단순합니다. 디자이너 주도 + 단순한 씬이면 Spline, 개발자 주도 + 복잡한 씬이면 R3F.

7. Theatre.js — 타임라인 에디터

Theatre.js 는 Cantor Studios 가 만든 오픈소스 애니메이션 도구입니다. 가장 큰 특징은 "코드와 비주얼 에디터를 동시에" 다룬다는 점입니다. After Effects 의 타임라인 같은 UI 를 브라우저에 띄워서, 디자이너가 시각적으로 키프레임을 조정하면 그 결과가 JSON 으로 저장되고 코드가 그것을 재생합니다.

기본 컨셉:

- Studio — 개발 중 사용하는 비주얼 에디터 (production 에선 제거)

- Sheet — 한 씬의 타임라인

- Object — Sheet 에 속하는 애니메이션 가능한 객체 (DOM, R3F mesh, 무엇이든)

기본 사용:

// 개발 중에만 studio 띄움

if (process.env.NODE_ENV === 'development') {

studio.initialize()

}

const project = getProject('My Animation')

const sheet = project.sheet('Scene 1')

const obj = sheet.object('Logo', {

x: 0,

y: 0,

rotation: 0,

opacity: 1,

})

obj.onValuesChange((values) => {

// values.x, values.y, values.rotation, values.opacity 를 DOM 에 반영

logoEl.style.transform = `translate(${values.x}px, ${values.y}px) rotate(${values.rotation}deg)`

logoEl.style.opacity = String(values.opacity)

})

// 재생

sheet.sequence.play()

Theatre.js 의 강점:

- R3F (React Three Fiber) 와 통합되어 3D 씬을 시각적으로 조작

- After Effects 처럼 키프레임 편집 가능

- 결과물이 JSON 으로 깃에 커밋 가능 → 디자이너와 개발자가 같은 PR 에 참여 가능

언제 쓰는가:

- 복잡한 3D 씬에서 카메라 모션을 시각적으로 조정하고 싶을 때

- 디자이너가 직접 키프레임을 조정해야 할 때

- 마케팅 사이트의 스크롤 기반 시네마틱

GSAP ScrollTrigger 가 "코드로 정의" 라면, Theatre.js 는 "타임라인 UI 로 정의 + 코드로 재생" 입니다.

8. Anime.js 4 — 모듈식 재작성

Anime.js 는 Julian Garnier 가 만든 가벼운 애니메이션 라이브러리로, GSAP 의 무료 대안으로 오래 사랑받았습니다. 2024년 말 v4 가 출시되면서 모듈식 아키텍처로 완전히 재작성됐습니다.

Anime.js 4 의 변화:

- 모듈식 import — `animate`, `createTimeline`, `createDraggable`, `stagger` 등을 필요한 것만 import

- 트리 쉐이킹 지원 — 번들 사이즈 절감

- TypeScript 1급 지원

- Spring physics 추가

기본 사용:

// 단순 트윈

animate('.card', {

translateY: [-20, 0],

opacity: [0, 1],

duration: 600,

delay: stagger(100),

ease: 'outQuad',

})

// 타임라인

const tl = createTimeline({

defaults: { duration: 400, ease: 'outQuad' },

})

tl.add('.header', { translateY: [-50, 0], opacity: [0, 1] })

.add('.subheader', { translateX: [-50, 0], opacity: [0, 1] }, '-=200')

.add('.cta', { scale: [0.8, 1], opacity: [0, 1] }, '-=200')

Anime.js 의 위치:

- GSAP 보다 가볍고 API 가 단순

- Motion 보다 React-친화적이진 않지만 vanilla JS 친화적

- 학습 곡선 낮음

- 작은 ~ 중간 규모 프로젝트에 적합

GSAP 가 무료가 된 지금, Anime.js 를 고를 이유는 두 가지입니다. (1) GSAP 보다 가벼운 번들이 필요할 때, (2) 더 단순한 API 가 좋을 때.

9. Three.js + R3F — 3D

Three.js 는 2010년 ricardo cabello (mr.doob) 가 만든, 웹 3D 의 사실상 표준 라이브러리입니다. WebGL 위의 추상화 레이어로, Scene / Camera / Mesh / Material / Light 같은 친숙한 3D 개념을 제공합니다.

2026년의 Three.js 생태계:

- three (코어) — r170+ 버전. WebGPU 백엔드 실험 단계

- @react-three/fiber (R3F) — React 친화적 wrapper (Poimandres 팀)

- @react-three/drei — R3F 의 유틸리티 모음 (카메라 컨트롤, 셰이더, 헬퍼)

- @react-three/postprocessing — 포스트 프로세싱 (블룸, DOF, 노이즈)

- @react-three/rapier — Rapier 물리 엔진 wrapper

- @react-three/cannon — Cannon-es 물리 엔진 wrapper

- leva — R3F 용 디버그 GUI

R3F 의 기본 패턴:

function SpinningBox() {

const ref = useRef<Mesh>(null)

useFrame((_, delta) => {

if (ref.current) {

ref.current.rotation.x += delta

ref.current.rotation.y += delta * 0.5

}

})

return (

)

}

export function Scene() {

return (

)

}

Three.js 와 Spline 의 차이:

- Three.js + R3F — 코드 기반, 무한한 자유도, 무거운 학습 곡선

- Spline — GUI 기반, 빠른 결과, 자유도 제한

복잡한 게임 / 메타버스 / 데이터 시각화 (예 Globe.gl, three-globe) 는 Three.js, 마케팅 사이트의 히어로 3D 는 Spline 이 일반적입니다.

10. Lenis — smooth scroll 표준

Lenis 는 Studio Freight (지금은 Darkroom Engineering) 가 만든 스무스 스크롤 라이브러리입니다. 2023년 출시 이후 빠르게 웹 애니메이션의 사실상 표준이 됐습니다.

Lenis 의 특징:

- 가벼움 (~3KB)

- 네이티브 스크롤 이벤트와 호환 (window.scroll 이벤트 정상 동작)

- 모바일 친화적

- GSAP ScrollTrigger 와 완벽 호환

기본 사용:

const lenis = new Lenis({

duration: 1.2,

easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),

smoothWheel: true,

})

function raf(time: number) {

lenis.raf(time)

requestAnimationFrame(raf)

}

requestAnimationFrame(raf)

GSAP ScrollTrigger 와 연동:

lenis.on('scroll', ScrollTrigger.update)

gsap.ticker.add((time) => {

lenis.raf(time * 1000)

})

gsap.ticker.lagSmoothing(0)

언제 쓰는가:

- 거의 모든 마케팅/포트폴리오 사이트 — Awwwards 수상작의 80% 가 Lenis 또는 GSAP ScrollSmoother

- 스크롤 기반 인터랙션이 메인인 사이트

언제 쓰지 않는가:

- 접근성이 1순위인 사이트 — 스무스 스크롤은 키보드/스크린리더 사용자에게 혼란

- 긴 텍스트 위주 사이트 — 일반 스크롤이 더 자연스러움

- 사용자가 prefers-reduced-motion 을 설정한 경우 비활성화 필수

2026년 트렌드는 "Lenis 를 기본으로 깔되, prefers-reduced-motion 을 존중" 입니다.

11. AutoAnimate / Mo.js / Tween.js — 그 외

웹 애니메이션의 풀스택을 다 쓸 일은 없지만, 알아두면 좋은 도구들을 빠르게 정리합니다.

AutoAnimate — Formkit 팀의 제로 컨피그 트랜지션. React/Vue/Svelte 의 자식 요소가 add/remove/move 될 때 자동으로 부드러운 트랜지션을 입혀줍니다.

export function TodoList({ todos }: { todos: string[] }) {

const [parent] = useAutoAnimate()

return (

{todos.map((todo, i) => (

))}

)

}

장점은 "코드 1줄" 로 끝나는 것, 단점은 자유도가 매우 제한적이라는 것입니다. 빠르게 부드러움을 더하고 싶을 때 좋습니다.

Mo.js — 모션 그래픽에 특화된 라이브러리. 파티클, 버스트, 셰이프 모핑 등 "시네마틱한 효과" 를 만들기 좋습니다. 사용자는 줄었지만 일부 마니아층이 있습니다.

Tween.js — 가장 오래된 트윈 엔진 (2010년부터). Three.js 와 같이 쓰는 케이스가 많습니다. 가벼우면서 정확한 트윈 제어가 필요할 때.

Popmotion — Motion 의 전신. 지금은 Motion 에 흡수됨. 새로 시작한다면 Motion 을 쓰세요.

react-spring — Pmndrs (Poimandres) 의 React 스프링 라이브러리. Motion 의 spring 보다 자유도가 높지만 API 가 더 어렵습니다.

Animate.css — 순수 CSS 애니메이션 클래스 모음. 가장 가볍지만 자유도 낮음. 빠른 프로토타입에만.

12. Web Animations API + CSS scroll-driven — 네이티브

브라우저가 직접 지원하는 네이티브 애니메이션 API 도 2026년엔 매우 강력해졌습니다. 라이브러리 없이도 많은 것을 할 수 있습니다.

Web Animations API (WAAPI) — 모든 모던 브라우저가 지원.

const el = document.querySelector('.box')

const animation = el!.animate(

[

{ transform: 'translateY(0px)', opacity: 1 },

{ transform: 'translateY(-100px)', opacity: 0 },

],

{

duration: 800,

easing: 'cubic-bezier(0.16, 1, 0.3, 1)',

fill: 'forwards',

}

)

animation.onfinish = () => {

console.log('애니메이션 종료')

}

Motion 의 핵심 엔진이 WAAPI 위에 빌드되어 있어서, 사실 Motion 을 쓴다는 건 WAAPI 를 효율적으로 쓰는 것과 같습니다.

CSS scroll-driven animations — 2024년 후반 Chrome/Edge 105+, Safari 17.5+, Firefox 132+ 에서 지원되기 시작. JS 없이 스크롤 기반 애니메이션을 작성할 수 있습니다.

@keyframes fade-in {

from {

opacity: 0;

transform: translateY(50px);

}

to {

opacity: 1;

transform: translateY(0);

}

}

.card {

animation: fade-in linear;

animation-timeline: view();

animation-range: entry 0% cover 30%;

}

이거 한 줄로 스크롤 인뷰 애니메이션이 끝납니다. GSAP ScrollTrigger 없이도. 단점은 Firefox 의 지원이 늦었고, 복잡한 인터랙션엔 한계가 있다는 것입니다.

View Transitions API — 페이지 / 라우트 전환 시 부드러운 트랜지션. Chrome 111+ 부터, Safari 18+ 부터 지원. Next.js, Astro 가 라우트 전환에서 이를 활용 시작.

// View Transitions 시작

if ('startViewTransition' in document) {

document.startViewTransition(() => {

// DOM 업데이트

document.body.classList.toggle('dark-mode')

})

}

2026년의 트렌드는 "가능한 한 네이티브로, 안 되면 Motion, 그래도 안 되면 GSAP" 입니다.

13. 디자인 → 코드 — After Effects → Lottie, Rive Editor, Spline Editor

웹 애니메이션 도구의 진짜 차이는 "디자이너에서 개발자에게 어떻게 넘어가느냐" 에서 갈립니다.

전통적인 워크플로 — 디자이너가 After Effects 에서 만들고, 개발자가 GSAP 으로 다시 코딩.

디자이너: After Effects (.aep) → 영상 export (mp4)

개발자: 영상 보고 GSAP 코드로 재구현

결과: 디자이너의 모션과 개발자의 결과물이 다름, 반복 수정 폭증

Lottie 워크플로 — After Effects 에서 Bodymovin 플러그인으로 JSON 추출, 그대로 웹/모바일에서 재생.

디자이너: After Effects + Bodymovin → animation.json

개발자: lottie-web 으로 그대로 재생

결과: 디자이너의 모션이 픽셀 정확하게 재현됨

Rive 워크플로 — Rive Editor 에서 직접 만들고, 상태 머신 정의해서 .riv 추출, 런타임에서 입력 바인딩만.

디자이너: Rive Editor → character.riv (state machine 포함)

개발자: @rive-app/react-canvas 로 input 바인딩만

결과: 디자이너가 인터랙션 로직까지 정의, 개발자는 데이터만 연결

Spline 워크플로 — Spline Editor 에서 3D 만들고 인터랙션 정의, scene.splinecode export.

디자이너: Spline (3D 모델링 + 머티리얼 + 인터랙션)

개발자: @splinetool/react-spline 로 임베드

결과: 3D 마케팅 페이지를 디자이너 단독으로 완성

Theatre.js 워크플로 — 코드로 객체 정의, 비주얼 에디터로 키프레임 조정, JSON 으로 깃에 커밋.

개발자: Theatre Studio 켜고 객체 정의

디자이너(또는 개발자): 타임라인 UI 로 키프레임 조정 → save

결과: 디자이너와 개발자가 같은 PR 에 참여, JSON 으로 버전 관리

대형 마케팅 캠페인은 보통 Lottie + GSAP 조합, 제품의 인터랙티브 캐릭터는 Rive, 3D 히어로는 Spline, 시네마틱 스크롤은 Theatre.js + R3F 가 2026년의 패턴입니다.

After Effects 외의 디자인 도구도 점차 통합되고 있습니다. Cavalry (모션 디자인 도구) 는 Lottie export 를 지원하고, Figma 도 Smart Animate + 플러그인으로 Lottie export 가 가능합니다. Adobe 의 Animate (구 Flash) 도 여전히 일부 광고 / 게임 분야에서 쓰입니다.

14. 한국 / 일본 디자인 시스템 — 토스, 카카오, pixiv, CyberAgent

한국과 일본의 큰 회사들이 실제로 어떤 도구를 쓰는지 사례를 보겠습니다.

토스 (Toss) — 토스 디자인 시스템의 마이크로 인터랙션은 Framer Motion (Motion) + Lottie 가 메인입니다. 송금 완료 후의 체크마크 애니메이션, 로딩 스피너, 광고 배너는 거의 다 Lottie. 페이지 트랜지션과 카드 입장 / 모달은 Motion. 토스 디자이너들이 "Lottie 파일을 .json 으로 정확하게 뽑는 법" 워크숍을 자주 한다는 소문이 있습니다.

카카오 (Kakao) — KakaoTalk 의 이모티콘이 이미 거대한 애니메이션 시스템이고, 웹 (다음, 카카오뱅크, 카카오페이) 에서는 Lottie + CSS transitions 가 메인입니다. 카카오뱅크의 카드 펼침 애니메이션이 GSAP 으로 알려져 있습니다.

라인 (LINE) — 일본 시장에서는 LINE 의 영향이 압도적입니다. LINE Sticker 의 애니메이션이 자체 포맷(APNG, 후엔 자체 비디오 포맷) 으로 동작하고, 웹 (line.me, LINE Pay 일본) 에서는 Lottie 가 표준입니다.

야후 재팬 (Yahoo Japan) — LINE 야후 합병 이후, 마케팅 페이지는 Lottie + GSAP 조합. 광고 배너에는 자체 도구 (Bodymovin → 자체 변환 파이프라인) 사용.

pixiv — 일본의 일러스트 SNS. pixivision 같은 매거진 페이지는 GSAP scroll + Lottie 일러스트. 일러스트레이터를 위한 인터페이스라 애니메이션이 "사용자 콘텐츠를 방해하지 않게" 절제된 톤.

CyberAgent — 일본의 광고/게임 대기업. 자회사 (AbemaTV, Tap Sports Baseball 등) 가 다양한 도구 사용. CyberAgent Developers Blog 에 "Lottie 도입기" "Three.js 게임 페이지" 글이 자주 올라옴.

SmartNews — 일본 뉴스 앱. 웹 마케팅 페이지에 Rive 인터랙티브 캐릭터 사용 사례.

ZOZO — 일본 패션 EC. 제품 페이지의 3D 회전 뷰가 Three.js 기반.

배달의민족 (우아한형제들) — 한국. 마케팅 페이지에 Lottie 가 매우 적극적으로 쓰이고, 캐릭터 (배민체와 함께) 의 인터랙티브 모션에 Rive 실험 진행 중인 것으로 알려짐.

당근 (Carrot) — 한국 중고거래/지역 커뮤니티. 마이크로 인터랙션에 Framer Motion (Motion) 위주, 광고 페이지에 Lottie.

쿠팡 (Coupang) — 한국. 거대 EC 답게 성능이 우선이라 무거운 애니메이션을 자제. CSS 트랜지션 + 일부 Lottie 정도.

NAVER — 한국의 다음과 같은 거대 포털. 자체 디자인 시스템 (Naver D2) 에 Motion 과 Lottie 가 표준화되어 있음.

15. 누가 무엇을 골라야 하나 — 마케팅 / 제품 / 게임 / 학습 자료

마지막으로 용도별 추천을 정리합니다.

마케팅 사이트 (Awwwards 류, 캠페인 페이지)

- 1순위 GSAP 3.13 + ScrollTrigger + Lenis

- 일러스트는 Lottie / dotLottie

- 3D 히어로가 필요하면 Spline (단순) 또는 Three.js + R3F (복잡)

- 시네마틱 스크롤은 Theatre.js + R3F

제품 UI (SaaS, 앱)

- 1순위 Motion (구 Framer Motion)

- 자동 트랜지션은 AutoAnimate

- 로딩 / 빈 상태는 Lottie

- 인터랙티브 캐릭터 (온보딩, 결제 캐릭터) 는 Rive

게임 / 인터랙티브 콘텐츠

- 2D 인터랙티브 캐릭터 — Rive

- 3D 게임 — Three.js + R3F + Rapier (물리)

- 광고 / 미니게임 — 자체 캔버스 + GSAP (티이밍) + Mo.js (이펙트)

학습 자료 / 교육

- 인터랙티브 다이어그램 — Rive (상태 머신이 학습에 적합)

- 코드 위주 시각화 — d3.js + Motion

- 일러스트 — Lottie

성능 우선

- 네이티브 CSS animations + scroll-driven animations

- 라이브러리 필요시 Motion mini (2.6KB)

- Lenis (3KB) 만 스무스 스크롤로

번들 사이즈 최소화

- Vanilla — Web Animations API + CSS only

- 라이브러리 한 개 — Motion 또는 Anime.js 4 modular

- GSAP 은 무료지만 코어 + ScrollTrigger 만 해도 ~50KB

엔터프라이즈 / 안정성

- GSAP 3.13 — 30년 가까운 검증

- Lottie (lottie-web) — Airbnb 가 유지보수

- Motion — Framer 가 백킹

브랜드 통일

- 한 가지 도구로 일관성 — Motion (제품 + 마케팅)

- 또는 GSAP (마케팅) + Motion (제품) 의 2-스택

2026년의 베스트 셋업은 보통 다음과 같습니다. Motion 으로 제품 UI 의 80%, Lottie 로 일러스트 100%, GSAP + ScrollTrigger + Lenis 로 마케팅 페이지의 스크롤 인터랙션, 필요시 Rive 또는 Spline 추가. 이 조합 하나로 거의 모든 시나리오를 커버합니다.

16. 참고 / References

GSAP

- GSAP 공식 사이트 — https://gsap.com/

- GSAP 3 cheat sheet — https://gsap.com/cheatsheet/

- ScrollTrigger 문서 — https://gsap.com/docs/v3/Plugins/ScrollTrigger/

- "GSAP is Joining Webflow" 발표 (2024-11) — https://gsap.com/blog/webflow-gsap

- "GSAP is now 100% Free" — https://gsap.com/blog/gsap-free

Motion

- Motion 공식 사이트 — https://motion.dev/

- Motion for React 문서 — https://motion.dev/docs/react

- Motion 발표 (2024-10) — https://motion.dev/blog/introducing-motion

- Framer Motion (legacy) — https://www.framer.com/motion/

Rive

- Rive 공식 사이트 — https://rive.app/

- Rive 문서 — https://rive.app/community/doc/introduction/docvuOuY7Q3

- @rive-app/react-canvas — https://www.npmjs.com/package/@rive-app/react-canvas

- State Machine 가이드 — https://rive.app/community/doc/state-machines/docXOTk6cetD

Lottie

- LottieFiles — https://lottiefiles.com/

- lottie-web (Airbnb) — https://github.com/airbnb/lottie-web

- dotLottie 포맷 — https://dotlottie.io/

- @lottiefiles/dotlottie-web — https://www.npmjs.com/package/@lottiefiles/dotlottie-web

Spline

- Spline 공식 사이트 — https://spline.design/

- @splinetool/react-spline — https://www.npmjs.com/package/@splinetool/react-spline

- Spline 문서 — https://docs.spline.design/

Theatre.js

- Theatre.js 공식 사이트 — https://www.theatrejs.com/

- Theatre.js GitHub — https://github.com/theatre-js/theatre

Anime.js

- Anime.js 공식 사이트 — https://animejs.com/

- Anime.js GitHub — https://github.com/juliangarnier/anime

Three.js + R3F

- Three.js 공식 사이트 — https://threejs.org/

- React Three Fiber (R3F) — https://docs.pmnd.rs/react-three-fiber/

- drei 유틸리티 — https://github.com/pmndrs/drei

Lenis

- Lenis 공식 — https://lenis.darkroom.engineering/

- Lenis GitHub — https://github.com/darkroomengineering/lenis

AutoAnimate / 기타

- AutoAnimate (Formkit) — https://auto-animate.formkit.com/

- Mo.js — https://mojs.github.io/

- Tween.js — https://github.com/tweenjs/tween.js

- react-spring — https://react-spring.dev/

Web Standards

- Web Animations API (MDN) — https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API

- CSS scroll-driven animations (MDN) — https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scroll-driven_animations

- View Transitions API (MDN) — https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API

디자인 시스템 / 한일 사례

- 토스 디자인 — https://toss-design.com/

- 카카오 디자인 — https://design.kakao.com/

- CyberAgent Developers Blog — https://developers.cyberagent.co.jp/blog/

- LINE Developers — https://engineering.linecorp.com/ko

- pixiv inside — https://inside.pixiv.blog/