내 프로젝트에서 스토리북 써보기 - 1

한번이라도 써볼껄... 하는 후회에서의 시작

최근 사이드 프로젝트를 진행하며 프론트엔드 개발자 4인이 협업을 하게 되었다. 그때 나온 질문이 공통으로 사용하는 UI 컴포넌트의 관리 방법이었다. 그러고보니 프론트엔드 개발자로 일하면서 대부분의 프로젝트를 1인으로 개발해왔기에 스타일 가이드의 문서화에 신경쓴 적이 없었다. 무슨 컴포넌트가 있는지, 어떻게 사용하는지 기억하고 있었으니까... 그나마 웹 퍼블리셔로 일할 때 스타일 가이드 페이지를 제작해서 퍼블리셔 여럿이 함께 작업을 하긴 했는데, 스타일 가이드용 페이지를 따로 파는 것 보다 스토리북으로 컴포넌트를 관리하고 문서화하면 좋을 것 같다는 생각이 들었다. 그래서 스토리북을 써보자고 제안해봤는데, 문제는 내가 스토리북을 써본 적이 없어 스토리북으로 컴포넌트 문서화를 하는데 드는 공수를 잘 모른다는 것이었다. 결국 스토리북 제안은 무산되었고... 한번정도는 써볼껄 하는 후회가 밀려왔다. 😢

 

웹 퍼블리셔로 협업할 때, 이런 느낌으로 스타일 가이드용 html 페이지를 따로 빼서 만들었었다.

 

그래서 혼자 먼저 써보기로 했다.

내가 스토리북에 대해서 알고 써봤어야 나중에 팀원들에게 설명할 수도, 사용하자고 설득해볼 수도 있으니 개인 프로젝트에 적용시켜보기로 했다. 우선 스토리북이 해결하는 문제와 장점은 다음과 같다.

스토리북을 사용하는 이유

스토리북 공식 문서에서는 컴포넌트가 늘어남에 따라 관리하기가 복잡해지는 문제를 해결해준다고 소개되어있다. 스토리북을 사용하면 컴포넌트를 따로 보여주고 컴포넌트의 상태에 따라 어떻게 보이는지 쉽게 확인하는 문서가 만들어진다. 그런식으로 상태에 따라 UI를 보여주는 것을 스토리라고 하는듯하다.

프로젝트에 스토리북 적용하기

요새 프로젝트를 만들때 주로 Next.js와 tailwind css를 사용하니 이에 맞춰서 사용하는 방법을 찾았다.

 

1. 우선 next.js 프로젝트를 만든뒤 storybook을 세팅해준다.

npx storybook@latest init

이렇게 하면 프로젝트의 루트에 `.storybook` 폴더가 생기고 `package.json`에 스토리북 관련 종속성과 스크립트가 생긴다.

 

2. 그리고 tailwind css를 적용시키기 위해 종속성을 설치해준다.

npm add -D @storybook/addon-styling postcss autoprefixer

3. postcss를 설치했으니 `postcss.config.js`파일을 프로젝트의 루트에 만들고

// postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

4. `.storybook/main.js`에 `@storybook/addon-styling`을 추가하고 postCSS 옵션을 true로 설정한다.

module.exports = {
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    {
      name: '@storybook/addon-styling',
      options: {
        // Check out https://github.com/storybookjs/addon-styling/blob/main/docs/api.md
        // For more details on this addon's options.
        postCss: true,
      },
    },
  ],
  // snipped for brevity
};

 

5. `.storybook/preview.js`에 `tailwind.css`를 불러와서 스토리에 tailwind css가 적용되도록 만들면 준비는 끝난다.

// .storybook/preview.js

import '../src/tailwind.css'; // replace with the name of your tailwind css file

 

 

 

그렇게 해서 만들어진 스토리북의 모습

이렇게 스토리북 서버에 제작한 UI컴포넌트를 띄워보는 것에 성공했다. 잠깐 써본 바로는 스토리북으로 만든 컴포넌트를 스토리북으로 개별적으로 보여줄 수도 있고, 이 컴포넌트를 바로 사용할 수도 있는 것 같다. 좀 더 스토리북을 사용해서 활용방법을 터득해볼 예정이다. 🥹

 

( + 처음에 실수했던 것인데 Next 13버전에서는 서버 컴포넌트와 클라이언트 컴포넌트로 나뉘어져 있어서 이벤트가 들어가는 버튼 컴포넌트의 경우 상단에 'use client' string을 작성해서 클라이언트 컴포넌트로 만들어야 사용할 때 에러나 가지 않는다. )