세르비아 생산 공장 스마트팩토리 모니터링 시스템

배경

고객사명과 내부 시스템명은 생략했습니다. 구조와 수치는 실제와 동일합니다.

세르비아 현지 생산 공장의 AOI(Automated Optical Inspection) 공정 데이터를 조회·시각화하는 모니터링 시스템을 개발했습니다. Figma 기반 UI/UX 설계부터 React 화면 구현까지 직접 담당했고, 비슷한 기능을 하던 기존 Spring Boot API를 가져와 요구사항에 맞게 수정한 뒤 MyBatis로 쿼리를 작성해 MariaDB와 연동했습니다. 세르비아 현지 담당자와 영어로 소통하며 공정 계산식과 피드백을 반영했습니다.

문제

생산 품목별·호기별 AOI 공정 직행률(공정을 한 번에 통과하는 비율)을 확인하려면 담당자가 수기로 데이터를 집계해야 했습니다. 문제가 생긴 공정을 파악하는 시점이 늦어질 수밖에 없는 구조였습니다.

진행한 작업

1. Figma 기반 UI/UX 설계

현장 담당자가 실제로 보는 지표(품목별·호기별 직행률, 시간대별 추이)를 중심으로 대시보드 레이아웃을 설계했습니다.

2. ApexCharts·Plotly 기반 시각화

ApexCharts로 품목별·호기별 AOI 공정 직행률을 시계열 차트로 구현하고, 더 복잡한 다변량 비교가 필요한 화면에는 Plotly를 함께 사용해 인터랙티브 차트를 구성했습니다. 두 라이브러리를 화면 성격에 따라 나눠 쓰면서, 단순 추이는 가볍게, 다차원 비교는 인터랙션이 풍부하게 보여줄 수 있었습니다.

3. 기존 Spring Boot API 수정 + MariaDB 연동

비슷한 기능을 하던 기존 Java Spring Boot API를 가져와 이 대시보드에 필요한 형태로 수정하고, MyBatis로 MariaDB 쿼리를 작성해 연동했습니다.

4. 현지 담당자와의 협업

세르비아 현지 담당자와 영어로 소통하며, 공정 계산식(직행률 산출 방식)과 실사용 피드백을 반영해 지표 정의를 다듬었습니다.

결과

항목	이전	이후	변화
AOI 불량률	수기 집계 기준	약 20% 감소	−20%
공정 가시성	수기 집계·점검	차트 대시보드	상시 모니터링

수기 집계를 대시보드로 바꾼 것 자체가 목적이 아니라, 그 가시성 덕분에 문제 공정을 더 빨리 짚어낼 수 있게 된 것이 AOI 불량률 감소로 이어진 핵심이었습니다.