스킬 자체의 표현으로
이 스킬은 코딩 에이전트에게 Emil Kowalski의 디자인 엔지니어링 판단력을 인터페이스 작업에 적용할 수 있게 해줍니다: 무언가를 애니메이션화해야 하는지, 어떤 이징과 지속 시간을 사용해야 하는지, 그리고 반응성 있게 느껴지는 컴포넌트를 어떻게 만들어야 하는지를 판단합니다. 엄격한 기본값을 설정합니다 — UI 애니메이션은 300ms 이하, 내장 CSS 이징 대신 커스텀 cubic-bezier 곡선 사용, ease-in 절대 사용 금지, scale(0) 등장 절대 사용 금지, 팝오버는 트리거로부터 확대되도록 합니다.
또한 스프링, clip-path 기법, 드래그 및 제스처 처리, GPU 성능 규칙, 모션 감소, 그리고 코드 리뷰를 위한 필수 Before/After 마크다운 표도 다룹니다. 일반적인 애니메이션 조언보다 취향에 기반한 인터페이스 결정을 원하는 디자이너와 개발자를 위한 스킬입니다.
산출물
- 발견된 문제마다 한 행씩, Before, After, Why 열로 구성된 마크다운 리뷰 표
- 권장 커스텀 이징 곡선을 담은 바로 붙여넣을 수 있는 CSS 변수
- Apple 스타일 또는 전통적인 물리 파라미터 방식의 스프링 설정 객체
- 리뷰 체크리스트 카테고리에서 도출한 우선순위 수정 목록
작동 방식
- 01애니메이션을 빈도에 따라 게이트하기
애니메이션 코드를 작성하기 전에, 사용자가 해당 인터랙션을 얼마나 자주 마주할지 결정합니다.
- 02목적을 명시하기
모든 애니메이션은 왜 애니메이션화하는지에 대한 답을 유효한 목록 중에서 제시해야 합니다: 공간적 일관성, 상태 표시, 설명, 피드백, 급격한 변화 방지.
- 03커스텀 곡선 선택하기
요소가 진입하는지, 퇴장하는지, 이동하는지, 아니면 색상만 변경되는지에 따라 이징을 선택한 다음, 내장 곡선을 더 강한 커스텀 cubic-bezier로 교체합니다.
- 04지속 시간 설정하기
표의 요소 유형에 맞춰 지속 시간을 맞춥니다 — 버튼 누름은 100-160ms, 드롭다운은 150-250ms, 모달은 200-500ms이며, UI는 300ms 상한선을 넘지 않도록 합니다.
- 05컴포넌트 기본값 적용하기
버튼은 :active 상태에서 0.97로 축소되고, 등장 애니메이션은 scale(0)이 아닌 0.95에서 불투명도와 함께 시작하며, 팝오버는 트리거 위치에서 확대되지만 모달은 중앙에 고정됩니다.
- 06효과가 있을 때만 스프링 사용하기
스프링은 관성이 있는 드래그, 중단 가능한 제스처, 의도적으로 장식적인 인터랙션에 적합합니다.