클로드 코드 스킬 ‘Anatomy’ — 아이디어 한 줄을 움직이는 기계 도해로, 직접 설치해 확인한 것

결론부터 말하면, 클로드 코드 스킬 Anatomy는 ‘네모와 화살표’ 대신 ‘움직이는 기계’로 개념을 설명하는 그림을 클로드 코드에게 그리게 하는 스킬이에요. 결과물은 보기 좋지만 그림 한 장에 30분에서 몇 시간이 걸리고, 클로드 코드 유료 요금제가 있어야 해요. AIMAG는 설치와 예제 빌드, 자체 테스트까지만 직접 돌려 봤고, 클로드에게 새 그림을 그리게 하지는 않았어요.

용어 두 개만 먼저 풀게요. 클로드 코드는 앤트로픽이 만든, 터미널에서 코드를 읽고 고치고 실행하는 AI 코딩 도구예요. 스킬은 클로드가 특정 일을 할 때 꺼내 읽는 작업 설명서와 보조 스크립트 묶음이에요.

Anatomy는 무엇을 해 주나요?

소개 사이트에 따르면 사용자는 그릴 대상을 정하지 않고 ‘아이디어’만 말해요. 예를 들어 “LRU 캐시가 항목을 내보내는 방식을 설명해 줘”라고 하면, 어떤 기계로 보여 줄지는 클로드가 정해요. 사이트 예시에선 LRU 캐시가 책장으로, 메시지 큐는 구슬이 줄 서는 레일로 그려졌어요(공식, Anatomy 소개 사이트). LRU 캐시는 가장 오래 안 쓴 데이터부터 지우는 임시 저장 방식이에요.

스킬 설명서의 맨 위 규칙은 “물체가 곧 설명이다(The object is the explanation)”예요. 그림 안에 상자, 화살표, 떠 있는 글자를 쓰지 말고, 실제로 움직이는 부품이 개념을 그대로 보여 주게 하라는 뜻이에요(공식, 깃허브 SKILL.md).

그림은 SVG(확대해도 깨지지 않는 벡터 그림)와 HTML로 나오고, 원하면 리액트 컴포넌트로도 받을 수 있어요. 명령에 interactive를 붙이면 마우스와 키보드에 반응하고, WebGL을 붙이면 불꽃·물 같은 효과가, 3D를 붙이면 부품이 실제로 입체 회전해요(공식, 소개 사이트).

그림 안의 숫자는 부품을 움직이는 같은 계산 모델에서 나온다는 게 이 스킬의 원칙이에요. 그래서 읽음값과 그림이 서로 어긋나지 않게 설계돼 있다고 개발자는 설명해요. 위 다이얼 그림에서 블록 높이 18과 읽음값 18.0 px가 맞는 것이 그 예예요(공식 설명 + 직접 실행 화면).

얼마나 걸리고, 무엇이 필요한가요?

개발자가 공개한 기준표로는 부품 40~80개짜리 ‘피규어’가 30~90분, 80~150개짜리 ‘히어로’가 2~4시간, 차량·건물급 ‘에픽’은 6시간 이상이에요. 실제 사례로 시계 무브먼트는 1시간 54분, 랩터 엔진은 10시간 33분이 걸렸다고 적었어요(공식, 개발자 측정, 소개 사이트).

이 시간은 모두 클로드가 일하는 시간이라 사용량이 그만큼 들어요. 클로드 코드는 무료 요금제엔 없고 모든 유료 요금제에 포함되며, 사용량은 웹·앱과 같은 한도를 나눠 써요(공식, 앤트로픽 요금제 페이지). 긴 그림 한 장이 한도를 얼마나 쓰는지는 공개된 자료가 없어요.

설명서의 호환성 항목에는 클로드 코드용으로 쓰였고 OpenCode·Codex에서도 돌아가며, Node.js 20.10 이상과 검사용 크롬(또는 크로미움)이 필요하다고 적혀 있어요(공식, SKILL.md).

AIMAG가 직접 설치해 보니

AIMAG는 리눅스 작업 환경(Node.js 20.19.2, 구글 크롬 설치됨)에서 설치와 예제 빌드를 직접 해 봤어요. 실제 사용자 폴더를 건드리지 않도록 시험용 홈 폴더를 따로 만들어 진행했어요. 클로드 코드 세션을 열어 새 그림을 시키는 단계는 하지 않았어요.

단계	실제로 실행한 명령	결과
1. 공식 설치 명령	npx skills add wheresryan22/anatomy	실패. 설치 도구 skills 1.7.2가 Node.js 22.20 이상을 요구해, 20.19.2에서는 시작하자마자 오류로 멈췄어요.
2. 직접 받아 넣기	git clone --depth 1 https://github.com/wheresryan22/anatomy.git ~/.claude/skills/anatomy	성공. 커밋 689dcf9, 용량 약 15MB. 클로드 코드가 읽는 스킬 폴더 위치예요.
3. 예제 다시 만들기	node examples/dial-indicator/build.mjs --light	0.16초에 끝났고, 만들어진 파일이 저장소에 있던 파일과 바이트 단위로 같았어요(MD5 일치).
4. 자체 테스트	저장소 CI와 같은 방식: 임시 폴더에 npm install --ignore-scripts react@19.3.0 react-dom@19.3.0 typescript@5.9.3 esbuild@0.28.2 후 node --test scripts/*.test.mjs	테스트 206개 모두 통과, 약 35.6초.
5. 화면 확인	크롬 헤드리스로 예제 HTML 캡처	위 다이얼 그림이 이 단계 결과예요.

정리하면 Node.js 버전이 낮으면 소개 사이트의 한 줄 설치 명령은 실패하지만, 깃허브에서 직접 받아 스킬 폴더에 넣는 방법은 문제없이 됐어요(직접 실행). 사이트가 안내하는 zip 내려받기 방법도 같은 폴더에 넣는 방식이에요.

한국 이용자에게는 어떤 의미가 있나요?

개발 문서, 기술 블로그, 강의 자료에 넣을 설명 그림을 직접 그리기 어려웠던 사람에게는 새로운 선택지예요. 특히 캐시·큐·TCP 연결처럼 눈에 안 보이는 개념을 설명할 때 쓸모가 있어요(추정).

다만 그림 바깥 글자(제목·설명)는 사용자가 정하지만, 예제와 결과물의 기본 글꼴과 문구는 영어 기준이에요. 한국어 제목을 넣었을 때 글꼴이 어떻게 나오는지는 확인하지 못했어요. 그리고 클로드 코드 유료 요금제가 필요하니, 그림 몇 장 때문에 새로 가입하기보다 이미 클로드 코드를 쓰는 사람에게 맞는 도구예요(추정).

대단한 점과 아쉬운 점

대단한 점	아쉬운 점·주의할 점
그림 속 숫자와 움직임이 하나의 계산 모델에서 나와 서로 어긋나지 않게 설계됐어요(공식, SKILL.md). 예제에서 실제로 읽음값이 블록 높이와 맞았어요(직접 실행).	개발자 스스로 “클로드는 그림을 잘 만들지만 늘 잘 보지는 못한다”고 적었어요. 숫자는 맞아도 모양이 어색할 수 있어 사람이 다시 봐야 해요(공식, 소개 사이트 한계 절).
자체 테스트 206개와 예제 재빌드가 그대로 통과해, 저장소가 관리되고 있는 상태로 보였어요(직접 실행).	좋은 그림일수록 느려요. 피규어 30~90분, 큰 그림은 10시간 넘게 걸린 사례가 있어요(공식, 개발자 측정).
MIT 라이선스라 스킬과 그림 모두 상업적으로도 쓸 수 있어요(공식, LICENSE).	3D 모드는 아직 베타예요. 부품 380개짜리 시험 그림은 초당 약 20프레임이었다고 해요(공식, 개발자 측정).
그림이 화면 밖으로 나가면 멈추고, 움직임 줄이기 설정을 따르며, 읽음값을 화면 낭독기에 알려 줘요(공식, 소개 사이트 FAQ).	스킬은 클로드가 내 컴퓨터에서 스크립트와 크롬을 실행하게 만들어요. 남이 만든 스킬은 설치 전에 설명서와 스크립트를 한 번 훑어보는 게 안전해요(추정, 일반 원칙).

확장성: 이걸로 무엇을 해 볼 수 있나요?

클로드 코드의 동작을 사용자 코드로 바꾸는 방법은 클로드 코드 Mods 기사에서 볼 수 있어요. 스킬은 그보다 가벼운 방식으로, 설명서와 예제를 폴더에 넣어 두면 요청이 맞을 때 클로드가 알아서 꺼내 써요(공식, 소개 사이트).

그림은 리액트 컴포넌트 묶음(npm 패키지 anatomy-figures 0.1.0, MIT)으로도 나와 있어서, 개발자가 만든 33개 그림 가운데 필요한 것을 바로 웹페이지에 넣을 수도 있어요(공식, 소개 사이트). 개발 문서·교육 자료·랜딩 페이지 그림이 주된 쓰임새예요(추정).

최근 클로드 코드 자체의 변경 사항은 클로드 코드 업데이트 2.1.293~2.1.296 기사에서 볼 수 있어요.

아직 모르는 것

• 그림 한 장을 만드는 데 클로드 사용 한도가 얼마나 드는지는 공개된 수치가 없어요.
• 한국어 제목·설명을 넣었을 때 글꼴과 배치가 어떻게 나오는지는 확인되지 않았어요.
• OpenCode·Codex에서도 돈다고 적혀 있지만, 결과 품질이 클로드 코드와 같은지는 자료가 없어요.
• 개인 프로젝트라 앞으로 얼마나 오래 관리될지는 알 수 없어요.

자주 묻는 질문

클로드 코드 스킬 설치 방법은?

Anatomy README가 클로드 코드용 기본 명령으로 안내하는 형태는 npx skills add wheresryan22/anatomy -g -a claude-code예요. -g는 내 사용자 계정 전체에 설치하고, -a claude-code는 클로드 코드에만 설정한다는 뜻이에요. 이 설치 도구는 Node.js 22.20 이상이 필요해서, AIMAG 환경(20.19.2)에서는 실패했어요. 그럴 땐 저장소를 받아 ~/.claude/skills/anatomy 폴더에 넣으면 되고, 이 방법은 직접 해서 성공했어요.

클로드 스킬이란?

클로드가 특정 작업을 할 때 읽는 설명서(SKILL.md)와 예제·스크립트 묶음이에요. Anatomy 소개 사이트에 따르면 요청이 맞기 전까지 클로드는 스킬의 이름과 짧은 설명만 보고, 필요할 때 나머지를 읽어요.

아이소메트릭 뜻은?

물체를 비스듬한 위쪽 모서리에서 내려다본 것처럼 그리는 방식이에요. 원근감 없이 평행한 선은 계속 평행하게 그려서, 기계 도면이나 설명 그림에 많이 써요. Anatomy는 모든 그림을 30° 시점의 아이소메트릭으로 그려요.

출처

1. Ryan(@wheresryan22), “Anatomy · a skill for Claude Code” 소개 사이트 (게시일 표기 없음, 확인 2026-10-12) — 링크
2. GitHub, wheresryan22/anatomy 저장소·SKILL.md·LICENSE(MIT) (저장소 생성 2026-10-08 UTC, 확인 2026-10-12 11:30 KST, 별 3,534개) — 링크
3. npm, anatomy-figures 0.1.0 (게시 2026-10-10 KST, 확인 2026-10-12) — 링크
4. Anthropic, Claude 요금제 페이지 (게시일 표기 없음, 확인 2026-10-12 11:52 KST) — 링크
5. AIMAG 직접 실행 기록: 설치·예제 재빌드·테스트 206개 (실행 2026-10-12 11:10~11:20 KST, Node.js 20.19.2, 커밋 689dcf9)

대표 화면: Anatomy

구글 검색에서 AIMAG 소식을 먼저 보려면

AI 보조 초안 · 편집부 검수