프론트엔드
OLEA? Storybook을 활용한 올리브영의 디자인 시스템!
두줄요약
올리브영은 BO 공통화를 위해 Vue와 Ant Design Vue, Storybook 기반 디자인 시스템 OLEA를 구축했습니다. GitHub Packages 배포로 내부 개발자들이 일관된 컴포넌트를 쉽게 재사용하도록 만들었습니다.
문제 상황
- 넥사크로, RealGrid 등 서로 다른 솔루션 기반 BO로 인한 러닝 커브와 유지보수 부담
- 공통 레이아웃과 디자인 기준 부재로 인한 디자인 일관성 저하와 컴포넌트 재사용성 문제
해결 방법
- Vue와 Ant Design Vue로 콘텐츠 BO를 공통화하고, 개발자 접근성을 높이는 방향으로 전환
- Storybook으로 컴포넌트 예시와 상태를 문서화해 디자인 시스템을 가시화
- OLEA를 Vite로 번들링하고 GitHub Packages로 배포해 내부 패키지로 제공
적용해볼 점
- 디자인 가이드와 컴포넌트 규칙을 함께 정리해 공통 UI 기준을 명확히 할 필요
- Storybook을 통해 Props, 상태, 사용 예시를 함께 제공하면 재사용성과 이해도 향상
- 내부 공통 컴포넌트는 패키지 배포와 설치 절차까지 포함해 표준화할 필요