박스는 잊으세요: 개념을 움직이게 만드세요
지금까지 사용해 본 모든 다이어그램 도구는 박스와 화살표를 그립니다. Anatomy라고 불리는 이 새로운 AI 기술에는 한 가지 규칙이 있습니다. 바로 그렇게 하지 않는 것입니다. 핵심 아이디어는 기존의 다이어그램은 '존재하는 것'만을 보여주지만, 물리적인 기계는 메커니즘이 '어떻게 작동하는지'를 보여줄 수 있다는 점입니다.
Anatomy는 AI가 개념을 반영하는 물리적 기계를 발명하도록 합니다. 캐시 키는 올바른 키가 핀을 정렬하여 문을 여는 핀 텀블러 잠금 장치가 됩니다. TCP 핸드셰이크는 밧줄을 따라 전달되는 편지가 되고, LRU 캐시는 실행되면서 상태 변화를 보여줍니다.
이것들은 정적인 이미지가 아닙니다. Anatomy는 직접 조작하고 건드려 볼 수 있는 인터랙티브 기계를 렌더링합니다. 이는 Mermaid, D2, Excalidraw 또는 기타 아키텍처 다이어그램 기술과는 차별화되는 결정적인 특징입니다.
기존 도구들은 토폴로지를 그려 시스템 전체에서 무엇이 무엇과 연결되는지를 매핑합니다. 반면 Anatomy는 '하나의 메커니즘'이 어떻게 작동하는지를 설명합니다. 전체 시스템 아키텍처를 매핑하는 것이 아니라, 특정 프로세스를 명확히 하기 위해 정밀하고 작은 모델을 구축합니다.
영리한 부분은 그리기 전에 일어납니다
Anatomy의 진정한 천재성은 'Truth First(진실 우선)' 접근 방식에 있습니다. AI 에이전트는 단순히 그리기 시작하는 것이 아니라, 먼저 모든 규칙과 값을 수집한 다음 개념이 어떻게 작동하는지에 대한 작고 순수한 수학적 모델을 구축합니다. 이러한 엄격한 모델링을 거친 후에야 비로소 시각적 요소를 계획하고 그립니다.
이는 화면의 인터랙티브 읽기 자료가 단순히 가짜가 아니라 기본 모델에 직접 연결되어 있음을 의미합니다. Anatomy 다이어그램에서 컨트롤을 변경할 때, 단순히 장식적인 애니메이션을 트리거하는 것이 아니라 모델의 계산에 따라 실제로 입증된 상태를 업데이트하는 것입니다.
기하학적 자동 검사 기능도 내장되어 있습니다. 시스템은 다른 부품과 겹치지 않는지, 연결이 올바른 위치에 있는지 확인할 수 있습니다. 심지어 적절한 등각 투영(isometric) z-순서까지 보장합니다.
하지만 중요한 검증 경계가 존재합니다. 이러한 검사는 '사실'이 아닌 '그림'만을 검증합니다. 에이전트는 기하학적 구조가 건전함을 확인할 수는 있지만, 사실이나 은유 자체가 진정으로 정확한지 확립할 수는 없습니다. 설명은 그 비유만큼만 진실합니다. 이것이 바로 그림을 신뢰하기 전에 항상 비유를 먼저 읽어야 하는 이유입니다.
커넥션 풀에서 로켓 엔진까지
그렇다면 이 도구를 실제로 어떻게 사용할까요? 개념과 그 동작을 에이전트에게 프롬프트로 입력한 다음 "인터랙티브"와 같은 지침을 추가하면 됩니다. 예를 들어, 영상의 데모는 10개의 연결로 구성된 데이터베이스 커넥션 풀을 모델링하여, 연결이 모두 사용 중일 때 대여되고 반환되며 대기열에 추가되는 과정을 보여줍니다.
Anatomy에는 범위를 보여주는 몇 가지 내장 예제가 함께 제공됩니다. 여기에는 간단한 다이얼 표시기, 화면에 타이핑할 수 있는 인터랙티브 컴퓨터, WebGL 배기 가스 흐름과 함께 11개의 조립품으로 분해되는 상세한 Raptor 로켓 엔진이 포함됩니다. 이는 기본 장치에서 복잡한 시스템까지 어떻게 확장되는지를 보여줍니다.
Anatomy는 Claude Code, OpenAI Codex, OpenCode, Antigravity와 같은 호환 가능한 코딩 에이전트를 위한 오픈 소스 에이전트 기술입니다. npx를 사용하거나 저장소를 복제하여 설치할 수 있습니다. 자세한 내용은 GitHub - wheresryan22/anatomy: An agent skill for creating detailed, interactive isometric illustrations를 확인하세요.
출력물은 독립형 HTML/SVG 파일 또는 React 컴포넌트이며, dark mode나 WebGL과 같은 옵션으로 제어할 수 있습니다. 즉, 개발자는 이러한 동적 시각 자료를 문서, 블로그 게시물 또는 랜딩 페이지에 쉽게 삽입하여 추상적인 개념을 진정으로 인터랙티브하게 만들 수 있습니다.
이 글이 마음에 드셨나요? 매일 아침 이런 글을 메일로 받아보세요.
하루 한 통 · 두 번의 클릭으로 구독 취소 · 제3자 추적 없음
토큰 미터가 포함된 훌륭한 설명 도구
Anatomy의 뛰어난 설명에는 비용이 따릅니다. 인터랙티브 피규어를 생성하는 것은 간단한 화이트보드 스케치가 아니므로, 상당한 시간과 토큰 소비를 예상해야 합니다. "일반적인" 피규어는 30분에서 90분이 소요될 수 있으며, "Epic" 렌더링은 2~4시간, 매우 복잡한 디자인의 경우 48시간 이상이 걸릴 수도 있습니다. 예상 소요 시간은 크게 달라질 수 있으므로, 종량제 요금제 사용 시 예산을 적절히 고려하십시오.
이 도구는 독특하고 인터랙티브한 설명이 노력의 가치를 충분히 발휘하는 특정 사용 사례에서 빛을 발합니다. 다음과 같은 경우에 고려해 보세요:
- 기술 문서
- 복잡한 개념 교육
- 제품 랜딩 페이지
- 참여를 유도하는 블로그 게시물
항상 비판적인 시각으로 결과물을 검토하십시오. 기반이 되는 물리적 은유가 정말 정확한지 확인하고, 직접 상호작용을 테스트해 보십시오. AI의 자체 검사는 기하학적 무결성을 확인하는 것이지 유추의 사실적 정확성을 보장하는 것은 아니므로 수정 사항에 대한 예산을 책정하십시오. 시각적 검사는 엄격한 주제 검토를 대신할 수 없습니다.
자주 묻는 질문 (FAQ)
Anatomy AI 스킬이란 무엇인가요?
Anatomy는 기술적 개념의 작동 방식을 설명하기 위해 인터랙티브한 일러스트 기계를 만드는 오픈 소스 에이전트 스킬입니다.
Anatomy는 Mermaid 다이어그램과 어떻게 다른가요?
Mermaid는 구성 요소와 연결을 매핑하지만, Anatomy는 하나의 메커니즘을 모델링하고 상호작용에 반응할 수 있는 물리적 은유를 구축합니다.
Anatomy는 무엇을 생성하나요?
SVG 시각 자료가 포함된 독립형 HTML 페이지나, 선택적으로 WebGL 또는 실험적인 3D 기능을 갖춘 삽입 가능한 React 컴포넌트를 생성할 수 있습니다.
Anatomy는 빠르거나 저렴한가요?
꼭 그렇지는 않습니다. 복잡한 피규어는 긴 에이전트 실행 시간과 상당한 토큰을 필요로 할 수 있으므로, 시작하기 전에 범위와 비용을 확인하십시오.
Anatomy가 설명의 정확성을 검증할 수 있나요?
기하학적 구조와 상호작용의 측면을 테스트할 수는 있지만, 그러한 검사가 선택된 은유나 기술적 설명이 정확하다는 것을 증명하지는 않습니다.