올리브영, Storybook으로 디자인 시스템 OLEA 구축!

Vue 기반의 백오피스 시스템(BO) 디자인 일관성 부족 문제를 해결하기 위해 Storybook을 활용한 디자인 시스템 OLEA를 구축함

Vite를 사용하여 OLEA를 번들링하고, GitHub Packages를 통해 배포하여 개발 생산성을 향상시킴

OLEA를 통해 컴포넌트 재사용성을 높이고, 개발자들이 쉽게 UI를 이해하고 사용할 수 있도록 지원함

OLEA 디자인 시스템의 설계 배경

기존 BO 시스템의 기술 스택 분산으로 인한 유지보수 어려움을 해결하고자 Vue와 Ant Design Vue를 선택했다. Storybook을 활용하여 컴포넌트의 재사용성을 높이고, 디자인 일관성을 확보하여 개발 생산성을 향상시켰다.

Vite를 활용한 OLEA 번들링

Vite는 Native ESM을 사용하여 개발 서버의 속도를 향상시키고, 단순한 설정을 제공한다. Webpack과 같은 기존 번들러와 달리, Vite는 모듈을 동적으로 로드하여 번들링 시간 단축 및 개발 서버 시작 시간 감소를 가능하게 한다.

GitHub Packages를 이용한 OLEA 배포

OLEA는 GitHub Packages를 통해 배포되어 내부 개발팀만 접근할 수 있도록 관리된다. npm publish 명령어를 사용하여 패키지를 배포하며, .npmrc 파일을 통해 레지스트리 설정을 추가한다. 결과적으로, 프라이빗 패키지 관리 및 배포 자동화를 통해 개발 효율성을 높였다.