Mattttfb/애니메이션 엔지니어링

애니메이션 엔지니어링 & 모션 크래프트

이 스킬은 에이전트가 웹 및 애플리케이션 인터페이스 전반에 걸쳐 유체적이고 성능 좋은 애니메이션을 설계하고 코딩할 수 있도록 업계 표준 관행, 프로덕션 준비 패턴 및 수학적 물리학 모델을 제공합니다.

---

1. 모션 성능의 황금률

1. 합성 속성만 애니메이션화하세요:
   • 항상 transform (translate3d, scale, rotate) 및 opacity를 선호하세요.
   • 절대 기하학 속성(width, height, top, left, margin, padding)을 FLIP 기법(First, Last, Invert, Play)을 사용하지 않는 한 애니메이션화하지 마세요. 기하학 애니메이션은 CPU에서 값비싼 레이아웃 재계산(Reflow) 및 Paint를 트리거합니다.
2. GPU로 책임감 있게 승격시키세요:
   • will-change: transform, opacity;를 활발하게 애니메이션화되는 요소에만 사용하고, 메모리가 제한된 경우 애니메이션 완료 후 제거하세요.
   • 필요할 때 transform: translateZ(0) 또는 backface-visibility: hidden으로 GPU 레이어 구성을 강제하세요.
3. 사용자 접근성을 존중하세요:
   • 항상 @media (prefers-reduced-motion: reduce)를 지원하세요:

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

4. 자연스러운 타이밍 및 지속 시간:
   • 마이크로 인터랙션 (버튼 누름, 토글, 툴팁): 100ms - 200ms
   • 표준 전환 (드롭다운, 대화상자, 서랍, 카드): 200ms - 350ms
   • 복잡한 장면 전환 / 페이지 전환: 350ms - 500ms
   • 500ms보다 긴 애니메이션은 연속적인 분위기 배경 루프 또는 내러티브 스토리텔링이 아닌 이상 느리게 느껴집니다.

---

2. 기술 선택 매트릭스

시나리오 / 필요	권장 도구	이유
간단한 호버, 포커스, 활성 상태, 페이드/슬라이드	CSS 전환 및 @keyframes 또는 Tailwind CSS	제로 JavaScript 오버헤드, 120 FPS 하드웨어 가속.
React / Next.js UI, 모달, 공유 레이아웃 전환	Framer Motion (motion)	선언적 API, 스프링 물리학, 자동 FLIP (layoutId), AnimatePresence.
복잡한 타임라인, SVG 모핑, 스크롤 기반 UI	GSAP (GreenSock) + ScrollTrigger	비교할 수 없는 안무 제어, 정밀한 스크러빙, 브라우저 간 일관성.
3D 경험, 입자 네트워크, 셰이더	Three.js / React Three Fiber / Canvas 2D	수십만 개의 입자에 대한 직접 WebGL GPU 렌더링.
벡터 모션 그래픽 및 캐릭터 일러스트레이션	Lottie / dotLottie / Rive	작은 JSON/바이너리 페이로드, 확장 가능한 벡터 충실도, 인터랙티브 상태 머신.

---

3. 모션 곡선 (이징 토큰)

일정 속도의 컨베이어 벨트나 무한 회전 로더를 시뮬레이션하지 않는 한 UI 움직임에 linear를 사용하지 마세요. 자연스러운 움직임은 가속 및 감속합니다:

• 경쾌한 진입 (표준 UI 팝업/열기): cubic-bezier(0.16, 1, 0.3, 1) (Expo Out - 빠른 초기 버스트, 부드러운 감속)
• 부드러운 종료 (해제/닫기): cubic-bezier(0.7, 0, 0.84, 0) (Expo In - 화면 밖으로 가속)
• 자연스러운 동적 / 강조: cubic-bezier(0.34, 1.56, 0.64, 1) (미묘한 오버슈트 바운스)
• 스프링 물리학 (터치 및 드래그에 선호) :
  • 강성: 300 - 400
  • 감쇠: 25 - 35
  • 질량: 0.8 - 1.0

---

4. 심층 가이드 및 참고 자료

포괄적인 코드 패턴 및 자세한 연습은 다음 참고 자료를 참조하세요:

• CSS 및 Tailwind 애니메이션 참고 자료
• Framer Motion 및 Motion One 패턴
• GSAP 및 ScrollTrigger 마스터리
• Three.js 및 Canvas 모션
• UI 모션 원칙 및 접근성

---

5. 검증 체크리스트

애니메이션 구성 요소를 구축할 때:

• 애니메이션이 끊김이나 프레임 드롭 없이 부드럽게(60-120 FPS) 실행됩니까?
• 애니메이션 중 레이아웃 이동(CLS)이 방지됩니까?
• 종료 애니메이션이 요소 마운트 해제 전에 적절히 대기됩니까?
• UI가 빠른 클릭/탭을 버벅거림 없이 처리합니까(중단 가능한 애니메이션)?
• prefers-reduced-motion이 구현되었습니까?