한 줄 요약
Emil Kowalski가 디자인 엔지니어와 코딩 에이전트를 위해 만든 UI·애니메이션 판단 규칙 모음이다. 에이전트가 애니메이션의 “재료”를 임의로 고르지 않도록, 실무자의 취향을 명시적인 SKILL.md 규칙으로 패키징한다.
저장소 개요
- 저장소:
emilkowalski/skills - 설명: Skills for Design Engineers
- 라이선스: MIT
- 조사 시점의 GitHub API 스냅샷: 기본 브랜치
main, 약 7,876 stars, 432 forks - README가 제공하는 주요 스킬은
emil-design-eng,review-animations,animation-vocabulary,apple-design이다. - 설치 명령:
npx skills@latest add emilkowalski/skills
핵심 구조
1. 애니메이션 어휘를 먼저 정한다
animation-vocabulary는 “stagger”, “morph”, “origin-aware animation”, “rubber-banding”처럼 원하는 움직임을 정확히 설명할 수 있는 용어를 제공한다. 요청을 느낌의 언어에서 구현 가능한 동작의 언어로 바꾸는 계층이다. 용어는 entrances/exits, sequencing, transforms, state transitions, scroll, feedback, easing, springs, performance, principles 등으로 나뉜다.
2. Apple의 유체 인터페이스 원칙을 웹으로 번역한다
apple-design의 중심 주장은 인터페이스가 현재 화면 값에서 시작하고, 사용자의 속도를 이어받으며, 관성의 방향을 예측하고, 움직이는 중에도 다시 잡아 되돌릴 수 있어야 “살아 있다”고 느껴진다는 것이다.
핵심 17개 원칙은 다음과 같다.
- 응답성: release가 아니라 pointer-down부터 피드백한다.
- 직접 조작: 콘텐츠가 손가락과 1:1로 따라온다.
- 중단 가능성: 모든 전환을 언제든 잡고 방향 전환할 수 있게 한다.
- 애니메이션보다 행동: 고정 duration보다 spring을 우선한다.
- 속도 인계: 드래그 종료 순간의 속도를 다음 spring에 넘긴다.
- 관성 투영: release 위치가 아니라 사용자가 향하는 위치를 계산한다.
- 공간적 일관성: 들어온 경로와 나가는 경로, 트리거와 transform-origin을 맞춘다.
- 제스처 방향 힌트: 중간 프레임이 최종 상태의 방향을 예고하게 한다.
- Rubber-banding: 경계에서 딱 멈추지 않고 점진적으로 저항시킨다.
- 제스처 세부 설계: hysteresis, pointer capture, cancel 동작을 설계한다.
- 프레임 수준의 부드러움:
transform과opacity중심으로 compositor 친화적 속성을 쓴다. - 재질과 깊이: 반투명 레이어와 blur로 계층을 표현한다.
- 다중 감각 피드백: 시각·소리·햅틱의 원인과 타이밍을 일치시킨다.
- 접근성: reduced motion/transparency/contrast에 맞는 대체 표현을 제공한다.
- 타이포그래피: 크기별 tracking·leading과 광학적 크기 조정을 적용한다.
- 디자인 기반: purpose, agency, responsibility, familiarity, flexibility, simplicity, craft, delight.
- 프로세스: 인터랙티브 프로토타입, 시각과 상호작용의 동시 설계, 실제 맥락에서의 테스트를 중시한다.
3. Design Engineering은 리뷰 가능한 규칙으로 만든다
emil-design-eng는 애니메이션을 넣기 전에 다음을 묻는다.
- 이 동작은 정말 필요한가? 자주 반복되는 키보드 동작에는 애니메이션을 넣지 않는다.
- 애니메이션의 목적은 무엇인가? 피드백·공간적 관계·상태 변화·즐거움 중 무엇을 위한 것인가?
- 어떤 easing이 맞는가? 진입/이탈은
ease-out, 화면 내 이동은ease-in-out, hover 변화는ease, 일정한 움직임은linear를 기본으로 한다. - 얼마나 빨라야 하는가? UI 애니메이션은 대체로 300ms 아래에 둔다.
실무 규칙으로는 scale(0) 대신 scale(0.95)에서 시작하기, 버튼 active 상태에 scale(0.97) 적용하기, popover를 trigger 기준으로 확장하기, hover flicker를 피하려고 부모 대신 자식을 애니메이션하기, prefers-reduced-motion을 지원하기 등이 있다.
4. 리뷰를 별도 역할로 분리한다
review-animations는 결과물을 엄격한 기준으로 검토한다. 응답성, 목적성, easing, duration, 물리성, interruptibility, 비대칭 enter/exit, 성능, gesture, crossfade, stagger, 접근성 등을 점검하고 findings table과 verdict 형태로 피드백하도록 한다.
활용 시사점
- 에이전트에게 “예쁘게 만들어줘”라고 시키는 대신, 취향을 용어·원칙·검토 형식으로 분해하면 재현 가능한 품질 기준이 된다.
- 생성용 스킬과 검토용 스킬을 분리하면 에이전트가 자기 결과물을 반대 기준으로 점검할 수 있다.
- 도메인 지식은 모델의 대체재가 아니라 모델의 출력 품질을 증폭하는 레버리지로 다뤄진다.
- 우리 프로젝트에 적용할 때는 그대로 복사하기보다 제품의 플랫폼, 접근성, 입력 빈도, 성능 예산에 맞춰 규칙을 조정해야 한다.