플러스프로젝트 배경
네트워크 보안 관제 담당자에게 방화벽 장비의 상태를 실시간으로 파악하는 것은 가장 기본이면서도 가장 중요한 업무입니다. 수천 대의 방화벽에서 초당 수만 건의 이벤트가 발생하고, 그중 이상 징후를 즉시 탐지해 대응하지 못하면 보안 사고로 이어집니다. 이를 위해 네트워크 토폴로지를 시각적으로 보여주는 모니터링 대시보드가 필수입니다. 기존 시스템은 ExtJS 기반으로 구축되어 있었습니다. 2010년대 초반 엔
프로젝트 성과
3D 토폴로지 60fps 안정 렌더링
프레임 드랍 45%→5% 미만. WebGL 렌더링 파이프라인 최적화로 수천 대 장비의 3D 네트워크 맵을 끊김 없이 표시합니다.
메모리 사용량 80% 절감 (4GB→800MB)
WebGL 메모리 관리 최적화와 가비지 컬렉션 전략 개선. 대규모 네트워크 토폴로지에서도 안정적으로 동작합니다.
실시간 이벤트 처리 3배 향상 (초당 15,000건)
WebSocket 기반 실시간 수신, 방화벽 로그 분석 지연 150ms→50ms. 이상 징후 탐지에서 화면 표시까지 지연을 최소화합니다.
초기 로딩 시간 70% 단축 (12초→3.6초)
Code Splitting, Lazy Loading으로 번들 사이즈 85% 감소. 관제 담당자가 대시보드를 즉시 사용할 수 있습니다.
무중단 마이그레이션 완료
마이크로 프론트엔드로 ExtJS→React 점진적 전환. 관제 시스템을 한 번도 중단하지 않고 프레임워크 교체를 완료했습니다.
핵심 기능
3D 네트워크 토폴로지 맵
Three.js + React-Force-Graph 기반. 수천 대 장비를 3D 공간에 배치하고, 상태별 색상 코딩으로 전체 네트워크 건강 상태를 즉시 파악합니다.
진행 단계
레거시 분석 + 마이그레이션 설계
2024.02.
ExtJS 코드베이스 분석, 마이크로 프론트엔드 아키텍처 설계, 점진적 전환 전략 수립, React+TypeScript 보일러플레이트.
프로젝트 상세
관제 담당자가 대시보드를 열면 3D 네트워크 토폴로지 맵이 표시됩니다. 수천 대의 방화벽 장비가 3차원 공간에 배치되고, 장비 간 연결 관계가 선으로 표현됩니다. 정상 장비는 파란색, 경고 상태는 노란색, 장애 상태는 빨간색 — 색상만으로 전체 네트워크 건강 상태를 즉시 파악할 수 있습니다. 마우스로 회전·확대·축소하며 특정 영역을 집중 모니터링할 수 있고, 장비를 클릭하면 상세 정보가 패널로 나타납니다.
