Storybook은 UI 컴포넌트의 개발 및 테스트를 도와주는 도구로, 테마 시스템 개발에도 효과적으로 활용될 수 있습니다. 이번 블로그 포스트에서는 Storybook을 사용하여 테마 시스템을 개발하는 방법에 대해 알아보겠습니다.

1. Storybook 설치 및 설정

먼저, 해당 프로젝트에서 사용할 Storybook을 설치합니다. 아래 명령을 터미널에 입력하여 설치합니다.

npm install @storybook/cli --global

설치가 완료되면 프로젝트 폴더에서 아래 명령을 실행하여 Storybook을 생성합니다.

npx sb init

2. 테마 설정

Storybook에서는 테마를 관리하기 위해 theme.js 파일을 사용합니다. 이 파일에는 테마에 필요한 변수, 컬러 팔레트 등을 정의할 수 있습니다. 예를 들어, 아래와 같은 코드를 theme.js 파일에 작성할 수 있습니다.

export default {
  colors: {
    primary: '#FF0000',
    secondary: '#00FF00',
    tertiary: '#0000FF',
  },
};

3. 컴포넌트 작성 및 스토리 생성

이제 Storybook에서 테마를 적용할 컴포넌트를 작성합니다. 작성한 컴포넌트에 테마를 적용하기 위해, styled-components 같은 CSS-in-JS 라이브러리를 사용할 수도 있습니다.

작성한 컴포넌트에 대한 스토리를 생성하려면 .stories.js 파일을 작성해야 합니다. 예를 들어, 아래와 같은 코드를 .stories.js 파일에 작성할 수 있습니다.

import React from 'react';
import MyComponent from './MyComponent';

export default {
  title: 'MyComponent',
};

export const Default = () => <MyComponent />;

4. 테마 적용

스토리의 데코레이터를 통해 테마를 적용할 수 있습니다. 아래와 같이 데코레이터를 설정하면 해당 스토리에서 테마가 적용됩니다.

import React from 'react';
import { ThemeProvider } from 'styled-components';
import MyComponent from './MyComponent';
import theme from './theme';

export default {
  title: 'MyComponent',
  decorators: [
    (story) => (
      <ThemeProvider theme={theme}>
        {story()}
      </ThemeProvider>
    ),
  ],
};

export const Default = () => <MyComponent />;

5. Storybook 실행

이제 Storybook을 실행하여 결과를 확인해볼 수 있습니다. 아래 명령을 터미널에 입력하여 실행합니다.

npm run storybook

Storybook이 실행되면 브라우저에서 컴포넌트와 테마가 잘 적용된 모습을 확인할 수 있습니다.

마무리

이렇게 Storybook을 활용하여 테마 시스템을 개발하는 방법에 대해 알아보았습니다. Storybook을 사용하면 컴포넌트와 테마의 독립성을 보장하면서도 시각적으로 확인할 수 있습니다. 이를 통해 개발자와 디자이너 간의 협업이 원활해질 수 있습니다.