Storybook addon 기능으로 개발 생산성 올려보자!

서론

여전히 프로젝트를 진행 중이다! 프로젝트를 진행하면서 불편한 점이 하나 있었다.

나를 포함해 다른 분들이 컴포넌트 작업을 하시고 PR을 올리실 때 파일 첨부 칸에 Figma 디자인 캡처본 하나, 실제 구현한 컴포넌트 캡처본 하나 이렇게 총 2개의 첨부 사진을 올려야 했다는 것이다.

스토리북과 피그마를 번갈아가면서 작업을 하신 다는 것이 굉장히 번거롭다고 생각이 들기도 하였고, 이런 사소한 점이 개발 생산성과 개발자 경험을 저하시킨다고 생각을 하였다.

---

📚 Storybook addon/design

storybookjs/addon-designs: A Storybook addon that embeds Figma, websites, or images in the addon panel.

GitHub - storybookjs/addon-designs: A Storybook addon that embeds Figma, websites, or images in the addon panel.

design addon을 사용하면 Figma에 있는 디자인을 스토리북에 불러올 수 있기 때문에, Figma에서 디자인한 컴포넌트와 스토리북 컴포넌트를 시각적으로 비교해가며 개발을 진행할 수 있다는 장점이 있다.

이러한 장점이 지금 우리가 맞닥뜨린 불편함을 해소하고, 개발자 경험을 높일 수 있을 것이라는 확신이 생겼다!

1. addon/design 설치

yarn add -D @storybook/addon-designs

2. addon 환경 세팅

.storybook/main.ts

아래와 같이 addon/design을 위한 세팅을 해준다!

기존 세팅에 @storybook/addon-designs만 추가해주면 된다.

const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  addons: [
    '@storybook/addon-onboarding',
    '@storybook/addon-essentials',
    '@chromatic-com/storybook',
    '@storybook/addon-interactions',
    '@storybook/addon-designs',
  ],
  ...
  }

3. Figma에서 컴포넌트의 URL 가져오기

아래와 같이 스토리북에 등록할 컴포넌트에 오른쪽 마우스를 클릭하여 URL을 복사한다.

4. 스토리의 파라미터에 추가

아래와 같이 스토리의 파라미터에 type과 url을 지정해주면 된다.

url은 아까 복사했던 url의 값을 붙여넣기 하면 된다.

NoCheckboxAndNoCost.parameters = {
  design: {
    type: 'figma',
    url: 'https://www.figma.com/design/어쩌구 저쩌구',
  }
}

---

🚀 결과

어우... 좀 부담스럽게 크게 나왔지만 결국 성공했다!

디자이너분께 프레임을 좀 조절해달라고 말씀드려야겠다...!