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

올리브영의 백오피스 시스템 BO

올리브영의 백오피스(BO) 시스템은 다양한 솔루션을 통합하여 Vue와 Ant Design Vue를 활용해 구축되었습니다. 그러나 디자인 일관성과 컴포넌트 재사용성의 문제로 인해 디자인 시스템 구축의 필요성이 대두되었습니다.

디자인 시스템과 Storybook

디자인 시스템은 일관된 사용자 경험을 제공하기 위한 가이드라인과 도구의 모음이며, Storybook은 UI 컴포넌트를 독립적으로 개발하고 문서화하는 도구입니다. 이를 통해 팀 내 협업과 생산성을 높일 수 있습니다.

OLEA의 탄생

OLEA는 올리브영의 브랜드 아이덴티티를 반영하여 개발된 디자인 시스템으로, Vite를 통해 배포되었습니다. GitHub Packages를 활용하여 내부 개발팀만 접근 가능한 패키지를 생성하고, Storybook을 통해 각 컴포넌트의 사용 예시를 문서화하여 개발자들이 쉽게 사용할 수 있도록 하였습니다.

• OLEA는 현재 다양한 컴포넌트 개발 중
• 앞으로 보안 및 권한 부여 시스템 추가 계획
• 효율성을 높이고 사용자 경험을 개선할 목표