프로젝트 배경
1) 문제점 건물 자동제어 데이터로 설비 이상을 진단하는 SaaS입니다. 기능은 이미 완성돼 현장에서 돌고 있고 화면도 20개쯤 있는데, 투자 미팅이나 영업에서 열어 보이기에는 완성도가 모자란 상태였습니다. 원인은 대개 한 자리에 모입니다. 센서 300개가 넘는 상태값을 한 화면에 올리는 순간, 정보 위계와 간격과 상태 표현이 정리돼 있지 않으면 밀도가 높을수록 화면이 더 안 읽힙니다. 여기에 데이
프로젝트 성과
센서 312개·상태 6단계를 한 화면에
관제 개요 매트릭스에 312개를 점으로 전량 배치했습니다. 요약 카드 5개는 전부 분모 표기로 갔습니다.
표 312행·106행 전량 렌더
센서 인벤토리 312행과 이상 진단 106행을 그대로 세우고 sticky 헤더·자릿수 정렬·다축 필터·정렬·행 선택을 붙였습니다.
측정 불가 11건을 0으로 접지 않음
데이터 없음을 해치 패턴과 「측정 불가」로 표시하고 집계에서 분모가 아니라 분자에서 뺐습니다. 응답 301/312로 읽힙니다.
개선 전/후를 전환해도 상태가 남는다
필터 2개·정렬·선택 3행·표 스크롤 420px이 전환 뒤에도 유지되는 것을 배포본에서 확인했습니다. 안내 띠가 그 값을 그대로 씁니다.
텍스트 대비 40개 항목이 전부 4.5:1 이상
색을 측정 스크립트로 정했습니다. 컴포넌트 CSS에 hex 값은 0건이고 색·간격·radius·모션이 전부 디자인 토큰입니다.
핵심 기능
진행 단계
요구 해석과 데이터 설계
2026.09.
공고가 준 숫자를 그대로 데이터 스펙으로 삼아 센서 312개·설비 20대·알람 106건을 만들었습니다. 측정 불가 11개를 심었습니다.
프로젝트 상세
1) 소개 위시켓 공고를 보고 만든 제안용 데모입니다. 건물 자동제어 데이터로 설비 이상을 진단하는 SaaS의 관제 화면을, 기능과 데이터와 문구를 그대로 둔 채 배치·위계·간격·상태 표현만 바꿔 다시 읽히게 만들었습니다. 공고가 요구 규모를 숫자로 다 적어 두었기 때문에 그 숫자를 그대로 데이터 스펙으로 삼았습니다. 센서 300개 이상, 분모 표기(예 180/312), 상태 4~6단계, 데이터 없







