농산물 선별 시스템 데스크톱 클라이언트

배경

현장 작업자가 사용하는 농산물 AI 자동 등급 분류 시스템의 데스크톱 UI입니다. 실시간 모니터링, AI 비전/중량 설정, 자동 분류 관리, 통계 리포트를 제공하며 전국 20개 이상 현장에서 Kiosk 모드(1920x1080)로 운영됩니다. 최대 80개 이상의 분류 출구를 표시하는 화면에서 산업용 PC의 제한된 성능으로 약 15fps까지 프레임이 떨어지는 렌더링 문제와, 비전 설정 페이지가 비대한 단일 컴포넌트로 유지보수가 어려운 상황이었습니다.

해결 과정

분류 출구 리스트의 렌더링 성능 문제는 react-window 기반 가상 스크롤로 해결했습니다. 화면에 보이는 항목만 렌더링하는 가상화 컴포넌트를 구현하고, RailMap 미니맵과의 양방향 스크롤 동기화를 적용하여 항목 클릭 시 목록이 해당 위치로 센터 정렬되도록 했습니다.

비전 설정 모놀리스는 15개 이상의 집중된 모듈로 분해하고, 5개 전용 훅으로 상태 로직을 컴포넌트에서 완전히 분리했습니다. 드래그 핸들러에 debounce와 boundary checking, 카드 컴포넌트에 React.memo + 커스텀 비교 함수를 적용하여 불필요한 리렌더링을 차단했습니다.

유휴 상태에서도 동일 주기로 HTTP 폴링이 발생하는 문제에는 Adaptive Polling 패턴을 도입했습니다. 선별 가동 중 1초, 유휴 상태 5초로 자동 전환되고, WebSocket 서버 푸시 방식을 병행하여 PC/GPU/카메라 상태 업데이트의 폴링 의존도를 줄였습니다. 비전 시스템 PC 12대의 CPU/GPU/RAM 사용률과 카메라 온도를 실시간으로 모니터링하여 장비 이상 징후에 선제적 대응이 가능해졌습니다.

Electron 배포에서는 Windows의 Chromium 캐시 백엔드 에러(100% 콜드 스타트 실패)를 Shared Dictionary 비활성화와 디스크 캐시 경로 강제 지정으로 해결하고, 3개 플랫폼 프로덕션 빌드를 구성했습니다. 또한 Generic TypeScript 패턴으로 전체 API 레이어를 타입 안전하게 재설계하고, PDF/Excel 리포트 생성 기능을 구축했습니다.

성과

• 분류 출구 리스트 렌더링 약 15fps → 60fps 달성, 10,000건 이상 결과 이미지도 끊김 없이 스크롤
• 비전 설정 등급 경계 드래그 10fps → 60fps, 모놀리스를 15개 모듈로 분해
• Adaptive Polling으로 유휴 시간 네트워크 부하 80% 감소, 상태 업데이트 지연 5~30초 → 1초 이내
• Windows 콜드 스타트 실패율 100% → 0%, 3개 플랫폼(Windows/macOS/Linux) 프로덕션 빌드 제공
• 19개 API 모듈, 51개 커스텀 훅, 표준화된 품질 리포트(PDF/Excel) 생성 기능으로 현장 관리 효율화