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

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack

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

.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)

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)

// 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)

@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

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

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

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

.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, CLS)
• 변형: 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