스토리 북에 대해서 알아보자 !

프론트엔드 개발을 하다보면, UI 컴포넌트의 변화를 한 눈에 보고 싶을 때가 있다. 그럴 때 사용하기 좋은 것이 바로 스토리 북이다 !

하지만, 정확히 이게 무엇인지 왜 사용하는 것이 좋은 지는 잘 몰라서 이번 기회에 알아보려고 한다.

 

주로 공식 문서의 내용을 참조해서 내용을 정리해보도록 하겠다 !

스토리북 공식 문서 : https://storybook.js.org/docs

 

수제 썸네일입니다 욕하디 말아요ㅠ

스토리 북(Storybook)이 뭐야?

공식 문서의 소개글을 인용해보면,

스토리북은 UI 구성 요소와 페이지를 독립적으로 구축하기 위한 프론트엔드 도구입니다.
전체 앱을 실행할 필요없이 접근하기 어려운 상태와 엣지 케이스를 개발하고 공유할 수 있도록 도와줍니다.

 

이 말을 설명해보면, 애플리케이션 속에서 비즈니스 로직과 분리된 상태에서 UI를 독립적으로 테스트하고 문서화할 수 있게 해주는 도구라는 것이다.

 

 

그렇다면 스토리 북을 쓰면 뭐가 좋을까? (이점)

공식 문서에서 이야기하는 Benefit : https://storybook.js.org/docs/get-started/why-storybook#benefits

 

1.  더 내구성 있는 UI 개발

컴포넌트와 페이지를 분리하고, 이를 스토리로 사용해 다양한 사용 사례를 추적하고 확인할 수 있다. UI의 접근하기 어려운 예외 사항을 검증할 수 있다. 컴포넌트가 필요한 모든 요소 (컨텍스트, API 요청, 디바이스 기능 등)을 addOn을 통해 모킹(mocking)할 수 있다.

** addOn이란? 스토리 북에 추가 기능을 더해주는 확장 프로그램이다. 이를 활용하면 스토리 북에서 기본적으로 제공하는 기능 이외에도 다양한 작업을 할 수 있다.

 

2. 적은 리소스로 더 안정적인 UI 테스트 가능

스토리는 UI 상태를 추적하는 실용적이고 실현 가능한 방법이다. 개발 중에 UI를 스팟 테스트하는데 사용할 수 있다.

** 스팟 테스트란? 전체 테스트를 수행하지 않고, 특정 기능이나 컴포넌트의 일부 상태만을 빠르게 확인하는 테스트 방법이다.

스토리 북은 컴포넌트, 접근성, 비주얼 테스트를 위한 자동화 워크 플로우를 제공한다. 또는 스토리를 JavaScript 테스트 도구에 가져와 테스트 케이스로 사용할 수도 있다.

 

3. 팀이 재사용할 수 있는 UI 문서화

스토리 북은 UI에 대한 단일 정보 출처가 된다.. 모든 컴포넌트와 다양한 상태가 스토리로 인덱싱되어 있어 팀이 기존 UI패턴을 쉽게 찾아 재사용할 수 있다. 스토리 북은 스토리로부터 자동으로 문서를 생성한다.

=> 문서를 개발자가 수동으로 업데이트하는 것보다 신뢰도가 높을 것 같네요 ! 자동화 최고 !

 

4. 실제 작동하는 UI 공유

스토리는 UI의 실제 동작을 보여주어 현재 프로덕션에 있는 것을 팀이 명확히 인식할 수 있도록 돕는다. 스토리북을 게시해 팀원의 승인을 받을 수 이으며, 이를 위키, Markdown, Figma에 임베드 해 협업을 간소화할 수 있다.

 

 

5. UI 워크플로 자동화

스토리 북은 지속적 통합(CI) 워크 플로와 호환된다. UI 테스트를 자동화하고, 팀원의 구현 사항을 검토하며, 이해관계자들로부터 승인을 받기 위해 CI 단계를 추가할 수 있다.

 

나의 경우에는 테스트를 위해 도입하는 목적이 강할 것 같아서 이 부분을 추가로 알아봤다.

CI/CD 파이프라인에 스토리 북을 포함하면, 코드가 변경될 때마다 UI 테스트를 자동으로 실행할 수 있다고 한다. 그리고 앞서 알아봤던 비주얼 테스팅 애드 온을 사용하면 변경된 UI의 스크린 샷을 자동으로 비교해 변경사항을 감지할 수 있다고 한다 !! 이를 통하면 시각적 회귀를 방지하는데 도움이 될 것 같다. (돌고 돌아 그대로....)

-> 이걸 보고 Chromatic과 같은 도구와 연동하면 좋을 것 같다고 생각했는데, 실제로도 그렇게 조합해서 스크린샷 테스트를 수행한다고 한다. 

 

 

 

나의 생각

단순히 쓰면 좋다더라~ 말고, 어떤 기능들을 제공하는지 어떤 목적으로 사용하는지에 대해서 알게 되니 꾸준히 리팩토링하고 있는 프로젝트에서도 도입하면 좋겠다는 생각이 들었다.

 

이렇게 하나의 도구에 대해서 알아보았으니, 함께 개발하는 동료 분들에게도 확실한 근거와 함께 도입을 주장해볼 수 있을 것 같다. 이 참에 디자인 시스템을 구축하는데 활용해봐도 되지 않을까? 하는 생각도 든다.

 

앞으로 테스트를 위한 작업을 하나하나씩 추가해보고 싶었는데, 그 시작점으로 스토리 북을 도입할 것이다 !!