핵심 요약
올리브영은 OLEA 디자인 시스템을 Storybook으로 시각화하고, Vite 기반 Vue + Ant Design Vue 구성으로 일관된 UI를 빠르게 재사용 가능하도록 구축했습니다.
주요 경험
- 피그마 디자인 가이드를 바탕으로 OLEA의 디자인 규칙을 정의하고, Storybook에 컴포넌트의 다양한 상태를 시나리오처럼 문서화했다.
- Vue 중심 설계에 Ant Design Vue를 도입해 BO 공통 컴포넌트의 재사용성 및 디자인 일관성을 확보하고, 러닝 커브를 낮출 템플릿 구문을 제공했다.
- 내부 배포를 위해 GitHub Packages를 활용하고 npm/yarn 설치 방식으로 개발자 접근성과 배포 편의성을 개선했다.
얻은 인사이트
- 디자인 시스템의 규칙화와 Storybook 시각화가 팀 간 협업과 재사용성 향상에 실질적 기여를 확인했다.
- 초기 설정의 복잡성으로 인한 러닝 커브를 완화하려면 충분한 가이드와 문서화가 필수임을 확인했다.
