안녕하세요.
담당 매니저 김수민입니다.
기간제(상주) 프로젝트 희망 근무 시작일을
등록해 주시면, 파트너님의 일정에 맞는
적합한 프로젝트를 추천해 드려요.
플러스
[구현 데모] 건물 설비 관제 대시보드 UI 개선 — 센서 312개·상태 6단계 밀도 처리 · 개선 전/후 상태 보존 토글
개발 · 디자인
관제ㆍ모니터링, 통계ㆍ대시보드, 퍼블리싱ㆍ반응형
프로젝트 배경
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·모션이 전부 디자인 토큰입니다.
핵심 기능
관제 개요 — 312개 센서 상태 맵
3개 동 × 6개 설비군 격자에 센서 312개를 점으로 전부 찍습니다. KPI 5개가 전부 분모 표기이고 상태 분포 바가 6단계를 한 줄에 담습니다.
진행 단계
요구 해석과 데이터 설계
2026.09.
공고가 준 숫자를 그대로 데이터 스펙으로 삼아 센서 312개·설비 20대·알람 106건을 만들었습니다. 측정 불가 11개를 심었습니다.
프로젝트 상세
1) 소개 위시켓 공고를 보고 만든 제안용 데모입니다. 건물 자동제어 데이터로 설비 이상을 진단하는 SaaS의 관제 화면을, 기능과 데이터와 문구를 그대로 둔 채 배치·위계·간격·상태 표현만 바꿔 다시 읽히게 만들었습니다. 공고가 요구 규모를 숫자로 다 적어 두었기 때문에 그 숫자를 그대로 데이터 스펙으로 삼았습니다. 센서 300개 이상, 분모 표기(예 180/312), 상태 4~6단계, 데이터 없

비슷한 프로젝트를 준비 중이라면?
위시켓 매니저와 상담하세요.

참여 개발사와 미팅 연결

프로젝트 1:1 컨설팅 제공

무료로 프로젝트 등록하기

작업한 파트너 프로필 보기

ed******
개발 · 법인사업자

프로젝트 정보

참여 기간
2026.09. ~ 2026.09.
참여율
참여율이 100%인 프로젝트는 해당 파트너님이 온전히 작업한 결과물입니다.
외부 공동 작업의 경우 기여도에 따라 참여율이 달라지며 역할, 프로젝트 설명을 통해 업무 분야 및 참여 범위를 확인할 수 있습니다.
100%
고객사
자체 제작 (제안용 데모)
역할
화면 설계 · 디자인 토큰 체계 설계 · 프론트엔드 구현(Jinja2 · 순수 CSS) · 합성 데이터 생성 · 정적 빌드 · 배포
관련 기술
python3
CSS3
HTML5
Python Flask
vercel
JavaScript
JinJa2