클로드 스킬 Anatomy(아나토미) 사용법: 아이소메트릭 설명 그림, 스킬 없이 7점·있이 10점, 대신 14분·2달러

블로그나 문서에 넣을 설명 그림을 클로드에게 맡기면 대개 네모 상자와 화살표, 버튼이 있는 평면 화면이 나옵니다. Anatomy(아나토미)는 기술 개념을 실제 기계처럼 생긴 아이소메트릭(입체) 그림으로 만들고, 눌러 보면 움직이게 해 주는 클로드 코드용 스킬(클로드에게 일하는 방법을 알려 주는 설명서 파일)입니다. 스킬은 무료지만 그림 하나에 클로드 사용량이 꽤 듭니다. “토큰 버킷” 설명 그림을 같은 요청으로 스킬 없이·있이 2번씩 만든 기록입니다.

결과부터 보기: 같은 요청으로 4번 만든 설명 그림

요청은 “API 요청 제한(레이트 리밋)의 토큰 버킷 방식”을 독자가 눌러 보며 이해하게 해 달라는 것이었습니다. 요청문에 “입체”, “아이소메트릭”, 스킬 이름은 넣지 않았습니다. 영상은 요청문, 스킬 없이 만든 그림, Anatomy로 만든 그림 2개, 결과 표 순서입니다.

직접 눌러 보기: 토큰 버킷 그림 4개. 4개 결과 파일을 손대지 않고 올렸습니다. “요청 보내기”를 여러 번 누르면 토큰이 바닥나고 요청이 거절되는 장면을 볼 수 있습니다.

Anatomy 스킬에 들어 있는 것

스킬 설명서 SKILL.md가 정한 원칙은 하나입니다. “물건이 곧 설명”이라는 것입니다. 상자·화살표·라벨 대신, 그 개념대로 움직이는 진짜 같은 기계를 지어서 보여 주라고 적혀 있습니다. 예를 들어 캐시 키는 핀 자물쇠로, 여러 화면을 도는 GPU 작업은 웰 16개를 오가는 플로터로 그립니다.

저장소에는 SKILL.md 말고도 그림을 짓는 도구가 같이 들어 있습니다. 모두 Node.js 기본 기능만 써서 따로 설치할 것이 없습니다.

들어 있는 것	하는 일
kit/iso-kit.mjs·iso-kit.ts	입체 카메라, 판·원기둥·나사·눈금 같은 부품, SVG 그리기, 카드 틀과 페이지 만들기
kit/lathe.mjs·tube.mjs	둥근 부품(플랜지·밸브), 파이프와 케이블
kit/gl.mjs	그림 안에 들어가는 웹GL 효과(불꽃·물·조명)
kit/turn*.mjs	3D로 돌아가는 그림(베타)
scripts/capture.mjs·drive.mjs	크롬을 화면 없이 띄워 데스크톱·휴대폰 폭 캡처, 클릭·키 입력 순서대로 찍기
scripts/lines.mjs	선 끝 검사. 모든 선이 다른 선이나 점에서 끝나는지 보고 어긋난 곳에 동그라미
kit/audit.mjs(–audit)	파이프·케이블·둥근 부품이 서로 뚫고 지나가지 않는지 증명
scripts/print.mjs	그림을 A4·레터 PDF(포스터·도면·상세 3가지)로 인쇄
examples/ 9개	다이얼 게이지, 오락실 게임기, 로켓 엔진, 물결 수조 등 완성 예제

SKILL.md의 작업 순서는 크기 정하기부터 시작합니다. 부품 40~80개의 “Figure”는 묻지 않고 바로 만들고, 80~150개의 “Hero”는 2~4시간쯤 걸린다고 먼저 알립니다. 6시간이 넘는 “Epic”은 시작하지 않고 작은 안을 제안합니다. 그다음 부품 목록을 쓰고, 기하를 짓고, 뒤에서 앞 순서로 칠하고, 카드 틀(왼쪽 위 Fig 번호, 오른쪽 위 제목, 아래 안내 문구와 실시간 수치)에 넣고, 움직임을 붙이고, 확대 캡처와 검사로 마무리합니다. 움직임은 화면 밖에 있으면 멈추고, 컴퓨터의 “동작 줄이기” 설정이 켜져 있으면 정지하게 되어 있습니다.

만든 그림을 만든 사람의 커뮤니티 갤러리에 올리는 기능도 있습니다. 안내 파일(references/publish.md)에 “사용자가 요청하고 예라고 할 때만” 올린다고 적혀 있고, 이번 4번에서는 갤러리 쪽으로 아무것도 보내지 않았습니다.

따라 해 보기: 요청문과 실습 재료

빈 폴더에서 클로드 코드를 열고 보낸 요청입니다.

블로그 글에 넣을 설명 그림을 하나 만들어 줘. 주제는 "API 요청 제한(레이트 리밋)의 토큰 버킷 방식"이야. 버킷에 토큰이 일정 속도로 채워지고, 요청이 올 때마다 토큰을 하나 쓰고, 토큰이 없으면 요청이 거절되는 원리를 독자가 눌러 보며 이해할 수 있게 해 줘. 결과는 이 폴더에 index.html 하나로, 인터넷 연결 없이 브라우저에서 바로 열리게 만들어 줘.

좋은 답이라면 버킷이 실제 물건처럼 보이고, 버튼을 연달아 누르면 토큰이 0이 되며 요청이 거절되고, 시간이 지나면 토큰이 다시 차되 정해진 개수를 넘지 않습니다. 실습 재료(zip)에는 요청문, 채점 기준, 채점 스크립트, 4개 결과 파일, 스킬이 만든 빌드 스크립트 2개를 넣었습니다.

1단계. Anatomy 설치 (약 1분)

이 단계에서는 Anatomy를 지금 프로젝트에만 넣습니다. 터미널에서 그림을 만들 프로젝트 폴더로 옮긴 뒤 실행합니다.

git clone --depth 1 https://github.com/wheresryan22/anatomy.git .claude/skills/anatomy

이렇게 나오면 성공 폴더 안에 SKILL.md, kit, scripts, examples가 보입니다. 클로드 코드를 이 폴더에서 다시 열면 스킬 목록에 anatomy가 잡힙니다.

• 모든 프로젝트에서 쓰려면: 저장소 안내대로 npx skills add wheresryan22/anatomy -g -a claude-code(~/.claude/skills/anatomy에 들어감). 이번에는 실행하지 않았습니다.
• node --version이 20.10보다 낮으면: 그림은 만들어도 검사 스크립트가 제대로 돌지 않습니다. Node.js를 올립니다.
• 코덱스·안티그래비티·오픈코드에서도 같은 SKILL.md를 읽는다고 안내되어 있습니다(저장소 안내 기준, 이번에는 클로드 코드만 써 봄).

필요 없어지면 .claude/skills/anatomy 폴더를 지우면 됩니다. 클로드 코드를 처음 깐다면 클로드 코드 설치 방법부터 보세요.

2단계. 같은 요청을 스킬 없이·있이 보내기 (스킬 있이 약 14분)

이 단계에서는 위 요청문을 스킬이 없는 폴더와 Anatomy를 넣은 폴더에서 2번씩 보냅니다. 채점 기준 10가지는 실행 전에 SKILL.md와 README에서 뽑아 고정했습니다.

1. index.html이 인터넷 없이 열리고 오류가 없나
2. 외부 주소(글꼴·CDN)를 부르지 않나
3. 상자·화살표 도식이 아니라 실제 물건으로 원리를 보여 주나
4. 아이소메트릭(입체) 그림인가
5. 부품이 많고 정밀한가(SVG 도형 200개 이상)
6. 제목·안내 문구·실시간 수치가 있는 카드 틀인가
7. 눌러 보면 그림과 수치가 함께 바뀌고, 요청이 거절되는 상태를 만들 수 있나
8. 움직임이 부드럽고 “동작 줄이기” 설정을 따르나
9. 원리가 맞나(일정 속도로 채움, 요청 1번에 1개, 0이면 거절, 용량 넘게는 안 참)
10. 휴대폰 폭(390px)에서 가로로 넘치지 않나

조건	스킬이 불렸나	점수 1·2	SVG 도형	걸린 시간	비용 1·2(달러)
스킬 없이	–	7 · 7	0 · 0	1분 안팎	0.30 · 0.19
Anatomy 넣은 폴더	2번 모두 저절로	10 · 10	735 · 800	14분쯤	2.27 · 2.38

3·4·5번은 스킬이 노리는 것이라 스킬 없이는 처음부터 불리한 기준입니다. 나머지 7개는 두 쪽 모두 통과했습니다. 스킬 없이 만든 2번이 놓친 것도 바로 이 3·4·5번입니다. 화면은 HTML과 CSS로 그린 네모난 버킷과 동그라미 토큰이고, 2번째는 수도꼭지와 모니터를 이모지로 넣었습니다. 요청 보내기 버튼, 충전 속도 조절, 거절(429) 표시, 동작 줄이기 처리는 4번 모두 갖췄습니다. 스킬을 넣은 폴더에서는 요청에 스킬 이름이 없었는데도 2번 모두 첫 동작으로 anatomy 스킬을 불렀습니다.

3단계. 스킬이 만든 그림 확인하기 (약 3분)

이 단계에서는 결과 그림을 눌러 보고, 스킬에 들어 있는 검사로 마무리가 됐는지 봅니다.

1번째 그림은 다이얼이 한 바퀴 돌 때마다 코인이 투명 통으로 떨어지는 급탄기입니다. 요청 상자가 레일을 따라 오면 밀대가 맨 아래 코인을 투입구로 밀어 넣고 차단기가 열립니다. 통이 비면 차단기가 닫힌 채 빨간 불이 켜지고, 상자가 레일 밖으로 튕겨 나갑니다. 2번째 그림은 시계 바늘이 달린 노즐, 원판 토큰이 쌓이는 막대 우리, 플런저와 차단기로 같은 원리를 보여 줍니다. 버킷이 가득 차 있을 때 나온 토큰은 OVERFLOW 구멍으로 버려집니다.

“연속 20건”이나 “한꺼번에 5개”를 눌러 두면 몇 초 안에 거절 수가 올라갑니다. 1번째 그림은 연속 20건을 누르고 조금 지나자 수치가 통과 14·거절 6이 됐습니다. 2번째 그림은 한꺼번에 5개를 3번 누르자 거절이 2건 생겼습니다(둘 다 자동 시연 요청이 섞인 값입니다). 아무것도 누르지 않으면 요청이 저절로 오가는 시연이 돌고, 누르면 잠시 멈춥니다.

스킬은 그림을 만든 뒤 선 끝 검사를 스스로 돌려 고쳤습니다. 1번째는 3곳, 5곳, 2곳으로 걸리다가 0이 됐고, 2번째는 처음 142곳에서 1곳을 거쳐 0이 됐습니다. 결과 폴더에서 같은 검사를 다시 돌린 화면입니다.

실행 기록 · <작업 폴더>/runs/with-1 · 결과 그림 선 끝 검사

$ node .claude/skills/anatomy/scripts/lines.mjs index.html
line ends: 0 of 842 ends on 71 lines float
console: clean

이렇게 나오면 성공 line ends: 0(허공에 뜬 선 끝 0개)과 console: clean(브라우저 오류 없음)이 나옵니다.

• line ends가 0이 아니면: 같이 만들어지는 동그라미 표시 이미지(--out shots/lines.png)를 열어 보고 “선 끝 검사에서 걸린 곳을 고쳐 줘”라고 요청합니다.

하나 알아 둘 점이 있습니다. 두 번 모두 결과 폴더에는 index.html만 남았고, 그림을 다시 짓는 빌드 스크립트(build.mjs)는 클로드 코드의 임시 폴더에 저장됐습니다. 나중에 그림을 고칠 생각이면 요청문 끝에 “빌드 스크립트도 이 폴더에 저장해 줘”를 붙이는 편이 낫습니다.

이런 사람에게 권합니다

• ✅ 기술 블로그·개발 문서·랜딩 페이지에 “어떻게 동작하는지” 보여 주는 그림이 필요한 사람. 같은 요청에 스킬 없이는 평면 도식, Anatomy로는 눌러 보는 입체 기계가 나왔습니다.
• ✅ 오래 두고 쓸 대표 그림이 필요한 사람. 오래 걸리고 사용량도 많이 들지만, 스킬이 캡처와 선 끝 검사로 스스로 손봅니다.
• ❌ 막대그래프·표 같은 데이터 그림이 필요한 사람. README 한계에 “차트 라이브러리가 아니다”, 사람이나 정확한 지도는 그리지 않는다고 적혀 있습니다.
• ❌ 빨리 개념만 보여 주면 되는 사람. 스킬 없이 만든 평면 도식도 원리·조작·거절 표시는 다 갖췄습니다.

한계와 주의할 점

• 그림 속 글자는 영어로 나왔습니다(REQ, CLIENT, 200 OK 등). 버튼과 설명은 한국어였습니다. 한국어 표식이 필요하면 요청에 적어야 합니다.
• 토큰 버킷 하나, Sonnet 5.5, 조건마다 2번씩입니다. 부품이 많은 “Hero”급이나 웹GL 효과를 넣으면 시간과 비용이 더 듭니다. README도 “일부러 느리다”고 적어 두었습니다.
• 2번째 실행은 “모든 부분을 4배 확대로 확인하지는 않았다”고 스스로 밝혔습니다. SKILL.md가 요구하는 확대 점검을 Sonnet 5.5가 다 하지는 않았습니다.
• 1번째 그림은 밀대 한 번에 시간이 걸려 요청이 몰리면 초당 약 3건으로 처리 속도가 제한된다고 스스로 알렸습니다. 기계 움직임이 실제 알고리즘보다 느릴 수 있습니다.
• 3D로 돌아가는 모드는 베타라고 README에 적혀 있습니다. 이번에는 쓰지 않았습니다.

대안

방법	다른 점	이럴 때 고르세요
Anatomy(이 글)	개념을 실제 기계 모양의 입체 SVG로 짓고 검사로 다듬음	글의 대표 그림, 오래 쓸 설명 그림
스킬 없이 요청	1분 안팎, HTML·CSS 평면 도식	개념만 빨리 보여 주면 될 때
frontend-design 스킬	화면 디자인 전반(글꼴·색·배치)을 다듬음	설명 그림이 아니라 웹페이지 전체를 만들 때

스킬이 무엇이고 어떻게 넣는지는 클로드 스킬 사용법에 정리했습니다.

자주 묻는 질문

아이소메트릭 그림이 뭔가요?

세 축을 같은 각도로 기울여 위에서 비스듬히 내려다본 것처럼 그리는 입체 그림입니다. 원근감 없이 크기가 일정해서 설명용 도해에 많이 씁니다.

클로드 앱(claude.ai)에서도 되나요?

저장소 안내는 클로드 코드, 코덱스, 안티그래비티, 오픈코드, 미니맥스 코드만 적어 두었습니다. 검사에 Node.js와 크롬이 필요해서 이번에는 클로드 코드에서만 써 봤습니다.

만든 그림을 블로그에 어떻게 넣나요?

결과는 외부 파일이 없는 HTML 한 장입니다. 이 글의 데모처럼 서버에 올려 링크하거나, 블로그가 HTML 삽입을 지원하면 iframe으로 넣습니다. SVG 파일 하나만 원하면 요청에 그렇게 적으라고 README에 나와 있습니다.

스킬 이름을 꼭 불러야 하나요?

이번에는 이름 없이 “설명 그림을 만들어 줘”라고만 해도 2번 모두 불렸습니다. 확실히 부르려면 요청 앞에 /anatomy를 붙입니다.

출처

wheresryan22/anatomy 저장소(README·SKILL.md·CHANGELOG·references/publish.md, 커밋 1482e84) (2026-10-21 확인)