프로젝트 한눈에 보기
삼화페인트 생태공장 대시보드
쉽게 말하면
운영자가 공정 / 환경 데이터를 한 화면에서 빠르게 확인하는 생태공장 대시보드입니다. 카드 / 상태 표시 / 차트 / 정보성 UI가 제각각이던 화면을 하나의 시각 규칙으로 묶어 "보기 좋은 화면"보다 "빠르게 읽히는 화면"에 초점을 맞췄습니다.
Visual Studio Code / Git / Vue / JavaScript / SCSS / HTML
01 / PROJECT NOTE
제가 맡고 끝까지 책임진 일
완성 화면만 나열하지 않았습니다. 왜 그렇게 만들었고 어떤 변화를 남겼는지 차례대로 설명합니다.
문제를 이렇게 풀었습니다
- 대시보드 Client 화면 전체 퍼블리싱 — 카드, 데이터 영역, 상태 표시, 차트, 정보성 UI
- 화면별로 흩어져 있던 위계 / 간격 / 정렬 기준을 통일해 일관된 카드형 레이아웃 정립
- 정상 / 경고 등 상태 표현을 색 / 라벨 규칙으로 정리해 데이터 판독성 강화
- 차트 / 수치 영역의 반응형 대응으로 다양한 해상도에서 가독성 유지
- 기존 화면의 불규칙한 스타일을 정리하며 UI 개선(50%)을 함께 수행
그래서 실제로 달라진 점
- 정보 가독성과 UI 일관성을 개선해 운영자의 데이터 확인 속도 향상
- 카드 레이아웃 / 상태 표현 규칙을 표준화해 신규 위젯 추가 시 재사용 가능
이 프로젝트에서 눈여겨볼 점
- 데이터 중심 대시보드 UI
- 상태 / 위계 시각화 규칙 정립
- 짧은 기간에 화면 일관성 확보
02 / SCREENS
화면으로 확인하기
말보다 화면이 빠를 때가 있습니다. 실제 결과물에서 구현의 디테일을 확인해 보세요.