LSP 기반 Call Hierarchy API를 활용한 언어 독립적 상호작용형 Call Graph 시각화 도구 설계

Visualize Function Call Graphs Interactively in VS Code — Call Graph Navi (Personal Project)

D-grid2026년 4월 20일6분intermediate

AI 요약

Context

기존 Call Graph 도구들의 과도한 정보 노출로 인한 가독성 저하 및 분석 효율성 감소 문제 발생. 특정 언어에 종속되지 않고 다양한 개발 환경에서 범용적으로 사용할 수 있는 효율적인 코드 구조 분석 도구의 필요성 대두.

VS Code Call Hierarchy API를 통한 LSP 기반의 언어 독립적 데이터 추출 구조 설계
Recursive Traversal 방식을 통한 Root 함수 중심의 호출 관계 데이터 수집 및 CallGraphData 정규화
dagre 라이브러리를 활용한 Graph Layout 계산 및 SVG 기반의 동적 DOM 렌더링 처리
Noise Reduction을 위한 특정 파일/함수 필터링 및 'Show Path to Root' 알고리즘을 통한 핵심 경로 추출 로직 구현
Webview Panel과 Extension Host 간의 Callback 메커니즘을 통한 Jump to Definition 및 PlantUML Export 기능 연동
분석 결과의 문서화를 위한 현재 뷰 상태 기반의 PlantUML 텍스트 변환 및 내보내기 기능 제공

실천 포인트

1. LSP(Language Server Protocol) 기반 API를 활용하여 언어 독립적인 도구 설계 검토

2. 대규모 그래프 시각화 시 '전체 렌더링' 대신 '필터링' 및 '경로 추출' 기능을 통한 인지 부하 감소 전략 적용

3. 시각화 도구 설계 시 분석 결과를 디자인 문서로 즉시 전환할 수 있는 Export 포맷(예: PlantUML) 제공 고려

태그