스킬 자체의 표현으로
CSS 및 JS 애니메이션 성능에 대한 감사 및 수정 플레이북으로, 부자연스러운 전환, 스크롤 연동 모션, 블러 효과를 검토하거나 리팩터링하는 디자이너와 개발자를 대상으로 합니다. 슬래시 명령으로 제공되며, 단독으로 실행하면 대화 중인 애니메이션 작업 전반에 가이드라인을 적용하고, 파일을 지정하면 정확한 줄을 인용하여 위반 사항, 이유, 코드 수준의 수정안을 보고합니다.
규칙은 우선순위에 따라 정렬되며, 절대 금지 패턴과 메커니즘·도구 경계를 최우선으로 다룬 뒤 측정, 스크롤, 페인트, 레이어, 블러를 거쳐 뷰 전환까지 이어집니다. 요청이 없는 한 애니메이션 라이브러리를 마이그레이션하지 않으며, 기존 스택 내에서 규칙을 적용합니다.
산출물
- 위반 사항마다 왜 중요한지를 설명하는 짧은 문장 한 줄.
- 각 위반 사항에 대한 구체적인 코드 수준의 수정안.
- 기본값이 아닌 렌더링 작업 선택에 대한 명시적인 근거.
작동 방식
- 01슬래시 명령으로 실행하기
/fixing-motion-performance를 실행하여 세션에서 이미 논의 중인 애니메이션 작업에 제약을 적용합니다.
- 02또는 파일을 지정하기
경로를 전달하면 실시간 작업을 제약하는 대신 해당 파일을 모든 규칙에 대해 검토하는 리뷰 모드로 전환됩니다.
- 03세 부분으로 보고하십시오
각 발견 사항은 문제가 되는 줄을 인용하고, 왜 중요한지를 짧은 문장으로 설명하며, 코드 수준의 수정안을 제안합니다.
- 04렌더링 단계별로 속성 정렬하기
용어집은 작업을 합성, 페인트, 레이아웃으로 구분하여 리뷰어가 어떤 애니메이션이 저렴하고 어떤 애니메이션이 비용이 큰지 파악할 수 있게 합니다.
- 05우선순위에 따라 적용하기
영향이 큰 카테고리를 낮은 영향의 카테고리보다 먼저 검토하므로, 절대 금지 패턴과 도구 경계가 가장 먼저 정리됩니다.
- 06현재 스택 안에서 유지하기
라이브러리 마이그레이션은 작업 범위에 포함되지 않으며, 규칙은 코드베이스가 이미 사용 중인 애니메이션 시스템에 그대로 적용됩니다.