StoryBook으로 디자인 통일성 유지하기 (1)

이미 많이 지난 프로젝트이지만 https://github.com/SejongPeer/peer_v2 의 리팩토링을 마저하고자 합니다.

 

그 중 첫 번째 단계는 바로 StoryBook 도입인데요, StoryBook은 왜 도입해야 하는지부터 알아볼까요?

 

1. 컴포넌트 단위 개발이 용이하다
   1. StoryBook은 각각의 컴포넌트를 독립적으로 개발하고 테스트할 수 있도록 도와줍니다.
   2. 실제 페이지가 완성되지 않아도 개별 컴포넌트 단위에서 개발이 가능합니다. 이는 디자인 시스템 구축에 유리합니다.
2. 컴포넌트 문서화 자동화
   1. Storybook은 UI의 상태 (Props, Variants)를 자동으로 문서화해줍니다.
   2. 팀 내에서 디자이너, 개발자, QA, PM이 컴포넌트 가이드를 쉽게 확인 가능

이외에도 더 많은 장점들이 있지만, 제가 도입하려고 하는 이유는 위 두 가지 이유가 가장 큰 것 같습니다.

프로젝트를 진행하면서 팀원들이 각각 컴포넌트를 제작하게 되면 해당 페이지를 들어가서 매번 확인해야 하는 불편함과 디자인이 통일되지 않아 매번 QA를 진행하며 수정해야 했기 때문입니다.

 

그럼 본격적으로 Storybook을 도입해 보겠습니다.

 

Storybook 설치

npx storybook@latest init

 

먼저 React 프로젝트에 Storybook을 설치합니다.

설치 후에 storybook 폴더와 .storybook/main.js 설정 파일이 생성됩니다.

 

위 명령어를 터미널에 입력 후 아래와 같은 문구가 뜨는데요.

What do you want to use Storybook for? ›  
Instructions:
    ↑/↓: Highlight option
    ←/→/[space]: Toggle selection
    a: Toggle all
    enter/return: Complete answer
◉   Documentation: MDX, auto-generated component docs
◉   Testing: Fast browser-based component tests, watch mode

 

Test 코드의 경우 Jest를 도입하기 위해 저는 Documantation을 선택했습니다.

Documantation은 컴포넌트 문서화를 조금 더 중점에 두고, Testing의 경우 UI 컴포넌트 테스트에 조금 더 중점을 둔다고 합니다.

 

하지만 저의 경우 npm 버전이 20 버전이라 Storybook과 충돌이 나서 yarn으로 변경하여 설치를 해줬습니다.

사실 yarn을 이전부터 사용해보고 싶기도 했고, npm을 18 버전으로 낮추면 된다고 하지만 nvm 설치에서 또 막혀가지고 yarn으로 변경하게 되었습니다.

 

Yarn으로 storybook 설치하기

yarn add -D @storybook/react @storybook/addon-essentials @storybook/theming

 

위 명령어를 실행 후 아래와 같이 package.json 파일에 실행 스크립트를 추가해 줍니다.

실행 스크립트 추가

"scripts": {
  "storybook": "storybook dev -p 6006",
  "build-storybook": "storybook build"
}

 

이제 프로젝트를 실행하면 되는데요 명령어는 다음과 같습니다.

Storybook 실행 명령어

yarn storybook

 

마지막으로 localhost 주소로 접근하게 되면 Storybook에 접근할 수 있는데요, 저의 경우 localhost6006으로 설정했기 때문에 localhost:6006으로 접속해 주면 Storybook을 확인할 수 있습니다!

 

다음 글에서는 제가 만든 컴포넌트를 Storybook에 반영하는 과정을 담는 글을 작성해 보겠습니다.