UI 컴포넌트 개발 시 겪게되는 문제들..
여러 명의 개발자가 한 서비스를 개발하다보면 각 개발자가 어떤 컴포넌트를 만들고 있는지 정확히 알기가 쉽지 않다.
Storybook이란?
Storybook이란 UI 컴포넌트 개발 도구다.
쉽게 말하면 데이터와는 상관없이 순수하게 UI 컴포넌트 디자인을 쉽게 확인, 수정 및 테스트를 할 수 있는 프로그램이다.
사용하는 이유
Storybook을 사용하면 여러 장점이 있다.
- 작업 효율 증가
Storybook을 통해 각 디자인을 등록하면 개발자들 간에 컴포넌트 디자인을 쉽게 확인 가능하다.
직접 코드를 어플리케이션에서 실행하지 않더라도 어떤 디자인인지 쉽게 확인할 수 있다.
이미 있는 컴포넌트를 다시 개발할 위험성도 크게 줄어들게 된다.
- 원활한 소통
개발 전체를 하지 않아도 일부 컴포넌트 디자인 개발 후 바로 디자이너, 기획자에게 전달하면 된다.
디자이너 및 개발자도 눈으로 직접 확인할 수 있기 때문에 빠르게 피드백이 가능하다.
- 의도치 않은 UI 변경 확인
UI 변경은 에러가 아니기 때문에 쉽게 파악하지 못할 수도 있다.
Chromatic에 있는 ‘시각적 회귀 테스트’ 를 활용하면 실제 코드를 배포하기 전 의도치 않은 UI 변경은 없는지 정확히 판단이 가능하다.
- 디자인 시스템으로 확용 가능
디자인 시스템이란 한 서비스의 목적 및 일관된 이미지를 위해 회사에서 정립한 일관된 디자인 체계이다.
디자인 시스템이 없는 회사라면 디자이너가 바뀔 때마다 조금씩 디자인이 바뀔 수 있는 것이다.
하지만 Storybook은 디자인을 바로 확인할 수 있기 때문에 일관된 디자인으로 개발할 수 있도록 도와준다.
Storybook 살펴보기
Sidebar 영역
해당 부분에서 어떤 컴포넌트가 있는지 확인할 수 있다.
그리고 토글을 열어보면 아래에서 설명할 Story들이 있다.
Story 영역
각 스토리를 살펴보면 렌더링된 결과들을 볼 수 있다.
Canvas 영역
실제로 컴포넌트가 렌더링되는 부분을 Canvas라고 한다.
이 부분을 보면 실제로 어떻게 렌더링되는지 확인할 수 있다.
Toolbar영역
Toolbar는 스토리북 사이트에서 상단에 있는 부분이다.
이 부분은 스토리가 상황에 따라 어떻게 렌더링되는지, 혹은 좌우 간격은 어떻게 되는지 등을 확인 및 조절할 수 있게 해준다.
Addon 영역
Addon은 하단에 있는 부분을 말한다.
이는 플러그인 혹은 확장 프로그램과 같이 추가적인 기능을 사용할 수 있는 영역이다.
기본적인 Controls, Actions, Interactions addon이 있는데
그 외에도 추가적으로 설치 및 세팅하여 더 많은 기능을 사용할수도 있다.
'이것저것' 카테고리의 다른 글
| Mixed Content (Next.js) (0) | 2024.04.19 |
|---|---|
| js의 console (0) | 2024.04.14 |
| axios (0) | 2024.04.13 |
| Zustand 읽어보기 (0) | 2024.03.21 |
| OAuth 2.0 (2) | 2024.03.08 |