핵심 요약
- Anatomy는 기술 개념을 상자와 화살표 대신, 그 개념대로 움직이는 가상의 기계 그림으로 만드는 에이전트 스킬입니다. 예를 들어 LRU(Least Recently Used) 캐시는 4칸짜리 책장이 되고, 블룸 필터는 릴 3개짜리 슬롯머신이 됩니다.
- Claude Code를 기준으로 작성됐고 Antigravity, OpenCode, Codex, MiniMax Code에서도 동작하며, 결과물은 Node 빌드 스크립트와 HTML 페이지, 단독 SVG, React 컴포넌트 같은 소스 코드로 남습니다.
- 기하 감사(audit), 선 끝 검사, 헤드리스(headless) Chrome 스크린샷처럼 에이전트가 자기 그림을 스스로 검증하는 도구가 함께 들어 있습니다.
- 큰 그림일수록 작업 시간이 길어집니다. 저자가 공개한 에이전트 작업 시간은 시계 무브먼트 1시간 54분, Raptor 엔진 10시간 33분이며, 3D 모드는 아직 베타입니다.
Anatomy 소개
블로그나 기술 문서에서 시스템의 동작을 설명할 때 가장 흔히 쓰는 그림은 상자와 화살표입니다. 상자는 구성 요소가 있다는 사실을 알려주지만 그 구성 요소가 무엇을 하는지는 보여주지 못하고, 화살표가 뜻하는 움직임은 독자가 머릿속으로 그려야 합니다. 이번에 소개하는 Anatomy는 이 문제를 반대 방향에서 접근하는 에이전트 스킬(Agent Skill)입니다. 설명할 개념을 그대로 수행하는 기계를 에이전트가 직접 발명하고, 그 기계를 조작할 수 있는 아이소메트릭(isometric) 그림으로 만들게 합니다.
Anatomy가 가장 먼저 지키는 규칙은 "The object is the explanation." 으로, 그림 속 물체 자체가 설명이어야 한다는 원칙입니다. 바뀐 것이 없을 때 작업을 건너뛰는 캐시 키는 모든 핀이 맞을 때만 돌아가는 핀 텀블러 자물쇠가 됩니다. GPU 컨텍스트 하나가 여러 캔버스를 처리하는 구조는 프린트 헤드 하나가 16개 웰을 오가는 갠트리 플로터가 됩니다. 그림은 수십에서 수백 개의 작은 입체 부품으로 조립되고, 제목과 조작 안내, 실시간 수치(readout)가 붙은 카드 안에서 포인터와 키보드에 반응합니다. 그림에 표시되는 모든 수치는 부품을 움직이는 것과 같은 작은 모델에서 나오므로, 움직임과 숫자가 서로 어긋나지 않습니다.
Anatomy는 Ryan(@wheresryan22)이 공개한 스킬로, 2026년 10월 8일 공개 저장소로 전환되기 전까지 isometric-objects라는 이름으로 개발됐습니다. Claude Code를 기준으로 작성됐지만 Agent Skills (
Anthropic, Agent Skills 표준을 AAIF에 기증: SKILL.md는 그대로, 배포와 보안은 남은 과제) 형식을 따르므로 Antigravity, OpenCode, Codex, MiniMax Code에서도 불러올 수 있습니다. 저장소에는 에이전트가 읽는 SKILL.md, 아이소메트릭 카메라와 부품 라이브러리를 담은 kit/, 긴 참고 문서인 references/, 헤드리스 Chrome 검사 스크립트, 그리고 완성된 예제 8개가 들어 있습니다. 위 그림은 그중 Raptor 2 엔진 예제로, 엔진과 시험대는 SVG로 그리고 배기 화염만 같은 아이소메트릭 카메라를 쓰는 WebGL 셰이더로 그립니다.
Anatomy와 다른 다이어그램 스킬 비교
PyTorchKR에서 소개한 다이어그램 계열 에이전트 스킬은 대부분 상자와 연결선으로 된 도식을 더 잘 그리는 데 초점을 둡니다. Anatomy는 도식을 그리지 않는다는 점에서 출발점이 다릅니다. 아래 표는 각 저장소의 현재 README를 기준으로, 각 스킬이 무엇을 그리고 결과를 어떤 형태로 남기며 무엇에 공을 들였는지를 정리한 것입니다:
| 항목 | Anatomy | Diagram Design | drawio-skill | Archify |
|---|---|---|---|---|
| 그리는 것 | 개념대로 움직이는 가상의 기계 | 아키텍처, 플로우차트 등 45가지 도식 | ERD, 시퀀스, C4, 아키텍처 등 11가지 프리셋 도식 | 아키텍처, 워크플로, 시퀀스 등 10가지 도식과 설명 페이지 |
| 결과물 | Node 빌드 스크립트와 HTML 페이지, 단독 SVG, React 컴포넌트 | 자체 완결형 HTML과 SVG | 편집 가능한 .drawio와 PNG/SVG/PDF, 인터랙티브 HTML 뷰어 |
단독 HTML 파일과 PNG/WebP/JPG 이미지, PDF |
| 움직임 | interactive를 요청하면 포인터와 키보드에 반응하고 실시간 수치 표시 |
정적 그림 | 애니메이션 데이터 흐름 SVG 내보내기 | 경로 추적 같은 탐색 기능과 모션 형식 내보내기 |
| 공을 들인 부분 | 기하 감사와 선 끝 검사로 그림 자체를 검증 | 사용자 사이트의 색과 글꼴을 읽어 브랜드에 맞춤 | 코드, Terraform, OpenAPI 등에서 도식을 만들고 변경을 추적 | 타입이 정의된 JSON 중간 표현과 레이아웃 검증기 |
선택 기준은 그림이 무엇을 전달해야 하는가입니다. 여러 서비스의 연결 관계처럼 구조 자체를 보여줘야 한다면 도식형 스킬이 맞고, Anatomy 저자도 만들 메커니즘이 없는 아이디어는 결과가 약해진다고 한계 항목에 적어 두었습니다. 반대로 토큰 버킷 레이트 리미터나 언어 모델의 온도(temperature)처럼 시간에 따라 상태가 바뀌는 동작을 설명하는 것이 Anatomy가 노리는 영역입니다.
Anatomy를 사용하면 좋을 사용자
기술 블로그, 문서 사이트, 강의 자료에 알고리즘이나 시스템의 동작을 독자가 직접 조작해 볼 수 있는 그림으로 넣고 싶은 작성자에게 Anatomy가 맞습니다. 결과물이 소스 코드로 남고 부품과 수치, 움직임이 같은 모델을 읽으므로, 숫자 하나를 고쳐 그림 전체를 갱신하는 식으로 직접 유지보수할 수 있습니다. 다만 큰 그림은 에이전트 작업이 열 시간을 넘기고, 저자에 따르면 48시간 넘게 걸리며 토큰을 모두 소진하는 렌더링도 있습니다(#41). 구조도 한 장을 빨리 그려야 하거나 데이터 차트가 필요한 경우에는 Anatomy가 적절한 선택지가 아닙니다.
Anatomy의 작업 흐름
Anatomy의 SKILL.md는 에이전트에게 10단계 작업 순서를 지시합니다. 핵심은 앞의 네 단계로, 기하 도형을 하나도 그리기 전에 실제 수치를 모으고, 개념에 맞는 기계를 정하고, 부품 목록부터 작성하게 합니다:
- 크기 정하기: Figure, Hero, Epic 중 하나로 규모를 정합니다.
- 사실 먼저: 크기, 개수, 임계값 같은 실제 수치를 작은 순수 모듈로 작성하고, 실시간 수치와 움직임과 캡션이 모두 이 모델을 읽게 합니다.
- 물체 발명: 개념과 일대일로 대응하는 기계, 도구, 계기, 가구를 고르고, 무엇이 움직이고 그 움직임이 무엇을 뜻하는지 한 문장으로 적습니다.
- 부품 목록: 받침, 구조, 메커니즘, 조작부, 강조 대상으로 나눠 최소 40개 부품을 적습니다.
- 공간 계획: 월드 단위, 평면 배치, 카메라를 정합니다.
- 기하 계산: 정적인 경로는 모두 미리 계산하고, 움직이는 부품은 정지 위치에서 만든 뒤 이동시킵니다.
- 뒤에서 앞으로 칠하기: 화가 알고리즘(painter's algorithm) 순서로 그리고, 다른 부품을 감싸는 부품은 앞뒤 두 조각으로 나눕니다.
- 카드 구성: 그림 번호, 제목, 조작 안내, 실시간 수치를 카드 네 모서리에 둡니다.
- 움직임 부여: 시간 기반의 차분한 움직임과 아무도 만지지 않을 때 도는 기본 투어를 넣습니다. 화면 밖으로 나가면 멈추고, 실시간 수치는 바뀔 때마다 스크린 리더에 전달되며, 동작 줄이기(reduced motion) 설정에서는 움직임만 멈추고 입력에는 계속 반응합니다.
- 비평가처럼 검증: 스크린샷, 감사, 4배 확대 점검을 문제가 없을 때까지 반복합니다.
첫 단계의 규모 구분은 작업 시간과 진행 방식을 함께 정합니다. 아래 표는 현재 SKILL.md 기준입니다:
| 규모 | 내용 | 진행 방식 |
|---|---|---|
| Figure | 메커니즘 하나, 부품 40~80개, WebGL 레이어 최대 1개 | 묻지 않고 바로 만들며 예상 시간은 알리지 않음 |
| Hero | 부품 80~150개, WebGL 레이어 여러 개 또는 3D 대상 하나 | 약 2~4시간이 걸린다고 알린 뒤 진행 |
| Epic | 차량, 건물, 플랜트 전체 또는 3D 대상 여러 개 | 6시간 이상이므로 시작하지 않고 Hero 버전을 먼저 제안 |
홈페이지의 같은 표에는 Figure가 30~90분으로 적혀 있지만, 실제로는 훨씬 빨리 끝나는 경우가 많아(#41에는 10분 안에 끝났다는 보고가 있습니다) 아직 릴리스되지 않은 변경에서 Figure는 예상 시간을 알리지 않도록 바뀌었습니다(CHANGELOG). 모든 규모에서 첫 한 시간 안에 브라우저에서 열리는 동작 페이지를 만들고, 나머지 시간은 그 그림을 다듬는 데 씁니다.
카메라 기본값은 방위각 45도, 앙각 30도입니다. 저자는 엄밀히 말하면 이 각도가 아이소메트릭이 아니라 다이메트릭(dimetric) 투영이고, 진짜 아이소메트릭은 약 35.264도에서 내려다본다고 제작 과정 문서에서 부연하고 있습니다. 30도에서는 바닥의 모서리가 가로 2픽셀마다 세로 1픽셀씩 올라갑니다.
Anatomy의 검증 도구
에이전트는 자기가 작성한 코드가 화면에 어떻게 그려지는지 직접 볼 수 없습니다. Anatomy는 이 한계를 메우기 위해 모든 검사가 그림, 숫자 한 줄, 종료 코드처럼 에이전트가 읽을 수 있는 결과로 끝나게 했습니다. 검사 도구는 세 가지입니다:
- 기하 감사:
kit/audit.mjs는 부품마다 실제 3D 형상을 기록하고, 화면에서 겹치는 모든 쌍에 광선을 쏴 어느 쪽이 앞인지 측정해 그리는 순서를 정합니다. 파이프가 다른 물체를 관통하지 않는지, 모든 끝이 받침에 닿아 있는지도 함께 검사합니다. - 선 끝 검사:
scripts/lines.mjs는 모든 선이 면, 다른 선, 점 위에서 끝나는지 브라우저에서 확인하고, 공중에서 끝나는 선이 하나라도 있으면 실패합니다. - 스크린샷과 컨택트 시트:
scripts/capture.mjs와scripts/drive.mjs는 헤드리스 Chrome으로 스크린샷, 확대 이미지, 느리게 재생한 프레임을 이어 붙인 한 장의 시트를 만들고, 스킬은 에이전트에게 만든 PNG를 모두 열어 보라고 지시합니다.
기하 감사는 Raptor 엔진 예제에서 시작됐습니다. 저자의 제작 과정 문서에 따르면 첫 버전은 원래 크기에서는 멀쩡해 보였지만, 4배로 확대하자 케이블이 주 덕트를 관통하고 노즐 음영이 계단처럼 끊겨 있었습니다. 처음 실행한 감사에서는 간섭(clearance) 문제 54건과 그리는 순서 문제 323건이 나왔고, 배포 상태에서는 두 수치 모두 0건입니다. 그리는 순서는 손으로 정한 값 대신 감사가 측정한 값을 쓰도록 바꿨습니다. 아래 그림은 같은 시점의 Raptor 엔진입니다. 왼쪽은 케이블이 덕트를 가로지르고 노즐 음영이 계단처럼 보이는 10월 4일 첫 라운드이고, 오른쪽은 케이블을 클램프로 묶은 10월 6일 배포 상태입니다:
저자는 큰 그림을 에이전트 하나에 맡기지 않고, 빌더와 서로 다른 관점의 리뷰어, 수정 담당으로 나눠 아무것도 발견되지 않을 때까지 라운드를 반복했습니다. 리뷰어는 빌더의 보고를 그대로 믿지 않고 페이지를 직접 빌드한 뒤 감사를 다시 실행하고 스크린샷을 찍었습니다. 터보팬 그림의 세 차례 리뷰에서는 스크린샷 309장이 남았습니다. 저자는 두 자동 검사의 한계도 "The audit sees geometry and never the markup; the line check sees markup and never depth. Neither replaces looking." 이라고 적어 두었습니다. 감사는 형상만, 선 검사는 마크업만 보므로 두 검사 모두 눈으로 확인하는 단계를 대신하지 못합니다.
Anatomy가 만드는 그림의 종류
Anatomy가 만드는 그림은 세 종류이고, 모두 같은 키트와 카메라, 같은 작업 규칙을 공유합니다. 각 종류의 특징과 저장소 예제는 다음과 같습니다:
| 종류 | 내용 | 예제 |
|---|---|---|
| SVG | 4단계 음영의 입체 부품을 뒤에서 앞으로 칠하고 실시간 수치 카드에 담습니다. 단독 HTML 페이지, 스타일을 포함한 단독 .svg, React/Next.js 컴포넌트로 출력합니다. |
dial-indicator, desk-computer, arcade-cabinet, test-rig |
| SVG + WebGL | 선으로 그릴 수 없는 불, 배기, 물, 빛을 앞뒤 SVG 사이의 캔버스에서 같은 카메라로 렌더링합니다. WebGL이 없어도 SVG 부분은 그대로 보입니다. | raptor-engine, ripple-tank |
| 3D (베타) | 돌아가는 다이얼, 구부러지는 손가락처럼 깊이 방향으로 실제 회전하는 부품을 매 프레임 다시 투영하고 음영을 다시 계산합니다. | turning-dial |
홈페이지에 따르면 결과를 바꾸는 단어는 interactive, WebGL, 3D 세 개이고, 프롬프트에 직접 적어야 적용됩니다. interactive를 빼면 정지된 그림이 나오고, 3D는 몇 분이 아니라 몇 시간 단위의 작업이 된다고 안내합니다. 인쇄용 버전을 요청하면 같은 페이지와 모델에서 A4 또는 US Letter PDF를 포스터(1쪽), 기술 도면(1쪽), 설명 자료(2~4쪽) 세 형식으로 만들며, 모든 형식은 흑백으로 인쇄해도 읽히도록 구성됩니다.
컬렉션 첫 화면의 시계 무브먼트는 /anatomy explain how a mechanical watch keeps time, interactive 한 줄에서 시작해 SVG만으로 그린 그림입니다. 지름 25.6mm인 ETA 2824-2 계열 스위스 자동 무브먼트를 재현했고, 밸런스가 초당 4번 진동하며 팰릿 포크(pallet fork)가 이스케이프 휠(escape wheel)을 1초에 8번 반 톱니씩 놓아 주므로 초가 1/8초씩 끊어서 넘어갑니다. 아래 영상은 이 라이브 그림을 브라우저에서 녹화한 것입니다. S 키로 1/20 속도로 늦추면 실시간 수치의 초가 1.250에서 1.375로 한 칸 넘어갑니다. E 키를 누르면 브리지가 들어 올려지며(lifting the bridges) 아래의 톱니바퀴 열이 드러나고, Escape 키로 다시 닫힙니다(closing up):
PyTorchKR 독자에게 익숙한 예로, 저자의 컬렉션에는 언어 모델의 온도 그림이 있습니다. 아래 화면은 /anatomy explain how temperature changes how a language model picks the next token, interactive 한 줄로 만든 그림입니다. 다음 토큰 후보 16개가 각자의 확률만큼 폭을 가진 룰렛 휠 칸이 되고, 온도 조절 노브가 온도를 정하고 칸막이(fret)를 움직입니다. 오른쪽에는 조작 안내 Drag to heat, tap to spin과 실시간 수치 T 1.00 · spinning이 표시됩니다:
같은 컬렉션에는 경사하강법(gradient descent)을 등고선 모형으로 그린 그림, B-트리 인덱스, TCP 핸드셰이크 같은 그림도 있습니다. 컬렉션의 그림은 스킬과 별개인 npm 패키지 anatomy-figures로도 배포되므로, 스킬을 쓰지 않고 완성된 그림만 React 컴포넌트로 가져다 쓸 수 있습니다(React 18 이상 필요). 컬렉션 페이지의 예시는 다음과 같습니다:
import { Sampling } from "anatomy-figures";
<Sampling theme="light" />
React 없이 쓰는 커스텀 엘리먼트(anatomy-figures/element/sampling)도 제공하고, 테마는 dark, light, paper, blueprint, sepia 다섯 가지 중에서 고르거나 --anatomy-* CSS 변수로 색을 바꿀 수 있습니다.
Anatomy 설치와 사용
Anatomy는 SKILL.md가 루트에 있는 표준 Agent Skill 폴더이므로, skills CLI ( Vercel Skills (Skills.sh): 여러 AI 에이전트들을 지원하는 오픈소스 스킬 생태계)나 git clone으로 설치합니다. skills CLI는 어떤 에이전트에 설치할지 묻고, -a claude-code처럼 에이전트를 지정하면 질문을 건너뜁니다:
npx skills add wheresryan22/anatomy -g -a claude-code
git으로 설치할 때는 SKILL.md가 <스킬 폴더>/anatomy/SKILL.md에 오도록 저장소를 복제합니다. 저장소 이름과 스킬 폴더 이름이 모두 anatomy이므로 아래 명령을 그대로 쓰면 됩니다:
git clone https://github.com/wheresryan22/anatomy.git ~/.claude/skills/anatomy
설치 환경에서 확인할 조건은 세 가지입니다. 키트와 검사 스크립트는 Node.js 20.10 이상의 내장 모듈만 쓰므로 npm install이 필요 없지만, skills CLI 자체는 Node.js 22.20 이상을 요구합니다. 검사에는 Chrome 또는 Chromium이 필요합니다. skills CLI는 예제를 포함한 저장소 전체(약 10MB)를 복사합니다.
설치한 뒤에는 /anatomy 뒤에 설명할 내용을 적습니다. Codex에서는 $anatomy를 씁니다:
/anatomy explain how a token bucket rate limiter works, interactive
스킬 이름을 쓰지 않아도 설명용 그림이나 인터랙티브 설명 자료를 요청하면 에이전트가 스킬을 불러옵니다. 저자가 권하는 프롬프트 습관은 세 가지입니다. 첫째, 그림이 아니라 설명할 개념과 실제 수치(크기, 개수, 비율, 임계값)를 적습니다. 둘째, 원하는 기계가 이미 있으면 그 이름과 움직일 부분을 적습니다. 셋째, 그림이 들어갈 곳(단독 HTML, 단독 SVG, React/Next.js 컴포넌트)과 라이트/다크 테마를 적습니다.
Codex에서는 샌드박스가 헤드리스 Chrome 실행을 막을 수 있습니다. 이 경우 그림은 만들어지지만 검사만 실패하므로, Codex가 샌드박스 밖 실행을 요청할 때 해당 명령만 승인하거나 일반 터미널에서 node scripts/capture.mjs page.html --out shots/page.png처럼 검사를 직접 실행합니다.
저장소의 예제는 각 폴더의 빌드 스크립트로 다시 만들 수 있고, --light를 붙이면 라이트 테마로 빌드합니다:
node examples/dial-indicator/build.mjs --light
저자가 밝힌 한계도 함께 확인해야 합니다. Anatomy는 축과 계열이 있는 차트를 그리지 않고, 기계와 계기, 도구와 가구를 그리며 사람이나 정확한 지도는 그리지 않습니다. 셰이더에는 WebGL이 필요하고, 3D 모드는 예제와 테스트 그림 하나에서만 검증된 베타입니다. 작은 3D 그림은 60fps로 동작하지만, 부품 380개짜리 스트레스 테스트용 손은 1440px 폭에서 약 20fps, 성능을 제한한 모바일 프로필에서 13~15fps였습니다.
Anatomy의 라이선스
Anatomy는 MIT 라이선스로 공개되어 있어 개인 및 상업적 목적으로 자유롭게 사용할 수 있습니다.
Anatomy 컬렉션 (스킬로 만든 그림 모음)
Anatomy 홈페이지
Anatomy 제작 과정 문서 (How I built it)
Anatomy GitHub 저장소
더 읽어보기
이 글은 GPT 모델로 정리한 초안을 바탕으로 한 것으로, 원문의 내용 또는 의도와 다르게 정리된 내용이 있을 수 있습니다. 관심있는 내용이시라면 원문도 함께 참고해주세요! 읽으시면서 어색하거나 잘못된 내용을 발견하시면 댓글로 알려주시기를 부탁드립니다. 
파이토치 한국 사용자 모임
이 정리한 이 글이 유용하셨나요? 회원으로 가입하시면 주요 글들을 이메일
로 보내드립니다! 텔레그램(Telegram)이나 Slack/Discord/Teams/Dooray/GoogleChat 등으로도 새 글 알림을 받으실 수 있습니다. 
아래
쪽에 좋아요
를 눌러주시면 새로운 소식들을 정리하고 공유하는데 힘이 됩니다~ 