로그 관리 및 실시간 모니터링 시스템

프로젝트 개요

• 한 줄 소개
  내비게이션 시스템 로그 수집 및 실시간 모니터링 플랫폼

• 기간
  2022.03 ~ 2022.10 (약 6개월)

• 팀 구성
  10인 팀 프로젝트

• 역할
  Frontend

---

프로젝트 설명

내비게이션 시스템에서 발생하는 대용량 로그 데이터를 수집·분석하고,
실시간으로 모니터링할 수 있는 관리 콘솔을 개발한 프로젝트입니다.

운영자가 로그 발생 현황을 직관적으로 파악하고,
이상 상황을 빠르게 탐지할 수 있도록
대시보드 및 실시간 로그 모니터링 UI를 구현했습니다.

---

주요 기능

• 실시간 로그 모니터링
• 로그 발생 통계 대시보드
• 이상 로그 탐지 UI
• 로그 데이터 시각화

---

기술 스택

Frontend

• React

Backend

• Spring Boot
• Node.js

Database

• MariaDB

DevOps

• AWS
• Docker
• GitHub Actions
• Jenkins

Etc

• Slack / Jira / Notion / GitHub

---

문제 정의

• 대용량 로그를 통합 관리할 수 있는 콘솔 부재
• 실시간 로그 발생 상황을 한눈에 파악하기 어려움
• 로그 레벨 및 이상 상황에 대한 즉각적인 대응 어려움

---

해결 과정

1. 실시간 로그 모니터링 UI 구현

• 실시간으로 발생하는 로그를 스트림 형태로 표시
• 로그 레벨별 필터링 기능 제공
• 운영자가 빠르게 이상 로그를 식별할 수 있도록 UI 구성

---

2. 로그 통계 대시보드 개발

• 로그 발생 빈도, 레벨, 시간대별 통계를 시각화
• 직관적인 인포그래픽 기반 UI 구성
• 운영자의 의사결정을 돕는 데이터 제공

---

3. 성능 개선 (핵심)

문제:

• 1000건 이상의 로그 데이터를 한 번에 렌더링하면서 초기 렌더링에 약 5000ms 이상 소요되는 성능 문제 발생

해결:

• 버추얼라이제이션(virtualization) 적용
• 화면에 보이는 영역의 데이터만 렌더링하도록 최적화

결과:

• 렌더링 시간 약 500ms로 단축
• 스크롤 성능 및 UI 반응성 크게 개선

---

성과

• 초기 렌더링 시간 약 5000ms → 500ms로 개선
• 대용량 데이터 환경에서도 안정적인 UI 제공
• 운영자의 로그 분석 및 대응 속도 향상
• 실시간 모니터링 기반 장애 대응 효율 개선

---

회고

대용량 데이터를 다루는 UI에서
단순 구현보다 렌더링 성능 최적화