AI가 방금 물리학을 인터랙티브하게 만들었습니다. 이건 정말 미쳤네요. (애너토미)

원제 · AI Just Made Physics Interactive. This Is Insane. (Anatomy)

5:561분 읽기Better Stack2026. 10. 21.컴퓨터/소프트웨어 · AI/미래기술

핵심 요약

해부학 스킬은 단순한 연결 토폴로지가 아닌 작동하는 물리적 기계 형태의 인터랙티브 시각화를 생성하지만, 제작에 수십 분에서 수 시간이 걸리고 많은 토큰을 소모한다.

하이라이트

  • 해부학(Anatomy)은 전통적인 상자와 화살표 다이어그램과 달리, 에이전트가 개념을 구현한 물리적 기계를 발명하도록 만든다.

  • 일반적인 피규어 제작에는 30분에서 90분이 소요되며, 핵심 피규어는 2시간에서 4시간까지 걸릴 수 있다.

  • 이 도구는 종속성이 제로이며 Node 20.10 이상이 필요하고 크롬 브라우저를 열어 작업물을 시각적으로 보여준다.

  • 결과물은 독립형 HTML 페이지, SVG, 또는 리액트 컴포넌트 형태로 저장되며 실제 웹사이트에 그대로 사용할 수 있다.

타임라인

  1. 해부학 도구의 개념과 등장 배경

    기존의 상자와 화살표 위주의 다이어그램 한계를 극복하기 위해 등장한 해부학 스킬의 개념을 다룬다. 캐시 키나 LRU 캐시, TCP 핸드셰이크 같은 복잡한 개념을 물리적인 작동 기계처럼 시각화하여 보여주는 것이 특징이다.

    • 기존의 다이어그램 도구는 부품의 존재만 알려줄 뿐 실제 역할은 설명하지 못한다.
    • 해부학 스킬은 에이전트를 통해 개념을 물리적 기계 형태로 구현한다.

  2. 설치 방법 및 실행 과정

    도구를 설치하고 실행하는 구체적인 명령어와 작동 순서를 설명한다. 에이전트는 무작정 그림을 그리지 않고 실제 데이터를 기반으로 모델을 먼저 구축한 뒤 지오메트리를 자체 검사하는 과정을 거친다.

    • npx 명령어로 설치하거나 리포에서 클로드 명령어를 실행한 뒤 anatomy를 입력하여 사용할 수 있다.
    • 실행 과정의 1단계는 실제 숫자를 수집하고 순수 모델을 구축하는 진실 우선 단계이다.
    • 결과물은 독립형 HTML, SVG, 리액트 컴포넌트 형태로 출력되며 WebGL과 3D 모드를 지원한다.

  3. 기존 다이어그램 도구와의 차이점과 소요 시간

    기존의 토폴로지 중심 다이어그램과 해부학 스킬의 차이점을 분석한다. 매우 느린 렌더링 속도와 토큰 소모량이라는 치명적인 단점이 존재하지만, 기술 문서나 랜딩 페이지 등에서 강력한 시각화 효과를 제공한다.

    • Mermaid나 Excalidraw 같은 도구와 달리 메커니즘과 행동 양식을 설명하는 설명 기계 역할을 한다.
    • 일반 피규어는 30~90분, 핵심 피규어는 2~4시간이 소요되며 엄청난 토큰을 소모한다.
    • 클로드가 그림 자체의 결합 여부는 검증하지만 비유의 정확성까지 완벽하게 보장하지는 않는다.

설명

Anatomy is a new open-source Claude Code skill that turns complex algorithms, technical concepts, and engineering systems into interactive machines instead of traditional boxes-and-arrows diagrams. In this video, I test how Anatomy works with Claude Code, Codex, OpenCode, and Antigravity, explore its interactive SVG, WebGL, and experimental 3D capabilities, and show examples including an LRU cache, TCP handshake, Raptor rocket engine, turbofan, and other interactive technical visualizations. 🔗 Relevant Links Anatomy Repo - https://github.com/wheresryan22/anatomy Anatomy Docs - https://skills.wheresryan.sh/anatomy ❤️ More about us Radically better observability stack: https://betterstack.com/ Written tutorials: https://betterstack.com/community/ Example projects: https://github.com/BetterStackHQ 📱 Socials Twitter: https://twitter.com/betterstackhq Instagram: https://www.instagram.com/betterstackhq/ TikTok: https://www.tiktok.com/@betterstack LinkedIn: https://www.linkedin.com/company/betterstack 📌 Chapters: 00:00 – This Claude Code Skill Turns Algorithms Into Interactive Machines 00:27 – Anatomy Demos: Rocket Engines, LRU Cache & Interactive SVGs 01:01 – Showcasing Anatomy Repo 02:05– How Anatomy Builds Interactive Simulations with Real Data 02:20 – How Anatomy Works with Claude Code, Codex & OpenCode 02:53 – How Does Anatomy Behave 03:15 – Our Final Output in Anatomy 04:00 – Anatomy vs Mermaid, D2 & Traditional Diagrams 04:12 – The Catch: Generation Times, Token Costs & Performance 05:20 – Who Should Actually Use Anatomy? 05:45 – Final Thoughts: Are Interactive AI Diagrams Worth It?

이 영상에 대해 글쓰기