디자인 시스템 & 스토리북 배포

윤병현·2024년 11월 29일

Design System lily storybook

Lily

목록 보기

2/4

👀 지난 이야기....

지난 글에서 Turborepo에 대해서 이야기를 했었습니다.
그리고 마지막에 디자인 시스템을 어떻게 배포할건지 이번 글에서 설명한다고 그랬었는데요 바로 알아보도록 하죠

🎨 디자인 시스템을 왜 npm으로 배포하는가?

이전 글에서 Turborepo로 생성한 프로젝트를 통째로 Vercel에 업로드하면 Verce이 알아서 app 폴더안에 있는 서비스들을 각각 도메인을 부여해 배포한다는 말을 했었는데요 그럼 여기서 사용하는 ui 폴더 컴포넌트들은 어떻게 되는걸까요?
모노레포로 관리하고 있기 때문에 큰 문제 없이 사용할 수 있습니다.

하지만 저희는

배포 계획

메인 서비스 - AWS RCS로 배포
관리자 서비스 - Vecel로 배포
디자인 시스템 - npm에 배포
스토리북 - Vecel로 배포

요런식으로 배포하기로 했었습니다.

그러면 app안에 있는 특정 서비스들만 따로 Vercel로 선택하여 배포를 진행하여야합니다. 물론 Vercel에서 아주 친절하게 따로 배포할 수 있게 서비스를 제공해주고 있습니다.

저기서 스토리북을 선택하고 배포를 시작하게 되면 아래와 같은 에러가 뜰겁니다.

Error: No Output Directory named "dist" found after the Build completed. You can configure the Output Directory in your Project Settings.

자 이건 왜 뜨는걸까요?? 저도 몰라서 삽질 좀 했습니다.
생각을 곰곰히 해봤습니다. 여태 저의 프론트엔드 개발 인생을 되돌아보며....
보통 dist 폴더는 빌드를 하면 나오는 것인데.... 라고 생각했더니 번뜩 떠올랐습니다.

위와 같이 빌드한 후에 dist 폴더를 만들 수 있도록 명령어를 수정했습니다.

바로 성공해버리는 결과가 나와버렸습니다.

배포된 주소로 접속을 해보니 문제가 좀 있었습니다
저건 왜저럴까요?

사진에 26번째 줄을 보시면 스토리북에서 지금 packages/ui를 가져와서 사용하려고 합니다.
근데 저희는 배포를 어떻게 했었죠??
루트 디렉토리를 app/storybook으로 해주었습니다. 그러면 로컬 주소로 되어있는 저 폴더 위치를 따라가 ui를 절대 가져올 수가 없겠죠?
이럴땐 방법이 2가지가 있습니다.

첫번째 - 빌드할 때 ui 포함시키기

async viteFinal(config) {
  return {
    ...config,
    define: { "process.env": {} },
    resolve: {
      alias: [
        {
          find: "ui",
          replacement: resolve(__dirname, "../../../packages/ui/"),
        },
      ],
    },
    optimizeDeps: {
      include: ["../../../packages/ui"], // 빌드 시 포함
    },
  };
}

ui 패키지 파일을 Storybook 빌드에 포함시켜 배포 환경에서도 문제없이 사용할 수 있게 합니다.

두번째 - 별도 NPM 패키지로 배포

사실 첫 번째 방법이 편하고 좋습니다. 그럼에도 제가 이 방법을 선택한 이유는 지금은 스토리북에서 빌드때 포함시키는 방법은 알았지만 다른 프로젝트에서 어떻게 빌드할 때 포함시키는지 모르기 때문에 두 번째 방법을 선택했습니다.(그리고 npm에 배포 한 번 해보고 싶었음)

이런 이유들로 npm에 디자인 시스템을 배포하려고 하는데 어떤걸 해줘야할까요?

빌드 방법

번들러 선택
디자인 시스템(ui) 빌드 폴더(dist) 생성
npm 배포

생각보다 간단하죠??
일단 번들러를 골라야하는데 이번에 저는 "tsup"이라는 번들러를 선택해서 진행해보았습니다.

설명을 드리자면
tsup은 TypeScript로 작성된 코드를 빌드하기 위한 번들러입니다. 빠르고 간단하며, Zero-config(별도의 설정 없이 기본 설정으로 작동)로 유명합니다. 내부적으로 ESBuild를 사용하여 번들링 속도가 매우 빠릅니다.

tsup의 주요 특징

빠른 빌드 속도:
ESBuild를 사용하여 다른 번들러보다 훨씬 빠른 속도를 제공합니다.
Zero-config:
기본적으로 TypeScript 파일을 읽어들여 JavaScript로 컴파일하고, ESM, CommonJS 등 다양한 출력 형식을 지원합니다.
간단한 설정만으로도 충분히 동작합니다.
다양한 출력 형식:
CommonJS (cjs), ECMAScript Module (esm), UMD (umd), IIFE 등의 출력 형식을 지원합니다.
Tree Shaking:
사용하지 않는 코드를 제거하여 더 작은 번들 크기를 만듭니다.
간단한 사용법:
CLI를 통해 쉽게 실행할 수 있으며, 설정 파일을 사용하지 않아도 동작합니다.
TypeScript 지원:
TypeScript 컴파일을 기본적으로 지원하며, 타입 선언 파일(.d.ts)도 함께 생성할 수 있습니다.

저번에 pluma 디자인 시스템 만들땐 esbuild를 사용해서 했었는데 이것도 내부적으로 ESBuild를 사용해서 호감이 가더라구요.
그리고 검색하다가 안건데 Turborepo에서도 디자인 시스템 레포를 만들 수 있도록 지원을 해줍니다. 클릭 몇번으로 레포지토리 생성 및 배포까지 해주더라구요.
근데 거기서도 기본으로 설정해주는 번들러가 tsup입니다.