Storybook
스토리북
소개
Storybook은 UI 컴포넌트와 페이지를 격리된 환경에서 빌드·문서화·테스트하는 오픈소스 프런트엔드 워크숍 도구다. React·Vue·Angular·Svelte·Web Components 등 주요 프레임워크를 공식 지원하며 인터랙션·접근성·시각 회귀 테스트와 자동 문서 생성 기능을 갖춰 디자인 시스템 운영에 사실상 표준으로 자리잡았다. 도구 자체는 무료 오픈소스이고, 같은 메인테이너가 운영하는 Chromatic으로 클라우드 기반 시각 회귀 테스트와 리뷰 워크플로우를 유료 확장할 수 있다.
장점
- •오픈소스·무료로 셀프 호스팅 가능하고 라이선스 부담이 없음
- •React·Vue·Angular·Svelte 등 주요 프런트엔드 프레임워크를 공식 지원해 도구 종속이 적음
- •스토리 단위로 인터랙션·접근성·시각 회귀 테스트와 문서 생성을 한 번에 처리
- •월 7,550만 다운로드·9만 GitHub 스타급 생태계로 애드온·튜토리얼·한국어 자료가 풍부
단점
- •공식 사이트와 문서가 영어만 제공되어 비영어권 입문자에게 진입 장벽이 있음
- •초기 설정·스토리 작성 부담이 있어 소규모 프로젝트에는 과한 도구로 느껴질 수 있음
- •본격 시각 회귀 테스트·리뷰 워크플로우는 결국 Chromatic 같은 유료 부가 서비스 비용이 따라옴
핵심 기능
컴포넌트 격리 개발
UI 컴포넌트를 앱 컨텍스트와 분리해 다양한 상태(state)별로 스토리로 작성·미리보기한다.
주요 프레임워크 공식 지원
Next.js·React·Vue·Angular·Svelte·SvelteKit·Web Components·Preact·React Native Web 등을 공식 프레임워크로 제공한다.
자동 문서 생성
스토리에서 UI 사용 가이드·디자인 시스템 사이트용 문서를 자동으로 생성한다.
인터랙션·접근성·시각 테스트
스토리 단위로 인터랙션, 접근성, 시각 회귀, 스냅샷 테스트를 수행한다.
애드온 생태계
방대한 애드온 생태계로 기능을 확장하고 자체 애드온과 프리셋을 작성할 수 있다.
오픈소스·대규모 채택
오픈소스 무료 도구로 월 7,550만 다운로드, GitHub 스타 9만 개, 컨트리뷰터 2,200명 이상을 기록 중이다.
공식 사이트 2026-06-23 검증
요금제
2026-06-23 기준
Storybook (오픈소스)
Free
- 오픈소스 무료
- 프레임워크·애드온 전체 사용
- 셀프 호스팅
Chromatic Free (시각 테스트 부가 서비스)
$0/mo
- 월 5,000 스냅샷
- Chrome 테스트
- 프로젝트·사용자 무제한
Chromatic Starter
$179/mo
- 월 35,000 스냅샷
- Safari·Firefox·Edge 테스트
- 추가 스냅샷 $0.008
Chromatic Pro
$399/mo
- 월 85,000 스냅샷
- 커스텀 도메인
- Starter 기능 포함
Chromatic Enterprise
Custom
(문의)
- 무제한 접근성 테스트
- SSO·커스텀 Git 통합
- SLA·전담 솔루션 엔지니어
사용자 리뷰
불러오는 중...