BMT
MT & Cruiser — 데이터센터/서버 인프라 모니터링 & 관리 플랫폼
BMT & Cruiser 프로젝트는 대규모 데이터센터 및 서버 인프라를 통합적으로 모니터링하고 관리할 수 있는 엔터프라이즈급 솔루션이에요. 서버, 스토리지, 네트워크 장비, SAN/NAS 등의 IT 인프라 자산을 한눈에 파악하고, 대시보드·토폴로지·플로어 플랜·리포팅 기능을 통해 운영 효율성을 극대화하도록 설계되었어요. Next.js(App Router)와 Django REST Framework 기반으로 구축되었으며, 실시간 데이터 시각화와 사용자 맞춤형 대시보드 편집 기능을 제공해요.
Client:
BMT
Year:
2025
Design:
Framer
Development:
Next.js, React, TypeScript, Zustand, AG Grid, D3.js, React Grid Layout, React DnD, React DatePicker, React Toastify, Axios, date-fns, moment, uuid, js-cookie, xlsx, pdfmake, file-saver, html2canvas, SASS, ESLint, Prettier, Storybook, node-forge, Docker, Nginx
As is
To be
Design NMS(Network Management System, 네트워크 관리 시스템)의 리디자인을 진행했어요.
고객사는 기존 기능과 레이아웃을 유지하면서도 미래지향적이고 화려한 디자인을 원하셨어요. 하지만 기존 UI의 복잡도가 이미 높았기 때문에 시각적 디테일을 더하면 사용성이 떨어질 수 있다는 우려가 있었고, NMS 서비스 자체가 많지 않아 참고할 만한 레퍼런스도 부족했어요. 또, 다크·라이트·블루 세 가지 테마를 모두 구현해야 한다는 요구도 있었습니다.
이러한 상황을 극복하기 위해 그래픽 요소는 고객사와 긴밀하게 조율하며 꼭 필요한 부분에만 적절히 추가했어요. 대신 여백감을 넉넉히 주고, 아이콘 스타일을 단순화했으며, 마우스 호버 효과 등 인터랙션을 개선해 사용자가 원하는 정보 블록에 자연스럽게 시선이 집중되도록 설계했어요.
결과적으로 고객사와 지속적인 소통을 통해 원하는 비주얼과 사용성 사이의 균형을 맞출 수 있었고, 최종적으로 고객 만족도가 높은 결과를 도출할 수 있었어요.
Development BMT & Cruiser 프로젝트의 개발 핵심은 복잡한 인프라 데이터를 직관적으로 시각화하는 차트 설계와 다중 테마 최적화에 있었어요.
먼저 SCSS 기반 테마 시스템 최적화예요. 고객사의 요구에 따라 다크·라이트·블루 세 가지 테마를 모두 지원했는데, 단순 색상 교체가 아니라 토큰화된 SCSS 변수 체계를 설계해 컴포넌트 단위로 일관되게 적용했어요. 예를 들어 차트 색상, 아이콘, 인터랙션 효과까지 테마별로 세분화해, 데이터 가독성이 유지되면서도 테마별 아이덴티티를 반영할 수 있도록 했어요. 이 구조 덕분에 새로운 테마 추가나 세부 컬러 변경 시 전체 UI를 안정적으로 유지할 수 있었어요.
As is
To be
Development 차트 영역은 D3.js를 중심으로 구현했어요. 서버·스토리지·스위치·SAN/NAS 장비에서 수집된 성능 지표와 로그 데이터를 실시간으로 가공해, 시계열 그래프·히트맵·토폴로지 네트워크 뷰로 표현했어요. D3.js의 데이터 바인딩과 커스텀 SVG 렌더링을 활용해 단순한 라인 차트가 아닌, 네트워크 연결 구조와 장애 발생 지점을 한눈에 파악할 수 있는 인터랙티브 뷰를 구현했어요. 또한 React DnD와 React Grid Layout을 결합해, 사용자가 원하는 형태로 차트와 위젯을 자유롭게 배치할 수 있도록 했어요.