Kinetic Continuity Motion 적용하기

목적

레이아웃에 물리적 기억을 부여하는 절제된 모션 언어를 적용합니다. 요소는 식별 가능한 상태를 유지하고, 사용자의 에너지에 반응하며, 다음 결정을 내릴 수 있는 위치에 안착합니다.

제공된 참조 비디오는 디자인 언어에 대한 증거로 취급하고, 재현할 템플릿으로 취급하지 마십시오. 사용자가 요청한 개념, 기술, 범위 및 권한 부여 경계를 유지하십시오. 사용자가 구현을 요청하는 경우에만 파일 변경을 적용하고, 계획 또는 검토 요청의 경우 파일을 편집하지 않고 지침을 반환합니다.

이 스킬을 사용해야 하는 경우

다음과 같은 경우 이 스킬을 사용하십시오:

GSAP 데모 또는 웹 인터페이스가 공간 또는 레이아웃 상태 전반에 걸쳐 연속성을 필요로 하는 경우.
작업에 이미지 필드, 갤러리, 캐러셀, 접촉 시트, 고정 미리보기, 경로 기반 시퀀스, 경로 그룹 또는 절제된 키네틱 타이포그래피가 포함된 경우.
기존 모션이 연결되지 않고, 빠른 입력에 부실하거나, 지나치게 장식적이거나, 객체 정체성이 불분명한 경우.
사용자가 제공된 모션 참조를 독창적이고, 접근 가능하며, 구현 가능한 상호작용 언어로 변환하려는 경우.

다음과 같은 경우 이 스킬을 사용하지 마십시오:

간단한 호버, 포커스, 누름 또는 불투명도 변경을 일반 CSS 전환으로 처리할 수 있는 경우.
요청이 연속성 또는 공간 상태 문제가 없는 관련 없는 애니메이션 작업인 경우.
작업이 인터페이스 동작이 아닌 영화, 비디오 편집 또는 캐릭터 애니메이션과 관련된 경우.
사용자가 모션별 계획, 구현 또는 검토보다는 포괄적인 접근성 감사를 필요로 하는 경우.

검사할 입력

사용 가능한 가장 작은 관련 입력 집합을 검사하십시오:

요청된 사용자 작업, 트리거, 주제, 시작 상태 및 대상 상태.
관련 구성 요소, 템플릿, 스타일, 모션 유틸리티, 테스트, 데모 및 문서.
기존 애니메이션 종속성, 특히 이미 사용 중인 GSAP 플러그인.
사용자가 제공한 비디오, 프로토타입, 스크린샷, 스토리보드 또는 모션 분석 노트.
반응형 동작, 포인터 및 터치 동작, 키보드 경로, 포커스 동작 및 축소 모션 요구 사항.
반복 항목, 이미지 무게, 형상 측정 및 고주파 입력과 같은 성능 제약 조건.

참조 미디어, GSAP 플러그인 또는 프로젝트 규칙이 존재하지 않는 경우 가정하지 마십시오.

참조 라우팅

모션 프리미티브를 선택하거나, 타이밍 및 이징을 조정하거나, 축소 모션 동작을 정의하거나, 자연스러움을 검토할 때 references/pattern-catalog.md를 읽으십시오.

카탈로그는 자체 포함되어 있습니다. 작업에 비디오별 출처 또는 명명된 클립과의 비교가 필요한 경우, 이 스킬의 세부 사항을 가정하지 말고 해당 작업 공간에 제공된 참조 미디어 또는 모션 분석 문서를 검사하십시오.

핵심 모션 계약

위치, 크기 및 레이아웃 변경을 통해 객체 정체성을 보존합니다.
각 모션 비트에 하나의 지배적인 방향을 부여합니다.
이웃 요소가 하나의 공간 필드로 반응하도록 하고, 관련 속도와 거리 기반 지연을 적용합니다.
다음 프레임에 그려지는 직접 입력에 반응합니다. 잡는 지점이 아닌 안착에 이징을 적용합니다.
잠시 가속하고 지속 시간의 더 많은 부분을 감속에 사용합니다.
나가는 상태와 들어오는 상태를 충분히 겹쳐서 데드 프레임이 발생하지 않도록 합니다.
스케일을 일관되게 사용하여 포커스, 깊이 또는 우선 순위를 전달합니다.
활성 구간을 안정적이고 읽기 쉬운 휴식 상태로 해결합니다.
표현적 왜곡을 짧고, 국소적이며, 되돌릴 수 있고, 필수가 아닌 상태로 유지합니다.

화려함보다 연속성을 선호하십시오. 상태, 계층, 방향 또는 피드백을 설명하지 않는 모션은 제거하십시오.

하나의 기본 프리미티브 선택

상태 변화를 가장 잘 설명하는 프리미티브를 선택하십시오. 단순히 시각적 참신함을 높이기 위해 여러 개를 결합하지 마십시오.

관성 필드: 하나의 시스템으로 움직이는 패닝 가능하거나 떠다니는 별자리.
평행 레일: 속도 변화가 제한된 반복 미디어 트랙.
경로 그룹: 보이는 레인 또는 카테고리 사이를 이동하는 클러스터.
고정 미리보기 교환: 안정적인 인덱스가 경계가 있는 미리보기 영역을 제어합니다.
곡선 행진: 카드가 하나의 경로 진행 값에서 위치, 크기 및 스택을 파생합니다.
수렴 체인: 개요가 구부러지고 확대되어 집중된 구성을 만듭니다.
접촉 시트 해결: 유지된 항목이 조밀한 레이아웃과 큐레이션된 레이아웃을 연결합니다.
경계가 있는 텍스트 중단: 표시 텍스트가 잠시 오프셋되었다가 깔끔하게 재구성됩니다.

상호작용이 단순한 호버, 포커스, 누름 또는 불투명도 변경만 필요로 하는 경우 일반 CSS 전환을 사용하십시오.

워크플로

요청이 계획, 구현 또는 검토인지 확인하고 해당 경계를 유지합니다.
트리거, 주제, 시작 상태, 대상 상태 및 사용자 작업을 식별합니다.
모션이 존재하는 이유를 설명하는 한 문장의 모션 테제를 작성합니다.
하나의 기본 프리미티브를 선택하고 안정적인 시작 및 최종 구성을 정의합니다.
전체 안무를 추가하기 전에 축소 모션 상태를 정의합니다.
마이크로, 메조 및 매크로 계층을 설정합니다. 모든 요소가 모든 계층에서 모션을 필요로 하는 것은 아닙니다.
직접 응답, 조정된 이동 및 조용한 안착을 구현하거나 지정합니다.
빠른 입력이 애니메이션을 대기열에 추가하는 대신 현재 렌더링된 상태를 다시 타겟팅하도록 합니다.
포인터, 터치, 키보드, 포커스, 축소 모션, 중단 및 실패 경로를 확인합니다.
정상 속도와 프레임 단계 또는 0.25x 속도로 검토하여 불연속성 및 스택 오류를 찾습니다.
구현이 요청된 경우, 리포지토리의 관련 테스트 또는 검사를 실행하고 수동 검증이 남아 있음을 보고합니다.

타이밍 시그니처

참조 토큰을 시작점으로 사용한 다음, 이동 거리 및 상호 작용 빈도에 따라 적당히 조정하십시오:

즉각적인 확인: 약 90ms.
호버 또는 포커스: 약 180ms.
간결한 상태 변경: 약 320ms.
레이아웃 재구성: 약 520ms.
대규모 공간 장면: 약 780ms, 일반적으로 1000ms 미만으로 제한.
공간 지연: 35–60ms, 모션 소스로부터의 거리 순으로 정렬.

표준 안착에는 power3.out, 강력한 편집적 진입에는 power4.out, 알려진 상태 재구성에는 power2.inOut을 선호하십시오. 진행률이 스크롤, 드래그 또는 다른 연속 입력을 따를 때만 선형 모션을 사용하십시오.

탄성 또는 백 이징을 시스템 시그니처로 만들지 마십시오. 릴리스 스냅에 오버슈트가 필요한 경우 약 3% 미만으로 유지하십시오.

구현 불변 조건

단순한 상태 전환에는 CSS를 사용하고 조정된 시퀀스에는 GSAP 타임라인을 사용하십시오.
공유 요소 연속성이 가치 있는 실제 레이아웃 변경에는 GSAP Flip을 사용하십시오.
드래그가 실제 상호 작용이고 동등한 가시적 컨트롤이 존재하는 경우에만 Draggable을 사용하십시오.
진정한 스크롤 내러티브를 위해서만 ScrollTrigger를 사용하고, 스크롤 하이재킹을 도입하지 마십시오.
하나의 정규화된 진행 값에서 곡선 모션 속성을 파생하여 x, y, 크기, 불투명도 및 스택이 서로 떨어지지 않도록 하십시오.
중단 가능한 모션을 위해 overwrite: "auto", quickTo() 또는 하나의 진행 기반 타임라인을 사용하십시오.
transform 및 opacity를 먼저 애니메이션화하십시오.
DOM 읽기를 일괄 처리하고, 형상을 캐시하며, 고주파 업데이트 내에서 측정을 피하십시오.
활성 모션 중에만 will-change를 적용하고 실용적인 경우 대규모 일회성 시퀀스 후에 제거하십시오.
JavaScript가 실패하는 경우 최종 콘텐츠를 사용할 수 있도록 유지하십시오. 필수 콘텐츠를 공개하기 위해 진입 타임라인이 필요하지 않아야 합니다.

리포지토리의 기존 HTML, CSS, JavaScript, 자산 및 데모 문서 규칙을 따르십시오. 사용자 승인 없이 애니메이션 종속성을 추가하거나 교체하지 마십시오.

상호 작용 및 접근성 불변 조건

호버를 포커스 및 클릭 또는 탭 동작과 일치시키십시오.
포커스 스타일을 표시하고 호버만큼 명확하게 유지하십시오.
시각적 항목이 공간적이 될 때 의미론적 소스 순서를 유지하십시오.
분할되거나 중단된 타이포그래피에 대해 하나의 온전한 읽을 수 있는 텍스트 소스를 유지하십시오.
드래그, 스와이프 및 휠을 선택적 입력 방법으로 만들고, 이전 및 다음 컨트롤 또는 다른 키보드 경로를 제공하십시오.
새로운 제스처가 시작될 때 운동량을 취소하십시오.
의미 있는 상호 작용 중 및 페이지가 표시되지 않을 때 연속 모션을 일시 중지하십시오.
prefers-reduced-motion: reduce의 경우 관성, 궤도 운동, 자동 재생, 확대/축소 이동 및 텍스트 중단을 제거하십시오. 즉각적인 변경 또는 짧은 불투명도 전환으로 콘텐츠와 선택을 유지하십시오.
테스트 없이 접근성 준수를 주장하지 마십시오.

검토 기준

다음과 같은 경우 모션을 플래그 지정하십시오:

식별 가능해야 하는 객체를 순간 이동하거나 대체하는 경우;
공간 소스 없이 무작위 지연을 사용하는 경우;
오래된 호버 상태를 대기열에 추가하는 경우;
읽기 콘텐츠 옆에서 지속적으로 모션을 유지하는 경우;
스케일을 의미보다 장식적으로 사용하는 경우;
필수 콘텐츠를 노출하기 위해 드래그, 호버 또는 애니메이션에 의존하는 경우;
각 애니메이션 프레임에서 레이아웃 작업을 생성하는 경우;
내부 장면 레이어 대신 스티키 소유자를 변환하는 경우;
상태 변경이 필요한 것보다 더 길거나 더 정교한 경우.

출력 형식

모드에 적합한 결과를 반환하십시오:

계획

모션 테제 및 선택된 프리미티브.
시작, 전환 및 안정된 상태.
모션 계층, 타이밍, 중단 및 축소 모션 동작.
접근성, 성능, 구현 및 검증 노트.

구현

적용된 모션 동작 요약.
변경된 파일 및 각 변경의 역할.
선택된 프리미티브, 모션 계층, 축소 모션 결과, 접근성 동작 및 성능 전략.
실행된 테스트 또는 검사 및 남아 있는 수동 검사.

검토

우선 순위	문제	증거	권장 사항

또한 추론된 프리미티브, 모션 계층, 축소 모션 결과, 접근성 동작, 성능 전략 및 증거 제한 사항을 보고하십시오.

품질 기준

다음 조건이 충족될 때만 작업이 완료됩니다:

선택한 프리미티브가 더 간단한 전환보다 상태 변화를 더 명확하게 설명합니다.
객체 정체성, 방향, 응답, 중단, 안착 및 휴식이 일관됩니다.
전체 모션 및 축소 모션 상태가 동일한 콘텐츠와 작업 결과를 유지합니다.
포인터, 터치, 키보드 및 포커스 동작에 해당하는 사용 가능한 경로가 있는 경우 동등합니다.
고주파 모션은 반복적인 레이아웃 측정 및 오래된 대기열 상태를 피합니다.
검토 결과는 구체적인 인터페이스 상태, 코드 또는 관찰 가능한 동작을 인용합니다.
구현 작업은 프로젝트 규칙을 따르고 비례적인 검증을 포함합니다.

가장자리 사례

프로젝트가 GSAP를 사용하지 않는 경우, 사용자가 GSAP를 추가하도록 요청하지 않는 한 기존 스택을 유지하십시오. 사용 가능한 플랫폼 API로 동일한 원칙을 표현하거나 계획을 제공하십시오.
참조 미디어를 사용할 수 없는 경우, 번들 패턴 카탈로그를 사용하고 클립별 비교가 수행되지 않았음을 공개하십시오.
여러 상태 변경에 다른 프리미티브가 필요한 경우, 상태 변경당 하나의 기본 프리미티브를 선택하고 공유 타이밍 및 물리적 규칙을 일관되게 유지하십시오.
애니메이션이 실패하거나 JavaScript를 사용할 수 없는 경우, 필수 콘텐츠와 컨트롤을 사용할 수 있어야 합니다.
스티키 또는 스크롤 소유 요소가 변환되는 것처럼 보여야 하는 경우, 스티키 소유자 대신 내부 장면 레이어를 애니메이션화하십시오.
개념이 축소 모션, 키보드 또는 콘텐츠 액세스 요구 사항과 충돌하는 경우, 안무를 단순화하면서 작업 결과와 상태 관계를 유지하십시오.

연속 동작 적용 (Kinetic Continuity)