CLI 기반 Docker 관리를 3D 시각화 대시보드로 혁신한 DockScope

Context

Docker 서비스 상태 확인을 위해 여러 CLI 명령어를 반복적으로 실행하는 구조. 전체 스택의 의존성과 런타임 상태를 한눈에 파악하기 어려운 한계. 시각적 상호작용을 통한 빠른 문제 진단 필요성 증대.

Technical Solution

• TypeScript와 Svelte 기반의 반응형 웹 인터페이스 설계
• Three.js를 활용하여 Docker 서비스 간 의존 관계를 3D 그래프로 시각화
• dockerode 라이브러리를 통한 Docker 엔진 API 연동 및 실시간 상태 데이터 추출
• 라이브 메트릭 모니터링과 로그 스트리밍 기능을 통합한 관찰 체계 구축
• 웹 브라우저 내 임베디드 터미널을 통한 컨테이너 직접 제어 환경 제공
• 단순 시각화를 넘어 디버깅에 유용한 실제 서비스 관계 중심의 데이터 매핑 전략 적용

Key Takeaway

복잡한 인프라 상태를 단순 나열이 아닌 관계 중심의 3D 시각화로 전환하여 시스템 가시성을 극대화하는 설계 방식.