CLOUD MONITORING WEB DASHBOARD

프로젝트 개요

공장의 설비 데이터를 실시간으로 수집, 분석하여 설비의 각종 상태 등을 AI 로 분석하여 시각적으로 나타내는 웹 애플리케이션.

해당 URL은 Demo 버전으로, 백엔드 로직 및 로그인 기능을 제거하고 더미 데이터를 사용하여 배포

주요 성과 및 역할

1. 화면 설계 및 퍼블리싱
   • Figma로 제공된 디자인을 기준으로 UI 퍼블리싱 및 동적 차트 구현 담당.
   • 1920x1080 해상도 기준 모니터 환경에 맞춘 설계.
2. 데이터 시각화 및 동적 차트 개발
   • 일/월/년 단위로 데이터를 조회 및 표시하는 동적 차트 기능 구현(EChart.js 활용).
   • Grid 기반의 데이터 조회 시스템 설계 (Tabulator 사용) 전체 데이터 조회 시 성능 문제를 해결하기 위해 페이지 별 데이터 로드 방식 적용.
3. 실시간 데이터 처리
   • WebSocket 대신 Polling 방식을 사용하여 주기적인 데이터 갱신 구현.
   • Skeleton UI를 적용해 데이터 로딩 중 사용자 경험(UX)을 개선.
4. 로그인 및 권한 관리
   • Demo 버전에는 제외되었으나, JWT 기반 로그인 및 권한 관리 기능 구현.
5. 프로젝트 배포
   • DEMO 버전 배포 작업 수행: 백엔드 로직 제거 및 더미 데이터 삽입으로 배포 준비.
   • 회사 보안 정책에 따라 소스 코드 공개는 불가

성과 및 학습 경험

• 실시간 데이터 처리: Polling 기반의 실시간 데이터 갱신 방식과 그 한계를 이해하며 WebSocket과 비교하여 적합성을 분석.
• 사용자 경험(UX) 개선: Skeleton UI와 동적 차트 인터랙션으로 로딩 체감 속도를 감소시키는 방법을 실무에 적용.
• 데이터 시각화: EChart.js를 활용하여 동적인 시각화 요구사항을 효과적으로 해결.
• 대용량 데이터 처리: Grid와 Pagination 방식을 도입하여 대규모 데이터의 효율적인 로드 경험.
• 배포 및 운영: DEMO 버전 제작 및 배포 과정을 통해 클라이언트와의 협업 및 테스트 환경 설정.