기술 개념을 움직이는 기계 그림으로 만드는 Anatomy

Anatomy는 Ryan(wheresryan22)이 GitHub에 공개한 에이전트 스킬입니다(github.com/wheresryan22/anatomy, MIT 라이선스). 기술 개념을 설명해 달라고 하면, 그 개념이 실제로 작동하는 기계를 만들어 아이소메트릭 그림으로 그려 줍니다. 2026년 10월 8일 공개된 뒤 2주 만에 GitHub 별 1만 8천 개를 넘겼습니다.

기술 문서의 그림은 보통 상자와 화살표입니다. Anatomy는 그 상자 대신 손으로 만질 수 있을 것 같은 물건을 그립니다. 이 글에서는 어떤 원리로 그림을 만드는지, 어떻게 설치해 쓰는지, 어디까지 기대할 수 있는지 정리합니다.

핵심 요약

• 개념을 상자와 화살표가 아니라, 그 원리대로 움직이는 기계로 바꿔 그립니다.
• 결과물은 SVG 기반의 인터랙티브 그림이고, 필요하면 WebGL 효과와 3D(베타)를 더합니다.
• 공들인 만큼 느립니다. 그림 한 장에 긴 작업 세션이 들고, 사람이나 지도, 차트는 그리지 않습니다.

개념을 진짜 작동하는 물건으로 바꿉니다

그림 1

Anatomy에 기술 개념을 설명하는 그림을 부탁하면, 먼저 그 개념의 작동 방식이 곧 원리인 물건을 지어냅니다. 예를 들어 "변한 게 없으면 작업을 건너뛰는 캐시 키"는 핀이 모두 맞아야만 돌아가는 자물쇠가 됩니다. "GPU 하나가 여러 캔버스를 처리하는 구조"는 프린트 헤드 하나가 16개의 칸을 차례로 오가는 플로터가 됩니다.

그다음 그 물건을 작고 단단한 부품 수십 개로 쌓아 올리고, 제목과 안내 문구, 실시간 수치 표시가 있는 카드 안에 넣습니다. 마우스와 키보드에 따라 차분하게 움직이고, 화면에 보이는 숫자는 모두 부품을 움직이는 같은 계산 모델에서 나옵니다.

그림은 세 종류로 만들어집니다

세 종류 모두 같은 도구 모음과 같은 카메라, 같은 작업 규칙을 씁니다. 밝은 테마와 어두운 테마를 고를 수 있고, 밝은 테마를 먼저 기준으로 설계합니다.

종류	무엇을 그리나	저장소 예시
SVG	기본형. 네 단계 음영의 아이소메트릭 부품, 실시간 수치, 부드러운 움직임	다이얼 게이지, 데스크 컴퓨터, 오락실 게임기
SVG + WebGL	선으로 못 그리는 불꽃, 배기, 물결, 빛, 증기를 셰이더로 그림 사이에 넣음	Raptor 엔진, 물결 수조
3D (베타)	돌아가는 다이얼, 굽혀지는 손가락처럼 실제 3D로 움직이는 부품	금고 다이얼

결과물은 HTML 한 장, SVG 파일 하나, 또는 React·Next.js 컴포넌트 중에서 고릅니다. 만들어진 그림은 소스째로 내 것이 되고, 그림을 그린 도구 모음도 함께 따라옵니다.

한 장을 만드는 데 여덟 단계를 거칩니다

그림 2

스킬의 작업 순서는 정해져 있습니다. 먼저 진짜 숫자(크기, 개수, 속도, 기준값)를 모으고, 개념에 맞는 물건을 지어낸 뒤, 부품 목록을 쓰고, 배치를 계획합니다. 그다음 도구 모음으로 형상을 한 번에 만들고, 뒤에서 앞 순서로 칠하고, 카드에 담아 움직임을 넣습니다.

마지막 단계가 특히 눈에 띕니다. 비평가처럼 스스로 검증합니다. 부품끼리 뚫고 지나가지 않는지, 모든 끝이 어딘가에 고정돼 있는지, 겹치는 부분이 깊이 순서대로 그려졌는지를 기하 검사로 확인합니다. 헤드리스 Chrome으로 화면과 확대 사진을 찍고, 허공에서 끝나는 선이 있으면 실패로 처리합니다.

설치는 한 줄입니다

skills 명령줄 도구로 설치합니다. 설치할 때 어느 에이전트에 넣을지 묻습니다.

npx skills add wheresryan22/anatomy -g

Claude Code에서는 아래처럼 부탁합니다. Antigravity, OpenCode, MiniMax Code도 /anatomy를 쓰고, Codex에서는 $anatomy로 부릅니다.

/anatomy explain how a token bucket rate limiter works, interactive

API 키도, npm install도 필요 없습니다. 도구 모음이 Node 내장 모듈만 쓰기 때문입니다. 다만 Node.js 20.10 이상이 필요하고, 검증 단계에서 그림을 확인하려면 Chrome 또는 Chromium이 있어야 합니다.

좋은 그림을 받는 요령은 세 가지입니다

첫째, 그림이 아니라 개념을 말하고 진짜 숫자를 줍니다. 상자와 화살표를 묘사하는 것보다, 무엇을 설명할지와 실제 크기·개수·속도를 알려 주는 편이 낫습니다. 물건을 지어내는 일은 스킬이 더 잘합니다.

둘째, 원하는 물건이 이미 있으면 그 물건을 말합니다. 에스프레소 머신이나 분젠 버너처럼 이름을 대고, 무엇이 움직여야 하는지 알려 줍니다. 셋째, 그림이 놓일 곳을 말합니다. HTML 한 장인지, SVG 파일인지, React 컴포넌트인지, 밝은 테마인지에 따라 만드는 방식이 달라집니다.

느리고, 기계만 그립니다

Anatomy는 일부러 느립니다. 부품 목록, 형상, 검사, 두 테마의 확대 확인까지 거치기 때문에 그림 한 장에 긴 작업 세션이 듭니다. 예시 중 Raptor 엔진은 빌드에만 몇 분이 걸리고, 3D 모드의 전체 검사는 부품 30개에 15~20분이 걸린다고 밝혀 두었습니다.

그리는 대상도 정해져 있습니다. 기계, 계측기, 공구, 가구를 그리고 사람이나 정확한 지도, 데이터 차트는 그리지 않습니다. 작동 원리로 만들 수 없는 아이디어는 결과가 약해집니다. 셰이더 효과는 WebGL이 있어야 보이지만, 없어도 SVG 그림 자체는 읽힙니다.

정리하며

Anatomy는 기술 개념을 상자와 화살표 대신 실제로 움직이는 기계로 보여 주는 스킬입니다. 개념에 맞는 물건을 지어내는 일부터 부품 검증까지 스킬이 맡기 때문에, 문서나 블로그, 소개 페이지에 넣을 설명 그림을 공들여 만들 때 쓸 만합니다.

다만 빠르게 뽑는 도구가 아니라 시간을 들여 정확한 그림을 만드는 도구라는 점, 기계 같은 대상에 맞는다는 점은 알고 쓰는 것이 좋습니다.

원본: wheresryan22/anatomy (https://github.com/wheresryan22/anatomy), MIT 라이선스(Copyright 2026 Ryan). 그림 1(Raptor 2 엔진 시험대)은 이 저장소 README에 실린 예시 이미지를 그대로 옮긴 것입니다. 이 글은 2026년 10월 22일 기준 저장소 README를 바탕으로 정리했습니다.

자주 묻는 질문 (FAQ)

Q. Anatomy는 Claude Code에서만 쓸 수 있나요?

A. 아닙니다. Claude Code를 기준으로 쓰였지만 공개 Agent Skills 형식을 따르기 때문에 Antigravity, OpenCode, Codex, MiniMax Code에서도 쓸 수 있습니다.

Q. 그래프나 데이터 차트도 그려 주나요?

A. 그리지 않습니다. 축과 데이터 계열이 있는 차트 도구가 아니고, 숫자는 움직이는 부품과 연결된 실시간 수치로만 보여 줍니다.

Q. 설치할 때 따로 받아야 하는 패키지가 있나요?

A. 없습니다. API 키와 npm install 없이 Node 내장 모듈만 씁니다. Node.js 20.10 이상이 필요하고, 검증 단계에는 Chrome이나 Chromium이 쓰입니다.