OLEA? Storybook을 활용한 올리브영의 디자인 시스템!

Context

올리브영의 백오피스(BO) 시스템이 Nexacro, RealGrid 등 여러 솔루션으로 분산되어 있었다. 높은 러닝 커브와 상이한 기술 스펙으로 인해 확장성, 유지보수, 팀 간 협업, 신규 개발자 참여에 어려움이 발생했다. 2023년 Vue + Ant Design으로 새 콘텐츠 BO를 구축했으나 디자인 일관성 부족, 컴포넌트 재사용성 저하 문제가 발생했다.

Technical Solution

• 프론트엔드 스택 통합: Nexacro, RealGrid 기반의 레거시 BO를 Vue 3 + Ant Design Vue로 재구축하여 공통화 추진
• 디자인 시스템 구축: Figma 디자인 가이드 기반으로 Storybook을 활용한 OLEA 디자인 시스템 개발 및 컴포넌트 문서화
• Atomic Design 패턴 적용: Button, Icon, Radio, Checkbox 등 자주 사용되는 컴포넌트를 atomic 단위로 분리하여 개발
• 빌드 및 배포 최적화: Vite를 번들러로 선택하여 Native ESM 기반 동적 모듈 로딩으로 개발 서버 시작 시간 단축
• Private NPM 패키지 관리: GitHub Packages를 통해 @bo-template 네임스페이스의 프라이빗 패키지로 배포하고 .npmrc 설정으로 접근 제어

Key Takeaway

백오피스 시스템처럼 다양한 레거시 솔루션이 분산된 환경에서는 단순히 기술 스택을 통합하는 것으로 부족하며, Storybook 같은 도구로 디자인 시스템을 시각화하고 개발자가 쉽게 참고할 수 있는 형태로 제공해야 조직 전체의 개발 생산성이 향상된다. 대규모 팀의 협업 효율성은 기술 선택 못지않게 일관된 가이드라인과 문서화 프로세스의 자동화에 달려 있다.