01. 정확히 알고 시작하기
emilkowalski/skills는 Apple이 배포한 공식 자산이 아니라, Emil Kowalski가 공개한 디자이너·엔지니어용 UI 스킬 저장소입니다. 그중 apple-design은 Apple WWDC 디자인 강연의 원리를 웹 환경에 맞게 정리한 문서입니다.
들어 있지 않은 것
Apple 색상 팔레트나 폰트 파일을 복사하는 패키지가 아닙니다. 모션·제스처·재질·타이포·접근성의 판단 기준을 에이전트가 참고하게 하는 문서형 스킬입니다.
02. 왜 애니메이션이 어설퍼 보일까
등장 요소가 너무 느리거나, 트리거와 상관없는 중심에서 커지거나, transition: all로 불필요한 속성까지 함께 움직이면 UI가 둔하고 인공적으로 느껴집니다. 감각보다 물리·속도·origin을 점검하는 것이 먼저입니다.
<300ms짧은 UI 반응
1:1포인터 추적
GPUtransform·opacity
A11yreduced motion
03. 설치되는 12개 스킬
| 스킬 | 주요 역할 |
|---|---|
| apple-design | Apple식 인터페이스·fluid motion 원리 |
| review-animations | 현재 애니메이션 리뷰 |
| improve-animations | 코드베이스 전체 감사 + 우선순위 |
| animate | 새 애니메이션 설계 |
| find-animation-opportunities | 움직임이 필요한 지점 탐색 |
| animation-vocabulary | AI에게 모션을 정확히 설명 |
| prototype | 여러 UI 버전을 만들어 비교 |
| pick-ui-library | UI 라이브러리 선택 |
| emil-design-eng | 메인 디자인·엔지니어링 스킬 |
| ask-sonner | Sonner 토스트 가이드 |
| animate-expo | React Native / Expo 모션 |
| write-swift | 현대 Swift 작성 |
04. 설치 — 한 줄
npx skills@latest add emilkowalski/skills
05. Claude Code에서 부르기
/apple-design
/review-animations
/animate
/prototype
06. 새로 만들 때 보는 핵심
| 원칙 | AItira 해석 |
|---|---|
| Response | 입력 즉시 피드백 |
| Direct manipulation | 손가락/포인터와 1:1로 이동 |
| Interruptibility | 움직이는 중 다시 잡아 방향 변경 |
| Velocity handoff | 놓는 순간 속도 이어받기 |
| Momentum projection | 진행 방향까지 계산 |
| Rubber-banding | 경계에서 점진적 저항 |
| Spatial consistency | 들어온 경로와 나가는 경로 일치 |
| Accessibility | reduced motion 등 고려 |
07. 문서에 제시된 스프링 출발값
| 상호작용 | Damping | Response | 해석 |
|---|---|---|---|
| 이동·재배치 | 1.0 | 0.4 | 기본적으로 튐 없이 안정 |
| 회전 | 0.8 | 0.4 | 작은 overshoot 가능 |
| 드로어·시트 | 0.8 | 0.3 | 짧고 물리적인 반응 |
08. 이미 만든 사이트 검토
/review-animations
src 아래 애니메이션을 전부 검토해줘.
파일과 줄 번호를 표시하고 문제 이유 / 교체값 / 접근성 대응 / 검증 방법까지 써줘.
특히 transform-origin, transition: all, 느린 enter, reduced-motion 누락을 먼저 찾아줘.
09. 전체 감사
/improve-animations
프로젝트 전체 애니메이션을 감사해줘.
사용자 체감 영향 기준으로 P0 / P1 / P2 우선순위를 붙이고,
각 항목에 현재 문제, 수정안, 영향 범위, 테스트 방법을 적어줘.
10. 타이포그래피
큰 제목은 본문과 똑같은 자간을 쓰지 않고 조금 더 타이트하게, 본문은 읽기 편한 기본값에 가깝게 둡니다. 가능한 경우 optical sizing을 활용하고, 사용자가 글자를 키워도 레이아웃이 무너지지 않도록 rem/em 같은 상대 단위를 활용합니다.
11. AItira식 최종 체크
1
목적
왜 움직이는지 설명할 수 있는가
2
속도
자주 쓰는 UI가 과하게 느리지 않은가
3
물리
origin·속도·방향이 사용자의 동작과 연결되는가
4
성능
transform·opacity 중심인가
5
중단
움직이는 도중 다시 조작할 수 있는가
6
접근성
reduced-motion에서 대체 동작이 있는가
다음 단계
AItira가 공개 저장소와 WWDC 기반 설명을 교육용으로 재구성한 페이지입니다. Apple 공식 배포 스킬로 소개하지 않습니다.