[Headless UI 라이브러리 개발] Headless UI 라이브러리와 storybook 사용법

       Headless UI 라이브러리란? 

Headless는 오직 기능만을 제공해주는 ui 라이브러리이다.

일반 ui 라이브러리와는 다르게 Headless는 사용자가 원하는대로 커스터마이징 하여 사용할 수 있어 효율적이다.

따라서 진행하고 있는 프로젝트의 디자인을 적용시켜 디자인의 통일성을 지킬 수 있다!

 

 

어떤 경우에 Headless UI를 사용할까?

기본으로 제공되는 디자인이 없기 때문에, 디자인 시스템이 없는 경우 오히려 불편할 수 있고,

커스터마이징을 하기 위한 시간을 더 많이 투자해야하는 단점이 있다.

따라서 Headless ui는 ui의 스타일보단 로직이나 기능에 집중해야 하거나,

프로젝터에서 특정한 디자인 요구사항이 있을 때 사용하는 게 적합하다.

 

---

 

       storybook 이란? 

UI 컴포넌트를 독립적으로 개발하고 문서화할 수 있는 도구다.

아래와 같이 개별 UI 컴포넌트를 따로 렌더링하여, 다양한 상태(props, events)를 직접 조작하여 테스트할 수 있다.

 

storybook의 특징

1 독립적인 컴포넌트 개발 환경

각 ui 컴포넌트를 독립적으로 테스트하고 개발할 수 있게 하기 때문에, 컴포넌트 자체의 로직과 스타일링에 집중할 수 있다. 

 

2 자동 문서화

컴포넌트의 사용법을 자동으로 문서화해주기 때문에 사용자는 각 컴포넌트를 어떻게 사용하는지 확인할 수 있고, 인터페이스로 여러 예시를 확인할 수 있다. 이를 통해 다른 팀원이 컴포넌트를 보다 빠르게 이해할 수 있도록 돕는다.

 

3 반응형 뷰포트 지원

반응형 뷰포트나 모바일 뷰를 지원하여, 다양한 크기에서 컴포넌트가 어떻게 보일지 미리 확인할 수 있다.

 

4 다양한 프레임워크 지원

React, Vue, Angular, Svelte 등 여러 프레임워크와 호환 가능하다.

 

 

storybook의 구성

기본적으로 컴포넌트 파일(jsx, tsx)이 있고, 그 외 스토리 파일이 추가된다.

스토리 파일에서는 컴포넌트의 다양한 상태(variant)를 정의해줄 수 있는데, 기본적인 형태는 다음과 같다.

//.stories.jsx / .stories.tsx

import { Meta, StoryObj } from "@storybook/react";
import { Button } from "./Button"; // 컴포넌트 import

// Storybook에서 보여줄 메타데이터 설정
const meta: Meta<typeof Button> = {
  title: "Components/Button", // Storybook에서 보일 그룹명
  component: Button, // 어떤 컴포넌트인지 지정
};
export default meta;

// 각 버튼 변형(variant) 정의
export const Primary: StoryObj<typeof Button> = {
  args: {
    label: "Click Me",
    variant: "primary",
  },
};

export const Secondary: StoryObj<typeof Button> = {
  args: {
    label: "Click Me",
    variant: "secondary",
  },
};

이처럼 스토리 파일을 작성하여 컴포넌트의 다양한 상태를 미리 보고 테스트해볼 수 있고, 자동으로 문서화 시킬 수 있다.