Storybook - 스토리북 Storybook + 제플린 Zeplin 연동하기

개요

스토리북 Storybook 에서 제플린 Zeplin 을 연동해서 사용할 수 있다.
스토리북 버전에 따라서 설치방법이 다르며, 6 버전을 기준으로 포스팅을 하고자 한다.

애드온 패키지 설치하기

스토리북 애드온을 설치해서 연동해야 하기 때문에 먼저 애드온을 설치하자.

npm install storybook-zeplin

스토리 애드온 옵션 추가하기

설치된 애드온 모듈을 스토리북과 연동해야한다.

스토리북의 main.cjs 파일에서 애드온을 연동하자.

스토리북 > main.cjs 파일 경로
.storybook 디렉토리 > main.cjs 파일

위의 파일에서 addons 에 storybook-zeplin/register 을 추가하자.

module.exports = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "storybook-zeplin/register" // 이 애드온이 제플린 관련 애드온이다. 이 내용을 추가하면 된다.
  ],
  framework: "@storybook/web-components",
  core: {
    builder: "@storybook/builder-vite",
  },
  features: {
    storyStoreV7: true,
  },
};

스토리와 제플린 연결

제플린 링크 연동

컴포넌트 스토리 속성에 제플린 링크 주소를 연동해야 한다.

작성 방법은 아래와 같이 Meta 정보 내에 parameters > zeplinLink 로 해서 기재하면 된다.

export default {
  title: "Test/Component",
  parameters: {
    zeplinLink:
      "https://app.zeplin.io/project/awsdasdqe123/screen/asdvasdjkel" // 사용할 제플린의 링크 주소
  }
} as Meta;

Access Token 생성

연동하면 제플린과 접근하기 위한 access token 이 요청된다.

회사에서 운영중인 경우 회사 계정으로 접속해서 access token 정보를 확인하고, 붙여넣으면 된고, 개인이 하는 경우 개인 계정으로 접속해서 access token 을 생성해서 사용하면 된다.

Access Token 생성 페이지
제플린 개발자 페이지 에 접속해서 token 을 생성하면 된다.

그렇게 어려운 점은 없기 때문에 생성 > 확인 순으로 진행되면 token 이 생성된다.

Access Token 적용

연동이 완료되면, 스토리에 제플린 Zeplin 탭이 생성되었을 것이다.

탭을 누르면 생성한 Access Token 을 입력하는 칸이 있다.
이곳에 위에 생성한 Token 을 넣으면 연결이 완료된다.

레퍼런스

스토리북 제플린 애드온