Empro Labs 애니메이션 스킬은(는) 무엇을 하나요?

웹 모션 디자인 스킬. 두 단계로 진행됩니다: 먼저 모션 명세(ANIMATION.md)를 작성한 다음 코드를 작성합니다.

ANIMATION.md는 프로젝트에 저장되는 파일입니다. 직접 편집하거나, 다른 프로젝트에서 재사용하거나, 다른 도구에서 읽을 수 있습니다.

이 파일의 경로는 스킬 폴더(~/.claude/skills/empro-labs-animation-skill/)를 기준으로 합니다. 스크립트를 실행할 때는 절대 경로를 사용하세요.

요청

슬래시 명령어를 통한 사용자의 요청:

$ARGUMENTS

위 요청이 비어 있으면 한 가지 질문을 하세요: 무엇이 움직여야 하고, 어디로 움직여야 합니까? 그런 다음 A단계를 시작합니다.

핵심 흐름

A단계  입력 이해  ──→  B단계  ANIMATION.md 작성 (사용자 승인)  ──→  C단계  구현  ──→  D단계  감사

시작 확인 (이 순서대로)

프로젝트에 ANIMATION.md가 있습니까? → 사용자의 요청에 따라 재사용하거나, 편집하거나, 다시 빌드합니다.
(웹 디자인 스킬의) DESIGN.md가 있습니까? → 색상, 글꼴 및 스타일 방향을 상속합니다. 모션을 일관되게 유지합니다.
모션 토큰(--motion-* 변수 또는 모션 파일)이 있습니까? → 재사용합니다. 새 값을 만들지 마십시오.
이미 애니메이션 코드가 있습니까? → 먼저 python scripts/analyze_motion.py <project> --inventory를 실행하여 변경 사항을 제안하기 전에 무엇이 존재하는지 확인합니다.
위 중 어느 것도 해당하지 않음 → A단계.

A단계: 이해

입력은 결합될 수 있습니다:

입력	수행할 작업
참조 URL	`python scripts/capture_motion.py --url [URL] --output ./motion-capture`를 실행합니다. 실제 지속 시간, 이징, 애니메이션 속성 및 스크롤 연동 효과를 확인하려면 `capture.json`을 읽습니다. 무드를 위해 `top.png`를 사용합니다.
모션의 비디오 또는 스크린샷	트리거, 대략적인 지속 시간 및 이징 느낌을 설명합니다. 사용자와 숫자를 확인합니다.
키워드 ("스내피", "시네마틱")	`references/motion-personalities.md`의 성격과 일치시킵니다.
브랜드 이름 ("Linear처럼")	도달 가능한 경우 라이브 사이트를 캡처합니다. 그렇지 않으면 참조 URL을 요청합니다. 기억에서 브랜드의 모션을 추측하지 마십시오.
기존 코드	인벤토리 스크립트를 실행하고 작동하는 것을 유지합니다.

A1. 성격 (최대 두 가지 질문)

느낌: 차분함, 스내피, 유쾌함 또는 시네마틱?
페이지 유형: 콘텐츠 중심(모션이 방해되지 않음) 또는 쇼케이스(모션이 주도할 수 있음)?

references/motion-personalities.md에서 한두 개의 후보를 각각 한 줄의 이유와 함께 보여줍니다. 사용자가 확인합니다.

A2. 상호작용 계층 (필수, 건너뛰지 마십시오)

references/interaction-tiers.md를 참조하십시오.

계층	경험	도구
L1 마이크로	호버, 포커스, 프레스, 토글, 작은 상태 변경	CSS 전환만
L2 안무	등장 및 퇴장, 지연된 목록, 모달, 서랍, 경로 변경, 로더	CSS 키프레임, Web Animations API 또는 GSAP 타임라인
L3 스크롤 스토리	스크롤 연동 리빌, 고정, 패럴랙스, 타임라인으로 구동되는 섹션	GSAP + ScrollTrigger, 또는 폴백이 있는 CSS 스크롤 기반 애니메이션

L3는 페이지당 최대 두 개의 고정 섹션으로 제한됩니다. 각 페이지 섹션은 명세에 계층을 명시합니다.

A3. 스택

package.json과 프레임워크(일반 HTML, React, Vue, Svelte, Next.js)를 확인합니다. references/tooling.md로 도구를 선택합니다. 기본값: CSS 및 Web Animations API. L3 또는 복잡한 타임라인의 경우에만 GSAP를 추가합니다.

B단계: ANIMATION.md 작성

references/animation-md-template.md를 따릅니다. 10개 섹션:

모션 성격 및 원칙
모션 토큰 (지속 시간, 이징, 거리)
안무 인벤토리 (표: 요소, 트리거, 속성, 지속 시간, 이징, 지연, 축소 모션 폴백)
컴포넌트 모션 (기본값, 호버, focus-visible, 활성, 비활성, 등장, 퇴장)
스크롤 동작
페이지 및 경로 전환
성능 예산
접근성
해야 할 일과 하지 말아야 할 일 (최소 8개 항목, 그중 최소 5개는 하지 말아야 할 일)
종속성

요약을 사용자에게 보여주고 승인을 기다립니다. 그런 다음 프로젝트 루트에 ANIMATION.md를 저장합니다.

C단계: 구현

모든 곳에 토큰을 사용합니다. 모든 지속 시간과 이징은 var(--motion-duration-base)와 같은 변수입니다. 컴포넌트 내에 매직 넘버를 사용하지 마십시오.
저렴한 속성만 애니메이션합니다. transform과 opacity를 우선합니다. clip-path와 filter는 작은 요소에 허용됩니다. ANIMATION.md에 이유와 함께 예외가 기록되지 않는 한 width, height, top, left, margin 또는 padding을 절대 애니메이션하지 마십시오.
축소 모션은 첫 번째 버전의 일부이지 나중 패치가 아닙니다. 움직임은 제거되고 상태 변경은 유지됩니다. 축소 모션에서 거리 토큰은 0이 되며 templates/motion-tokens.css의 prefers-reduced-motion 블록이 패턴을 보여줍니다.
프로젝트에 아직 모션 레이어가 없는 경우 스타터 파일(templates/motion-tokens.css 및 templates/reveal.js)을 사용합니다.
루프에는 종료 방법이 필요합니다. infinite 애니메이션은 축소 모션에서 중지되거나 단순화됩니다. 5초 이상 실행되는 루프에는 일시 중지 컨트롤이 있어야 합니다.
JavaScript를 정리합니다. 언마운트 시 GSAP 타임라인과 ScrollTrigger를 제거합니다(gsap.context() 또는 useGSAP 사용). 옵저버 연결을 끊고 리스너를 제거합니다.
모션을 한 곳에 유지합니다. 토큰은 하나의 파일에, 레시피는 작은 모듈에 넣습니다. 타이밍 값을 컴포넌트 전체에 흩뜨리지 마십시오.

D단계: 감사

정적 감사 실행: python scripts/analyze_motion.py <project> --strict. 모든 오류를 수정합니다. 모든 경고를 검토하고 수정하거나 ANIMATION.md에 정당화합니다.
브라우저 검사 실행:
- 축소 모션 켜기 (DevTools → 렌더링 → prefers-reduced-motion: reduce). 움직임이 남아 있지 않고 콘텐츠가 계속 표시되는지 확인합니다.
- CPU 스로틀(4×)하고 모션이 재생되는 동안 성능 패널을 기록합니다. 긴 프레임을 찾습니다.
- 휴대폰 너비(390px)를 확인합니다. 애니메이션 요소로 인한 가로 오버플로를 찾습니다.
references/quality-checklist.md를 통해 작업합니다.
통과한 항목, 실패한 항목 및 수정한 항목을 보고합니다.

레드 라인 (모든 항목 통과 필수)

ANIMATION.md의 모든 애니메이션에는 축소 모션 폴백이 있습니다.
transform, opacity 및 기록된 예외만 애니메이션됩니다.
모든 지속 시간과 이징은 토큰에서 가져옵니다.
모든 infinite 루프는 축소 모션을 준수하며, 5초보다 긴 루프에는 일시 중지 컨트롤이 있습니다.
어떤 것도 초당 3회 이상 깜빡이지 않습니다.
대화형 피드백은 100ms 이내에 나타납니다. 마이크로 애니메이션은 250ms 이하입니다. 진입 및 경로 전환은 500ms 이하입니다.
호버 전용 피드백에는 키보드 포커스 상태와 터치에 상응하는 기능이 있습니다.
600px 이하의 너비에서 애니메이션 요소로 인한 가로 스크롤이 없으며 고정 섹션이 비활성화되거나 단순화됩니다.
JavaScript 애니메이션은 언마운트 시 정리됩니다.

참조 색인

현재 단계에 필요한 파일만 읽습니다. 모두 로드하지 마십시오.

파일	내용	읽을 시기
`references/animation-md-template.md`	ANIMATION.md 출력 템플릿 (10개 섹션)	B단계
`references/motion-principles.md`	애니메이션을 사용하는 이유와 시기, 타이밍 및 이징 규칙	A단계 및 B단계
`references/interaction-tiers.md`	L1, L2 및 L3 계층 정의와 코드 패턴	A2단계 및 B단계
`references/motion-personalities.md`	토큰 값이 있는 4가지 성격 프리셋	A1단계 및 B단계
`references/tooling.md`	CSS vs WAAPI vs GSAP vs Motion vs View Transitions vs Lottie	A3단계
`references/component-recipes.md`	버튼, 카드, 아코디언, 모달, 서랍, 토스트, 탭, 로더	C단계
`references/gsap-recipes.md`	GSAP 타임라인, ScrollTrigger, matchMedia, React 정리	C단계 (GSAP만)
`references/scroll-patterns.md`	리빌, 진행률 표시줄, 고정 스택, 패럴랙스, 가로 스크롤	B단계 (스크롤) 및 C단계
`references/performance.md`	프레임 예산, 컴포지터 친화적 규칙, 모바일 다운그레이드	B단계 및 D단계
`references/accessibility.md`	축소 모션, WCAG 모션 기준, 전정 유발 요인	B단계 및 D단계
`references/quality-checklist.md`	100포인트 감사 체크리스트	D단계

스크립트

스크립트	용도	필요 사항
`scripts/analyze_motion.py`	프로젝트의 CSS 및 JS에 대한 정적 감사. 레이아웃 애니메이션, `transition: all`, 무한 루프, 긴 지속 시간 및 누락된 축소 모션 처리를 찾습니다. `--inventory`는 기존 타이밍 값을 나열합니다.	Python 3 (표준 라이브러리만)
`scripts/capture_motion.py`	라이브 URL에서 선언된 애니메이션과 실행 중인 애니메이션을 기록하고, 페이지를 스크롤하며 축소 모션에서도 계속 실행되는지 확인합니다. `capture.json`과 `top.png`를 씁니다.	Python 3, `pip install playwright`, `python -m playwright install chromium`

두 스크립트 모두 --help를 지원합니다.

템플릿

파일	용도
`templates/motion-tokens.css`	토큰 변수, 기본 키프레임, 리빌 규칙 및 축소 모션 블록. 프로젝트에 복사합니다.
`templates/reveal.js`	축소 모션을 준수하는 IntersectionObserver를 사용한 종속성 없는 스크롤 리빌.

언어

ANIMATION.md와 요약은 사용자의 언어로 작성합니다. CSS, JavaScript 및 토큰 이름은 영어로 유지합니다.

폴백 체인

캡처 스크립트 실패 (Playwright가 없거나 사이트가 브라우저를 차단하는 경우) → 스크린샷이나 짧은 화면 녹화를 요청하고 그 설명을 바탕으로 빌드합니다.
참조가 식별할 수 없는 애니메이션 라이브러리를 사용하는 경우 → 그렇게 말하고 느낌을 맞출지 정확한 모션을 맞출지 물어봅니다.
입력이 전혀 없는 경우 → 느낌에 대해 한 가지 질문을 한 다음 차분한 성격을 사용합니다.

Empro Labs 애니메이션 스킬