한 줄이면 '움직익 돌아가는 기계 설명도' 뚝딱! 클로드 코드 스킬 Anatomy 설치·사용법과 활용 사례 8가지

기술 설명할 때 네모 박스랑 화살표만 잔뜩 그려 본 적 있으시죠?

"엔진이 어떻게 동작하냐면... 여기서 이게 저기로 가고..."

말로는 길어지고, 그림은 밋밋하고, 듣는 사람은 여전히 고개를 갸웃하고요.

 

그런데 요즘 개발자들 사이에서 설명 한 줄만 쓰면 클로드가 "실제로 돌아가는 기계"를 그려 주는 스킬이 화제예요.

이름은 Anatomy(아나토미), 클로드 코드에 설치해서 쓰는 무료 오픈소스 스킬이에요.

 

오늘은 Anatomy가 뭔지, 장단점은 뭔지, 설치·사용법은 어떻게 되는지,

그리고 바로 따라 해볼 수 있는 실전 활용 사례 8가지까지 쉽게 정리해 볼게요.

 

Anatomy 공식 사이트 첫 화면. 한 줄 요청으로 만든 기계식 시계 무브먼트 (출처: skills.wheresryan.sh/anatomy)

 

이 글에서 다루는 내용
1. 클로드 코드 스킬 Anatomy란? 한 줄 요약
2. Anatomy 특징: 박스 대신 "기계"를 그린다
3. 장점과 단점, 솔직하게
4. Anatomy 설치 방법
5. Anatomy 사용 방법 (프롬프트 작성 요령)
6. 실전 베스트 활용 사례 8가지
7. 자주 묻는 질문 (FAQ)

1. 클로드 코드 스킬 Anatomy란? 한 줄 요약

한마디로 "어려운 개념을, 그 개념대로 움직이는 기계 그림으로 바꿔 주는 클로드 스킬"이에요.

 

예를 들어 "LRU 캐시가 오래된 데이터를 어떻게 지우는지 설명해 줘"라고 하면,

클로드가 맨 위 칸 네 개짜리 책장을 발명해서 최근에 쓴 책은 왼쪽에, 오래된 책은 밀려나게 그려 줘요.

"뮤텍스"를 물으면 열쇠가 있어야만 물을 채울 수 있는 물탱크가 나오고요.

 

그림은 비스듬히 위에서 내려다보는 아이소메트릭(isometric) 입체 그림이고,

마우스로 끌거나 키보드를 누르면 실제로 부품이 움직이면서 숫자 계기판(readout)도 같이 바뀌어요.

 

아래는 공식 사이트의 터보팬 엔진 그림을 마우스로 직접 끌어 본 모습이에요.

추력 레버를 밀면 엔진이 돌기 시작하고, 오른쪽 숫자(회전수·추력·온도)도 같이 올라가요.

공식 사이트 터보팬 엔진 그림을 직접 조작한 화면. 레버를 밀면 추력이 14kN에서 334kN까지 올라가요 (출처: skills.wheresryan.sh/anatomy)

공식 사이트에서 터보팬 엔진 직접 만져 보기

 

만든 사람은 개발자 Ryan(@wheresryan22)이고, 2026년 10월 10일에 첫 정식 버전(v1.0.0)이 나왔어요.

10월 12일에 v1.1.0이 나왔고, 10월 15일 기준 깃허브 스타가 약 1만 1천 개(10.9k)일 정도로 빠르게 인기를 얻고 있어요.

라이선스는 MIT라서 스킬도, 만들어진 그림도 자유롭게 쓸 수 있어요.

 

클로드 코드용으로 만들어졌지만, 공개 표준인 Agent Skills 형식을 따르기 때문에

OpenAI Codex, OpenCode, 구글 Antigravity에서도 쓸 수 있어요.

 

2. Anatomy 특징: 박스 대신 "기계"를 그린다

Anatomy의 규칙은 딱 하나예요. 스킬 설명서 맨 위에 이렇게 적혀 있어요.

The object is the explanation.
(물건 자체가 설명이다)

그래서 떠다니는 라벨이나 화살표 없이, 움직이는 부품 하나하나가 개념을 그대로 보여 주는 그림을 만들어요.

 

예를 들어 시계 그림에서 E 키를 누르면 브리지가 들려 올라가면서 안쪽 톱니바퀴가 드러나요.

시계 무브먼트 그림에서 E 키로 부품을 분해했다가 다시 조립하는 모습 (출처: skills.wheresryan.sh/anatomy)

공식 사이트에서 시계 무브먼트 직접 만져 보기

 

그림은 세 가지 종류로 나와요

왼쪽부터 SVG 시계 무브먼트, WebGL 터보팬 엔진, 3D 계절 (출처: Anatomy 공식 컬렉션)

 

종류	어떤 그림?	대표 예시
SVG	기본형. 수십 개의 입체 부품을 4단계 명암으로 칠한 그림	시계 무브먼트, 다이얼 게이지
SVG + WebGL	선으로 못 그리는 불꽃·배기가스·물결·빛·증기를 셰이더로 추가	터보팬 엔진, 랩터 로켓 엔진
3D (베타)	부품이 실제 3D로 회전. 다이얼, 턴테이블, 손가락 관절 등	계절 변화, 회전 다이얼

 

이런 점이 특별해요

• 숫자가 진짜예요: 그림에 나오는 모든 숫자는 부품을 움직이는 같은 계산 모델에서 나와요. 그래서 그림과 숫자가 서로 어긋나지 않아요.
• 스스로 검사해요: 완성 후 헤드리스 크롬으로 스크린샷을 찍고, 4배 확대해서 이음새를 하나하나 확인하고, 파이프가 다른 부품을 뚫고 지나가지 않는지 자동 검사(audit)까지 돌려요.
• 결과물 형식이 다양해요: 단독 HTML 페이지, 스타일이 포함된 SVG 파일 하나, 또는 React·Next.js 컴포넌트로 받을 수 있어요. 라이트·다크 테마 모두 돼요.
• 웹에 올려도 가벼워요: 화면 밖으로 스크롤되면 멈추고, 움직이는 부품만 다시 그려요. "동작 줄이기" 설정을 켠 사용자에게는 정지 화면으로 보여요.
• 접근성도 챙겼어요: 키보드로 조작할 수 있고, 바뀌는 숫자는 스크린 리더에 읽혀요.

 

작업 순서도 정해져 있어요.

클로드가 ① 크기 정하기 → ② 실제 수치 모으기 → ③ 기계 발명 → ④ 부품 목록(최소 40개) 작성을 먼저 하고,

그다음 지오메트리 계산, 앞뒤 순서대로 칠하기, 카드 액자 씌우기, 움직임 넣기, 마지막으로 비평가처럼 검증하는 순서로 진행해요.

 

가장 공들인 예제인 랩터 엔진은 11개 부품 묶음으로 분해됐다가, 점화(Ignite)를 누르면 WebGL 화염을 뿜어요.

랩터 2 엔진이 11개 묶음으로 분해되고, 점화하면 300bar 230tf가 표시되는 모습 (출처: skills.wheresryan.sh/anatomy)

공식 사이트에서 랩터 엔진 직접 만져 보기

 

3. 장점과 단점, 솔직하게

장점

• 한 줄이면 시작: 무엇을 그릴지 고민할 필요 없이 "무엇을 설명할지"만 말하면 돼요. 어떤 기계로 표현할지는 클로드가 정해요.
• 설명력이 압도적: 박스·화살표 다이어그램과 달리 부품이 실제로 움직이니까 "아, 그래서 이렇게 되는구나"가 바로 와요.
• 완전 무료 + API 키 불필요: MIT 라이선스이고, 별도 API 키나 npm install이 필요 없어요. 노드(Node.js) 기본 모듈만 써요.
• 내 코드로 남아요: 결과물이 내 프로젝트 안의 평범한 코드라서 나중에 숫자 하나만 바꿔도 그림 전체가 같이 바뀌어요.
• 여러 AI 코딩 도구 지원: 클로드 코드뿐 아니라 Codex, OpenCode, Antigravity에서도 동작해요.
• 바로 쓰는 완성본도 있어요: 공식 컬렉션 그림들은 anatomy-figures 패키지로 React 프로젝트에 바로 넣을 수 있어요.

 

단점

• 시간이 오래 걸려요: 공식 사이트 기준 기본 크기(Figure)가 30~90분, 큰 그림(Hero)은 2~4시간, 자동차·공장 같은 초대형(Epic)은 6시간 이상이에요. 공식 터보팬 엔진은 총 14시간이 걸렸대요.
• 토큰을 많이 써요: 커뮤니티 갤러리에 기록된 작품들을 보면 그림 하나에 약 23만~90만 토큰이 쓰였어요. 사용량 한도가 있는 요금제라면 부담될 수 있어요.
• 차트 도구가 아니에요: 축·막대·꺾은선 같은 데이터 차트는 못 그려요. 사람이나 정확한 지도도 대상이 아니고, "작동 원리"가 없는 주제는 결과가 약해요.
• 3D 모드는 아직 베타: 작은 3D 그림은 60fps로 돌지만, 380개 부품짜리 테스트에서는 약 20fps까지 떨어졌대요.
• 첫 결과는 초안이에요: 제작자도 "클로드는 만드는 건 잘하지만 보는 건 항상 잘하진 않는다"고 말해요. 한 번 돌려 보고 어색한 점을 말해 주는 "두 번째 보기"가 품질을 좌우해요.
• 사진을 그대로 베끼진 않아요: 참고 사진을 주면 재질·분위기만 가져가고, 물건 자체는 새로 발명해요.
• 준비물이 조금 있어요: 노드(Node.js)와 크롬이 필요하고, 문서가 영어로만 되어 있어요.

 

4. Anatomy 설치 방법

설치는 정말 간단해요. 터미널에 한 줄이면 끝나요.

 

Anatomy 공식 깃허브 저장소, MIT 라이선스 (출처: github.com/wheresryan22/anatomy)

 

① 준비물 확인하기

• 클로드 코드 (또는 Codex, OpenCode, Antigravity)
• Node.js: 설치용 skills CLI(1.7.1 기준)가 22.20 이상을 요구해요. 스킬 자체는 20.10 이상이면 돼요.
• 크롬 또는 크로미움: 클로드가 그림을 스스로 검사할 때 써요.
• React 18 이상: React 컴포넌트로 받을 때만 필요해요.

node --version    # v22.20 이상이면 OK

 

② 스킬 설치하기 (추천: skills CLI)

내 모든 프로젝트에서 쓰고 싶다면 이렇게 설치하세요.

npx skills add wheresryan22/anatomy -g -a claude-code

-g는 "내 계정 전체에 설치", -a claude-code는 "클로드 코드용으로만 설치"라는 뜻이에요.

설치 위치는 ~/.claude/skills/anatomy예요. 예제까지 통째로 복사돼서 용량은 약 10MB예요.

 

특정 프로젝트에서만 쓰고 싶다면 그 프로젝트 폴더에서 아래처럼 입력하세요.

.claude/skills/anatomy에 설치되고, 이 폴더를 커밋하면 팀원들도 같이 쓸 수 있어요.

npx skills add wheresryan22/anatomy

 

깃허브 README의 설치 명령어 표 (출처: github.com/wheresryan22/anatomy)

 

③ 다른 설치 방법 (git / 다운로드)

# git으로 설치 (나중에 폴더 안에서 git pull로 업데이트)
git clone https://github.com/wheresryan22/anatomy.git ~/.claude/skills/anatomy

# git 없이 한 줄로 (맥·리눅스)
mkdir -p ~/.claude/skills/anatomy && curl -L https://github.com/wheresryan22/anatomy/archive/refs/heads/main.tar.gz | tar -xz --strip-components=1 -C ~/.claude/skills/anatomy

ZIP으로 받았다면 압축을 풀고 폴더 이름을 anatomy-main에서 anatomy로 바꾼 뒤 ~/.claude/skills/에 넣으면 돼요.

 

④ 설치 확인하기

클로드 코드를 열고 /anatomy를 입력해 보세요. 명령어가 보이면 성공이에요.

클로드 코드를 켠 상태에서 skills 폴더가 새로 만들어졌다면 /reload-skills를 한 번 실행해 주세요.

 

도구	설치 옵션	실행 명령
클로드 코드	-a claude-code	/anatomy
OpenAI Codex	-a codex	$anatomy
OpenCode	-a opencode	/anatomy
Antigravity	-a antigravity	/anatomy

팁: Codex는 보안 샌드박스 때문에 크롬 검사가 막힐 수 있어요. 그림은 그대로 만들어지고 검사만 실패하니, 실행 승인 창이 뜨면 허용해 주세요.

 

5. Anatomy 사용 방법 (프롬프트 작성 요령)

① 기본 사용법

클로드 코드에서 /anatomy 뒤에 "무엇을 설명할지"를 적으면 끝이에요.

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

한국어로 써도 돼요. 커뮤니티 갤러리에는 중국어·포르투갈어로 요청해서 만든 작품도 올라와 있어요.

/anatomy 토큰 버킷 방식의 요청 제한(rate limiter)이 어떻게 동작하는지 설명해 줘, interactive

꼭 /anatomy를 안 붙여도 "설명용 그림", "기술 일러스트", "인터랙티브 설명 그림"을 부탁하면 클로드가 알아서 이 스킬을 꺼내 써요.

 

② 결과를 바꾸는 마법의 단어 3개

요청 문장 안에 아래 단어를 직접 적어야 해당 기능을 써요.

단어	효과	주의
interactive	마우스·키보드로 조작 가능 (끌기, 누르기, 키 누르기)	빼면 멈춘 그림이 나와요
WebGL	불꽃, 물, 플라스마, 공기 흐름, 빛 효과 추가	WebGL이 꺼진 환경에서도 SVG는 보여요
3D	부품이 실제로 깊이 방향으로 회전	몇 분이 아니라 몇 시간 걸려요 (베타)

 

③ 따라 쓰기 좋은 프롬프트 5가지

# 1) 개념만 말하기 (가장 추천)
/anatomy explain how an LRU cache evicts entries, interactive

# 2) 셰이더 효과 추가
/anatomy explain how a jet engine afterburner works, interactive, WebGL

# 3) 3D로 돌려 보기
/anatomy explain why the Earth has seasons, interactive, 3D

# 4) 원하는 물건을 직접 지정
/anatomy a mechanical metronome on a small wooden plinth, swinging at 120 bpm, with a sliding weight you can drag, interactive

# 5) 어디에 쓸지까지 지정
/anatomy explain how a CDN edge cache serves a request, interactive, as React components for our Next.js docs, dark theme

 

④ 좋은 그림을 얻는 3가지 습관

• 그림 말고 "개념"을 말하세요: "박스 3개 그려 줘" 대신 "이게 어떻게 동작하는지 설명해 줘"라고 하고, 크기·개수·속도·기준값 같은 실제 숫자를 같이 주세요.
• 원하는 물건이 있으면 이름을 대세요: 에스프레소 머신, 분젠 버너, 자물쇠처럼요. 그리고 무엇이 움직여야 하는지도 적어 주세요.
• 어디에 쓸지 말해 주세요: 단독 HTML, SVG 파일 하나, React/Next.js 컴포넌트, 라이트/다크 중 무엇인지에 따라 만드는 방식이 달라져요.

 

⑤ 그림 크기와 걸리는 시간

크기	내용	시간(공식 사이트 기준)
Figure	부품 40~80개, 셰이더 최대 1개	30~90분
Hero	부품 80~150개, 셰이더 여러 개 또는 회전 부품 1개	2~4시간
Epic	자동차·건물·공장 전체	6시간 이상

Figure는 바로 만들고, Hero는 미리 알려 주고 시작해요.

Epic은 절대 혼자 시작하지 않고, 예상 시간과 함께 핵심만 살린 Hero 버전을 먼저 제안해요.

빨리 필요하다면 "빠르게"라고 말하고 Figure 크기를 기대하세요.

 

그럼 토큰은 얼마나 쓸까요?

공식 사이트에는 토큰 사용량이 따로 나와 있지 않아요.

대신 커뮤니티 갤러리에는 만든 사람이 걸린 시간과 사용 토큰을 직접 적어 둔 작품들이 있어요. 아래는 그 값을 모은 거예요(괄호 표시가 없으면 Claude Opus 5.5).

커뮤니티 작품	걸린 시간	사용 토큰
냉찜질 치료기	약 14분	약 22.8만
영사기	약 16분	약 36만
AI 에이전트 작업 흐름 (Sonnet 5.5)	약 21분	약 43.5만
타자기	약 23분	약 37.9만
다마고치	약 28분	약 46.9만
디바운스 작업대	약 31분	약 23.6만
자동 손목시계	약 1시간 25분	약 71.8만
GitLab Runner 작업대	약 2시간 40분	약 89.6만
BMW iX3	약 3시간 5분	약 36.2만

정리하면 30분 안팎의 그림은 20만~47만 토큰, 1~3시간짜리 큰 그림은 36만~90만 토큰 정도였어요.

다만 시간과 토큰이 꼭 비례하지는 않아요. 3시간 넘게 걸린 BMW 그림이 36만 토큰이었거든요.

만든 사람이 직접 적은 값이고 사례도 9개뿐이라 대략적인 참고용으로만 봐 주세요. Epic 크기 작품은 토큰 기록이 아직 없어요. (출처: Anatomy 커뮤니티 갤러리)

 

⑥ 결과물 받고 고치기

결과물은 내 프로젝트 안의 코드로 남아요. 프레임워크 없는 버전은 노드 빌드 스크립트와 HTML 페이지가, React 버전은 컴포넌트 파일들이 생겨요.

고치고 싶으면 "톱니바퀴를 더 크게", "숫자를 한국어 단위로"처럼 대화로 부탁하면 돼요.

제작자도 "첫 그림은 초안으로 보고, 직접 만져 본 뒤 어색한 점을 말해 주라"고 권해요.

 

⑦ 완성된 공식 그림을 바로 가져다 쓰기

직접 만들 시간이 없다면 공식 컬렉션 그림을 React 컴포넌트로 바로 쓸 수 있어요.

다크·라이트·종이(paper)·청사진(blueprint)·세피아 5가지 테마가 들어 있어요.

npm install anatomy-figures

import { Watch } from "anatomy-figures";

export default function Page() {
  return <Watch theme="light" />;
}

React를 안 쓰는 일반 HTML 페이지에서도 커스텀 엘리먼트로 넣을 수 있어요.

 

⑧ 만든 그림 공유하기

같은 세션에서 아래처럼 말하면 제목과 깃허브 아이디를 물어본 뒤, 확인을 받고 커뮤니티 갤러리에 풀 리퀘스트를 대신 올려 줘요.

(깃허브 CLI gh 로그인이 필요해요.)

publish this figure to the Anatomy community gallery

Anatomy 커뮤니티 갤러리. 작품마다 사용한 프롬프트가 함께 공개돼요 (출처: skills.wheresryan.sh/anatomy/community)

 

 

실제로 테스트한 결과

/anatomy 토큰 버킷 방식의 요청 제한(rate limiter)이 어떻게 동작하는지 설명해 줘, interactive

클로드코드에서 위 프롬프트로 테스트를 해보니

대략 22만 토큰을 사용했고, 4090(24gb)에서 약 13분정도 소요됐네요. 

 

6. 실전 베스트 활용 사례 8가지

이제 진짜 중요한 부분이에요. "그래서 이걸 어디에 쓰는데?"

공식 컬렉션과 커뮤니티 갤러리에 올라온 실제 작품들을 바탕으로, 바로 따라 할 수 있게 정리했어요.

 

사례 1. 개발 문서·README에 "핵심 동작 원리" 그림 넣기

내 프로젝트에서 가장 설명하기 어려운 부분, 보통 README에 글로 길게 쓰잖아요.

Anatomy로 그 원리를 기계 그림 하나로 보여 주면 처음 보는 사람도 훨씬 빨리 이해해요.

 

커뮤니티 작품: GitLab Runner 작업대, 제작 @zzgosh (출처: Anatomy 커뮤니티 갤러리)

 

실제로 커뮤니티에는 GitLab Runner가 CI/CD 파이프라인 작업을 어떻게 실행하는지를

작업대(bench) 형태로 그린 작품이 올라와 있어요.

갤러리 기록상 약 2시간 40분이 걸린 큰 그림이에요. 아래는 내 프로젝트 코드를 직접 읽게 하는 프롬프트예요.

/anatomy 이 프로젝트에서 가장 설명하기 어려운 동작 원리를 움직이는 기계로 설명해 줘, interactive, light theme.
먼저 코드를 읽고 후보 3가지를 기계 아이디어 한 줄씩과 함께 제안해 줘. 내가 고른 뒤에 시작해.
그림의 입력·출력·숫자는 모두 코드에 있는 실제 값에서 가져와. 지어내지 마.
완성되면 docs/ 폴더에 단독 HTML로 내보내고, 스킬의 scripts/capture.mjs로 스크린샷을 찍어 README에 넣어 줘.

팁: "후보 3개를 먼저 보여 줘"라고 하면 엉뚱한 부분을 몇 시간 동안 그리는 일을 막을 수 있어요.

 

사례 2. CS 개념 공부·강의 자료 만들기

TCP 핸드셰이크, 블룸 필터, 해시맵 충돌... 개발 공부할 때 가장 머리 아픈 개념들이죠.

Anatomy는 이런 추상적인 개념을 "손으로 만질 수 있는 물건"으로 바꿔 줘요.

 

공식 컬렉션: TCP 핸드셰이크 우편 케이블카(왼쪽)와 블룸 필터 슬롯머신(오른쪽) (출처: skills.wheresryan.sh/anatomy/collection)

 

공식 컬렉션에서 TCP 핸드셰이크는 두 정거장 사이를 오가는 우편 케이블카(왼쪽)로, 블룸 필터는 릴 3개짜리 슬롯머신(오른쪽)으로 표현됐어요.

SYN, SYN-ACK, ACK 캔이 줄을 타고 오가고, 슬롯머신은 세 깃발이 모두 올라가야만 "있을 수도 있음"을 뱉어내요.

 

실제로 움직이는 모습은 이래요. 캔이 줄을 타고 오가면서 오른쪽 상태 표시가 SYN, SYN-ACK, ESTABLISHED로 바뀌어요.

TCP 핸드셰이크 우편 케이블카가 연결을 맺는 모습 (출처: skills.wheresryan.sh/anatomy)

공식 사이트에서 TCP 핸드셰이크 직접 만져 보기

 

/anatomy TCP 3-way 핸드셰이크가 어떻게 연결을 맺는지 설명해 줘, interactive

팁: 스터디나 사내 교육 자료라면 "light theme, 단독 HTML"로 받아서 그대로 띄워 놓고 직접 조작하며 설명해 보세요.

 

사례 3. AI·LLM 개념을 쉽게 설명하기

"temperature를 올리면 왜 답이 들쭉날쭉해져요?" 같은 질문, 말로 설명하기 참 어렵죠.

AI 서비스 소개나 사내 AI 교육에 딱 맞는 활용법이에요.

 

공식 컬렉션 Temperature 룰렛(왼쪽)과 커뮤니티 작품 AI 에이전트 단계, 제작 @ahmadssadiq(오른쪽) (출처: Anatomy 공식 사이트)

 

공식 컬렉션의 Temperature는 다음 토큰 후보 16개를 확률만큼의 폭으로 나눈 룰렛이에요(왼쪽). 온도 다이얼을 돌리면 칸 너비가 바뀌어요.

오른쪽은 커뮤니티 작품으로, AI 에이전트가 도구 호출 → JSON 스키마 검사 → 추적 기록을 거치는 한 단계를 생산 라인처럼 그렸어요. 갤러리 기록상 약 21분이 걸렸어요.

/anatomy LLM의 temperature가 다음 토큰 확률을 어떻게 바꾸는지 설명해 줘, interactive

 

사례 4. 웹사이트·랜딩 페이지·기술 블로그에 움직이는 그림 넣기

서비스 랜딩 페이지 첫 화면이나 기술 블로그 본문에 "만져 볼 수 있는 그림"이 있으면 체류 시간이 확 달라지죠.

Anatomy는 처음부터 웹에 넣는 걸 염두에 두고 만들어졌어요.

 

공식 컬렉션: 디바운스·스로틀을 표현한 오르골 녹음기 (출처: skills.wheresryan.sh/anatomy/collection)

 

공식 컬렉션의 디바운스·스로틀은 핀 디스크가 돌아가는 오르골 녹음기로 표현됐어요.

버튼 클릭 하나하나가 함수 호출이고, 디바운스·스로틀이 각각 언제 실제로 실행됐는지 핀으로 찍혀 나와요. 프론트엔드 문서에 넣기 딱 좋죠.

/anatomy 디바운스와 스로틀의 차이를 설명해 줘, interactive, as React components for our Next.js docs, dark theme

팁: 직접 만들 시간이 없으면 앞에서 소개한 npm install anatomy-figures로 공식 그림을 바로 넣을 수 있어요.

 

사례 5. 공학·자동차 원리 교육 자료

엔진, 변속기, 안전벨트처럼 "안에서 무슨 일이 일어나는지" 보여 주기 어려운 기계 교육에 특히 강해요.

원래 기계 그림을 그리려고 만든 스킬이라 가장 잘 어울리는 분야예요.

 

커뮤니티 작품: 4행정 엔진(@nader0913)과 3점식 안전벨트(@vinayanand3) (출처: Anatomy 커뮤니티 갤러리)

 

커뮤니티에는 4행정 엔진(왼쪽), 3점식 안전벨트(오른쪽), 디스크 브레이크, 차동 기어, 반켈 로터리 엔진 같은 작품이 올라와 있어요.

안전벨트 작품은 "엔지니어용으로, 벨트 경로 전체를 인터랙티브하게"라고 요청해서 만들었어요.

/anatomy 4행정 엔진이 흡입·압축·폭발·배기를 어떻게 반복하는지 설명해 줘, interactive

팁: 실제 배기량, 회전수 같은 숫자를 같이 주면 계기판 숫자가 그 값으로 움직여요.

 

사례 6. 생활 가전·제품 원리 리뷰 콘텐츠

제품 리뷰 블로그나 유튜브에서 "이게 안에서 어떻게 돌아가는지"를 보여 주면 확실히 차별화되죠.

에어프라이어, 커피머신, 정수기처럼 누구나 궁금해하는 가전이 좋은 소재예요.

 

커뮤니티 작품: 레버식 에스프레소 머신(@entity)과 에어프라이어(@The-Mambo) (출처: Anatomy 커뮤니티 갤러리)

 

커뮤니티 작품 중 레버식 에스프레소 머신(왼쪽)은 레버를 당겨 예비 추출하고, 놓으면 스프링이 약 9기압으로 피스톤을 밀어내는 과정을 보여 줘요.

바스켓형 에어프라이어(오른쪽)는 "에어프라이어가 어떻게 동작하는지 늘 궁금했다"는 한 줄 요청으로 시작됐어요.

/anatomy 레버식 에스프레소 머신이 9기압을 만드는 원리를 설명해 줘, interactive

팁: 특정 제품 사진을 참고로 줄 수 있지만, 사진을 그대로 베끼진 않고 재질·분위기만 참고해요. 실제 제품 구조와 다를 수 있으니 리뷰에 쓸 땐 "원리 설명용 그림"이라고 밝혀 주세요.

 

사례 7. 역사·과학 수업 자료

기계만 되는 게 아니에요. 건축 과정이나 자연 현상처럼 "구조가 있는 이야기"도 잘 그려요.

선생님이나 교육 콘텐츠 제작자에게 추천하는 활용법이에요.

 

커뮤니티 작품: 마추픽추는 어떻게 지어졌나, 제작 @jcroccomendez (출처: Anatomy 커뮤니티 갤러리)

 

커뮤니티 작품 마추픽추는 어떻게 지어졌나는 잉카 계단식 축대 단면에 돌 맞추기, 배수, 지진, 경사로로 돌 끌어올리기까지 담았어요.

공식 컬렉션의 계절(Seasons)은 3D 모드로, 위도 50도에서 6월 낮 16시간 22분, 12월 8시간 4분을 실제 천문 공식으로 계산해 보여 줘요.

3D 모드 계절 그림. 지구본이 돌면서 날짜와 북위 50도의 낮 길이가 바뀌어요 (출처: skills.wheresryan.sh/anatomy)

공식 사이트에서 계절 그림 직접 만져 보기

 

/anatomy 지구에 왜 계절이 생기는지 설명해 줘, interactive, 3D

팁: 3D는 몇 시간이 걸리니, 수업 준비는 여유 있게 시작하세요.

 

사례 8. 레트로 기기 분해·설명 영상 콘텐츠

다마고치, 게임보이, 워크맨처럼 추억의 기기를 뜯어 보는 콘텐츠는 늘 반응이 좋죠.

설명 영상이나 쇼츠에 넣을 일러스트로 쓰기에도 좋아요.

 

커뮤니티 작품: 다마고치 분해도(@pixelyokai)와 게임보이(@entity) (출처: Anatomy 커뮤니티 갤러리)

 

커뮤니티의 다마고치 분해도(왼쪽)는 "다마고치가 어떻게 작동하는지 설명해 줘, interactive" 한 줄로 만들었고,

갤러리 기록상 약 28분이 걸렸어요.

게임보이(오른쪽)는 십자키와 A/B 버튼으로 화면 속 캐릭터를 실제로 움직여 볼 수 있어요.

/anatomy 다마고치가 어떻게 작동하는지 분해해서 설명해 줘, interactive

팁: 영상에 쓸 땐 완성된 HTML을 띄워 놓고 직접 조작하는 모습을 화면 녹화하면 돼요. 스킬에 들어 있는 scripts/capture.mjs로 정지 이미지도 뽑을 수 있어요.

 

 

 

7. 자주 묻는 질문 (FAQ)

Q. Anatomy는 무료인가요?

네, MIT 라이선스라 스킬도 그림도 무료로 쓸 수 있고 API 키도 필요 없어요. 다만 그림을 만드는 동안 클로드 사용량(토큰)은 꽤 많이 써요.

 

Q. React를 꼭 써야 하나요?

아니요. 기본은 프레임워크 없는 SVG·HTML이에요. React·Next.js 컴포넌트는 원할 때만 요청하면 돼요.

 

Q. 한국어로 요청해도 되나요?

네, 다른 언어 요청으로 만든 작품도 갤러리에 있어요. 그림 주변 문구를 한국어로 원하면 요청에 "카드 문구는 한국어로"처럼 함께 적어 주세요.

 

Q. 그래프나 통계 차트도 그려 주나요?

아니요. 공식 설명에 "차트 라이브러리가 아니다"라고 나와 있어요. 데이터 차트는 다른 도구를 쓰시는 게 맞아요.

 

Q. 설치했는데 /anatomy가 안 보여요.

클로드 코드를 켠 뒤에 skills 폴더가 처음 생긴 경우예요. /reload-skills를 실행하거나 클로드 코드를 다시 열어 보세요. 노드 버전이 낮으면 설치가 안 될 수 있으니 22.20 이상인지도 확인해 주세요.

 

Q. 웹페이지에 넣으면 느려지지 않나요?

화면 밖에서는 멈추고 움직이는 부품만 다시 그려요. 셰이더도 보일 때만 돌고, 픽셀 비율을 1.5로 제한해서 부담을 줄였어요.

 

마무리

정리하면 Anatomy는 "말로 길게 설명하던 걸, 손으로 만져 보는 기계 한 대로 바꿔 주는 스킬"이에요.

설치는 한 줄, 사용도 한 줄이지만 결과물의 완성도는 정말 놀라운 수준이에요.

 

다만 시간과 토큰을 꽤 쓰니, 처음엔 작은 개념 하나로 Figure 크기부터 시작해 보세요.

그리고 첫 결과를 직접 만져 보고 "여기가 좀 어색해"라고 한 번 더 말해 주는 것, 이게 좋은 그림을 얻는 비결이에요.

 

여러분은 어떤 개념을 기계로 그려 보고 싶으세요? 댓글로 알려 주세요!

 

참고 자료

• GitHub: wheresryan22/anatomy (공식 저장소)
• Anatomy 공식 사이트
• Anatomy 공식 컬렉션
• Anatomy 커뮤니티 갤러리
• GitHub: wheresryan22/anatomy-community
• Anatomy CHANGELOG (버전 기록)
• X @Voxyz_ai: 프로젝트 동작 원리를 Anatomy로 그리는 프롬프트 팁
• Claude Code 공식 문서: Skills

이 글의 그림은 모두 Anatomy 공식 사이트·깃허브·커뮤니티 갤러리에서 가져왔으며,

해당 그림은 MIT 라이선스로 공개되어 있음.