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

Vite, React, TypeScript 환경에서 Storybook과 Emotion을 사용하여 디자인 시스템을 구축함

Emotion을 활용하여 컴포넌트의 동적 스타일링 및 Keyframes 애니메이션 구현

구축된 디자인 시스템을 Github Packages로 배포하여 올리브영 서비스에 적용 예정

Storybook을 활용한 컴포넌트 문서화

Storybook은 컴포넌트를 독립적인 환경에서 시각화하고 문서화하는 데 핵심적인 역할을 한다. 구체적으로 컴포넌트의 구조와 형태를 쉽게 파악하도록 돕고, Props를 제어하여 다양한 상태를 확인한다. 따라서 디자인 시스템 구축 시 컴포넌트의 재사용성과 유지보수성을 높이는 데 기여한다.

Emotion을 이용한 동적 스타일링

Emotion은 JS를 사용하여 CSS를 작성하는 라이브러리로, 컴포넌트의 Props에 따라 동적으로 스타일을 적용할 수 있다. 조건부 스타일링을 통해 Radio 컴포넌트의 활성/비활성 상태를 제어하고, Keyframes를 활용하여 애니메이션을 구현한다. 따라서 UI의 유연성과 사용자 경험을 향상시킨다.

디자인 시스템 배포 및 적용 전략

구축된 디자인 시스템은 Github Packages를 통해 배포되어, 실제 올리브영 서비스에 적용될 예정이다. npm 또는 yarn을 사용하여 패키지를 설치하고, Text 컴포넌트를 import하여 사용한다. 결과적으로 UI 일관성을 유지하고, 개발 생산성을 향상시키는 것을 목표로 한다.