디자인
지하철 건설 프로젝트를 관리하는 시스템 화면을 디자인 하였습니다. 많은 컬러가 사용되는 특성상 어수선해질 수 있는 분위기를 차분하게 만들기 위해, 다크모드로 구성했습니다. 채도를 조절하여 포인트가 되는 데이터에 채도를 높여 시인성을 높였습니다.
퍼블리싱
바닐라 자바스크립트(ES6)를 사용하였으며, Pug 템플릿 엔진과 SCSS로 BEM 방식의 스타일링으로 체계적인 면을 더하고, 재사용성을 높였습니다. 웹팩(Webpack)을 도입하여 번들링을 비롯해 HMR(Hot Module Replacement)로 작업의 효율성을 더할 수 있었습니다.
Chart.js를 이용하여 차트를 그리고, CSS 애니메이션을 적절하게 활용하여 작업 공정의 진척도를 표현하는데 시각적인 효과를 더했습니다.
데이터가 많기때문에 화면을 접거나 감추는 방식으로 최대한 답답하지 않은 화면을 구성하고자 하였습니다.
