디자인 시스템은 프로젝트에서 일관된 디자인 원칙과 스타일을 유지할 수 있게 해주는 중요한 요소입니다. 이를 효과적으로 관리하고 사용하기 위해 Storybook을 활용할 수 있습니다. Storybook은 개발자와 디자이너 간의 소통을 원활하게 하고 컴포넌트 단위의 디자인 시스템을 구축할 수 있도록 도움을 줍니다.

1. Storybook 설치

먼저, project 경로에서 다음 명령어를 사용하여 Storybook을 설치합니다.

npm install @storybook/react

2. 디자인 시스템 컴포넌트 작성

src/components 디렉토리에 디자인 시스템의 컴포넌트를 작성합니다. 예를 들어, Button 컴포넌트를 작성해보겠습니다.

import React from 'react';

const Button = ({ label }) => {
  return (
    <button>{label}</button>
  );
}

export default Button;

3. 스토리 작성

src/stories 디렉토리를 생성하고, Button.stories.js 파일을 생성하여 다음과 같이 작성합니다.

import React from 'react';
import Button from '../components/Button';

export default {
  title: 'Button',
  component: Button,
};

export const Primary = () => <Button label="Primary Button" />;
export const Secondary = () => <Button label="Secondary Button" />;

4. Storybook 실행

Storybook을 실행하기 위해 package.json 파일의 scripts 부분에 다음 코드를 추가합니다.

"scripts": {
  "storybook": "start-storybook -p 6006"
}

그리고 다음 명령어를 사용하여 Storybook을 실행합니다.

npm run storybook

Storybook이 성공적으로 실행되면 브라우저에서 http://localhost:6006 주소로 접속하여 컴포넌트가 정상적으로 렌더링되는지 확인할 수 있습니다.

5. 디자인 시스템 확장

디자인 시스템은 프로젝트의 규모에 따라 계속 확장될 수 있습니다. Storybook을 통해 새로운 컴포넌트를 추가하고 기존 컴포넌트를 개선하며, 디자인 시스템이 지속적으로 발전하도록 유지할 수 있습니다.

참고 자료

• Storybook 공식 문서
• Storybook GitHub 저장소