Claude Code 설정의 가시성 확보, LCARS 기반의 통합 대시보드 구현

Context

Claude Code의 설정 파일이 ~/.claude/ 디렉토리에 파편화되어 저장되는 구조. 수십 개의 JSON 설정과 파일들로 인해 전체 시스템 구성 파악이 어려운 한계. 설정의 정합성을 확인하고 관리할 직관적인 인터페이스 부재.

Technical Solution

• Node.js 내장 모듈만 사용하여 CSS, JS, 마크다운 렌더러가 포함된 단일 self-contained HTML 파일 생성 방식
• Force-directed graph 알고리즘을 적용하여 Skill, MCP Server, Hook, Agent 간의 관계를 시각화한 Tactical Display 설계
• Web Audio API의 Sine wave oscillator를 이용한 시스템 상태 알림 및 인터랙션 사운드 합성 구조
• ElevenLabs API 연동 및 Echo detection, Interrupt handling 로직 구현을 통한 양방향 음성 대화 루프 구축
• CSS Variable 스왑 방식을 활용하여 localStorage에 저장된 테마를 즉시 반영하는 동적 스타일링 전략
• Live server 모드 도입으로 Chat streaming, 파일 수정, MCP 상태 체크를 위한 전용 API 엔드포인트 제공

Key Takeaway

복잡하게 파편화된 설정 데이터의 가시성을 확보함으로써 시스템 관찰 가능성(Observability)을 높이고 운영 효율을 개선하는 설계 원칙.