Storybook 1

UI 컴포넌트 개발 시 겪게되는 문제들..

여러 명의 개발자가 한 서비스를 개발하다보면 각 개발자가 어떤 컴포넌트를 만들고 있는지 정확히 알기가 쉽지 않다.

Storybook이란?

Storybook이란 UI 컴포넌트 개발 도구다.

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

사용하는 이유

Storybook을 사용하면 여러 장점이 있다.

1. 작업 효율 증가

Storybook을 통해 각 디자인을 등록하면 개발자들 간에 컴포넌트 디자인을 쉽게 확인 가능하다.

직접 코드를 어플리케이션에서 실행하지 않더라도 어떤 디자인인지 쉽게 확인할 수 있다.

이미 있는 컴포넌트를 다시 개발할 위험성도 크게 줄어들게 된다.

1. 원활한 소통

개발 전체를 하지 않아도 일부 컴포넌트 디자인 개발 후 바로 디자이너, 기획자에게 전달하면 된다.

디자이너 및 개발자도 눈으로 직접 확인할 수 있기 때문에 빠르게 피드백이 가능하다.

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

UI 변경은 에러가 아니기 때문에 쉽게 파악하지 못할 수도 있다.

Chromatic에 있는 ‘시각적 회귀 테스트’ 를 활용하면 실제 코드를 배포하기 전 의도치 않은 UI 변경은 없는지 정확히 판단이 가능하다.

1. 디자인 시스템으로 확용 가능

디자인 시스템이란 한 서비스의 목적 및 일관된 이미지를 위해 회사에서 정립한 일관된 디자인 체계이다.

디자인 시스템이 없는 회사라면 디자이너가 바뀔 때마다 조금씩 디자인이 바뀔 수 있는 것이다.

하지만 Storybook은 디자인을 바로 확인할 수 있기 때문에 일관된 디자인으로 개발할 수 있도록 도와준다.

Storybook 살펴보기

Sidebar 영역

해당 부분에서 어떤 컴포넌트가 있는지 확인할 수 있다.

그리고 토글을 열어보면 아래에서 설명할 Story들이 있다.

Story 영역

각 스토리를 살펴보면 렌더링된 결과들을 볼 수 있다.

Canvas 영역

실제로 컴포넌트가 렌더링되는 부분을 Canvas라고 한다.

이 부분을 보면 실제로 어떻게 렌더링되는지 확인할 수 있다.

Toolbar영역

Toolbar는 스토리북 사이트에서 상단에 있는 부분이다.

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

Addon 영역

Addon은 하단에 있는 부분을 말한다.

이는 플러그인 혹은 확장 프로그램과 같이 추가적인 기능을 사용할 수 있는 영역이다.

기본적인 Controls, Actions, Interactions addon이 있는데

그 외에도 추가적으로 설치 및 세팅하여 더 많은 기능을 사용할수도 있다.