조건문의 지옥에서 벗어나 '드래그 앤 드롭'으로 검사기 UI를 조립하기까지

제조업 비전 검사 장비의 소프트웨어를 개발할 때 가장 까다로운 요구사항은 '현장(고객사)'으로부터 옵니다. 검사 데이터는 동일하더라도, A 공장에서는 실시간 불량 리스트를 화면 우측에 크게 보고 싶어 하고, B 공장에서는 검사 속도와 실시간 CCTV 화면을 한눈에 대시보드 형태로 모니터링하기를 원합니다.

과거에는 이러한 요구사항이 올 때마다 소프트웨어 내부에 고객사별 조건문(If-Else)을 추가하며 개별적으로 화면을 뜯어고치곤 했습니다. 하지만 고객사가 늘어날수록 코드는 걷잡을 수 없이 복잡해졌고, 하나의 버그가 다른 공장의 시스템까지 위협하는 구조적 한계에 부딪혔습니다.

우리는 이 악순환의 고리를 끊기 위해 "UI의 컴포넌트화와 조립식 아키텍처", 그리고 "웹 기술을 이용한 데이터 통합 관리"라는 전면적인 혁신을 시도했습니다.

엉킨 코드를 풀고 UI를 컴포넌트로 해체하기

우리는 고객사별로 파편화되어 있던 화면 요구사항들을 철저히 분석하여, 더 이상 쪼갤 수 없는 독립적인 'UI 컴포넌트' 단위로 모두 해체했습니다.

• 실시간 이미지 뷰어

• 검사 결과 히스토리 리스트

• 실시간 통계 (검사 수량, 불량률, 공정 속도)

• 현장 모니터링용 CCTV 연동 화면

이처럼 현장에서 필요로 하는 모든 요소를 규격화된 블록으로 만들었습니다. 그리고 이 블록들을 마우스 드래그 앤 드롭(Drag & Drop)만으로 자유롭게 배치할 수 있는 커스텀 레이아웃 시스템을 구축했습니다. 이제 새로운 고객사의 특이한 화면 요구사항이 들어와도 개발자가 밤을 새우며 코드를 수정할 필요가 없습니다. 이미 준비된 컴포넌트 블록들을 고객사의 입맛에 맞게 화면에 얹고 설정하는 것만으로 단 몇 분 만에 완전히 새로운 대시보드가 완성됩니다. 기존에 없는 컴포넌트가 필요한 경우라도 기존 코드에 영향을 지 않도록 구조적으로 관심사가 분리되었습니다.

하드웨어 수동 제어도 '카드(Card)' 한 장으로 간편하게

우리 플랫폼의 혁신은 모니터링 화면에만 그치지 않았습니다. 검사기 현장에는 장비를 직접 제어하거나, 공장의 PLC(Programmable Logic Controller) 신호와 우리 소프트웨어 사이를 중재해 주는 '장비 제어 시스템'이 필수적으로 존재합니다. 현장 작업자들은 장비를 셋업하거나 정비할 때 특정 하드웨어 동작을 수동으로 조작해야 하는 경우가 많습니다.

기존에는 이 수동 조작 UI가 제대로 마련되어 있지 않아 현장의 애로사항이 많았습니다.

우리는 하드웨어의 수동 조작 명령 역시 자유롭게 정의할 수 있는 '카드(Card)' 형태의 UI로 추상화했습니다. 사용자가 원하는 동작과 매개변수를 카드로 정의하면, UI 플랫폼이 이를 인식해 장비 제어 레이어와 유연하게 소통합니다. 결과적으로 전체 고객사 아키텍처의 수정 공수를 최소화하면서도, 고도의 소프트웨어 재사용성을 달성할 수 있었습니다.

분산된 검사기를 하나로 묶는 현대적 웹 스택의 도입

과거의 비전 검사 시스템은 검사기 PC 한 대마다 각각 데이터베이스를 개별적으로 관리하는 독립된 형태가 많았습니다. 이 방식은 공장 전체의 검사 데이터를 통합하거나, 원격으로 모니터링하고 관리할 때 엄청난 불편함을 초래합니다.

우리 팀은 전통적인 장비 SW의 한계를 넘기 위해 현대적인 웹 아키텍처를 장비 생태계에 전격 도입했습니다.

공장 내에 여러 대의 비전 검사기가 흩어져 있더라도, 우리 UI 플랫폼의 백엔드가 중심을 잡고 모든 데이터를 중앙 집중식으로 통합 관리합니다. 각 장비에서 쏟아지는 대용량 비전 데이터, 하드웨어 제어 신호, 그리고 UI 처리 레이어는 웹소켓(WebSocket)과 Redis Stream을 통해 연결되어 있습니다. 공장의 가혹한 환경 속에서도 밀리초(ms) 단위의 실시간성을 보장하며, 단 한 건의 데이터 유실 없이 안정적이고 강력한 실시간 양방향 통신 파이프라인을 유지합니다.

제조 소프트웨어의 표준을 다시 쓰다

많은 사람들이 제조/장비 소프트웨어라고 하면 낡고 폐쇄적인 기술 스택만을 떠올립니다. 하지만 우리 팀은 Next.js, Nest.js, Redis, 웹소켓과 같은 최신 웹 표준 기술을 고성능 장비 제어 도메인과 융합하여, 그 어떤 웹 서비스보다 거대하고 빠른 실시간 대용량 데이터 생태계를 제어하고 있습니다.

고객사별 스파게티 코드에서 벗어나 완벽한 컴포넌트화를 이루어낸 우리 팀은, 이제 더 거대하고 스마트한 공장 통합 모니터링 플랫폼으로의 확장을 준비하고 있습니다.

*Vision Platform Group 의 관련 콘텐츠:
AIVEX는 왜 '하이브리드 컴퓨팅'을 선택했는가
검사기의 과검·미검, 아직도 PC에서 폴더를 열어서 확인하시나요?
딥러닝 비전 검사의 심장: 비전 엔지니어가 오직 '모델'에만 집중하는 플랫폼 환경 구축기