시스템 모니터링 대폭 개선d
2025년 1월 22일 개발 일지
오늘은 DevZip 대시보드의 시스템 모니터링 기능을 크게 개선했습니다. 기존의 JVM 기반 모니터링에서 실제 서버 시스템 리소스를 정확히 측정하는 방식으로 바꿨고, 사용자 경험도 한층 개선했습니다.
📊 실제 시스템 모니터링으로의 전환
기존에는 Java 애플리케이션의 JVM 사용량만 확인할 수 있었는데, 이제는 실제 Ubuntu 서버의 CPU와 메모리 사용량을 정확히 측정할 수 있게 되었습니다.
기술적 변화
- CPU 측정:
vmstat와ps명령어를 활용해 실시간 CPU 사용률 계산 - 메모리 측정:
/proc/meminfo에서 직접 메모리 정보를 읽어와 정확한 사용량 파악 - 호환성 강화: Ubuntu 환경에서 확실히 작동하는 시스템 명령어로 통일
이전에는 애플리케이션 레벨의 제한적인 정보만 볼 수 있었다면, 이제는 서버 전체의 상태를 한눈에 파악할 수 있게 되었습니다.
🎛️ 사용자 인터페이스 개편
대시보드의 전체적인 구조를 더 직관적으로 바꿨습니다.
카테고리 네비게이션 도입
React Router를 활용해 중첩 라우팅 구조를 만들었습니다. 기존의 단순한 위젯 나열에서 벗어나 체계적인 카테고리 분류가 가능해졌어요.
- Overview: 전체 시스템 상태를 한눈에 확인
- System: 세부적인 시스템 리소스 모니터링
- 향후 확장을 위한 구조적 기반 마련
반응형 레이아웃 구현
CSS Grid를 기반으로 한 반응형 그리드 시스템을 적용했습니다. 화면 크기에 따라 위젯들이 자연스럽게 재배치되어 모바일에서도 편하게 사용할 수 있습니다.
📈 모니터링 위젯 업그레이드
RPS(초당 요청 수) 위젯 신규 추가
기존의 단순한 네트워크 트래픽 위젯을 Actuator 기반 RPS 위젯으로 교체했습니다. 실제 애플리케이션이 처리하는 요청량을 실시간으로 확인할 수 있어 서비스 상태를 더 정확히 파악할 수 있게 되었어요.
통합 상태 위젯
CPU, 메모리, RPS 데이터를 종합해서 보여주는 OverallStatus 위젯을 새로 만들었습니다. 각각의 메트릭을 따로 확인할 필요 없이 시스템 전체의 건강 상태를 한 번에 볼 수 있습니다.
⚡ 성능과 데이터 지속성 개선
실시간 업데이트 최적화
모니터링 데이터 업데이트 간격을 5초에서 2초로 단축했습니다. 시스템 상태 변화를 더 빠르게 감지할 수 있게 되었어요.
데이터 지속성 구현
localStorage를 활용해 새로고침 후에도 그래프 데이터가 유지되도록 개선했습니다. 페이지를 새로고침해도 기존에 수집된 모니터링 데이터를 잃지 않아 연속성 있는 모니터링이 가능해졌습니다.
또한 1시간이 지난 오래된 데이터는 자동으로 삭제되어 브라우저 저장 공간을 효율적으로 관리합니다.
🔧 코드 품질 개선
개발 과정에서 발견된 JSX 문법 오류들을 모두 수정하고, 위젯 간 중복되던 스타일 코드를 정리해 공통 스타일 시스템을 구축했습니다. 이제 새로운 위젯을 추가할 때 일관된 디자인을 더 쉽게 적용할 수 있습니다.
다음 목표
이번 개선으로 DevZip 대시보드의 기반이 한층 단단해졌습니다. 다음에는 알림 기능이나 로그 분석 도구 등을 추가해볼 계획입니다. 실제 서버 운영에 도움이 되는 실용적인 도구로 계속 발전시켜 나가겠습니다.