Claude Code CLI의 한계를 넘는 시각적 제어 평면 구축 기록

Context

Claude Code CLI의 터미널 기반 인터페이스로 인한 에이전트 상태 관리의 어려움. .claude 디렉토리 내 분산된 Markdown 파일 및 설정 수동 편집의 높은 마찰력. 대규모 저장소 스캔 시 가시성 부족으로 인한 운영 효율 저하.

Technical Solution

• Nuxt 3와 VueFlow 기반의 시각적 제어 평면(Control Plane) 설계
• 심볼릭 링크(Symlink) 방식을 적용하여 실제 파일 수정 없이 에이전트 기술(Skills)의 활성화 상태를 토글하는 동적 관리 구조
• GitHub 및 로컬 저장소로부터의 스킬 직접 임포트 기능 구현
• 코드베이스 스캔 및 임포트 관리 워크플로우를 통한 에이전트 컨텍스트 최적화 및 빌드 오류 방지
• VueFlow를 활용한 에이전트, 명령어, 스킬 간의 의존성 관계 시각화 그래프 구축
• 실시간 토큰 사용량 및 비용 추적 시스템 통합

Key Takeaway

복잡한 AI 에이전트 시스템일수록 텍스트 기반 인터페이스보다 상태와 의존성을 한눈에 파악할 수 있는 시각적 오케스트레이션 도구가 생산성에 결정적인 영향을 미침.