다이어그램의 문제점: 작동 방식이 없는 구성 요소
Better Stack의 바이럴 영상인 *This Claude Code Skill Is Actually Insane*은 기존 다이어그램의 핵심적인 문제를 지적합니다. 상자와 화살표는 구성 요소의 존재를 확인시켜 줄 뿐, 그 동적인 작동 방식을 드러내는 경우는 드뭅니다. 우리는 부품은 볼 수 있지만, 상태 변화나 인과 관계는 추상적으로 남아 있어 결국 메커니즘을 추론해야만 합니다.
이러한 패러다임을 뒤집는 Claude Code용 오픈 소스 에이전트 스킬인 [anatomy](/en/anatomy)를 소개합니다. 루트 프롬프트에 명시된 이 스킬의 기본 원칙은 "상자, 화살표, 라벨을 그리지 마라. 작동 원리가 곧 개념인 실제적이고 잘 만들어진 물리적 사물을 발명하라"입니다. 이 지침은 AI가 시스템의 논리를 구현하는 대화형 물리 기계를 생성하도록 강제합니다.
이 접근 방식은 이해의 방식을 변화시킵니다. 캐시 키는 핀 텀블러 잠금장치가 되어, 올바른 키가 핀을 정렬하고 문을 엽니다. LRU 캐시는 회전하는 기계식 책장으로 나타날 수 있으며, TCP 핸드셰이크는 편지를 주고받는 로프와 도르래로 애니메이션화됩니다.
사용자는 이제 정적인 연결을 암기하는 대신 메커니즘을 따라가며 LRU 캐시가 어떻게 회전하는지, 다이얼 인디케이터의 캐리지가 어떻게 슬라이드하며 각 블록을 읽는지 관찰할 수 있습니다. 이러한 대화형 물리적 구현은 복잡한 시스템을 이해하기 쉽게 만들어 교육과 디버깅 모두에 직관적인 도움을 줍니다. 출력물은 정적 이미지가 아니라 검사 가능한 HTML, SVG 또는 WebGL 코드입니다.
캐시는 잠금장치가 되고, 프로토콜은 로프가 됩니다
추상적인 상자 대신 anatomy 스킬은 캐시 키를 핀 텀블러 잠금장치로 만듭니다. 물리적 메커니즘인 이 장치는 올바른 키가 핀을 정렬하여 잠금장치가 돌아가게 하는 과정을 보여줍니다. 이는 검증을 가시화하여 개념의 내부 작동 방식을 드러냅니다.
LRU 캐시는 회전하는 기계식 책장이나 구슬 굴리기 장치로 변합니다. 메커니즘이 작동함에 따라 항목이 액세스되고, 이동하며, 제거되는 과정을 관찰하여 그 작동 방식을 명확히 이해할 수 있습니다. 마찬가지로 TCP는 메인 로프나 도르래 시스템이 되어 편지를 앞뒤로 교환하며 핸드셰이크 프로토콜의 상태 변화를 설명합니다.
이 접근 방식은 물리적 조립품과 측정으로 확장됩니다. 예를 들어, Raptor 로켓 엔진은 마우스를 올리면 11개의 개별 조립품으로 분해되며, WebGL 배기 연기까지 완벽하게 구현됩니다. 다이얼 인디케이터는 캐리지가 슬라이드하며 블록을 측정하고, 사용자가 상호작용함에 따라 바늘이 각 블록을 읽는 모습을 보여줍니다.
SVG나 WebGL로 렌더링된 이러한 대화형 모델은 단순히 존재하는 것이 아니라 작동합니다. 이는 정적 다이어그램에서 동적 설명으로의 심오한 전환을 제공하며, 구성 요소의 존재와 그 동적 기능 사이의 간극을 메워줍니다.
내부 작동 원리: 검사 가능한 일러스트레이션
This Claude Code Skill Is Actually Insane 영상에서 소개된 Anatomy 스킬은 정적 이미지가 아닌 실행 가능한 코드를 생성합니다. Claude는 독립적인 SVG, HTML/JavaScript 또는 React 컴포넌트를 생성합니다. 이러한 출력물은 직접적인 상호작용, 검사 및 수정을 가능하게 하여 시스템 동작을 시각화하는 방식을 근본적으로 변화시킵니다.
계층적 시각화 접근 방식이 이러한 상호작용을 주도합니다. 등각 투영 렌더링, 엄격한 페인터 알고리즘(Painter's algorithm) 깊이 순서 지정, 그리고 Raptor 로켓 엔진에서 볼 수 있는 엔진 연기와 같은 선택적 WebGL 효과는 물리적 실체감을 더해줍니다. 평면적인 래스터 이미지와 달리, 이것들은 직접 조작해 볼 수 있는 기계입니다.
기존 이미지 생성 방식과의 실질적인 차이는 매우 큽니다. 브라우저 기반 감사를 통해 충돌, 유효하지 않은 파이프 엔드포인트, 잘못된 폐색(occlusion)을 포착하여 기하학적 무결성을 보장할 수 있으며, 이는 개념을 구체화하려는 시스템에 있어 매우 중요한 세부 사항입니다. 코드 자체를 검사, 디버깅 및 버전 관리할 수 있습니다.
이는 추상적인 다이어그램에서 크게 발전한 것입니다. 기본 메커니즘에 대한 자세한 탐색을 원하시면 GitHub - wheresryan22/anatomy: An agent skill for creating detailed, interactive isometric illustrations에서 코드를 확인하실 수 있습니다. 이러한 생성된 "기계"를 감사하고, 상호작용하며, 버전 관리할 수 있는 능력은 단순한 일러스트레이션을 넘어 기능적이고 검사 가능한 계산 모델로 격상시킵니다.
이 글이 마음에 드셨나요? 매일 아침 이런 글을 메일로 받아보세요.
하루 한 통 · 두 번의 클릭으로 구독 취소 · 제3자 추적 없음
마법이 끝나는 지점—그리고 시도해 보는 방법
이 Claude Code Skill은 정말 놀랍지만, 일상적인 다이어그램 도구를 대체할 것으로 기대하지는 마십시오. 이러한 복잡하고 상호작용 가능한 모델을 생성하려면 상당한 컴퓨팅 자원과 토큰 예산이 필요합니다. 각 상세 일러스트레이션은 정확성을 보장하기 위해 종종 수많은 기하학적 선, 다중 에이전트 실행, 브라우저 기반 검증을 필요로 합니다.
Anatomy는 LRU 캐시의 내부 작동 방식이나 TCP 프로토콜 핸드셰이크와 같은 특정 메커니즘 및 시스템 동작을 설명하는 데 탁월합니다. Mermaid 차트, 표준 차트 라이브러리, 재무 대시보드 또는 지도를 대체할 수는 없습니다. 단순히 무언가가 존재한다는 것을 보여주는 것이 아니라, 어떻게 작동하는지를 명확히 설명할 때 사용하세요.
Anatomy를 실험해 보려면 MIT 라이선스가 적용된 GitHub 프로젝트 wheresryan22/anatomy에 접속하세요. 그곳에서 Agent Skills CLI 명령어를 찾을 수 있습니다. 작은 것부터 시작해 보세요: 하나의 개념을 선택하고, 상호작용 모델을 생성한 뒤, 결과물인 SVG, HTML 또는 React 컴포넌트 코드를 검사해 보세요. 이를 통해 공유하기 전에 생성된 상호작용과 로직이 의도와 일치하는지 확인할 수 있습니다.
이 기술은 정적 이미지가 아닌 코드를 생성합니다. 이러한 근본적인 차이 덕분에 This Claude Code Skill Is Actually Insane에서 보여준 것과 같은 정밀하고 상호작용 가능한 시각화가 가능합니다. 간단한 핀 텀블러 잠금장치부터 WebGL 배기 연기가 있는 다중 조립 Raptor 엔진에 이르기까지, Anatomy는 추상적인 개념을 실체화합니다.
자주 묻는 질문
Anatomy Claude Code skill이란 무엇인가요?
코딩 에이전트가 개념을 작동하는 물리적 메커니즘으로 시각화한 대화형 코드 기반 일러스트레이션을 구축하도록 안내하는 오픈 소스 에이전트 스킬입니다.
Anatomy는 소프트웨어 개념을 어떻게 설명하나요?
개념을 기계적 유추에 매핑한 다음, 사용자가 그 동작을 관찰하거나 조작할 수 있는 대화형 일러스트레이션을 생성합니다.
Anatomy가 Mermaid나 차트 라이브러리를 대체할 수 있나요?
아니요. 메커니즘을 설명하기 위해 순서도 도구를 보완하지만, 대시보드, 재무 차트 또는 지도를 위한 용도는 아닙니다.
Claude Code용 Anatomy는 어떻게 설치하나요?
이 프로젝트는 Agent Skills CLI를 사용한 설치 방법을 문서화하고 있습니다: npx skills add wheresryan22/anatomy -g -a claude-code.