StoryBook은 필수일까?

오늘 프론트 개발자들끼리 이야기를 나누다 "StoryBook이 필요할까?"라는 주제가 나왔다.

👨🏻‍💻 : 스토리북을 쓰고 싶어요. 현업에서도 많이 쓰나요?
🧑‍💻 : 스토리북을 왜 도입해야하는지 먼저 생각해봐야해요.

나는 그동안 사이드프로젝트에서는 StoryBook을 꽤나 많이 사용했기 때문에 이런 주제에 대해 별 고민을 해본 적이 없었다.

그래서 이번 기회에 스토리북에 대해 톺아보려고 한다!

스토리북이란?

스토리북 공식문서에서는 다음과 같이 설명하고 있다.

스토리북(Storybook)은 개발 모드에서 앱과 함께 실행됩니다.
스토리북은 비즈니스 로직과 맥락(context)으로부터 분리된 UI 컴포넌트를 만들 수 있도록 도와줍니다. 
현재 문서는 리액트(React)를 위해 작성되었습니다. 
그 밖의 React Native, Vue, Angular Svelte 및 Ember에 대한 다른 문서도 존재합니다.

즉, 스토리북은 UI 컴포넌트를 만들 수 있도록 도와준다는 것입니다. 그럼 다른 목적은 없을까요?

스토리북은 스토리를 추적한다.

• 스토리북은 앱 비즈니스 로직과 컨텍스트 간섭없이 컴포넌트를 렌더링할 수 있는 iframe을 제공한다. 이를 통해서 컴포넌트에만 집중할 수 있다.

UI를 문서화할 수 있다.

• 스토리는 모든 컴포넌트와 다양한 상태를 인덱싱하여 팀이 기존 UI 패턴을 쉽게 찾고 재사용할 수 있다.
  -> 온보딩에도 좋다.

디자인 시스템을 정립할 수 있다.

• 스토리북 디자인 시스템을 통해 디자인 시스템을 정립할 수 있다.

이렇게 좋은데 필수여야하는거 아닌가?

그동안 사이드프로젝트를 하며 원활한 협업을 위해 스토리북을 도입하였는데 오늘 현업에 오래 계신 많은 개발자분들과 이야기하며 많은 걸 생각해보았다.

👨🏻‍💻 스토리북을 왜 도입하고 싶은지가 중요해! 문서화를 원한다면 주석으로도 할 수 있고, 굳이 스토리북이 아니어도 돼. 또 고도화가 잘 되어있지않다면 굳이 현업에서 스토리북을 쓸 이유가 없지! 그러나 공부하는 용도와 경험으로는 매우 좋아🙂

요약

1. 스토리북을 왜 도입해야하는지 생각해보자
2. 꽤 많은 공수가 들어가는 일임에도 불구하고 과연 써야하는지 생각해보자. 만약 다른 방법으로 해결할 수 있다면 해결해보자.
3. 스토리북을 쓴다면 고도화를 잘 해보자.

참고자료

무신사의 스토리북

배민의 스토리북