[Korean FE Article] 스토리북 구조 잡기
소개
이번 글은 스타일북 컨트리뷰터가 직접 정리한 스토리북 구성할 때를 위한 조언들을 소개합니다. 라이브러리 코드의 계층 구조만 신경쓰고, 스토리북 구성에 대한 고민은 소홀히 하진 않으셨나요? DX 엔지니어가 60개 프로덕션 스토리북을 조사하고 얻은 팁들이, 여러분의 스토리북 구성에 도움이 되기를 바랍니다.
tl;dr
스토리북을 구조화하여 팀의 작업 효율을 개선할 수 있습니다.
스토리북은 스토리 (Stories)와 문서화 페이지 (Documentation pages) 기능을 제공합니다.
스토리북 자체에 대해서 소개하는 것도 중요합니다.
다음의 내용들이 포함될 수 있습니다:스토리북에 대한 개괄적인 설명 (Overview)
컴포넌트 사용 방법 (Getting Started)
어떻게 라이브러리/디자인 시스템에 기여할 수 있는지 (Contribution)
어떤 디자인 토큰을 사용하는지 (Design Token)
어떻게 라이브러리/디자인 시스템이 변해왔는지 (Changelog)
수 많은 컴포넌트들을 어떻게 그룹화하고, 정렬하는지도 중요합니다.
다음의 방법들을 고려할 수 있습니다:아토믹 디자인 방법론에 따라서
컴포넌트가 갖는 앱 내의 기능/역할에 따라서
컴포넌트의 지원 상태에 따라서
컴포넌트의 유즈 케이스를 다양한 스토리를 통해 보여줄 수 있습니다.
다음의 분류를 참고해서, 일관성 있는 스토리북을 구성해보세요:오버뷰 스토리:
컴포넌트가 무엇을 하고, 언제 사용되는지 보여주는 스토리
플레이그라운드 스토리:
사용자가 코드를 만지지 않고, 브라우저 내에서 간단한 프로토타이핑을 할 수 있는 스토리
피처 스토리:
컴포넌트가 어떤 상태와 변형을 갖는지 보여주는 스토리
레시피 스토리:
실제 사용 시나리오에서는 어떻게 다른 컴포넌트들과 함께 쓰이는지 보여주는 스토리
다른 팀은 어떻게 스토리북을 구성하고 있는지를 참고하고 배우면 더 좋은 스토리북을 작성하는데 도움이 됩니다.