영상에서 소개한 apple-design 스킬입니다. 별 33,702개짜리 저장소(emilkowalski/skills)의 11종 중 1종이고, MIT 이며 무료입니다. (2026-08-31 기준 · 깃허브 API 로 직접 셌습니다)
Apple 의 WWDC 디자인 강연, 그중에서도 Designing Fluid Interfaces(WWDC 2018)를 웹 플랫폼(CSS · Pointer Events · requestAnimationFrame · Motion/Framer Motion 같은 스프링 라이브러리)으로 옮긴 것을 담은 문서 282줄입니다. 그런데 영상 화면에 뜬 감사 4줄 중 3줄은 이 문서에 없습니다.
※ 이 페이지는 Apple Inc. 및 원저자와 아무 관계가 없습니다. apple-design 는 Emil Kowalski 님이 만든 별개의 MIT 오픈소스이고, 애플의 공인·제휴·승인을 받은 것이 아닙니다. Apple 은 Apple Inc. 의 상표입니다. 저희 패키지에는 그 스킬이 한 글자도 들어 있지 않습니다 — 원저자 저장소에서 받습니다.
터미널을 따로 열지 않아도 됩니다. 클로드 코드 안에서 둘 중 하나면 됩니다.
! 붙이기 — 제일 확실합니다
!npx --yes reborn-apple-design! 까지 함께 붙여넣으세요. 클로드를 거치지 않고 곧장 설치가 돕니다.--yes 도 빼지 마세요 — 이게 없으면 «받아도 되나요?» 하고 묻는 자리에서
아무 말 없이 멈춥니다.reborn-apple-design 설치해줘npx --yes reborn-apple-designcmd 라고 친 뒤 엔터.
맥 — command+스페이스 누르고 터미널 엔터.~/.claude/skills)에 깔립니다.
여기서는 ! 를 빼세요.먼저 컴퓨터에 Node.js 가 있어야 합니다. 없으면 위 명령이 아예 안 뜁니다 —
nodejs.org 에서 큰 초록 버튼을 누르고
계속 «다음»만 누르시면 됩니다(3분). 클로드 코드를 쓰고 계시면 이미 있습니다.
클로드가 “실행하지 않겠습니다”라고 하면 1번을 쓰세요.
이제 막 나온 설치기라 클로드가 낯선 것으로 보고 막는 것이고, 그 판단 자체는 옳습니다.
! 를 붙이면 클로드에게 부탁하지 않고 바로 돌아갑니다.
폰이나 브라우저의 클로드 화면에서는 안 됩니다 — 그 창은 인터넷 저쪽의 임시 서버라
깔아도 내 컴퓨터에 남지 않습니다. 내 컴퓨터의 클로드 코드나 터미널에서 해 주세요.
깔고 나면 클로드 코드를 껐다 켜야 스킬이 잡힙니다.
공식 명령은 이겁니다.
npx skills@latest add emilkowalski/skills이건 그 저장소의 스킬 11종을 전부 깝니다. 영상이 약속한 건 기술 하나입니다. 깔았더니 11개가 들어와 있으면 그건 약속과 다른 것이고, 「뭘 깐 건지 모르겠다」가 됩니다.
저희 설치기는 --skill apple-design 로 하나만 깝니다.
그리고 남의 스킬을 복사해 담지 않습니다 — 원저자 저장소의 공식 통로를 그대로 부릅니다.
복사해 넣으면 원저자가 고쳐도 여러분 것은 안 고쳐지니까요.
소개 영상은 마지막에 감사 결과 4줄을 띄웁니다. 깔린 원문을 열어 직접 셌습니다.
TAP TARGET 32px → 44px
없음이 문서에 「44」도 「tap target」도 한 번도 안 나온다. 44pt 최소 터치 영역은 애플 HIG 값이지 이 스킬의 내용이 아니다.
CORNER RADIUS 8/12px → 12px
없음모서리 반경을 다루는 절이 없다. 이 문서가 다루는 시각 요소는 재질(backdrop-filter)과 타이포그래피다.
CONTRAST 3.6:1 → 4.6:1
없음대비 수치 기준이 없다. 접근성 절에 있는 건 prefers-contrast: more 에서 배경을 거의 불투명하게 하라는 지침 한 줄이다.
LETTER-SPACING tight → 0.02em
방향이 반대자간은 실제로 다룬다. 다만 방향이 반대다 — 큰 글자일수록 좁히라(-0.02em)고 되어 있고, 본문은 0 근처에 두라고 한다. 「하나의 값을 전 크기에 쓰는 것이 틀린 것」이 이 절의 요지다.
이 스킬을 깔고 「내 사이트 검토해줘」 하면 클로드가 정말 그런 지적을 할 수 있습니다. 다만 그건 스킬이 준 지식이 아니라 모델이 원래 알던 애플 HIG 입니다. 무엇을 깔아서 얻었는지 구분하지 못하면, 안 깔아도 되는 걸 깐 줄 알게 됩니다.
저희가 판정하지 않습니다. 여러분 컴퓨터에 방금 깔린 원문을 열어 셉니다.
npx --yes reborn-apple-design --audit원저자가 문서를 고치면 판정도 따라 바뀝니다. 저희 설명이 낡으면 그 자리에서 낡았다고 말합니다.
애플처럼 보이게 하는 스킬이 아니라 애플처럼 움직이게 하는 스킬이다.
색 팔레트도, 간격 스케일도, 컴포넌트 목록도 들어 있지 않습니다.
들어 있는 건 움직임입니다.
문서가 스스로 the single most important principle 이라고 적은 절이다. 진행 중인 애니메이션을 아무 순간에 붙잡아 되돌릴 수 있어야 한다. 그러려면 목표값이 아니라 지금 화면에 그려진 값에서 다시 출발해야 한다.
제스처가 개입하는 UI 에 CSS transition 을 쓰지 않는다. 기본 UI 는 감쇠 1.0(출렁임 없음) · response 0.3~0.4, 튕겨야 하는 곳만 감쇠 0.8.
손을 뗀 순간의 속도를 스프링의 초기 속도로 넘긴다. 안 넘기면 드래그가 끝나는 자리에서 화면이 한 번 멈췄다 다시 출발한다.
튕긴 손가락이 가려던 자리를 계산해서 거기로 보낸다. current + (v/1000)·d/(1−d), d ≈ 0.998.
Pointer Events 의 setPointerCapture 로 손가락이 요소 밖으로 나가도 계속 따라간다. 잡은 지점의 오프셋을 유지한다.
끝에서 딱 멈추지 않는다. 저항이 점점 커지게 한다.
전부 12가지입니다. 나머지는 같이 깔리는
apple-design-guide 스킬(한국어)에 있습니다.
깐다고 화면이 저절로 바뀌지 않습니다. 클로드가 참조하는 문서 한 벌이고, 부르려면 말을 걸어야 합니다.
이 프로젝트에 apple-design 스킬 적용해서 모달 열고 닫는 동작 다시 만들어줘apple-design 기준으로 지금 애니메이션들 검토해줘드래그해서 닫는 시트를 apple-design 방식으로 만들어줘 — 속도 이어받기까지prefers-reduced-motion 대응이 빠진 곳 찾아줘스킬이 안 뜨면 이름을 직접 부르세요 — “apple-design 스킬로 다시 봐줘”.
그래도 없으면 npx --yes reborn-apple-design --check 로 어디 깔렸는지 봅니다.
MIT · 무료 · 기능 제한도 사용 기한도 없습니다.
npx --yes reborn-apple-design설치기는 REBORN LABS(MIT) · apple-design 는 Emil Kowalski(MIT) · https://github.com/emilkowalski/skills