StoryBook으로 디자인 통일성 유지하기 (2)

이번 글에서는 Figma를 기반으로 작성한 컴포넌트를 어떻게 Storybook에서 볼 수 있는지에 대해 알아보려고 합니다.

 

Stories 폴더 내에 파일과 코드 추가하기

과정은 생각보다 간단합니다.

본인의 프로젝트 폴더 내에 /components 폴더 안에 stories 폴더가 생성되어 있는데 그 안에 컴포넌트 파일.stories.tsx와 코드만 추가해 주면 됩니다.

 

저의 경우 confirmButton이라는 컴포넌트를 사용하기 때문에 stories 폴더 내에 ConfirmButton.stories.tsx라는 파일을 추가해줍니다.

그리고 파일 내에 다음과 같은 코드를 작성합니다.

 

// stories/ConfirmButton.stories.tsx
import type { Meta, StoryObj } from "@storybook/react";
import { ConfirmButton } from "../components/button/confirmButton";

export default {
  title: "Components/ConfirmButton",
  component: ConfirmButton,
  argTypes: {
    text: { control: "text" },
    textcolor: { control: "color" },
    backgroundcolor: { control: "color" },
    width: { control: "text" },
    height: { control: "text" },
    borderradius: { control: "text" },
    border: { control: "text" },
    onClick: { action: "clicked" },
  },
} as Meta<typeof ConfirmButton>;

// 기본 버튼 스토리
export const Default: StoryObj<typeof ConfirmButton> = {
  args: {
    text: "확인",
    textcolor: "#ffffff",
    backgroundcolor: "#007BFF",
    width: "100%",
    height: "52px",
    borderradius: "50px",
    border: "none",
  },
};

// Secondary 버튼
export const Secondary: StoryObj<typeof ConfirmButton> = {
  args: {
    text: "취소",
    textcolor: "#000000",
    backgroundcolor: "#DDDDDD",
    width: "100%",
    height: "42px",
    borderradius: "50px",
    border: "1px solid #000",
  },
};

 

코드 설명

import type { Meta, StoryObj } from "@storybook/react";
import { ConfirmButton } from "../components/button/confirmButton";

 

• Meta, StoryObj는 Storybook의 기본 타입을 정의하는 데 사용합니다. 여기서 조심해야 할 점은 Storybook 7 버전 이상일 경우에는 위와 같이 Meta, StoryObj를 사용해야 하며, 7 버전 이하일 경우 import { ComponentStory, ComponentMeta } from '@storybook/react' 을 사용합니다.
• 두 번째 줄을 제가 작성한 컴포넌트를 가져옵니다.

export default {
  title: "Components/ConfirmButton",
  component: ConfirmButton,
  argTypes: {
    text: { control: "text" },
    textcolor: { control: "color" },
    backgroundcolor: { control: "color" },
    width: { control: "text" },
    height: { control: "text" },
    borderradius: { control: "text" },
    border: { control: "text" },
    onClick: { action: "clicked" },
  },
} as Meta<typeof ConfirmButton>;

 

 

위 코드는 사진과 함께 설명해 보겠습니다.

• title : Components/ConfirmButton
  title은 Storybook의 왼쪽 사이드바에서 "Components > ConfirmButton"으로 표시됩니다.
• component : ConfirmButton
  ConfirmButton 컴포넌트를 Storybook에서 렌더링 하도록 설정합니다. 잘못 가져오면 렌더링이 안되므로 정확히 입력하도록 주의합니다.
  
  
• argTypes (Controls 패널에서 Props 변경이 가능합니다)
• Storybook에서 실시간으로 Props 값을 변경할 수 있도록 설정합니다.
• Props 타입에 맞게 Controls 설정할 수 있습니다.
  text → 텍스트 입력이 가능합니다.
  color → 색상 선택이 가능합니다.

기본 버튼 스토리 (Default)

export const Default: StoryObj<typeof ConfirmButton> = {
  args: {
    text: "확인",
    textcolor: "#ffffff",
    backgroundcolor: "#007BFF",
    width: "100%",
    height: "52px",
    borderradius: "50px",
    border: "none",
  },
};

 

• args
  
  • 컴포넌트의 Props 값을 지정하는 부분입니다.
  • args 값은 Storybook의 "Controls" 패널에서 변경이 가능합니다.
  • "text" : "확인" → 기본 텍스트는 "확인"입니다.

위 코드의 경우 Default이고 또 다른 변형 형태의 버튼은 코드를 추가하여 설정할 수 있습니다.

예를 들면 export const Secondary 이런 식으로 말이죠 :)

 

지금까지 Stroybook 설정 방법, 사용하는 이유 등에 대해 간략하게 알아봤는데요, Storybook을 사용하면 디자인 QA를 할 때 불필요한 시간이 줄어드는 큰 장점이 있는 것 같습니다.

 

추가로, 현재는 localhost 환경이지만 vercel이나 netlify 등 정적 페이지 배포를 하게 되면 디자이너, QA, 기획자 등 팀의 여러 사람들이 확인할 수 있으므로 배포까지 하면 더 좋을 것 같습니다!

 

이외에도 디자인 시스템을 사용하려는 팀 또는 회사가 적용해 보면 좋을 것 같습니다.

지금까지 읽어주셔서 감사합니다.