1. 스토리북(Storybook)이 뭔데?
스토리북(Storybook)을 한 문장으로 설명한다면 "UI 컴포넌트 개발을 위한 도구"라고 볼 수 있습니다.
한 문장으로 설명하기는 했지만.. 이는 스토리북의 좁은 의미만을 담고 있죠. 좀 더 넓은 의미를 볼까요?
더 넓은 의미에서 보자면 스토리북은 UI 컴포넌트 문서화 (documentation) 뿐만 아니라 디자인 시스템 (Design System)을 개발하기 위한 도구로도 활용될 수 있습니다.
2. 스토리북(Storybook)이 왜 필요한데?
UI 컴포넌트들을 리액트 또는 뷰 등 기타 프론트 프레임워크에서 작성해 보신 분들은 컴포넌트 UI가 페이지에 내가 원하는 대로 렌더링이 잘 되는지 확인하기 위해 특정 페이지에서 컴포넌트를 넣고 만드신 경험이 있으실 겁니다.
일반적인 경우, 컴포넌트는 렌더링이 잘 되겠죠. 하지만 결제 후 취소 시, 나오는 페이지에서 나오는 컴포넌트의 UI를 확인하는 경우라면 어떻게 될까요?
(결제 -> 취소 -> 확인 -> 재작업 -> 결제 -> 취소 -> 확인 -> .... )
이렇게 컴포넌트가 존재하는 위치가 특정 환경이라면, UI를 확인하고 재작업하는데 매우 불편하게 될 수 있습니다. 하지만 스토리북(Storybook)을 사용하게 된다면, 이러한 상황이 있든 말든 고립된 환경에서 내가 작업한 컴포넌트를 바로 확인할 수 있다는 장점이 있죠.
고립된 환경은 쉽게 말해 위에 제가 예시로 든 상황에 신경쓰지 않고 UI 컴포넌트에만 신경 쓸 수 있는 환경이라고 생각하시면 됩니다.
"고립할 수 있다는건 알겠지만 그게 뭐? 특정 페이지 만들어서 컴포넌트 확인하면 될 것 같은데요." 라고 생각하시는 분들도 있으실 거라 생각합니다.
맞습니다. 단순히 고립된 환경을 만드는 것이 전부라면 스토리북(Storybook)을 쓰는 이점은 업겠지요. 앞으로 Storybook의 사용방법을 살펴보면서 보겠지만 미리 말씀드리자면, 스토리북(Storybook)은 UI의 여러 스토리(Story)들을 미리 만들어서 확인할 수 있답니다.
스토리(Story)는 단순히 UI 컴포넌트가 어떻게 사용되는 지 보여주는 하나의 예시라고 생각하시면 될 것 같습니다. 즉, UI 컴포넌트는 하나 이상의 스토리(Story)를 가지게 되는 것이지요.
다음에 포스팅할 내용은 React를 사용하는 프로젝트에서 스토리북의 기본 세팅 방법 그리고 스토리를 작성하는 방법에 대해 알아 보겠습니다.
