GitHub URL 하나로 코드베이스 전체 의존성 그래프 시각화

Context

대규모 코드베이스 탐색 시 파일 구조 파악에 과도한 시간 소모. AI 어시스턴트의 컨텍스트 윈도우 제한 및 가공의 파일 경로 생성으로 인한 Hallucination 발생.

Technical Solution

• CopilotKit 기반의 Agent-UI 상태 동기화 구조를 통해 채팅 응답과 UI 컴포넌트 간 실시간 상호작용 구현
• 실제 import 문을 파싱하여 의존 관계를 추출하고 React Flow와 dagre를 이용해 동적 의존성 그래프를 시각화하는 방식
• Zustand 전역 상태 관리를 통해 Graph Canvas, Code Viewer, Repo Explorer, Chat 패널의 상태를 일괄 동기화하는 설계
• Next.js API Route를 보안 프록시 계층으로 활용하여 브라우저가 GitHub API 및 LLM 백엔드에 직접 접근하는 경로 차단
• Ollama를 통한 로컬 LLM 추론 지원으로 API 키 없이 구동 가능한 온프레미스 환경 제공
• Zenflow의 6단계 엔지니어링 프로세스를 적용하여 설계부터 배포까지의 전 과정을 구조화하고 자동화된 코드 리뷰로 결함 제거

Key Takeaway

AI가 텍스트로 정보를 설명하는 단계를 넘어, 도구 호출(Tool Calling)을 통해 UI 상태를 직접 제어함으로써 정보 전달의 정확성과 직관성을 극대화하는 인터페이스 설계 전략.