카테고리 없음

스토리북(Storybook)

학습하는 청년 2024. 7. 24. 00:27

최종 수정일 : 2024-07-24

스토리북(Storybook)

프론트엔드 개발자로서 컴포넌트를 개발하다보면 여러 문제가 발생한다.

 

1) 중복 컨포넌트 개발

여러 명의 개발자가 한 서비스를 개발하다보면 각 개발자가 어떤 컴포넌트를 만들고 있는지 실시간으로 알기 쉽지 않다. 그로 인해, 비슷한 컴포넌트가 이미 존재함에도 중복되는 컴포넌트를 만들 가능성이 생긴다.

 

2) 디자이너와 기획자와 소통할 때

디자이너 및 기획자가 요구한 디자인에 정확한 사이즈, 간격, 색상이 정해지지 않은 경우가 있는데, 이런 경우 개발자가 주관적인 느김으로 컴포넌트를 일단 만들고 피드백을 받게 된다. 하지만 컴포넌트 하나를 만드는 과정에서 여러 번의 피드백이 오갈 수 있는데, 이 과정은 시간이 걸릴 수밖에 없다. 개발자는 UI 부분 이외에 개발해야 할 부분이 많고, 디자이너 및 기획자도 다른 인해 즉각적인 피드백이 어려울 수도 있다.

 

또한, 컴포넌트를 확인하려면 다른 코드까지 한 번에 실행해야 하는 것도 문제이다. 간단히 UI만 확인하고 싶었을 뿐인데, 다른 코드를 실행해야 하며 도중에 에러가 발생했다면 에러를 찾고 해결해야만 UI를 확인할 수 있기에 상당히 번거롭다.

 

3) 의도치 않은 UI 변경

에러가 나지 않는 이상 약간의 UI 변경은 개발자가 눈치채기가 쉽지 않다. 이로 인해, 수정이 되지 않은 채 배포되는 경우가 생길 수 있다.

 

이러한 문제를 해결하는 데 Storybook이라는 도구가 활용된다.

Storybook이란?

UI 컴포넌트 개발 도구이다. 데이터와는 상관없이 순수하게 UI 컴포넌트 디자인을 쉽게 확인, 수정 및 테스트를 할 수 있는 프로그램이다.

 

각 컴포넌트에는 Story라는 단위가 있는데, 예를 들어 버튼 컴포넌트를 만든다고 생각해보자. 그러면, 큰 사이즈 버튼, 작은 사이즈 버턴, 활성화된 버튼, 비활성화된 버튼 등 여러 종류가 생긴다. 즉, 컴포넌트의 각각의 버전을 Story라고 생각하면 된다. 이런 Story들을 모아서 관리하는 것이 바로 Storybook이다.

 

사용하는 이유

1. 작업 효율 증가

  • 개발자들 간에 컴포넌트 디자인을 쉽게 확인 가능하다. 또한 중복으로 컴포넌트를 개발할 위험성도 크게 줄어든다.

 

2. 원활한 소통

  • 디자이너 및 개발자도 눈으로 직접 확인할 수 있기 때문에 빠르게 피드백이 가능하다. UI 컴포넌트만 바로 보여줄 수 있어 소통이 빨라진다.

 

3. 의도치 않은 UI 변경 확인

  • Chromatic에 있는 '시각적 회귀 테스트'를 활용하면 실제 코드를 배포하기 전 의도치 않은 UI 변경은 없는지 정확히 판단이 가능하다.
  • Chromatic은 Storybook으로 개발한 컴포넌트의 변경점을 쉽게 확인할 수 있도록 해주는 프로그램이다.

 

4. 디자인 시스템으로 활용 가능

  • 디자인 시스템이란 한 서비스의 목적 및 일관된 이미지를 위해 회사에서 정립한 일관된 디자인 체계이다. Storybook은 디자인을 바로 확인할 수 있기 때문에 일관된 디자인으로 개발할 수 있도록 도와준다.

Storybook 살펴보기

Sidebar 영역

  • 좌측에 있는 사이드바에서는 어떤 컴포넌트가 있는지 확인할 수 있다.

 

Story 영역

  • 각 컴포넌트에 다른 Story가 생긴다. ex) Primary, Secondary, Large, Small 등

 

Canvas 영역

  • Story들을 누르면 실제로 렌더링된 컴포넌트를 확인할 수 있다. 실제로 컴포넌트가 렌더링되는 부분을 Canvas라고 한다.

 

Toolbar 영역

  • 스토리북 사이트 상당에 있다. 이 부분은 스토리가 상황에 따라 어떻게 렌더링되는지, 혹은 좌우 간격은 어떻게 된느지 등을 확인 및 조절할 수 있게 해준다.

 

Addon 영역

  • 하단에 위치해 있으며, 플러그인 혹은 확장 프로그램과 같이 추가적인 기능을 사용할 수 있는 영역이다. 추가적인 addon을 직접 설치 및 세팅을 하여 더 많은 기능을 사용할 수도 있다.
  • 예를 들어, Controls addon 영역에서는 Primary임에도 backgroundColor, label, size 등을 직접 조절하여 어떻게 변하는지 확인할 수 있다.

Storybook 설치하기

npx storybook@latest init
  • eslint 관련 설치 질문이 나오면 y를 눌러준다. (나오지 않으면 무시)
  • 설치가 와나료되면 npm run stroybook을 입력하라고 나올 때, 명령어를 입력해주면 된다.
npm run storybook
  • 위 명령어를 입력하면 웹사이트가 열린다.
  • package.json를 살펴보면, 해당 명령어는 6006번 포트를 사용하기 때문에 주소창에 localhost:6006으로 접속하면 스토리북 웹사이트에 접속할 수 있다. 포트가 다르기 때문에 기존의 웹사이트에 영향을 미치지 않고 열 수 있다.

Storybook 폴더 구성

  • 설치 후에는 루트 위치에 기본적인 .storybook 폴더가 생성된다.
  • <컴포넌트명>.stories.js라는 파일에 작성한 것들은 스토리북 웹사이트에 반영된다.
저작자표시 비영리 변경금지