LabHub

블로그

모션·애니메이션 2025 완전 정복: View Transitions API, Motion One, Framer Motion, GSAP, Scroll-driven Animations, Reduced Motion, 60fps 성능, 토스 사례, AI 생성 애니메이션 — Season 6 Ep 4

2026-04-15 · 18 분 읽기 · #motion#animation#view-transitions#motion-one#framer-motion#gsap#scroll-driven-animations#reduced-motion#css-animations-2025#toss-motion#60fps

프롤로그 · 정지된 UI는 죽은 UI다

좋은 UI와 위대한 UI의 차이는 모션에 있다. 같은 기능, 같은 레이아웃, 같은 컬러라도 전환·피드백·미세한 반응이 있느냐 없느냐로 체감이 달라진다.

이 모든 것의 공통점:

"사용자가 '부드럽다'고 느끼는 순간, 제품의 품질에 대한 신뢰가 형성된다."

2024-2025년은 웹 모션의 네이티브화가 결정적으로 진행된 해였다. View Transitions API·Scroll-driven Animations·@starting-style이 모두 브라우저에 들어왔다. 이번 글은 그 전체 지도.

1장 · 모션의 목적 5가지

장식이 아닌 기능적 모션만이 가치 있다.

(1) Orientation — 어디로 갔는지 알려주기

(2) Feedback — 반응 확인

(3) Status — 진행 상황

(4) Hierarchy — 구조 전달

(5) Delight — 즐거움

나쁜 모션의 공통점

2장 · View Transitions API — 2024-2025 게임체인저

왜 혁명적인가

과거엔 페이지 간 전환 애니메이션이 거의 불가능했다. SPA 내 라우트 전환은 가능했지만 MPA(다중 페이지)는 깜빡임이 기본. 2024-2025년 View Transitions API가 이를 해결.

2가지 모드

(1) Same-document (SPA)

(2) Cross-document (MPA)

기본 사용법

// Same-document
document.startViewTransition(() => {
  // DOM 업데이트
  updateContent();
});

/* 전환 커스터마이징 */
::view-transition-old(root) {
  animation: fade-out 0.3s ease-out;
}
::view-transition-new(root) {
  animation: fade-in 0.3s ease-in;
}

Shared Element Transition

같은 요소가 페이지 간 이동할 때 부드럽게 이어지는 효과.

.thumbnail {
  view-transition-name: hero-image;
}

다음 페이지의 큰 이미지에도 같은 view-transition-name을 부여하면 자동으로 morph.

MPA에서 한 줄로

@view-transition {
  navigation: auto;
}

이 한 줄로 사이트 전체 페이지 전환이 기본 fade로 부드러워진다.

지원 현황 (2025 4월)

Astro / Next.js 통합

3장 · Scroll-driven Animations — CSS로 스크롤 연동

배경

스크롤 위치에 따라 애니메이션을 실행하는 건 전통적으로 JS가 필요했다 (Intersection Observer + 수동 계산). 2024년 CSS scroll-driven animations가 네이티브화.

주요 함수

(1) scroll() timeline

@keyframes reveal { from { opacity: 0 } to { opacity: 1 } }
.card {
  animation: reveal linear;
  animation-timeline: scroll();
  animation-range: 20vh 80vh;
}

(2) view() timeline

.image {
  animation: fade-in linear;
  animation-timeline: view();
  animation-range: entry 0% entry 50%;
}

사용 사례

지원 현황

폴백: @supports (animation-timeline: scroll()) 로 감싸고, 지원 안 되면 JS 또는 무모션

4장 · CSS Animation 2025 — 새 기능 모음

@starting-style (2024)

요소가 처음 렌더될 때의 상태 정의. 진입 애니메이션이 편해짐.

dialog {
  opacity: 0;
  transition: opacity 0.3s;
}
dialog[open] {
  opacity: 1;
  @starting-style {
    opacity: 0;
  }
}

transition-behavior: allow-discrete

display: none 같은 비연속(discrete) 속성도 transition 가능. Popover·Dialog 숨김·노출에 핵심.

@keyframes 보간 개선

CSS Nesting + Container Queries 결합

@property 사용자 정의 속성

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

이제 --angle을 실제 애니메이션 가능한 속성으로 선언. 그라디언트 회전 등이 부드러워짐.

5장 · Motion One — 표준 지향 경량 엔진

철학

특징

import { animate } from 'motion';

animate('.card', { opacity: [0, 1], y: [20, 0] }, { duration: 0.4 });

Framer Motion vs Motion One

항목Framer MotionMotion One
크기~30kb~5kb
React 전용예아님 (바닐라)
기능 폭더 넓음핵심 위주
성능좋음더 좋음(WAAPI)
선택 이유Layout·AnimatePresenceBundle 중요·바닐라

2025 현황

6장 · Framer Motion — React 생태계 표준

강력한 이유

(1) Declarative API

<motion.div
  initial={{ opacity: 0 }}
  animate={{ opacity: 1 }}
  exit={{ opacity: 0 }}
  transition={{ duration: 0.3 }}
/>

(2) Layout Animations

(3) AnimatePresence

(4) Variants

2024-2025 트렌드

실전 팁

7장 · GSAP — 고급 타임라인의 최강자

언제 GSAP?

2024년 GSAP 3.12 / 2025년 무료화

예시

gsap.timeline()
  .from('.hero', { y: 100, opacity: 0 })
  .from('.cta', { scale: 0, ease: 'back.out' }, '-=0.3')
  .to('.bg', { rotation: 360, duration: 20, repeat: -1 }, 0);

적합한 경우

부적합한 경우

8장 · React Spring·Motion Layout·기타

React Spring

Auto-animate (FormKit)

Svelte Motion·Solid Motion

CSS만으로 가능한 것

9장 · 60fps 성능과 GPU

애니메이션 성능의 기본

GPU 가속되는 속성

GPU 미가속 (피해야)

will-change·transform: translateZ(0)

CSS Containment

content-visibility: auto

측정 도구

모바일 주의사항

10장 · 접근성 — prefers-reduced-motion

멀미·민감성 문제

전정계 장애·편두통·난독 스펙트럼 사용자는 과도한 모션에 실제 멀미·고통. 개인 설정에서 "Reduce Motion" 활성화.

CSS 기본 구현

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

Framer Motion

import { useReducedMotion } from 'framer-motion';
const shouldReduce = useReducedMotion();
<motion.div animate={shouldReduce ? {} : { x: 100 }} />

원칙

WCAG 2.2 준수

11장 · 모바일 제스처 애니메이션

주요 라이브러리

대표 패턴

(1) Swipe to Dismiss

(2) Pull to Refresh

(3) Bottom Sheet

(4) Shared Element

성능 주의

12장 · Apple / Material Motion 가이드라인

Apple Human Interface Guidelines

Material Design 3 Motion

13장 · 토스의 모션 문화 — 한국 사례

토스가 유명한 이유

토스의 원칙 (SLASH·블로그에서 언급)

구현 기반

한국 타 기업

14장 · AI 생성 애니메이션 도구 (2025)

도구들

(1) Rive

(2) Lottie / After Effects

(3) v0·Bolt·Lovable의 모션 생성

(4) Figma Smart Animate + AI

(5) Motion Copilot (Motion One 생태)

2025년 현실

15장 · 실전 - "카드 스택 인터랙션" 만들기

Tinder 스타일 스와이프 카드 스택.

요구사항

구현 (Framer Motion + use-gesture)

'use client';
import { motion, useMotionValue, useTransform } from 'framer-motion';
import { useState } from 'react';

export function CardStack({ items }) {
  const [cards, setCards] = useState(items);
  return (
    <div className="relative">
      {cards.slice(-3).map((c, i) => (
        <SwipeCard key={c.id} card={c} onSwipe={() => setCards(p => p.slice(0, -1))} />
      ))}
    </div>
  );
}

function SwipeCard({ card, onSwipe }) {
  const x = useMotionValue(0);
  const rotate = useTransform(x, [-200, 200], [-15, 15]);
  return (
    <motion.div
      drag="x"
      style={{ x, rotate }}
      onDragEnd={(_, info) => {
        if (Math.abs(info.offset.x) > 150) onSwipe();
      }}
      className="absolute inset-0 bg-white rounded-2xl shadow-xl"
    >
      {card.title}
    </motion.div>
  );
}

세부 UX

16장 · 다음 글 예고 — Season 6 Ep 5: "웹 플랫폼의 새 기능들"

모션을 다뤘다면 다음은 2024-2025 웹 플랫폼 전반의 새 기능들.

"플랫폼이 커지면 프레임워크는 가벼워진다."

다음 글에서 만나자.

에필로그 · 체크리스트 12

  1. 모든 애니메이션이 목적(5가지 중 하나) 을 가지는가?
  2. 60fps 유지를 위해 GPU 가속 속성만 쓰는가?
  3. prefers-reduced-motion 이 전역 적용되는가?
  4. 페이지 전환에 View Transitions API 고려했는가?
  5. 스크롤 연동이 필요하면 CSS scroll-driven 을 먼저 검토했는가?
  6. 라이브러리 선택이 목적에 맞는가 (Framer/Motion/GSAP)?
  7. 번들에 불필요한 모션 라이브러리가 없는가?
  8. 모바일 제스처가 관성·rubber band 를 포함하는가?
  9. 공식 가이드라인(HIG·Material) 의 duration·easing을 참고했는가?
  10. AI 생성 애니메이션 도구를 초안에 활용했는가?
  11. 접근성 리뷰 (WCAG 2.2) 가 모션에도 적용되는가?
  12. 제품의 Motion Personality가 일관되는가?

"모션은 보이지 않는 디자이너다. 사용자는 의식 못 하지만, 모션의 품질이 제품의 감성을 결정한다."

— Season 6 Ep 4, Fin.

댓글

아직 댓글이 없습니다.

로그인하면 댓글을 쓸 수 있습니다