storybookjs/storybook

어떤 프로젝트인가요?

핵심 기능

• 01React, Vue, Angular, Svelte 및 기타 프레임워크에서 컴포넌트를 격리된 환경으로 렌더링합니다.
• 02접근성 테스트, 뷰포트 전환, 레이아웃 검사를 위한 애드온을 제공합니다.
• 03스토리에서 컴포넌트 문서를 생성합니다.
• 04스토리 내 인터랙션 테스트를 지원합니다.
• 05커스텀 애드온을 위한 플러그인 API로 확장할 수 있습니다.

활용 사례

• 전체 애플리케이션을 실행하지 않고 디자인 시스템 컴포넌트를 개발하고 검토합니다.
• 디자이너와 개발자를 위해 UI 컴포넌트의 변형을 문서화합니다.
• 로딩, 오류, 빈 화면 등 컴포넌트 상태를 테스트합니다.
• 개발 중 컴포넌트의 접근성을 확인합니다.

빠른 시작

1. 1

   README에 설치 명령어가 없으므로 Storybook 웹사이트를 방문해 시작하세요

2. 2

   storybook.new를 사용해 StackBlitz에서 예제 프로젝트를 만드세요

토픽

자주 묻는 질문

storybook은(는) 무엇인가요?

React, Vue, Angular, Svelte 등을 지원하며 UI 컴포넌트를 격리된 환경에서 만들고 문서화하고 테스트하는 프런트엔드 워크숍입니다. Storybook은 개발자가 메인 애플리케이션 밖에서 UI 컴포넌트와 페이지를 만들 수 있는 프런트엔드 워크숍입니다. 각 컴포넌트는 샌드박스 뷰에서 독립적으로 렌더링되므로, 전체 앱을 실행하거나 직접 특정 상태를 만드는 과정 없이 개발하고 검토하고 문서화할 수 있습니다.

storybook은(는) 무료로 사용할 수 있나요? 라이선스는 무엇인가요?

storybook은(는) MIT 라이선스의 오픈소스입니다. 상업용 제품에 사용하기 전에 라이선스 조건을 확인하세요.

storybook은(는) 아직 유지보수되고 있나요?

활발히 유지보수 중. storybook의 마지막 커밋은 2026년 10월 21일입니다.

storybook은(는) 어디에 사용할 수 있나요?

전체 애플리케이션을 실행하지 않고 디자인 시스템 컴포넌트를 개발하고 검토합니다. 디자이너와 개발자를 위해 UI 컴포넌트의 변형을 문서화합니다. 로딩, 오류, 빈 화면 등 컴포넌트 상태를 테스트합니다. 개발 중 컴포넌트의 접근성을 확인합니다.

storybook는 어떻게 설치하나요?

README에 설치 명령어가 없으므로 Storybook 웹사이트를 방문해 시작하세요 storybook.new를 사용해 StackBlitz에서 예제 프로젝트를 만드세요

storybook은(는) 어디서 받을 수 있나요?

소스 코드와 설치 방법은 GitHub에 있습니다: https://github.com/storybookjs/storybook