올리브영, Storybook과 Emotion으로 디자인 시스템 구축!
by DD
1년 전
조회수 13
Vite, React, TypeScript 환경에서 Storybook과 Emotion을 사용하여 디자인 시스템을 구축함
Emotion을 활용하여 컴포넌트의 동적 스타일링 및 Keyframes 애니메이션 구현
구축된 디자인 시스템을 Github Packages로 배포하여 올리브영 서비스에 적용 예정
Storybook을 활용한 컴포넌트 문서화
Storybook은 컴포넌트를 독립적인 환경에서 시각화하고 문서화하는 데 핵심적인 역할을 한다. 구체적으로 컴포넌트의 구조와 형태를 쉽게 파악하도록 돕고, Props를 제어하여 다양한 상태를 확인한다. 따라서 디자인 시스템 구축 시 컴포넌트의 재사용성과 유지보수성을 높이는 데 기여한다.
Emotion을 이용한 동적 스타일링
Emotion은 JS를 사용하여 CSS를 작성하는 라이브러리로, 컴포넌트의 Props에 따라 동적으로 스타일을 적용할 수 있다. 조건부 스타일링을 통해 의 활성/비활성 상태를 제어하고, 를 활용하여 애니메이션을 구현한다. 따라서 의 유연성과 사용자 경험을 향상시킨다.
