Storybook..어디서 얼핏 들어봐서 이름정도는 알고있다.
하지만 왜 쓰는지, 정확히 이게 뭔지, 아직 사용해본 적이 없어서 아무것도 모른다 🙃
이번 프로젝트에서 웹 접근성으로 인해 KRDS에서 제공하는 컴포넌트 디자인을 따라야하는데,
팀원분이 KRDS에서 제공하는 react storybook 를 찾아와 주셨다!
하지만 아직은 Storybook이 뭔지도 모르기때문에,
지금 Storybook이 뭔지, 왜 사용해야하는지 알아보고자 한다.
📚 Storybook, 정체가 뭘까
공식 홈페이지에서는 스토리북을 다음과 같이 설명하고 있다
.. 말이 어려워서 그런가.. 잘 모르겠다.
그래서 블로그도 찾아보고, 지피티에게 물어보기도 했다.
그래서 알게된 Storybook!
📌 Storybook 이란?
Storybook은 UI를 테스트 하는 도구라고 한다.
그냥 UI는 아니고 컴포넌트 단위의 UI를 테스트하며, UI 컴포넌트를 독립적으로 개발할 수 있게 해준다.
🤔 왜 써야할까?
뭔지는 알겠는데, 없어도 개발자가 스스로 컴포넌트 단위로 개발하면 되는거 아닐까?
1. 컴포넌트를 따로 개발하고 볼 수 있다.
- 물론, 이건 storybook을 사용하지 않아도 그냥 따로 만들면 된다.
- 하지만, storybook을 사용해서 개발하면 바로바로 확인이 가능하다는 점에서 좀 더 편리하다고 볼 수 있다.
- 확인이 빠르면 빠른 테스트와 반복 개발이 가능해진다.
2. 디자이너/ 기획자랑 공유하기 좋다.
- 개발 중인 화면을 브라우저에서 쉽게 보여줄 수 있어 빠른 소통이 가능하다.
3. 컴포넌트 상태(Story)를 다양하게 테스트 가능
- 버튼이 눌렸을 때, 비활성화되었을 때 등 여러가지 상태를 미리 설정해서 확인이 가능하다.
- 예외 상황이나 edge case 테스트에도 유용하다고 한다.
4. 컴포넌트 문서화 자동 생성
- 컴포넌트의 prop이나 설명, 사용 예제를 모두 자동으로 문서화 해준다고 한다.
- 그럼 디자이너나 다른 개발자들도 해당 컴포넌트를 쉽게 이해할 수 있다.
5. 재사용성 및 유지보수성 향상
- 잘 문서화된 컴포넌트를 여러 프로젝트나 화면에서 쉽게 재사용이 가능하다.
- 또한, 코드 수정 시에 기존 상태들을 기준으로 하여 기능이 깨지지 않았는지 쉽게 확인이 가능하다.
📕story?
위에서 설명할때, 상태를 story라고 표현한 부분들이 몇 있다.
story가 뭘까? 왜 스토리라고 표현할까?
이것도 공식 홈페이지에 나와있기는 하나.. 모르겠어서 더 찾아봤다.
Storybook 은 "이야기 모음집" 이라는 의미를 담고있다.
이 툴은 각 UI 컴포넌트의 다양한 모습(즉, 상태)을 하나하나의 이야기(Story)로 표현한다.
버튼 컴포넌트를 예로 들어보자.
버튼 하나를 만든다고 해도, 다양한 형태가 존재할 것이다.
- 기본 버튼
- 비활성화된 버튼
- 로딩 중인 버튼
=> 이 각각이 "버튼이라는 컴포넌트의 다양한 이야기들" 인 것이다.
🎬 비유로 이해해보자
용어 의미 비유 Component 버튼, 카드, 입력창 같은 UI 조각 배우 Story 컴포넌트가 보여주는 특정 상태 배우가 등장하는 장면 하나 Storybook 모든 컴포넌트의 여러 Story를 모은 공간 다양한 장면이 들어있는 드라마 대본집
즉, Story는 컴포넌트가 어떤 상황에서 어떻게 보이고 동작하는지에 대한 하나의 예시라고 생각하면 될 것 같다.
😶🌫️마무리하며...
Storybook이 뭔지 비유를 통해 이해해보니 개인적으로 좀 잘 와닿았던 것 같다!
이번글을 통해 이해한 내용을 바탕으로 krds에서 제공하는 storybook을 참고하고 이해할 수 있을 것 같다!
