Storybook, 2016년 컴포넌트 카탈로그 표준

한 줄로

UI 컴포넌트를 격리된 환경에서 개발, 테스트, 문서화하는 도구입니다. 2016년 등장해 모든 디자인 시스템의 핵심 인프라가 됐습니다.

어디서 왔나

2016년, 영국 개발자 Arunoda Susiripala가 React용 컴포넌트 개발 도구를 만들었습니다. 처음 이름은 React Storybook. 후에 Vue, Angular, Svelte 등 모든 프레임워크를 지원하면서 Storybook으로 개명했습니다.

핵심 아이디어는 각 UI 컴포넌트를 앱 외부의 별도 환경에서 개발한다는 것입니다. 버튼을 만들 때 전체 앱을 띄울 필요 없이, 그 버튼만 단독으로 보여주는 페이지입니다.

// Button.stories.tsx
export const Primary = { args: { label: 'Click me', variant: 'primary' } };
export const Disabled = { args: { label: 'Disabled', disabled: true } };

각 "story"는 컴포넌트의 한 상태입니다. Storybook이 자동으로 이 모든 stories를 카탈로그로 만들어줍니다.

기능

시각적 카탈로그: 모든 컴포넌트와 그 변형(variant)을 한 페이지에.

인터랙티브 props: 슬라이더로 prop 값을 실시간 조정.

자동 문서: JSDoc 주석에서 자동 API 문서.

시각적 회귀 테스트: Chromatic 통합. 한 줄 바뀌면 픽셀 단위 비교.

a11y 검증: 접근성 점검 자동.

누가 쓰나

Airbnb: 대규모 React 컴포넌트 라이브러리 관리.

GitHub: Primer 디자인 시스템.

IBM: Carbon Design System.

Microsoft: Fluent UI.

Twitter / X: 컴포넌트 문서.

거의 모든 대기업의 디자인 시스템이 Storybook 위에 만들어집니다.

1인 랩에서

Storybook의 학습 곡선이 약간 있지만, 컴포넌트가 30개 이상 쌓이면 도입 가치가 큽니다. 본인 디자인 시스템의 시각적 인덱스를 무료로 얻는 셈입니다.

대안입니다.

단순 카탈로그 페이지: HTML로 직접 만들기.

shadcn/ui: 이미 잘 정리된 외부 라이브러리 차용.

바이브 메이커가 챙길 한 가지

컴포넌트 라이브러리(@freeive/anti-card 같은)를 만든다면 Storybook은 거의 필수입니다. 개발자에게 보여줄 데모, 디자이너에게 보여줄 카탈로그, 본인에게 회귀 테스트가 한 번에 해결됩니다.

관련

Atomic design · Component library · Design tokens