Storybook

Storybook은 UI 컴포넌트를 독립적으로 개발하고 문서화할 수 있는 도구이다. React, Vue, Angular를 포함한 다양한 프레임워크를 지원하며, 컴포넌트를 개별적으로 테스트하고 조합해볼 수 있는 환경을 제공한다. 이를 통해 개발자는 애플리케이션과 분리된 상태에서 UI를 구축하고 수정할 수 있어, 유지보수성과 재사용성을 높일 수 있다. 특히, 디자인 시스템을 관리하거나 팀 내에서 UI 가이드를 공유하는 데 유용하게 활용된다.

Storybook의 가장 큰 장점은 인터랙티브한 개발 환경이다. 개발자는 스토리를 작성하여 특정 상태의 컴포넌트를 렌더링하고, 다양한 props나 상태를 실시간으로 변경하며 테스트할 수 있다. 또한, Controls, Actions, Viewport 등 다양한 애드온을 활용하면 UI의 동작을 더욱 직관적으로 확인할 수 있다. 이를 통해 디자이너, 개발자, QA 팀이 원활하게 협업하며 UI의 일관성을 유지할 수 있다.

 

설치하기

npx storybook@latest init
npm run storybook

 

addons

애드온은 Storybook의 기능을 확장하는 플러그인으로, 개발 및 문서화 과정에서 다양한 편의 기능을 제공한다. 이를 통해 UI 개발 및 테스트, 접근성 검토, 디자인 시스템 구축 등을 보다 효율적으로 수행할 수 있다. 나는 A11y 애드온을 좋아하는데, 접근성 테스트를 수행하여 WCAG 가이드라인을 준수하는지 자동으로 확인해주기 때문이다.

 

메타데이터 설정

스토리북에서 메타데이터는 주로 스토리의 설정과 관련된 정보들을 포함하고 있으며, 스토리북에서 스토리를 어떻게 렌더링할지, 어떤 아키텍처나 규칙을 적용할지 등을 제어할 수 있게 한다. title은 스토리가 위치할 path라고 볼 수 있으며, 스토리로 만들 컴포넌트를 component에 등록한다. parameters는 여러 값들이 있지만 보통은 layout: "centered"만 쓰는 듯하다. tags에 'autodocs'를 제공하면 컴포넌트를 분석하여 자동으로 문서를 작성해준다. 그 밖에도 여러 값을 tags에 제공할 수 있지만 보통은  'autodocs' 아니면 'deprecated'나 'beta' 정도인 듯하다.

argTypes에는 아규먼트를 정의하는 다앙햔 내용을 작성할 수 있는데, 분량이 너무 많아서 일일이 외울 수는 없고 필요할 때마다 공식 문서를 확인하는 수 밖에 없겠다. 원래는 argTypes에 defaultValue를 지정할 수 있게 했었지만, 이 기능이 args로 분리되었다.

import type { Meta, StoryObj } from "@storybook/react";
import { fn } from "@storybook/test";

const meta = {
  title: "Button",
  component: Clickable,
  parameters: {
    layout: "centered",
  },
  tags: ["autodocs"],
  argTypes: {},
  args: {
    onClick: fn(() => console.log("Clicked")),
  },
} satisfies Meta<typeof Clickable>;

export default meta;

 

 

mdx

MDX(Markdown for JSX)는 Markdown과 JSX를 함께 사용할 수 있는 문서 포맷이다. 기본적으로 Markdown의 문법을 사용하면서도, React 컴포넌트를 삽입하여 동적인 콘텐츠를 작성할 수 있다. 이를 통해 컴포넌트의 설명과 함께 실제 동작하는 UI를 한 문서에서 확인할 수 있다.