Kanary

쿠버네티스 클러스터의 리소스 정보를 직관적으로 시각화하여 클러스터 상태를 한눈에 파악할 수 있는 대시보드

1. Overview

Kanary는 쿠버네티스 클러스터의 리소스 정보를 직관적으로 시각화하여 클러스터 상태를 한눈에 파악할 수 있도록 돕는 대시보드입니다.

Kanary Architecture

Kanary Architecture Diagram

프로젝트 전체 기여도 40%
쿠버네티스 클러스터 대시보드 전체 UI/UX 설계 및 개발
리소스(파드, 노드, 볼륨 등)를 테이블 형태로 클러스터 상태 시각화
react-force-graph의 캔버스 렌더링으로 파드를 원으로 그리고, CPU 또는 메모리 사용률만큼 원 안을 채워 한눈에 비교되게 시각화
Fetch API와 React-Query로 백엔드 REST API 연동 및 캐시 관리
팀 프로젝트 결과물 발표 및 데모 시연

초기 구현한 대시보드에서는 다음과 같은 문제가 있었습니다.

각 리소스(Pods, Nodes, Volumes 등)마다 개별 페이지로 구성되었으며, 페이지 이동 시마다 매번 새로운 API 호출이 발생하였습니다.

API 호출에서 DOM 렌더링 완료까지 평균 약 4초가 소요되어 사용자 경험(UX)이 저하되었습니다.

성능 개선을 위해 React-Query 라이브러리의 useQuery 훅을 도입하였습니다.

React-Query의 useQuery를 사용하여 동일 데이터 요청의 캐싱 및 자동 갱신을 지원했습니다.

페이지 재방문 시 API 재호출 없이 캐시된 데이터를 즉시 활용하여 렌더링 속도를 대폭 개선하였습니다.

구분	적용 전	적용 후
렌더링 속도 (브라우저 개발자 도구로 측정)	약 4초	약 0.3초 이하

결과적으로 사용자 경험이 크게 향상되었으며, 반복적인 API 요청 감소로 서버의 부하도 줄어들었습니다.