전공 개념이 머릿속에 안 그려질 때, 움직이는 분해도로 그려 주는 AI
기계공학 수업에서 변속기 구조를 설명하라는데, 교재 그림만 봐서는 부품이 어떻게 맞물려 움직이는지 머릿속에 안 그려질 때가 있죠. 이 글은 말로 시키면 움직이는 분해도(Exploded View)를 그려 주는 AI 스킬 Anatomy를 직접 써 본 기록이에요. 에스프레소 머신 안에서 물이 흐르는 분해도는 약 7분, 자전거 뒷변속기는 약 9분 만에 HTML 파일 한 장으로 나왔습니다.
Anatomy는 깃허브(GitHub)에 공개된 에이전트 스킬(Agent Skills)이에요. 클로드 코드(Claude Code) 같은 AI 에이전트에 붙여 두면, 설명하고 싶은 개념을 실제로 작동하는 물건으로 바꿔 아이소메트릭(Isometric) 그림으로 그려 줍니다. 아래 기능 설명은 공식 README와 스킬 문서를 2026년 10월 15일에 받아 확인했고, 시험은 같은 날 직접 돌렸어요.
Anatomy가 그리는 움직이는 분해도는 어떤 그림인가
README 첫 줄은 이 스킬을 “아이디어를 실제로 작동하는 물건으로 만들어 설명하는 클로드 스킬”이라고 소개해요. 결과물은 작은 부품 수십 개로 쌓은 입체 그림인데, 제목과 안내 문구, 실시간 판독 숫자가 붙은 카드 안에 들어갑니다. 마우스를 올리거나 키보드를 누르면 부품이 천천히 움직이고요.
README가 든 예가 재미있어요. “바뀐 게 없으면 작업을 건너뛰는 캐시 키”는 핀이 전부 맞아야만 돌아가는 자물쇠로, “GPU 컨텍스트 하나가 여러 캔버스를 맡는 구조”는 인쇄 헤드 하나가 칸 16개를 돌아다니는 플로터로 바꿔 그립니다. 개념에 딱 맞는 기계를 지어내는 것까지 AI가 맡는 거죠.
그림 종류는 세 가지예요. 기본은 SVG 그림이고, 불꽃·배기가스·물·증기처럼 선으로 못 그리는 건 웹지엘(WebGL) 셰이더(Shader)를 그림 사이에 끼워 넣습니다. 세 번째인 3D 모드는 다이얼이나 회전판처럼 실제 3D로 도는 부품을 위한 것인데, 아직 베타예요. 결과는 HTML 페이지 한 장, SVG 파일 하나, React·Next.js 컴포넌트 중에서 고를 수 있다고 README에 적혀 있습니다.
공식 예제 중 로켓 엔진 분해도는 마우스를 올리면 11덩어리로 나뉩니다. README는 이 그림에 대해 배관이 멈춰 있을 때도, 분해됐을 때도, 그 사이 모든 순간에도 다른 부품을 뚫고 지나가지 않는다는 걸 점검(Audit)으로 증명한다고 설명해요. 그림이 보여 주는 숫자도 부품을 움직이는 같은 작은 모델에서 나온다고 적혀 있고요.
에스프레소 머신 물 흐름을 분해도로 그려 본 결과
첫 분해도 시험 주제는 에스프레소 머신이었어요. 물탱크에서 펌프, 보일러, 그룹헤드를 거쳐 컵까지 물이 가는 길을 분해도로 보여 달라고 했습니다. 스킬 파일을 내려받아 클로드 코드가 SKILL.md에 적힌 “HTML 페이지 한 장” 방식대로 만들게 했어요.
요청부터 다크·라이트 두 테마 분해도 페이지가 다 나오기까지 약 7분이 걸렸습니다. 스킬 문서와 예제를 읽는 시간까지 넣은 시계 기준이에요. 스킬이 스스로 돌리는 점검 두 가지(부품끼리 뚫고 지나가지 않는지, 선 끝이 허공에 떠 있지 않은지)는 첫 실행에 통과했고, 벽면이 밋밋해 보여서 통풍구와 나사 점을 넣는 손질만 한 번 했어요.
이 분해도의 움직임은 두 겹이에요. 가만히 두면 빛나는 물방울이 관을 따라 물탱크에서 보일러, 그룹헤드로 흐르고, 압력계 바늘이 올라가면서 두 줄기 추출이 컵으로 떨어집니다. 마우스를 올리면 물탱크가 위로 빠지고 포터필터와 컵이 앞으로 나오는 분해 동작이 이어지고요. 이 움직이는 분해도 한 장이면 “물이 어디를 거쳐 가나”를 말로 길게 설명할 필요가 줄어듭니다.
에이전트 스킬 – 반복 작업을 절차로 묶는 방법자전거 변속기 분해도와 3D로 돌려 보기
두 번째 분해도는 자전거 뒷변속기였어요. 레버를 당기면 케이블이 당겨지고, 변속기 몸통과 풀리가 안쪽으로 밀리면서 체인이 작은 톱니(13T)에서 큰 톱니(17T)로 넘어가는 장면입니다. 약 9분이 걸렸어요.
이번엔 점검이 일을 했어요. 첫 점검에서 체인이 변속기 몸통을 뚫고 지나가고, 케이블 끝이 상자 모서리에 걸린 게 잡혔습니다. AI가 부품 위치를 옮겨 다시 돌렸더니 통과했고, 이어진 선 끝 점검에서 스프링 끝이 살짝 떠 있는 게 하나 더 잡혀 받침을 넣어 고쳤어요. 눈으로 봐서는 놓치기 쉬운 겹침을 스킬이 먼저 찾아 주니까, 분해도를 받아 들고 하나하나 확대해 볼 일이 줄어요.
다만 이 분해도에서 체인이 톱니를 옮겨 타는 순간은 두 정지 자세를 겹쳐 바꾸는 방식으로 만들었어요. 점검도 두 정지 자세만 확인한 거라, 중간 장면은 실제 체인 움직임을 그대로 계산한 그림이 아닙니다.
3D 모드는 회전판 위 에스프레소 잔 하나로 따로 시험했어요. 처음엔 잔과 손잡이가 서로 박혀 있다는 이유로 만들기 단계가 멈췄고, 손잡이를 잔 표면에 맞닿게 바꾸자 넘어갔습니다. 빠른 점검까지는 1분이 안 걸렸고, 한 바퀴를 다 도는 전체 회전 점검은 2분 36초 걸려 통과했고, 마우스로 끌어 돌리는 것도 됐어요.
발표 자료에 분해도를 넣을 때 알아 둘 것
전공 발표용 분해도라면 한글이 제일 걱정이죠. 시험에서는 카드 제목(“에스프레소 머신 · 물의 길”), 범례, 실시간 판독, 그림 안 새김 글자 “보일러”까지 한글로 넣었는데 모두 깨지지 않았어요. 카드와 범례 글꼴 끝에 한글 글꼴을 덧붙여 두긴 했는데, 덧붙이지 않은 새김 글자 “보일러”도 맥이 시스템 한글 글꼴로 대신 그려 줘서 글꼴을 따로 바꿀 필요는 없어 보였어요. 한글 글꼴이 없는 리눅스 서버에서는 시험하지 않았어요.
그림 위에 부품 이름표는 못 단다
스킬 문서(SKILL.md)는 글자를 그림 밖에 두라고 정해 두었어요. 그림 안에는 아주 작은 새김 글자 하나만 허용됩니다. 그래서 부품마다 지시선을 그어 이름을 붙이는 교과서식 라벨은 넣을 수 없었고, 부품 이름은 범례와 캡션으로 옮겼어요. 발표 화면에서 화살표 라벨이 꼭 필요하면 슬라이드에서 따로 얹어야 합니다.
완성된 분해도는 브라우저로 여는 HTML이라 발표 화면에서 바로 열어 마우스로 움직여 보일 수 있어요. 시험에서는 이 페이지를 그림 파일(PNG)로 캡처하고, 움직이는 모습을 10초 안팎의 영상으로 녹화해 이 글과 쇼츠에 썼어요. 테마는 라이트가 대비가 좋아서 라이트로 캡처했는데, README도 라이트 테마를 먼저 맞춰 만든다고 적었어요.
분해도 요청은 README가 권하는 습관대로 쓰면 됩니다.
- 설명할 개념을 말하고 실제 숫자(크기, 개수, 속도, 기준값)를 같이 줍니다. 그러면 어떤 기계로 그릴지는 스킬이 고릅니다.
- 그리고 싶은 물건이 정해져 있으면 그 이름(에스프레소 머신, 분젠 버너, 자물쇠)과 어느 부분이 움직여야 하는지를 말합니다.
- 어디에 쓸지 말합니다. HTML 페이지 한 장인지 SVG 파일인지, 라이트인지 다크인지에 따라 만드는 방식이 달라진다고 README에 적혀 있어요.
README의 예시 요청에는 “분젠 버너의 공기 조절 고리를 열면 노란 불꽃이 파란 원뿔로 바뀌는 그림”도 있어요. 화학 실험 발표라면 이런 식으로 요청하면 됩니다. 이번 시험처럼 “이름은 한글로”를 한 줄 덧붙이는 것도 잊지 마세요.
조별과제·사업계획서 PDF PPT 변환, 글자·표·차트까지 고칠 수 있게 만들어 주는 AIAnatomy 설치하고 처음 시키는 법
설치는 명령 한 줄입니다. 설치 도중에 어느 에이전트에 붙일지 묻는데, README에 적힌 선택지는 Claude Code, Antigravity, OpenCode, Codex예요. 이번 시험에서 실제로 쓴 건 클로드 코드였고, 설치 명령 대신 저장소를 내려받아 스킬 문서대로 만들게 했습니다.
npx skills add wheresryan22/anatomy -g클로드 코드만 고르려면 뒤에 -a claude-code를 붙이면 됩니다. 깐 다음에는 /anatomy 뒤에 그릴 분해도 내용을 적으면 되고, 코덱스(Codex)에서는 $anatomy로 불러요. README는 스킬 이름을 부르지 않아도 아이소메트릭 그림이나 설명용 그림을 부탁하면 알아서 이 스킬을 쓴다고 설명합니다.
필요한 건 Node.js 20.10 이상과, 스킬이 자기 그림을 화면으로 찍어 점검할 때 쓰는 Chrome 또는 Chromium이에요. 따로 npm install 할 것도 API 키도 없다고 적혀 있습니다. 다만 설치 도구가 예제까지 저장소 전체(약 10MB)를 복사하고, 설치 도구 1.7.1 버전은 Node.js 22.20 이상을 요구한다는 설명도 같이 있어요.
README가 스스로 밝힌 분해도 도구의 한계
README의 Limits 절
- 차트 도구가 아닙니다. 축이나 데이터 그래프가 없고, 숫자는 모델이 움직이는 실시간 판독으로만 나와요.
- 기계, 계기, 공구, 가구를 그립니다. 사람이나 정확한 지도는 못 그리고, 작동 원리가 없는 개념은 약하게 나온다고 적혀 있어요.
- 일부러 느립니다. 부품 목록, 형상, 점검, 이음새 확대 확인을 다 거치기 때문이고, 30부품 3D 그림의 전체 회전 점검에는 15~20분이 걸린다고 해요.
- 3D 모드는 베타예요. README 기준으로 자기 예제와 시험용 그림 하나에서만 검증됐습니다.
시험에서 분해도 한 장에 7~9분이 나온 건 부품 수를 줄인 영향이 커 보여요. SKILL.md는 한 가지 구조를 보여 주는 그림이면 부품 40~80개를 권하는데, 시험한 에스프레소 머신은 입체 부품 34개, 변속기는 자세마다 37개였습니다. 권장대로 부품을 채우면 시간이 더 걸릴 거예요. 그래서 발표 전날 밤보다는 며칠 여유를 두고 분해도를 뽑아 두는 편이 안전합니다.
말로 도식을 시키는 다른 도구가 궁금하다면 업무 메모를 흐름도로 바꿔 본 diagram-design 글을, 스킬이 뭔지 처음이라면 에이전트 스킬 정리 글을 같이 보면 됩니다.
참고한 공식 문서
기능·설치·필요 조건·한계 설명은 Anatomy 깃허브 저장소의 README와 SKILL.md를 기준으로 했고, 별 수와 공개일은 GitHub API에서 확인했습니다. 기준일은 2026-10-15입니다. 시험 결과는 같은 날 직접 돌린 것이고, 걸린 시간은 AI가 생각하는 시간까지 넣은 실제 경과 시간이에요. 별 수와 설치 조건은 바뀔 수 있으니 원문을 확인하세요.
분해도 자주 묻는 질문
Anatomy로 만든 분해도에 한글 이름을 넣을 수 있나요?
2026-10-15 직접 시험에서 카드 제목, 범례, 실시간 판독, 그림 안 새김 글자 1개를 한글로 넣었고 모두 깨지지 않았어요. 카드와 범례 글꼴 목록 끝에 한글 글꼴을 덧붙여 두고 맥에서 확인했는데, 덧붙이지 않은 그림 안 새김 글자도 정상으로 나왔어요. 한글 글꼴이 없는 리눅스 환경은 시험하지 않았습니다. 스킬 규칙상 그림 위에 부품마다 이름표를 다는 방식은 안 돼서, 부품 이름은 범례와 캡션에 넣었어요.
한 장 만드는 데 얼마나 걸리나요?
시험에서는 에스프레소 머신이 약 7분, 자전거 뒷변속기가 약 9분이었어요. 스킬 문서를 읽는 시간과 AI가 생각하는 시간까지 넣은 시계 기준이고, 부품 수를 스킬 권장(40~80개)보다 적게 잡은 영향이 커 보여요. README는 일부러 느리게 만든 도구라고 밝혔고, 30부품 3D 그림의 전체 회전 점검에 15~20분이 걸린다고 적었어요.
클로드 코드가 아니어도 쓸 수 있나요?
README에 따르면 설치할 때 Claude Code, Antigravity, OpenCode, Codex 중에서 고를 수 있고, 코덱스에서는 $anatomy로 부릅니다. 이번 시험에서 실제로 쓴 건 클로드 코드뿐이에요. 필요 조건은 Node.js 20.10 이상과 점검용 Chrome 또는 Chromium입니다.
글에 나온 규칙 파일과 에이전트는 Claude Code에서 쓰는 방식이고, 공식 안내는 Claude Code 공식 문서에 있습니다.
이 글은 직접 만들고 운영하며 남긴 기록입니다. 적힌 수치는 작성 시점의 제 계정 기준이며, 같은 결과나 수익을 보장하지 않습니다.
One Comment