Understand-Anything은 코드베이스를 LLM + 정적분석으로 스캔하여 인터랙티브 지식그래프(Knowledge Graph) 대시보드로 시각화해주는 Claude Code 플러그인입니다. 코드의 파일·함수·클래스·의존성 관계를 자동 추출하고, 탐색 가능한 React Flow 기반 그래프로 보여주며, 자연어로 질문하거나 변경 영향도를 분석할 수 있습니다.
낯선 코드베이스는 처음에 미로처럼 느껴집니다. 어느 파일이 무엇을 하고, 어디서 어디를 호출하는지 파악하는 데 며칠이 걸리기도 하죠. Understand-Anything은 AI가 자동으로 지도를 그려줍니다.
노드(파일/함수/클래스)와 엣지(의존관계)로 이루어진 그래프가 뜨고, 클릭하면 상세 설명이 나타납니다. "이 함수가 어디서 호출되나요?"를 자연어로 물어볼 수도 있습니다.
Sourcegraph 같은 도구는 셀프호스팅이 필요하고, 수동 draw.io 문서는 코드가 바뀌면 즉시 낡습니다. AI 어시스턴트에게 물어봐도 전체 코드베이스 컨텍스트 없이는 부정확한 답을 줍니다.
슬래시 커맨드 하나면 다수의 AI 에이전트(9개+)가 분업하여 코드베이스를 분석하고, 변경된 파일만 재분석하는 증분 방식으로 대규모 프로젝트에서도 빠릅니다. 비개발자(PM, 디자이너)도 코드 구조를 파악할 수 있습니다.
| 비교 대상 | Understand-Anything 차별점 |
|---|---|
| GitHub Copilot 코드 이해 | 그래프 시각화 + 아키텍처 레이어 자동 분류 |
| Sourcegraph | 셀프호스팅 불필요, CLI 한 줄로 실행 |
| CodeScene | 무료 오픈소스, LLM 기반 자연어 설명 |
| 수동 문서화 (draw.io 등) | 코드 변경 시 자동 증분 업데이트 |
멀티플랫폼 지원: Claude Code뿐 아니라 Codex, OpenCode, Cursor, OpenClaw, Antigravity 등 8개+ 코딩 에이전트 플랫폼에서 동작합니다. 핵심 차별화 포인트 4가지: 멀티에이전트 파이프라인, 증분 분석, Diff 영향 분석, 12가지 프로그래밍 패턴 설명.
| 기술 | 용도 | 버전 |
|---|---|---|
| TypeScript | 전체 프로젝트 언어 | 5.7+ |
| Zod | 지식그래프 스키마 검증 (런타임 타입 안전성) | — |
| web-tree-sitter | 다언어 정적 분석 (AST 파싱), WASM 기반 | — |
| Fuse.js | 퍼지 검색 (fuzzy search) | — |
| Dagre | 그래프 레이아웃 자동 계산 | — |
| Vitest | 단위 테스트 프레임워크 | 3.1+ |
| 기술 | 용도 |
|---|---|
| React 19 | UI 프레임워크 |
| Vite | 빌드 도구 + 개발 서버 |
| React Flow | 노드/엣지 기반 인터랙티브 그래프 시각화 |
| Zustand | 경량 상태 관리 (Redux 대체) |
| TailwindCSS v4 | 유틸리티 기반 스타일링 |
| 기술 | 용도 |
|---|---|
| pnpm | 패키지 매니저 (v10+, 모노레포 워크스페이스) |
| Node.js 22+ | 런타임 (v24에서 테스트됨) |
| GitHub Actions | CI/CD |
에이전트들이 순차+병렬로 협업합니다. 각 에이전트는 마크다운 프롬프트(.md)로 역할이 정의되어 있고, 중간 결과를 디스크에 기록하여 컨텍스트 윈도우 오염을 방지합니다.
// 5개 도메인으로 분류된 18가지 관계 타입
Structural: "imports" | "exports" | "contains" | "inherits" | "implements"
Behavioral: "calls" | "subscribes" | "publishes" | "middleware"
Data flow: "reads_from" | "writes_to" | "transforms" | "validates"
Dependency: "depends_on" | "tested_by" | "configures"
Semantic: "related" | "similar_to"
// 노드 타입
type NodeKind = "file" | "function" | "class" | "module" | "concept"
// 엣지에는 방향성 + 가중치(0~1)가 포함staleness.ts가 파일 변경을 감지하여 변경된 파일만 재분석합니다. Git 커밋 해시를 메타데이터에 기록하여 이전 분석 시점과 비교합니다.
// context-builder.ts 흐름
사용자 질문
→ SearchEngine.search(query) // Fuse.js 퍼지 매칭
→ 1-hop 이웃 노드 확장 (엣지 탐색) // 관련 컨텍스트 확보
→ 최대 15개 노드 제한 // 토큰 절약
→ formatContextForPrompt() // 마크다운 형식으로 변환
→ LLM에 전달| 레이어 | 색상 | 예시 |
|---|---|---|
| API | 빨강 | routes/, controllers/, endpoints |
| Service | 파랑 | services/, handlers/, middleware |
| Data | 초록 | models/, schemas/, repositories |
| UI | 보라 | components/, pages/, views |
| Utility | 회색 | utils/, helpers/, lib |
배울 것: 마크다운 기반 에이전트 역할 정의 방식(.md 파일이 곧 프롬프트), 에이전트 간 통신을 디스크 I/O로 처리하는 패턴(컨텍스트 윈도우 오염 방지), 모델 계층화 전략.
실습 아이디어: 자신의 프로젝트에 2~3개 에이전트를 만들어서 README 자동 생성 파이프라인 구축.
배울 것: React Flow의 커스텀 노드 렌더링(CustomNode.tsx), Dagre로 자동 레이아웃 계산, Zustand로 그래프 상태 관리(선택된 노드, 필터, 줌 레벨).
실습 아이디어: React Flow + Zustand로 간단한 마인드맵 에디터 만들기.
배울 것: WASM 기반 tree-sitter로 브라우저/Node 모두에서 동작하는 파서 구축, 다언어 AST 파싱(JS/TS/Python/Go), AST에서 함수/클래스/import 노드를 추출하는 쿼리 작성.
실습 아이디어: tree-sitter로 특정 파일의 함수 목록을 추출하는 CLI 도구 만들기.
배울 것: Fuse.js로 이름 기반 퍼지 매칭 구현, 임베딩 벡터를 활용한 의미 기반 검색(embedding-search.ts), 두 가지를 결합하는 하이브리드 검색 전략.
실습 아이디어: Fuse.js로 블로그 포스트 검색 기능 구현, 이후 임베딩 검색 추가.
배울 것: .claude-plugin/ 매니페스트 구조, skills/ 디렉토리에서 슬래시 커맨드 정의 방법, 멀티플랫폼 지원을 위한 .copilot-plugin/, .cursor-plugin/ 등 설정.
배울 것: pnpm-workspace.yaml로 멀티패키지 구조 관리, @understand-anything/core 같은 내부 패키지 참조 방식, --filter 옵션으로 특정 패키지만 빌드/테스트.
| 항목 | 요구사항 |
|---|---|
| Node.js | v22 이상 (v24에서 테스트됨) |
| pnpm | v10 이상 |
| Claude Code | 최신 버전 (플러그인 마켓플레이스 지원) |
| 디스크 | WASM 파일 + 지식그래프 JSON 저장용 (프로젝트 크기에 비례) |
| 메모리 | 대규모 코드베이스 분석 시 충분한 RAM (tree-sitter WASM 로딩) |
| 네트워크 | Anthropic API 호출 필요. 로컬 GPU 불필요 |
Claude Code에서 Understand-Anything 플러그인을 설치하고 자신의 프로젝트에서 실행합니다. /understand-dashboard로 대시보드를 열고 탐색해 보세요.
TypeScript + Zod로 노드/엣지 스키마를 정의하고, fs.readdir로 프로젝트 파일 목록을 스캔합니다. 정규식으로 import문을 파싱하여 엣지를 생성하고 JSON 파일로 저장한 뒤 React Flow로 시각화합니다.
staleness.ts 패턴을 분석하고 Git diff를 활용한 변경 파일 감지를 구현합니다. 이전 분석 결과와 병합하는 로직을 작성하고 전체 분석 vs 증분 분석 성능을 비교합니다.
web-tree-sitter를 설치하고 TypeScript/Python/Go 파서를 로드합니다. AST에서 함수/클래스/import를 추출하는 쿼리를 작성하고 기존 정규식 방식과 정확도를 비교합니다.
TypeScript 5.7 새 기능(satisfies, const 타입 파라미터), pnpm workspace 셋업 실습, Zod 스키마 설계 패턴, Vitest로 단위 테스트 작성.
React Flow 공식 튜토리얼 완주, Dagre 레이아웃 알고리즘 이해, Zustand 상태 관리 패턴, 커스텀 노드/엣지 렌더링.
tree-sitter 공식 문서 학습, WASM 기반 파서 로딩 메커니즘, AST 쿼리 언어(S-expression), 다언어 import/export 패턴 분석.
Claude Code 플러그인 개발 가이드, 멀티에이전트 오케스트레이션 패턴, 프롬프트 엔지니어링(마크다운 기반 에이전트 역할 정의), 디스크 기반 에이전트 간 통신 설계.
Fuse.js 퍼지 검색 원리와 옵션 튜닝, 텍스트 임베딩과 코사인 유사도, 하이브리드 검색(키워드 + 시맨틱) 구현, 그래프 탐색: BFS 1-hop 확장.
자신만의 코드 분석 플러그인 구현, 최소 3개 슬래시 커맨드 구현, 대시보드 UI 커스터마이징, 마켓플레이스 게시 또는 팀 내 공유.
| 키워드 | 설명 |
|---|---|
| Knowledge Graph | 지식그래프. 엔티티(노드)와 관계(엣지)를 그래프 구조로 표현한 데이터 모델. 파일/함수/클래스를 노드로, 의존관계를 엣지로 표현 |
| React Flow | React 기반 인터랙티브 노드/엣지 다이어그램 라이브러리. 드래그, 줌, 커스텀 노드 렌더링 지원 |
| tree-sitter | GitHub이 개발한 증분 파싱 라이브러리. 다양한 프로그래밍 언어의 AST를 파싱. WASM 빌드로 브라우저에서도 사용 가능 |
| AST | Abstract Syntax Tree(추상 구문 트리). 소스코드를 트리 구조로 표현. 함수, 클래스, import문 등을 프로그래밍적으로 추출할 수 있음 |
| Dagre | 방향성 그래프(DAG)의 자동 레이아웃을 계산하는 라이브러리. 노드 위치를 최적으로 배치 |
| Zustand | React용 경량 상태 관리 라이브러리. Redux보다 간단하며 보일러플레이트가 적음 |
| Zod | TypeScript용 스키마 선언 및 런타임 검증 라이브러리. 타입 안전한 데이터 검증 |
| Fuse.js | 경량 퍼지 검색 라이브러리. 오타나 부분 일치를 허용하는 클라이언트사이드 검색 |
| Incremental Analysis | 증분 분석. 전체를 다시 분석하지 않고 변경된 부분만 재분석하는 기법 |
| 1-hop Expansion | 그래프에서 특정 노드와 직접 연결된(1단계) 이웃 노드까지 확장하는 탐색 기법 |
| WASM | WebAssembly. 브라우저와 서버 모두에서 네이티브에 가까운 성능으로 실행되는 바이너리 포맷 |
| Persona Selector | 사용자의 역할(주니어 개발자, PM, 시니어 등)에 따라 설명 수준을 조절하는 UI 요소 |