여기에 가시면 다양한 storybook의 예제를 볼 수 있습니다.
이 외에 저같은 경우는 Atomic Design 형태로 만들고 싶어 공부하고 있습니다. 아래의 그림을 살펴보세요.
1. 내가 만들 디자인 시스템
가장 이상적인 디자인 시스템은 프로젝트를 만드는 과정에서 처음부터 디자인 시스템을 구축하고 재사용이 자주 될거 같은 컴포넌트를 디자인 시스템에 하나하나 추가해 가면서 문서화 하는 방향입니다.
하지만 이러한 이상적인 방법은 2가지 조건이 필요합니다.
- 체계가 잘 잡혀있다.
- 프로젝트를 처음부터 만들게 된다.
하지만 대부분의 회사의 경우 이러한 체계가 잘 구축된 곳은 많이 없고 구축이 된 곳도 새로운 프로젝트 보다는 이미 배포된 프로젝트를 개선하는 일이 많습니다.
저도 이미 만들어진 프로젝트를 리액트로 Migration 하는 도중 해당 프로젝트에 디자인 시스템을 추가해보라는 과제를 받아 도전하게 됩니다.
2. 가장 먼저 해야 할 일?
이미 배포까지 된 프로젝트의 경우 이미 만들어진 프로젝트가 있습니다.
이 프로젝트에 사용되는 UI들을 스크린샷으로 찍어 종류별로 나열하여 어떻게 나눌지 해야합니다.
보통은 디자인 시스템을 만들 때 디자이너가 이 부분을 해줍니다. 하지만 지금은 저 혼자 하는 작업이므로 이전에 디자이너가 작업한 결과물이 있는지 확인해 보고 정할려 합니다.
3. 다양한 기능들
react-spring으로 트랜지션 구현
트랜지션 애니메이션을 구현할 때 그냥 css의 transition 속성을 사용하거나, keyframe을 사용하거나, react-transition-group라는 라이브러리를 사용해도 됩니다.
어떠한 방법을 사용하셔도 되지만 이번에는 react-spring를 사용해보겠습니다. 이 라이브러리는 Hooks를 기반으로 수준 높은 애니메이션을 구현할 수 있습니다.
yarn add --peer react-spring
# 또는 npm install --save react-spring이 라이브러리는 TypeScript를 구현해주기 때문에 별도로 타입설치를 할 필요는 없습니다.
반응형 디자인
반응형 디자인이 필요한 컴포넌트 개발 시 @storybook/addon-viewport 애드온을 사용하면 됩니다.
설치를 한 후 적용을 하면 storybook에서 viewport를 선택 할 수 있게 됩니다.
출처
1. https://velog.io/@velopert/create-your-own-design-system-with-storybook
2. https://github.com/connect-foundation/2019-12
