Component-Driven Development(CDD)
기획자로부터 하나의 페이지 기획이 도착했고, 디자이너와 개발자가 협력하여 디자인과 개발이 진행되었다.
페이지가 모두 완성되었는데, 다른 페이지에 적용되는 버튼에 대한 추가적인 기획안이 도착했다.
그런데 기획자가 버튼에 대한 기획을 이전에 요청했던 버튼과 똑같이 사용하도록 요청했다.
이럴 때 디자이너와 개발자는 이 부분을 모두 새로 만들어야 하는 걸까?
여러 프로젝트 혹은 여러 팀간에 간은 UI 컴포넌트를 공유한다면 이런 고민을 하지 않아도 된다.
디자인과 개발 단계에서부터 재사용할 수 있는 UI 컴포넌트를 미리 디자인하고 개발하면 이런 고민을 해결하 수 있다.
이 고민을 해결하기 위해 등장한 개발 방법이 바로 Component Driven Development(CDD)이다.
레고처럼 조립해 나갈 수 있는 부품 단위로 UI 컴포넌트를 만들어 나가는 개발을 진행할 수 있다.
컴포넌트 UI 개발을 위한 Storybook
Component Driven Development가 트렌드로 자리잡게 되면서 이를 지원하는 도구 중 하나인 Component Explorer(컴포넌트 탐색기)가 등장했다. Component Explorer에는 많은 UI 개발도구가 있는데 그 중 하나가 Storybook이다.
Storybook이란?
Storybook은 UI 개발 즉, Component Driven Development를 하기 위한 도구이다. 각각의 컴포넌트들을 따로 볼 수 있게 구성해주어 한 번에 하나의 컴포넌트에서 작업할 수 있다. 복잡한 개발스택을 시작하거나, 특정 데이터를 데이터베이스로 강제 이동하거나, 애플리케이션을 탐색할 필요 없이 전체 UI를 한눈에 보고 개발할 수 있다.
Storybook은 재사용성을 확대하기 위해 컴포넌트를 문서화하고, 자동으로 컴포넌트를 시각화하여 시뮬레이션할 수 있는 다양한 테스트 상태를 확인할 수 있다. 이를 통해 버그를 사전에 방지할 수 있도록 도와준다. 또한 테스트 및 개발 속도를 향상시키는 장점이 있으며, 애플리케이션 또한 의존성을 걱정하지 않고 빌드할 수 있다.
Storybook과 같은 UI 개발 도구를 왜 사용할까?
Storybook은 기본적으로 독립적인 개발환경에서 실행된다. 개발자는 애플리케이션의 다양한 상황에 구애받지 않고 UI 컴포넌트를 집중적으로 개발할 수 있다.
예를 들어 회사의 내부 개발자들을 위해 문서화(Documentation)를 하여 UI 라이브러리로써 사용하거나, 외부 공개용 디자인 시스템(Design System)을 개발하기 위한 기본 플랫폼으로 사용할 수 있다.
Storybook에서 지원하는 주요 기능은?
- UI 컴포넌트들 카탈로그화
- 컴포넌트 변화를 Stories로 저장
- 핫 모듈 재로딩과 같은 개발 툴 경험 제공
- 리액트를 포함한 다양한 뷰 레이어 지원
