Docs 자동화와 Figma, 어떻게 연동하나요?

Controls·Args는 코드에서 타입/스토리로 동기화하고, Figma는 addon으로 링크·비주얼 diff를 씁니다. “단일 출처”는 보통 토큰(디자인 시스템) 쪽이 됩니다.

Chromatic/비주얼 리그레이션은 필수인가요?

스냅샷은 유지보수 비용이 있으니, 디자인 시스템·핵심 UI에 집중하는 팀이 많습니다. PR 게이트와 비용·플레이를 맞춥니다.

스토리에서 실제 API를 켜도 되나요?

가짜·MSW로 격리하는 편이 안정적입니다. 실 API는 플레이·레이트·시크릿·플레이크 때문에 CI에서 꺼는 경우가 많습니다.

Monorepo에서 스토리북 루트는 어디?

패키지별로 호스트하거나 루트에 통합하며, Webpack/Vite·경로 alias·트랜스파일 범위를 맞춥니다. CI는 캐시·병렬으로 시간을 줄입니다.

Storybook 완벽 가이드 | UI 컴포넌트 개발·문서화·테스트·실전 활용

2026년 4월 7일 · 3분 읽기 · 수정 2026년 4월 7일 중급

이 글의 핵심

Storybook으로 UI 컴포넌트를 개발하고 문서화하는 완벽 가이드. Stories, Args, Actions, Addons, Visual Testing까지 실전 예제로 정리. Storybook·UI·Component 중심으로 설명합니다.

이 글의 핵심

Storybook으로 UI 컴포넌트를 개발하고 문서화하는 완벽 가이드입니다. Stories, Args, Actions, Addons, Visual Testing까지 실전 예제로 정리했습니다.

실무 경험 공유: Storybook을 도입하면서, 컴포넌트 개발 속도가 50% 향상되고 디자이너와의 협업이 원활해진 경험을 공유합니다.

들어가며: “컴포넌트 개발이 비효율적이에요”

실무 문제 시나리오

시나리오 1: 컴포넌트를 격리해서 개발하기 어려워요

전체 앱을 실행해야 합니다. Storybook은 격리된 환경을 제공합니다. 시나리오 2: 모든 상태를 테스트하기 어려워요

수동으로 상태를 만들어야 합니다. Storybook은 모든 상태를 Story로 정의합니다. 시나리오 3: 문서화가 번거로워요

별도로 문서를 작성해야 합니다. Storybook은 자동으로 문서화합니다.

1. Storybook이란?

핵심 특징

Storybook은 UI 컴포넌트 개발 도구입니다. 주요 장점:

격리된 개발: 컴포넌트만 개발
모든 상태: Stories로 정의
자동 문서화: Props, Events
Addons: 수백 개의 확장
Visual Testing: 시각적 회귀 테스트

2. 설치 및 설정

React 프로젝트

npx storybook@latest init

수동 설치

npm install -D @storybook/react @storybook/react-vite storybook

.storybook/main.ts

import type { StorybookConfig } from '@storybook/react-vite';
const config: StorybookConfig = {
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
  ],
  framework: {
    name: '@storybook/react-vite',
    options: {},
  },
};
export default config;

3. 첫 Story 작성

Button 컴포넌트

// src/components/Button.tsx
interface ButtonProps {
  label: string;
  variant?: 'primary' | 'secondary';
  size?: 'small' | 'medium' | 'large';
  onClick?: () => void;
}
export default function Button({ label, variant = 'primary', size = 'medium', onClick }: ButtonProps) {
  return (
    <button className={`btn btn-${variant} btn-${size}`} onClick={onClick}>
      {label}
    </button>
  );
}

Story

// src/components/Button.stories.tsx
import type { Meta, StoryObj } from '@storybook/react';
import Button from './Button';
const meta: Meta<typeof Button> = {
  title: 'Components/Button',
  component: Button,
  tags: ['autodocs'],
  argTypes: {
    variant: {
      control: 'select',
      options: ['primary', 'secondary'],
    },
    size: {
      control: 'select',
      options: ['small', 'medium', 'large'],
    },
  },
};
export default meta;
type Story = StoryObj<typeof Button>;
export const Primary: Story = {
  args: {
    label: 'Primary Button',
    variant: 'primary',
  },
};
export const Secondary: Story = {
  args: {
    label: 'Secondary Button',
    variant: 'secondary',
  },
};
export const Small: Story = {
  args: {
    label: 'Small Button',
    size: 'small',
  },
};
export const Large: Story = {
  args: {
    label: 'Large Button',
    size: 'large',
  },
};

4. Args & Actions

Args

export const Interactive: Story = {
  args: {
    label: 'Click me',
  },
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    const button = canvas.getByRole('button');
    await userEvent.click(button);
  },
};

Actions

import { action } from '@storybook/addon-actions';
export const WithAction: Story = {
  args: {
    label: 'Click me',
    onClick: action('button-clicked'),
  },
};

5. Decorators

전역 Decorator

// .storybook/preview.tsx
import type { Preview } from '@storybook/react';
import '../src/index.css';
const preview: Preview = {
  decorators: [
    (Story) => (
      <div style={{ padding: '3rem' }}>
        <Story />
      </div>
    ),
  ],
};
export default preview;

Story별 Decorator

export const Centered: Story = {
  args: {
    label: 'Centered Button',
  },
  decorators: [
    (Story) => (
      <div style={{ display: 'flex', justifyContent: 'center' }}>
        <Story />
      </div>
    ),
  ],
};

6. Parameters

TypeScript/JavaScript 예제 코드입니다.

export const DarkMode: Story = {
  args: {
    label: 'Dark Button',
  },
  parameters: {
    backgrounds: {
      default: 'dark',
    },
  },
};

7. Addons

.storybook/main.ts

const config: StorybookConfig = {
  addons: [
    '@storybook/addon-essentials',
    '@storybook/addon-a11y',
    '@storybook/addon-viewport',
    '@storybook/addon-storysource',
  ],
};

8. Vue 통합

설치

npx storybook@latest init

Story

// src/components/Button.stories.ts
import type { Meta, StoryObj } from '@storybook/vue3';
import Button from './Button.vue';
const meta: Meta<typeof Button> = {
  title: 'Components/Button',
  component: Button,
  tags: ['autodocs'],
};
export default meta;
type Story = StoryObj<typeof Button>;
export const Primary: Story = {
  args: {
    label: 'Primary Button',
    variant: 'primary',
  },
};

9. Visual Testing

Chromatic

npm install -D chromatic

npx chromatic --project-token=YOUR_TOKEN

Storybook Test Runner

npm install -D @storybook/test-runner

{
  "scripts": {
    "test-storybook": "test-storybook"
  }
}

10. 실전 예제: Form 컴포넌트

Input 컴포넌트

// src/components/Input.tsx
interface InputProps {
  label: string;
  type?: 'text' | 'email' | 'password';
  placeholder?: string;
  error?: string;
  value?: string;
  onChange?: (value: string) => void;
}
export default function Input({ label, type = 'text', placeholder, error, value, onChange }: InputProps) {
  return (
    <div className="input-group">
      <label>{label}</label>
      <input
        type={type}
        placeholder={placeholder}
        value={value}
        onChange={(e) => onChange?.(e.target.value)}
        className={error ? 'error' : '}
      />
      {error && <span className="error-message">{error}</span>}
    </div>
  );
}

Story

// src/components/Input.stories.tsx
import type { Meta, StoryObj } from '@storybook/react';
import Input from './Input';
const meta: Meta<typeof Input> = {
  title: 'Components/Input',
  component: Input,
  tags: ['autodocs'],
};
export default meta;
type Story = StoryObj<typeof Input>;
export const Default: Story = {
  args: {
    label: 'Email',
    type: 'email',
    placeholder: '[email protected]',
  },
};
export const WithError: Story = {
  args: {
    label: 'Email',
    type: 'email',
    placeholder: '[email protected]',
    error: 'Invalid email address',
  },
};
export const Password: Story = {
  args: {
    label: 'Password',
    type: 'password',
    placeholder: 'Enter password',
  },
};

정리 및 체크리스트

핵심 요약

Storybook: UI 컴포넌트 개발 도구
격리된 개발: 컴포넌트만 개발
Stories: 모든 상태 정의
자동 문서화: Props, Events
Addons: 수백 개의 확장
Visual Testing: 시각적 회귀 테스트

구현 체크리스트

같이 보면 좋은 글

이 글에서 다루는 키워드

Storybook, UI, Component, Documentation, Testing, React, Vue

자주 묻는 질문 (FAQ)

Q. 프로덕션 빌드에 포함되나요?

A. 아니요, 개발 도구로만 사용됩니다.

Q. 디자이너와 공유할 수 있나요?

A. 네, Storybook을 정적 사이트로 배포할 수 있습니다.

Q. 테스트 도구인가요?

A. 개발 도구이지만, Visual Testing도 지원합니다.

Q. 프로덕션에서 사용해도 되나요?

A. 네, 수많은 대기업에서 사용하고 있습니다.

심화 부록: 구현·운영 관점

이 부록은 앞선 본문에서 다룬 주제(「Storybook 완벽 가이드 | UI 컴포넌트 개발·문서화·테스트·실전 활용」)를 구현·런타임·운영 관점에서 다시 압축합니다. 도메인별 세부 구현은 글마다 다르지만, 입력 검증 → 핵심 연산 → 부작용(I/O·네트워크·동시성) → 관측의 흐름으로 장애를 나누면 원인 추적이 빨라집니다.

내부 동작과 핵심 메커니즘

flowchart TD
  A[입력·요청·이벤트] --> B[파싱·검증·디코딩]
  B --> C[핵심 연산·상태 전이]
  C --> D[부작용: I/O·네트워크·동시성]
  D --> E[결과·관측·저장]

sequenceDiagram
  participant C as 클라이언트/호출자
  participant B as 경계(런타임·게이트웨이·프로세스)
  participant D as 의존성(API·DB·큐·파일)
  C->>B: 요청/이벤트
  B->>D: 조회·쓰기·RPC
  D-->>B: 지연·부분 실패·재시도 가능
  B-->>C: 응답 또는 오류(코드·상관 ID)

불변 조건(Invariant): 버퍼 경계, 프로토콜 상태, 트랜잭션 격리, FD 상한 등 단계별로 문장으로 적어 두면 디버깅 비용이 줄어듭니다.
결정성: 순수 층과 시간·네트워크·스케줄에 의존하는 층을 분리해야 테스트와 장애 분석이 쉬워집니다.
경계 비용: 직렬화, 인코딩, syscall 횟수, 락 경합, 할당·GC, 캐시 미스를 의심 목록에 둡니다.
백프레셔: 생산자가 소비자보다 빠를 때 버퍼·큐·스트림에서 속도를 줄이는 신호를 어디에 둘지 정의합니다.

프로덕션 운영 패턴

영역	운영 관점 질문
관측성	요청 단위 상관 ID, 에러율·지연 p95/p99, 의존성 타임아웃·재시도가 대시보드에 보이는가
안전성	입력 검증·권한·비밀·감사 로그가 코드 경로마다 일관적인가
신뢰성	재시도는 멱등 연산에만 적용되는가, 서킷 브레이커·백오프·DLQ가 있는가
성능	캐시·배치 크기·커넥션 풀·인덱스·백프레셔가 데이터 규모에 맞는가
배포	롤백 룬북, 카나리/블루그린, 마이그레이션·피처 플래그가 문서화되어 있는가
용량	피크 트래픽·디스크·FD·스레드 풀 상한을 주기적으로 검증하는가

스테이징은 데이터 양·네트워크 RTT·동시성을 프로덕션에 가깝게 맞출수록 재현율이 올라갑니다.

확장 예시: 엔드투엔드 미니 시나리오

앞선 본문 주제(「Storybook 완벽 가이드 | UI 컴포넌트 개발·문서화·테스트·실전 활용」)를 배포·운영 흐름에 맞춰 옮긴 체크리스트입니다. 도메인에 맞게 단계 이름만 바꿔 적용할 수 있습니다.

입력 계약 고정: 스키마·버전·최대 페이로드·타임아웃·에러 코드를 경계에 둔다.
핵심 경로 계측: 요청 ID, 단계별 지연, 외부 호출 결과 코드를 로그·메트릭·트레이스에서 한 흐름으로 본다.
실패 주입: 의존성 타임아웃·5xx·부분 데이터·락 대기를 스테이징에서 재현한다.
호환·롤백: 설정/마이그레이션/클라이언트 버전을 되돌릴 수 있는지 확인한다.
부하 후 검증: 피크 대비 p95/p99, 에러율, 리소스 상한, 알림 임계값을 점검한다.

handle(request):
  ctx = newCorrelationId()
  validated = validateSchema(request)
  authorize(validated, ctx)
  result = domainCore(validated)
  persistOrEmit(result, idempotentKey)
  recordMetrics(ctx, latency, outcome)
  return result

문제 해결(Troubleshooting)

증상	가능 원인	조치
간헐적 실패	레이스, 타임아웃, 외부 의존성, DNS	최소 재현 스크립트, 분산 트레이스·로그 상관관계, 재시도·서킷 설정 점검
성능 저하	N+1, 동기 I/O, 락 경합, 과도한 직렬화, 캐시 미스	프로파일러·APM으로 핫스팟 확인 후 한 가지씩 제거
메모리 증가	캐시 무제한, 구독/리스너 누수, 대용량 버퍼, 커넥션 미반납	상한·TTL·힙/FD 스냅샷 비교
빌드·배포만 실패	환경 변수, 권한, 플랫폼 차이, lockfile	CI 로그와 로컬 diff, 런타임·이미지 버전 핀
설정 불일치	프로필·시크릿·기본값, 리전	스키마 검증된 설정 단일 소스와 배포 매트릭스 표준화
데이터 불일치	비멱등 재시도, 부분 쓰기, 캐시 무효화 누락	멱등 키·아웃박스·트랜잭션 경계 재검토

권장 순서: (1) 최소 재현 (2) 최근 변경 범위 축소 (3) 환경·의존성 차이 (4) 관측으로 가설 검증 (5) 수정 후 회귀·부하 테스트.

배포 전에는 git add → git commit → git push 후 npm run deploy 순서를 권장합니다.

이 글이 도움이 되셨나요?

여러분의 피드백은 더 나은 콘텐츠를 만드는 데 도움이 됩니다

문제가 있거나 개선 제안이 있으시면 연락처로 알려주세요.

Keyboard Shortcuts

이 글의 핵심

이 글의 핵심

들어가며: “컴포넌트 개발이 비효율적이에요”

실무 문제 시나리오

별도로 문서를 작성해야 합니다. Storybook은 자동으로 문서화합니다.

1. Storybook이란?

핵심 특징

2. 설치 및 설정

React 프로젝트

수동 설치

.storybook/main.ts

3. 첫 Story 작성

Button 컴포넌트

Story

4. Args & Actions

Args

Actions

5. Decorators

전역 Decorator

Story별 Decorator

6. Parameters

7. Addons

인기 Addons

.storybook/main.ts

8. Vue 통합

설치

Story

9. Visual Testing

Chromatic

Storybook Test Runner

10. 실전 예제: Form 컴포넌트

Input 컴포넌트

Story

정리 및 체크리스트

핵심 요약

구현 체크리스트

같이 보면 좋은 글

이 글에서 다루는 키워드

자주 묻는 질문 (FAQ)

Q. 프로덕션 빌드에 포함되나요?

Q. 디자이너와 공유할 수 있나요?

Q. 테스트 도구인가요?

Q. 프로덕션에서 사용해도 되나요?

심화 부록: 구현·운영 관점

내부 동작과 핵심 메커니즘

프로덕션 운영 패턴

확장 예시: 엔드투엔드 미니 시나리오

문제 해결(Troubleshooting)

이 글이 도움이 되셨나요?