Web Motion & Animation Skill

웹페이지에 모던한 모션 레이어를 추가하는 워크플로우. 핵심: 모션은 장식이 아닌 시그널. 사용자 시선을 핵심 정보로 유도하거나 위계를 강화해야 한다.

워크플로우

Step 1: 배경 애니메이션 선택 (Hero용)

옵션 A: WebGL Shader Gradient (Stripe·Linear 스타일) — 권장

• 부드럽게 흐르는 색 메시. GPU 가속, 가벼움
• 라이브러리 없이 직접 GLSL fragment shader
• 색상은 design-tokens의 accent-primary/secondary 기반

옵션 B: Canvas Particle Network (Apple·Bloomberg 스타일)

• 점들이 연결되며 움직이는 네트워크
• HBM/AI 데이터 흐름 메타포로 적합
• canvas 2D, 100~150 파티클 (모바일 50)