오픈소스 Anatomy: 한 줄 명령으로 인터랙티브 기계 도해 생성

Anatomy는 추상적인 기술 개념을 프롬프트 한 줄로 입력받아, 실제로 움직이고 조작할 수 있는 아이소메트릭 기계 도해로 변환해 주는 오픈소스 에이전트 스킬입니다.

흔히 쓰이는 사각형 상자와 화살표 기반 다이어그램 대신, Anatomy는 개념의 작동 방식을 수십 개의 정밀 기계 부품으로 시각화합니다. 예를 들어 변경 사항이 없을 때 연산을 건너뛰는 캐시 메커니즘은 모든 핀이 일치해야 돌아가는 핀 텀블러 자물쇠로 표현되고, 여러 캔버스를 처리하는 GPU 컨텍스트는 단일 헤드가 노즐을 오가는 플로터 장치로 구현됩니다.

생성 가능한 인터랙티브 도해

Anatomy가 제작하는 그래픽은 일관된 아이소메트릭 시점과 음영 원칙을 따르며, 크게 세 가지 방식으로 나뉩니다.

핵심은 순수 SVG 모드입니다. 4단계 톤으로 렌더링된 입체 부품들이 뒤에서 앞으로 차례대로 그려지며, 마우스나 키보드 인터랙션에 따라 부드러운 움직임과 실시간 측정 수치를 제공합니다. 독립 실행형 HTML 파일이나 스타일이 내장된 단일 SVG 파일, 또는 React나 Next.js 컴포넌트 형태로 손쉽게 내보낼 수 있습니다.

벡터 선으로 표현하기 힘든 불꽃, 배기가스, 수류, 빛의 굴절 등은 SVG와 WebGL 셰이더의 결합 모드로 처리합니다. 전면과 후면 SVG 레이어 사이에 동일한 카메라 앵글의 셰이더 캔버스를 배치해 이질감 없이 렌더링합니다.

현재 베타 단계인 3D 모드도 지원합니다. 다이얼 회전이나 부품 분해처럼 3차원 축을 중심으로 회전하는 동작을 프레임 단위로 재투영하고 음영을 다시 계산해 줍니다.

설치 및 실행 방법

Anatomy는 Agent Skill 표준 구조를 따르며, Node.js 기본 내장 모듈만 사용하기 때문에 별도의 API 키나 추가 npm 패키지 설치가 필요 없습니다.

설치는 간단합니다. npx skills add wheresryan22/anatomy -g 명령을 실행하거나 GitHub 저장소를 에이전트 스킬 경로에 클론하면 됩니다. Claude Code를 비롯해 Antigravity, OpenCode, Codex, MiniMax Code 등 다양한 코딩 에이전트를 지원합니다. 전체 저장소 크기는 약 10MB이며, Node.js 22.20 이상 환경이 요구됩니다.

설치 후 에이전트 채팅창에 /anatomy 명령과 함께 설명하려는 메커니즘을 입력하면 됩니다. 예를 들어 토큰 버킷 속도 제한이나 연결 풀 동작 방식을 요청하면 에이전트가 코드를 작성하고, 헤드리스 크롬을 띄워 부품 간 간섭 여부까지 스스로 검증합니다.

왜 중요한가

Anatomy는 기술 문서 작성과 엔지니어링 시각화에서 매우 영리한 접근을 보여줍니다. 기존에는 인터랙티브한 3D 기계 그래픽을 웹에 넣으려면 복잡한 3D 모델링 툴을 거쳐야 했지만, LLM의 코드 생성 능력과 물리적 은유를 결합해 진입 장벽을 완전히 허물었습니다.

기술 블로그, 오픈소스 문서, 개발자 랜딩 페이지를 자주 제작하는 팀이라면 지금 바로 도입해 볼 가치가 충분합니다. 다만 Codex처럼 샌드박스 정책이 엄격한 환경에서는 백그라운드 브라우저 렌더링 검사가 차단될 수 있으므로, 권한 설정을 미리 확인해야 합니다.