올리브영, Storybook으로 디자인 시스템 OLEA 구축!
by DD
1년 전
조회수 8
Vue 기반의 백오피스 시스템(BO) 디자인 일관성 부족 문제를 해결하기 위해 Storybook을 활용한 디자인 시스템 OLEA를 구축함
Vite를 사용하여 OLEA를 번들링하고, GitHub Packages를 통해 배포하여 개발 생산성을 향상시킴
OLEA를 통해 컴포넌트 재사용성을 높이고, 개발자들이 쉽게 UI를 이해하고 사용할 수 있도록 지원함
OLEA 디자인 시스템의 설계 배경
기존 BO 시스템의 기술 스택 분산으로 인한 유지보수 어려움을 해결하고자 Vue와 Ant Design Vue를 선택했다. Storybook을 활용하여 컴포넌트의 재사용성을 높이고, 디자인 일관성을 확보하여 개발 생산성을 향상시켰다.
Vite를 활용한 OLEA 번들링
Vite는 Native ESM을 사용하여 개발 서버의 속도를 향상시키고, 을 제공한다. 과 같은 기존 번들러와 달리, 는 모듈을 동적으로 로드하여 및 를 가능하게 한다.
