01문제
생산 · 품질 · 설비 데이터가 화면마다 흩어져 있으면, 관리자는 라인 하나의 상태를 보려고 메뉴를 여러 번 옮겨 다닙니다. 숫자는 많은데 어디서 멈췄는지는 바로 보이지 않습니다.
System 01제조 생산관리(MES) 대시보드
Altivo MES
제조 생산관리 시스템
라인 · 설비 · 품질을 한 화면에서
라인별 가동률, 작업지시 진행률, 불량률, 설비 알람을 공장 레이아웃 위에서 한 번에 보는 MES 대시보드. 생산 · 품질 · 설비 · 자재 · 물류 · LOT 추적까지 11개 업무 화면을 설계하고 React로 구현했습니다.
공장 레이아웃 오버레이OEE · 가동률LOT 이력 추적차트 10종
Overview
무엇을 풀었나
대상 — 공장 관리자 · 생산 담당자
02해결
대시보드 한 장에 KPI 6개, 라인별 가동 현황, 공장 평면도 위 설비 상태, 생산 실적 · OEE · 불량 추이를 모았습니다. 세부는 11개 메뉴로 내려가되, 모든 화면이 같은 상단 조건(작업일 · 작업자 · 작업지시 · 제품 · 공정)을 공유합니다.
03설계 포인트
흰 카드와 옅은 회색 바탕 위에서 상태는 색 하나로만 말합니다. 가동은 초록, 정지는 빨강, 점검은 파랑. 수치는 크고 굵게, 단위와 기준값은 작게 붙여 읽는 순서를 정했습니다.
Key features
핵심 기능
Altivo MES에서 눈여겨볼 4가지
01
공장 레이아웃 위의 설비 상태
실제 공장 도면 위에 라인별 상태 배지를 얹어, 어느 구역이 멈췄는지 위치로 먼저 알 수 있게 했습니다. 왼쪽에는 라인별 가동률 막대, 오른쪽에는 생산 실적과 OEE를 둡니다.
- 라인 A–F 가동률 · 상태 배지
- 층 선택 · 확대 · 축소 · 레이어 전환
02
설비 카드로 보는 실시간 모니터링
설비 8대를 카드로 나열하고 온도 · 전류 · RPM · 진동과 가동 시간을 같은 자리에 둡니다. 상단에서 가동 · 대기 · 오류 · 점검 대수를 먼저 세어 보여줍니다.
- 상태별 대수 요약 → 설비 카드
- 알람 개수 배지 · 설비 검색 · 유형 필터
03
작업지시와 LOT 이력 추적
작업지시는 진행 · 대기 · 완료 · 일시정지 탭으로 나눠 공정 단계별 진행 막대로 보여줍니다. LOT을 고르면 수량 · 양품률 · 현재 위치와 공정 이동 이력이 시간순으로 펼쳐집니다.
- 작업지시 상태 탭 · 공정 단계 진행 막대
- LOT 공정 이동 타임라인(작업자 · 시각)
04
품질 · 설비 보전 지표
품질은 검사 건수와 합격률, 불량 유형 분포, 이상 탐지 알림으로. 설비 보전은 예방정비 · 부품 교체 일정과 MTBF/MTTR 추이로 정리했습니다.
- 불량 유형 도넛 · 이상 탐지 알림
- MTBF / MTTR 추이 차트
All screens
전체 화면 11장
화면은 실제 서비스 · 개발 서버를 띄워 직접 촬영했습니다. 화면을 누르면 전체 페이지를 볼 수 있어요.
현황 · 모니터링
201대시보드 02실시간 모니터링
생산 · 품질 · 설비
303생산 관리 · 작업지시 04품질 관리 05설비 관리 · 보전
자재 · 물류 · 추적
306자재 관리 07물류 관리 08이력 추적(LOT)
리포트 · 기준 · 시스템
309리포트 10기준 정보 11시스템 관리
Scope
구현 범위
화면 뒤에서 무엇이 돌아가는지, 숫자와 함께 정리했습니다.
11업무 화면
6대시보드 KPI
10Recharts 차트
46UI 컴포넌트
(Radix 기반)
(Radix 기반)
화면별 React 코드
업무 화면 11종을 화면 단위 컴포넌트로 나눈 프런트엔드 코드입니다. 현재 데이터는 목업이며, 화면 전환 · 탭 · 검색 · 선택 상태까지 동작합니다.
공통 UI 키트
PageHeader · Card · StatusBadge 같은 공통 컴포넌트와 Radix 기반 UI 46종을 함께 정리해 화면이 늘어나도 같은 모양을 유지합니다.
기술 스택
관리 시스템 UI · 프런트엔드 프로토타입(목업 데이터)
React 18TypeScriptVite 6Tailwind CSS v4RechartsRadix UIlucide-react