CycleX 통합 관제 시스템 > 포트폴리오

사이클엑스는 밀폐형 로터리 킬른과 IoT 센서로 가축분뇨를 처리하는 기후테크 기업이었습니다.
농장과 공동 처리시설이 늘어날수록 본사는 전체 현황을, 사업장은 자기 장비만을 봐야 했고, 누가 설정을 바꿨는지도 남겨야 했습니다.
그래서 모니터링 화면을 넘어 사업장·장비·권한·이력을 함께 다루는 운영 플랫폼으로 범위를 정의하였습니다.

설계를 '사업장 단위 권한', '연동 전 운영 검증', '기록되는 제어' 세 축으로 압축했습니다.
공개 회원가입을 없애고 최고관리자가 계정을 발급해 사업장에 배정하도록 했으며, 배정 범위 밖의 데이터는 서버에서 차단했습니다.
현장 센서가 붙기 전에도 운영 흐름을 검증할 수 있도록 서버 시연 데이터를 하나의 원천에서 재생하도록 구성하였습니다.

관제는 '한눈에', 수치는 '정확하게', 제어는 '안전하게' 가는 것을 세 가지 원칙으로 세웠습니다.
현재값과 설정값, 확인과 복구처럼 헷갈리기 쉬운 상태를 서로 다른 라벨로 분리했고, 단위가 다른 센서는 합산하지 않도록 막았습니다.
실측처럼 보이는 가짜 감축량은 화면 어디에도 넣지 않았습니다.

첫 화면은 사이클엑스 공식 브랜드 필름을 편집해 농지에서 산업 장치, 풍력으로 이어지는 순환의 흐름을 담았습니다.
원본 46MB 영상을 11초·2.7MB로 재인코딩했고, 모션 축소나 데이터 절약 환경에서는 영상을 아예 내려받지 않고 포스터로 대체했습니다.
모바일에서는 로고와 짧은 소개 뒤에 바로 입력 폼이 오도록 순서를 바꿨습니다.

사업장 대시보드는 설치·가동·통신 이상과 처리량 KPI를 맨 위에 두고, 지도·센서·장비 상태를 한 줄로 배치했습니다.
등록된 사업장 주소는 카카오 지도와 연결해 위치를 바로 확인하게 했고, 센서 카드를 누르면 24시간 추이와 시간대별 수신 이력으로 이어지도록 설계했습니다.
수치마다 기준 장비와 갱신 시각을 함께 표기했습니다.

전체 사업장 화면에서는 사업장별 등록·가동·통신 이상 장비 수를 카드로 나눠 어디부터 대응해야 하는지 먼저 보이게 했습니다.
장비 모니터링은 장비마다 운전 모드와 6종 센서값, 송풍·교반 설정과 설정 버전을 한 카드에 담았습니다.
통신이 끊긴 장비는 마지막 값을 그대로 두지 않고 미수집으로 표시하도록 처리했습니다.

제어 화면은 운전 시작·정지, 자동·수동 모드, 목표 온도와 송풍·교반 설정을 한 장비 단위로만 실행하도록 설계했습니다.
모든 조작은 대상 장비와 변경 전후 값을 확인한 뒤 실행되며, 저장 시 장비 버전을 비교해 다른 사람이 먼저 바꾼 설정을 덮어쓰지 못하게 막았습니다.
요청자와 결과는 명령 처리 이력에 남겼습니다.

데이터 이력은 장비·센서·기간으로 좁혀 평균·최저·최고와 유효 데이터 비율을 먼저 보여주고, 같은 조건 그대로 CSV와 인쇄 보고서로 내보내도록 만들었습니다.
알람은 '확인'과 '복구'를 서로 다른 상태로 분리했습니다.
담당자가 확인했다고 해서 발생 조건이 해소된 것으로 처리되지 않도록 설계했습니다.

공지사항과 공통 게시판은 그누보드의 글·댓글·첨부 기능을 그대로 살리고, 관제 화면과 같은 셸 안에 넣어 메뉴 이동이 끊기지 않게 했습니다.
최고관리자 화면에서는 사업장·설비 등록과 계정 배정, 담당자 미배정 점검을 한 페이지에서 처리하도록 구성했습니다.
주소 입력은 회원 관리와 같은 우편번호 검색을 연결했습니다.

현장 담당자는 사무실보다 농장과 처리시설 안에서 화면을 여는 경우가 많다고 판단했습니다.
그래서 760px 이하에서는 사이드 메뉴를 접고 KPI는 3열, 패널은 1열로 재배치했으며, 넓은 표는 페이지 폭을 밀어내지 않도록 영역 안에서만 스크롤되게 처리했습니다.
로그인부터 제어·이력·게시판까지 전 화면을 모바일에서 동일하게 쓸 수 있도록 구현하였습니다.