Vue Academy · 강의

Storybook 애드온과 접근성 테스트

@storybook/addon-a11y, viewport 애드온과 자동 문서화를 위한 docs 애드온을 활용합니다.

Storybook 애드온과 접근성 테스트은(는) CoddyKit의 무료 Vue Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Vue Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

애드온으로 Storybook 확장하기

애드온은 Storybook에 추가 패널과 도구를 연결합니다. Controls와 Actions 외에도 애드온은 접근성, 반응형 뷰포트, 자동 생성 문서를 지원합니다.

접근성 애드온

@storybook/addon-a11y는 각 스토리에서 axe-core 엔진을 실행하고 WCAG 위반 사항(대비 문제, 누락된 레이블, 잘못된 역할)을 패널에 바로 보고합니다.

// terminal
// npm install -D @storybook/addon-a11y

애드온 등록하기

.storybook/main.ts의 addons 배열에 애드온을 추가합니다. 로드하려면 Storybook을 다시 시작하세요.

// .storybook/main.ts
const config = {
  addons: [
    "@storybook/addon-essentials",
    "@storybook/addon-a11y",
  ],
}

a11y 패널 읽기

스토리를 열고 접근성 탭을 확인합니다. 각 결과는 Violations(반드시 수정해야 함), Passes, Incomplete(수동 검토 필요)로 그룹화됩니다. 위반 항목을 클릭하면 해당 요소가 강조 표시됩니다.

a11y가 발견하는 일반적인 위반

텍스트와 배경 사이의 색상 대비가 충분하지 않은 경우
접근 가능한 이름이 없는 버튼이나 링크
alt 텍스트가 없는 이미지
연결된 레이블이 없는 양식 입력

이러한 문제를 배포 후가 아니라 독립적인 상태에서 발견하면 비용을 크게 줄일 수 있습니다.

스토리별 a11y 구성

매개변수를 통해 스토리별로 규칙을 조정할 수 있습니다. 예를 들어 다른 곳에서 처리하는 규칙을 비활성화하거나 건너뛸 요소를 표시할 수 있습니다.

export const NoContrastCheck = {
  parameters: {
    a11y: {
      config: {
        rules: [{ id: "color-contrast", enabled: false }],
      },
    },
  },
}

뷰포트 애드온

뷰포트 애드온(essentials에 포함)을 사용하면 다양한 기기 크기(모바일, 태블릿, 데스크톱)에서 스토리를 미리 볼 수 있어 반응형 중단점을 확인할 수 있습니다.

뷰포트 선택하기

도구 모음의 드롭다운에서 미리 설정된 기기 프레임으로 캔버스를 전환합니다. 스토리별 기본 뷰포트도 설정할 수 있습니다.

export const Mobile = {
  parameters: {
    viewport: { defaultViewport: "mobile1" },
  },
}

사용자 지정 뷰포트

디자인 시스템의 정확한 너비에 맞도록 preview.ts에서 직접 중단점을 정의합니다.

// .storybook/preview.ts
const preview = {
  parameters: {
    viewport: {
      viewports: {
        tablet: { name: "Tablet", styles: { width: "768px", height: "1024px" } },
      },
    },
  },
}

Docs 애드온

@storybook/addon-docs는 자동 생성 문서를 구동합니다. tags: ["autodocs"]와 함께 사용하면 속성과 스토리에서 컴포넌트별 Docs 페이지를 생성합니다.

export default {
  component: Card,
  tags: ["autodocs"],
}

빠른 확인

Storybook 애드온에 대한 이해도를 확인해 보세요.

복습

주요 Storybook 애드온을 배웠습니다.

@storybook/addon-a11y는 스토리별 WCAG 위반(대비, 레이블, 역할)을 보고하며 스토리별로 조정할 수 있습니다.
뷰포트 애드온은 사전 설정 또는 사용자 지정 크기로 반응형 중단점을 미리 보여 줍니다.
@storybook/addon-docs와 tags: ["autodocs"]를 함께 사용하면 속성과 스토리에서 항상 최신 상태인 문서를 자동으로 생성합니다.
main.ts의 addons 배열에 애드온을 등록합니다.

자주 묻는 질문