스킬 · 디자인
애플 디자인애플 스타일 인터페이스 디자인
WWDC 디자인 발표에서 정리한 애플의 인터페이스·모션 원칙을 웹(CSS·JS)에 맞게 옮겼습니다. 제스처 기반 UI, 스프링 애니메이션, 드래그·스와이프·시트 인터랙션, 반투명 재질과 깊이감, 타이포그래피까지 다룹니다.
한눈에 보기
- 설치
npx skills add emilkowalski/skills/apple-design -g -a claude-code- 처음 시킬 말
- “이 바텀시트가 애플 앱처럼 자연스럽게 열리고 닫히게 해줘”
- 난이도
- 개발자용입니다
- 만든 곳
- emilkowalski/skills (커뮤니티)
디자인 분야 · 디자인·이미지 용도 · 개발자용입니다.
이럴 때 씁니다
버튼 하나도 애플 앱처럼 자연스럽게 움직이게 만들고 싶을 때
apple-design 스킬 설치 한 줄
Claude Code 용 명령입니다. Claude Code 는 터미널뿐 아니라 데스크톱 앱(Mac·Windows), 웹(claude.ai/code), VS Code·JetBrains 확장으로도 씁니다. 어디서 쓰시든 명령을 넣는 자리에 붙여 넣으시면 됩니다. 터미널로 쓰시면 그 터미널이고, 앱·웹·확장으로 쓰시면 그 안의 명령 입력 칸입니다. 헷갈리기 쉬운 곳은 하나입니다. 대화만 하는 Claude 앱의 채팅창은 Claude Code 가 아니라서 여기에 붙여 넣으면 동작하지 않습니다. 터미널로 쓰실 때만 Node.js 가 따로 필요하며, node -v 를 쳐서 버전이 나오면 준비된 것입니다.
npx skills add emilkowalski/skills/apple-design -g -a claude-code
뒤의 두 가지는 붙여 두시는 편이 좋습니다. -g 는 계정 전체에 넣는다는 뜻으로, 없으면 지금 열려 있는 폴더에만 깔려 다른 곳에서는 스킬이 보이지 않습니다. -a claude-code 는 Claude Code 에만 넣는다는 뜻입니다. 이걸 빼면 전역 설치를 지원하지 않는 다른 도구 때문에 빨간 Failed to install 이 뜨는데, 실제로는 설치가 된 상태라 헷갈립니다.
apple-design 스킬 설치 절차 전체
위 한 줄에서 막히셨다면 여기를 보십시오. 터미널로 쓰시는 분을 위해 터미널 여는 법부터 확인 명령까지 순서대로 적어 두었습니다. 데스크톱 앱·웹·편집기 확장으로 쓰시면 터미널 여는 단계는 건너뛰고 명령 입력 칸에 같은 줄을 넣으시면 됩니다.
# apple-design 설치
## 0. 어디에 붙여 넣나
Claude Code 를 쓰는 방법이 네 가지입니다. 어느 쪽이든 됩니다.
터미널 macOS 는 터미널, Windows 는 PowerShell
데스크톱 앱 Mac · Windows 용 Claude Code 앱
웹 claude.ai/code
편집기 확장 VS Code · JetBrains
명령을 넣는 자리에 아래 한 줄을 붙여 넣으시면 됩니다. 터미널로
쓰시면 그 터미널이고, 앱·웹·확장으로 쓰시면 그 안의 명령 입력 칸입니다.
헷갈리기 쉬운 곳이 하나 있습니다. 대화만 하는 Claude 앱의 채팅창은
Claude Code 가 아닙니다. 거기에 붙여 넣으면 Claude 가 명령을 글로
읽고 설명만 해 줍니다.
터미널로 쓰실 때만 Node.js 가 따로 필요합니다. node -v 를 쳐서
v20.1.2 처럼 버전이 나오면 준비된 것입니다. "찾을 수 없습니다" 가
나오면 nodejs.org 에서 LTS 버전을 먼저 설치하십시오.
(앱·웹·확장에는 이미 들어 있습니다.)
macOS Spotlight(Command + 스페이스)에서 "터미널" 을 여십시오
Windows 시작 메뉴에서 "PowerShell" 을 여십시오
## 1. 넣기
npx skills add emilkowalski/skills/apple-design -g -a claude-code
성공하면 이 한 줄이 나옵니다.
Installed 1 skill → ~/.claude/skills/...
-g 는 계정 전체에 넣는다는 뜻입니다(~/.claude/skills).
어느 폴더에서 Claude Code 를 열든 쓸 수 있습니다.
빼면 지금 열려 있는 폴더에만 깔려서(./.claude/skills), 다른 데서
열면 스킬이 안 보입니다. "깔았는데 안 보인다" 는 대개 이것입니다.
-a claude-code 는 Claude Code 에만 넣는다는 뜻입니다.
빼면 전역 설치를 지원하지 않는 다른 도구 때문에 빨간
"Failed to install" 이 뜹니다. 실제로는 설치가 끝난 상태인데
실패한 것처럼 보여 여기서 멈추기 쉽습니다.
저장소에 스킬이 여러 개면 어느 것을 넣을지 물어봅니다.
미리 보시려면 --list 를 붙이십시오.
npx skills add emilkowalski/skills/apple-design --list
## 2. Claude Code 를 다시 시작합니다
이미 열어 두셨다면 끝내고 다시 여십시오.
실행 중인 세션은 시작할 때 읽은 목록을 그대로 씁니다.
터미널이면 claude 를 끝내고 다시 실행합니다.
데스크톱 앱·웹·편집기 확장이면 그 세션을 새로 엽니다.
대화만 하는 Claude 앱은 해당되지 않습니다 — 스킬이 들어가지 않습니다.
## 3. 확인
npx skills list -g
전역으로 넣은 스킬이 이름과 경로와 함께 나옵니다.
-g 를 빼면 지금 폴더의 스킬만 보이므로 "없다" 고 나올 수 있습니다.
## 4. 쓰기
"애플 스타일 인터페이스 디자인" 관련 작업을 시켜 보십시오.
스킬이 붙었다면 알아서 불러 씁니다.이렇게 시켜 보세요
넣고 나서 바로 던져 볼 수 있는 지시문입니다. 누르면 복사됩니다.
apple-design 스킬 사용법
처음 세 번은 이 순서로 시키십시오. 지시문을 누르면 복사됩니다.
-
나오는 것시트가 열리고 닫히는 스프링 곡선 값과 그것을 넣은 CSS·자바스크립트가 나옵니다. 왜 그 값인지는 WWDC 발표의 원칙을 근거로 답합니다.
다음같은 화면에서 한 단계 더 시킵니다. "드래그 제스처에 모멘텀과 관성을 넣어줘".
-
나오는 것요소별로 어긋난 곳을 짚습니다. 반투명 재질을 너무 넓게 쓴 곳, 타이포그래피 위계가 무너진 곳, 제스처가 없는 곳.
다음지적 가운데 두 개만 골라 고치게 시키십시오. 한꺼번에 다 고치면 무엇이 효과였는지 알 수 없습니다.
-
나오는 것움직임이 필요한 자리에만 값이 들어간 코드가 나옵니다.
다음화면 전체에 스프링과 반투명을 넣으면 느려지고 산만해집니다. 범위를 좁혀 시키는 것이 이 스킬을 쓰는 요령입니다.
알아 둘 것
WWDC 디자인 발표 내용을 웹 환경(CSS·자바스크립트)에 맞게 옮긴 것이라, 실제 애플 앱과 100% 같은 동작을 보장하지는 않습니다. 원칙을 웹에 적용한 근사치로 이해하는 편이 맞습니다.
apple-design 스킬 안 될 때 확인할 것
과하게 쓰면 무거워집니다
스프링 애니메이션과 반투명 재질을 화면 전체에 남발하면 오히려 느리고 산만해집니다.
브랜드 톤과 안 맞을 수 있습니다
애플 스타일이 모든 서비스에 어울리는 것은 아닙니다.
언제 쓰고, 언제 안 쓰나
버튼 하나까지 자연스럽게 움직이길 원할 때 씁니다. 이미 정해진 디자인 시스템이 있으면 그 쪽을 먼저 따르십시오.
비슷한 것 중에 왜 이걸
디자인 분야에서 이것과 겹쳐 보이는 게 셋 있는데 하는 일이 다릅니다. frontend-design 은 흔한 템플릿처럼 보이지 않게 방향을 잡아 주고, impeccable 은 이미 만든 화면에서 어색한 패턴을 사후에 잡아내며, ui-ux-pro-max 는 서비스 성격을 묻고 화면을 통째로 짜 줍니다. 이것의 성격은 출처가 있다는 데 있습니다. WWDC 발표에서 정리한 애플의 원칙을 웹에 옮긴 것이라, 왜 이렇게 했느냐는 질문에 근거를 댈 수 있습니다. 취향을 새로 만들고 싶은 경우에는 오히려 제약이 됩니다. 이름이 비슷한 apple-design-skill 과는 방향이 반대입니다. 이쪽은 웹 화면을 애플처럼 만드는 쪽이고, 저쪽은 이미 만든 앱 화면을 애플 기준으로 검사하는 쪽입니다.
UI·화면 감각 스킬 10종을 한자리에서 비교하기
성격이 다른 갈래로 먼저 나누고, 상황별 갈림길로 무엇을 고를지 정리해 두었습니다.
디자인 도구를 고를 때
Figma 등 디자인 툴과 연동합니다. 팀 플랜이 필요한 기능인지, 읽기 권한만 요구하는지 편집 권한까지 요구하는지 확인하세요.
원본 보기
스킬의 실제 내용은 SKILL.md 파일 하나에 들어 있습니다. 넣기 전에 한 번 읽어 보시는 것을 권합니다. 스킬은 Claude 에게 그대로 들어가는 지시문이라, 무엇을 시키는지 확인하지 않고 쓰면 의도치 않은 동작을 할 수 있습니다.
GitHub 에서 emilkowalski/skills 열기
이 작업에 쓰는 장비 제휴 링크
애플 기기에서 결과를 직접 보며 고치는 작업입니다.
이 페이지는 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다. 이용자가 내는 금액은 달라지지 않습니다.
별점과 댓글
이 스킬을 써 보신 분의 별점(5점 만점)과 한마디입니다. 작성자는 아이디 앞 3자만 보입니다(예: wor****). 읽는 데는 제한이 없고, 남기는 것은 로그인한 회원만 됩니다. 한 사람이 한 번이며 다시 쓰면 앞의 것을 덮어씁니다.
- 불러오는 중…
자주 묻는 것
애플 디자인 스킬(apple design skill)은 어떻게 설치합니까?
터미널에 npx skills add emilkowalski/skills/apple-design -g -a claude-code 한 줄이면 됩니다. -g 는 계정 전체에 넣는다는 뜻으로, 빼면 지금 열려 있는 폴더에만 깔려 다른 곳에서는 안 보입니다. -a claude-code 를 빼면 전역 설치를 지원하지 않는 다른 도구 때문에 빨간 실패 문구가 뜨는데 실제로는 깔린 상태라 헷갈립니다.
애플 디자인 스킬은 무엇을 합니까?
WWDC 디자인 발표에서 정리한 애플의 인터페이스·모션 원칙을 웹(CSS·JS)에 맞게 옮겼습니다. 제스처 기반 UI, 스프링 애니메이션, 드래그·스와이프·시트 인터랙션, 반투명 재질과 깊이감, 타이포그래피까지 다룹니다.
apple design skill 은 애플이 만든 것입니까?
아닙니다. emilkowalski/skills 저장소에 올라온 커뮤니티 스킬입니다. 애플이 WWDC 디자인 발표에서 밝힌 인터페이스·모션 원칙을 웹(CSS·JS)에 맞게 옮겨 정리했습니다.
애플 디자인 스킬은 언제 씁니까?
버튼 하나도 애플 앱처럼 자연스럽게 움직이게 만들고 싶을 때입니다. 버튼 하나까지 자연스럽게 움직이길 원할 때 씁니다. 이미 정해진 디자인 시스템이 있으면 그 쪽을 먼저 따르십시오.
애플 디자인 스킬을 쓸 때 걸리는 데가 있습니까?
과하게 쓰면 무거워집니다. 스프링 애니메이션과 반투명 재질을 화면 전체에 남발하면 오히려 느리고 산만해집니다. 브랜드 톤과 안 맞을 수 있습니다. 애플 스타일이 모든 서비스에 어울리는 것은 아닙니다.
함께 보면 좋은 스킬
어느 것부터 깔지 모르겠다면 클로드 스킬 추천 15개를 보십시오. 67개를 직접 깔아 보고 골랐습니다.