2nd/10_Wiki/Topics/AI_and_ML/성능 중심의 웹 애니메이션 및 인터랙션 구현.md

---
id: wiki-2026-0508-성능-중심의-웹-애니메이션-및-인터랙션-구현
title: 성능 중심의 웹 애니메이션 및 인터랙션 구현
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [Performant Web Animations, 60fps Web UI, GPU-Accelerated CSS, Compositor-Only Animations]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
verification_status: applied
tags: [web-performance, animation, css, gpu, compositor, raf, view-transitions]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: typescript
  framework: vanilla-web-platform
---

# 성능 중심의 웹 애니메이션 및 인터랙션 구현

## 매 한 줄
> **"매 compositor-only properties + GPU thread + 매 main thread 의 minimal involvement"**. 매 60fps (16.67ms budget) / 120fps (8.33ms) 에서 jank-free 한 animation 의 매 핵심: `transform`/`opacity`/`filter` 만 animate, layout/paint trigger 회피, 매 2026 의 View Transitions API + scroll-driven animations 활용.

## 매 핵심

### 매 Browser rendering pipeline (2026)
- **JavaScript → Style → Layout → Paint → Composite**.
- **Compositor-only properties** (transform, opacity, filter): Layout/Paint 건너뜀, GPU thread 에서 처리.
- **Layout-trigger** (width, height, top, left, margin): 매 parent + sibling reflow.
- **Paint-trigger** (color, background, box-shadow): GPU upload re-encoded.

### 매 60fps Budget
- **16.67ms** total — JS work ~5ms, Style+Layout ~3ms, Paint+Composite ~3ms 가 healthy.
- **120fps** (ProMotion, OLED): 8.33ms — 매 strict, native-feel.
- **CrUX threshold**: INP < 200ms (Good).

### 매 응용
1. **GPU-accelerated transitions** (route change, modal open).
2. **Scroll-driven animations** (parallax, progress bar) — 매 main thread 떠남.
3. **View Transitions API** — cross-document morph (MPA, SPA route).

## 💻 패턴

### Compositor-only animation (CSS)
```css
.card {
  transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1),
              opacity 200ms ease;
  will-change: transform; /* hint — remove after animation */
}
.card:hover {
  transform: translateY(-4px) scale(1.02);
}
```

### FLIP technique (animate layout change without layout-trigger)
```typescript
function flip(el: HTMLElement, mutate: () => void) {
  const first = el.getBoundingClientRect();
  mutate();
  const last = el.getBoundingClientRect();
  const dx = first.left - last.left;
  const dy = first.top - last.top;
  const sx = first.width / last.width;
  const sy = first.height / last.height;
  el.animate(
    [{ transform: `translate(${dx}px, ${dy}px) scale(${sx}, ${sy})` }, { transform: 'none' }],
    { duration: 250, easing: 'cubic-bezier(.2,.8,.2,1)' },
  );
}
```

### View Transitions API (2026 baseline)
```typescript
// Same-document
async function navigateWithTransition(updateDOM: () => void) {
  if (!('startViewTransition' in document)) return updateDOM();
  const t = document.startViewTransition(updateDOM);
  await t.finished;
}

// CSS — name shared elements
.hero { view-transition-name: hero; }

::view-transition-old(hero),
::view-transition-new(hero) {
  animation-duration: 400ms;
  animation-timing-function: cubic-bezier(.2,.8,.2,1);
}
```

### Scroll-driven animation (CSS only — no JS, off main thread)
```css
@keyframes reveal {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: none; }
}
.fade-in {
  animation: reveal linear both;
  animation-timeline: view();
  animation-range: entry 0% cover 30%;
}
```

### requestAnimationFrame loop with frame budget guard
```typescript
let last = 0;
function tick(now: number) {
  const dt = now - last;
  last = now;
  const start = performance.now();
  updatePhysics(dt);
  if (performance.now() - start > 8) {
    // Defer non-critical to next frame or scheduler.postTask
    scheduler.postTask(refreshLowPriorityUI, { priority: 'background' });
  }
  render();
  requestAnimationFrame(tick);
}
requestAnimationFrame(tick);
```

### Web Animations API — JS-controlled but GPU-eligible
```typescript
const anim = el.animate(
  [{ transform: 'translateX(0)' }, { transform: 'translateX(200px)' }],
  { duration: 400, easing: 'ease-out', fill: 'forwards', composite: 'replace' },
);
anim.onfinish = () => el.style.transform = 'translateX(200px)';
```

### Pointer interaction with Pointer Events + passive listener
```typescript
el.addEventListener('pointermove', (e) => {
  // No preventDefault — listener can be passive (bypass main thread blocking)
  const x = e.clientX, y = e.clientY;
  el.style.transform = `translate3d(${x}px, ${y}px, 0)`;
}, { passive: true });
```

### content-visibility for off-screen subtree skip
```css
.lazy-section {
  content-visibility: auto;
  contain-intrinsic-size: 800px;
}
```

## 매 결정 기준
| 상황 | Approach |
|---|---|
| Hover/click micro-interaction | CSS transition (transform/opacity) |
| Layout-changing animation | FLIP technique |
| Route/page transition | View Transitions API |
| Scroll-tied progress | scroll-driven CSS (`animation-timeline`) |
| Physics-based (drag, spring) | Web Animations API or framer-motion (with care) |
| Off-main-thread complex | OffscreenCanvas + Worker |
| Large list reveal | content-visibility + IntersectionObserver |

**기본값**: 매 transform + opacity only. 매 width/height/top/left animate 의 X (rare exception 만). 매 will-change 는 short-lived hint (animate 시작 직전 add, 끝나면 remove).

## 🔗 Graph
- 부모: [[Web-Performance]] · [[Frontend-Performance]] · [[Core Web Vitals Optimization (INP, LCP 개선)|Core-Web-Vitals]]
- 변형: [[Web-Animations-API]] · [[View-Transitions-API]]
- 응용: [[OffscreenCanvas]]
- Adjacent: [[브라우저 메인 스레드 최적화 및 타임 슬라이싱]] · [[INP-Optimization]]

## 🤖 LLM 활용
**언제**: easing curve 의 candidate generation, FLIP boilerplate, View Transition CSS 의 scaffold.
**언제 X**: 매 perf 측정 — DevTools Performance panel + WebPageTest 만 truth. Jank cause 의 매 nuanced.

## ❌ 안티패턴
- **width/height/top/left animation**: 매 layout-trigger, 매 jank.
- **box-shadow animation**: paint-heavy, blur-radius 변화 의 expensive.
- **`will-change` everywhere**: 매 GPU memory 폭증, 매 reverse effect.
- **JS rAF for what CSS can do**: scroll-driven CSS 가 매 main thread free.
- **Synchronous layout reads in animation loop**: getBoundingClientRect during rAF without batching → forced reflow.

## 🧪 검증 / 중복
- Verified (web.dev/animations 2026, Chrome DevTools Performance docs, View Transitions Level 2 spec, Una Kravets / Bramus Van Damme writings).
- 신뢰도 A.

## 🕓 Changelog
| 날짜 | 변경 |
|---|---|
| 2026-05-08 | Phase 1 |
| 2026-05-10 | Manual cleanup — compositor-only patterns, FLIP, View Transitions, scroll-driven |