![](https://www.baehyunki.com/wp-content/uploads/2024/08/btech_01.png)
![](https://www.baehyunki.com/wp-content/uploads/2024/08/btech_02.png)
![](https://www.baehyunki.com/wp-content/uploads/2024/08/btech_02-1.png)
![](https://www.baehyunki.com/wp-content/uploads/2024/08/btech_02_2.png)
디자인
전 세계에 걸친 제약회사의 프로젝트 진행상황을 알아볼 수 있도록 종합상황실 화면을 구성했습니다. 각 프로젝트를 클릭할때마다 더 자세한 현황을 들여다볼 수 있습니다.
색상별로 달성률을 알아볼 수 있도록 구성하여 빠르게 현황 파악을 할 수 있도록 시각적인 효과를 더했습니다. 공통된 요소들을 최대한 재사용할 수 있도록 구성하여 디자인했습니다.
퍼블리싱
바닐라 자바스크립트(ES6)를 사용하였으며, Pug 템플릿 엔진과 SCSS로 BEM 방식의 스타일링으로 체계적인 면을 더하고, 재사용성을 높이고자 했던 프로젝트였습니다. 웹팩(Webpack)을 도입하여 번들링을 비롯해 HMR(Hot Module Replacement)로 작업의 효율성을 더할 수 있었습니다.
처음으로 번들링 도구를 도입하여 진행했던 프로젝트였고, 초기 환경 세팅에 어려움을 겪었지만 결과적으로는 작업의 효율성을 더할 수 있어 더 빠른 작업속도를 이끌어 낼 수 있었습니다.