실시간 종합 대시보드
전체 설비의 가동률, 점검 현황, 발생 알림 등을 한눈에 파악할 수 있는 데이터 시각화 인터페이스 제공
웹 시스템 / 이런 일을 가능하게
설비 상태와 이상 알림을 통합 확인
실시간 종합 대시보드 · 상세 설비 분석. 장비 데이터와 담당자의 조치를 연결하는 앱·관제 화면을 만들 수 있습니다.
참고 화면에서 기능과 이용 흐름을 살펴보세요.
01 / 이런 상황에 맞습니다
지금 겪고 있는 일인가요?
설비별 화면을 오가며 상태와 점검 대상을 확인하나요?
- 사용할 환경
- 웹 업무 화면
02 / 이렇게 만들 수 있습니다
업무에 필요한 기능을 연결합니다.
필요한 기능을 선택하고, 담당자의 역할과 처리 순서에 맞춰 설계·개발할 수 있습니다.
상세 설비 분석
개별 설비의 수명 주기, 부품 교체 주기, 실시간 센서 데이터 그래프를 통해 정밀 진단 가능
설비 상태별 알림
설비 이상 발생 시 위급도별 상태 표시 및 실시간 팝업/로그 관리 기능 제공
계층형 설비 관리
공정별, 설비 그룹별 구조화된 내비게이션으로 대규모 환경에서도 빠른 탐색 지원
시계열 데이터 시각화 설계
방대한 시계열 데이터를 다양한 차트로 가공하여 정보 위계를 명확히 전달하는 UI 설계
다크모드 최적화 UI
저조도 환경에서도 시각적 피로를 줄이고 집중도를 높이는 다크 테마 적용
반응형 대시보드 레이아웃
모바일 및 태블릿 환경에서도 동일한 사용성을 유지하는 가변형 그리드 시스템 구축
상태 기반 시각 UX 설계
색상 시스템을 활용하여 즉각적인 조치가 필요한 설비를 빠르게 식별할 수 있는 UX 설계
함께 정할 구현 범위
- 실시간 종합 대시보드
- 상세 설비 분석
- 설비 상태별 알림
- 계층형 설비 관리
이렇게 살펴보세요
- 수신 시각과 통신 상태가 구분되는지 확인합니다.
- 알림에서 해당 장비와 조치 기록으로 이어지는지 확인합니다.
- 장비 연결이 끊기거나 복구될 때의 동작을 함께 정합니다.
만들 수 있는 화면과 이용 흐름
아래 화면을 출발점으로, 필요한 기능과 현재의 운영 환경에 맞춰 새로 설계합니다.
모바일 앱 / AIN SPACE
모바일 확장 디자인 시안
웹에서 처리하는 업무를 모바일로 연결할 때의 디자인 제안입니다. 필요한 기능과 현장 환경에 맞춰 앱을 설계할 수 있습니다.
연결된 공간
현장의 현재 상태와 확인할 일을 한눈에 살펴봅니다.
공간과 장비
공간과 장비별 상태, 수신 시각을 자세히 확인합니다.
운전 설정
담당자의 권한과 적용 조건에 맞춰 설정을 검토합니다.
에너지와 이력
요청·응답·실행 결과를 구분해 이전 작업을 이어갑니다.
현장 앱과 관리자 화면의 업무 연결관리자 화면 보기 ↑
04 / 우리 업무에 적용한다면
지금의 환경에서 더 나은 방법을 찾습니다.
사용자와 운영 조건에 맞춰 기능·화면·기술을 다시 선택합니다. 작은 범위부터 확인하고 다음 단계로 넓힐 수 있습니다.
현재의 업무와 준비된 자료
- 연결할 장비와 통신 문서
- 확인할 지표와 알림 기준
- 현장 네트워크와 제어 권한
실제로 만들고 확인할 범위
- 가장 먼저 해결할 업무와 사용자 흐름
- 기존 데이터·시스템의 연동 방법
- 시범 화면과 실제 자료로 확인할 검수 기준
- 배포·인수인계와 운영 개선 계획
구현에 사용할 수 있는 기술 살펴보기
아래는 기술 구성의 출발점입니다. 기존 시스템의 연동 규격, 데이터 규모와 운영 인력에 맞춰 실제 사용할 구성을 정합니다.
웹 화면
Next.js · React · TypeScript ↗서버 API
NestJS · TypeScript ↗데이터 저장
PostgreSQL ↗기기 메시지
MQTT 5 · AWS IoT Core ↗화면 검수
Playwright ↗참고 화면과 프로젝트 배경
아인스페이스 IoT 설비 관제 시스템
IoT 기반 설비 데이터를 실시간으로 수집·분석하는 산업용 모니터링 플랫폼입니다. 설비별 가동 상태와 점검 현황을 대시보드에 표시하고, 이상 상황은 위급도별 알림과 로그로 확인하도록 만들었습니다.
- 프로젝트
- 아인스페이스 IoT 설비 관제 시스템
- 고객사
- 아인스페이스
- 수행 기간
- 2025.02 ~ 2025.04
- 당시 기록된 기술
- NestJS · MySQL · React
