Search

Component Library Registry ์ „๋žต

06. Component Library Registry ์ „๋žต

์ „๋žต ๊ฐœ์š”

๋””์ž์ธ ์‹œ์Šคํ…œ์„ ๋ฒ„์ „ ๊ด€๋ฆฌ๋˜๋Š” npm ํŒจํ‚ค์ง€๋กœ ์ •์‹ ๋ฐฐํฌํ•˜๊ณ , Figma Library์™€ ๋ฒ„์ „ ๋ฒˆํ˜ธ๋กœ ๋ฝ์Šคํ…(lock-step) ์‹œ์ผœ ์ผ๊ด€์„ฑ์„ ์œ ์ง€ํ•˜๋Š” ์ „๋žต์ž…๋‹ˆ๋‹ค.
[Monorepo: design-system ํŒจํ‚ค์ง€] โ”‚ โ”œโ”€โ†’ npm publish v1.5.0 โ”‚ (Figma npm registry / GitHub Packages / npmjs) โ”‚ โ””โ”€โ†’ Figma Library v1.5.0 (Description์— ๋ฒ„์ „ ๋ช…์‹œ) โ”‚ โ–ผ [๋ชจ๋“  ์‚ฌ์šฉ์ฒ˜๊ฐ€ ๋™์ผ ๋ฒ„์ „ ๊ฐ•์ œ]
Plain Text
๋ณต์‚ฌ

ํ•ต์‹ฌ ๋„๊ตฌ

โ€ข
Monorepo: pnpm workspaces / Turborepo / Nx
โ€ข
Changesets: ๋ฒ„์ „ ์ž๋™ํ™” + Changelog ์ƒ์„ฑ
โ€ข
Figma npm registry (๋˜๋Š” GitHub Packages, Verdaccio)
โ€ข
Figma Library Versioning (์ˆ˜๋™ + Description ์‚ฌ์šฉ)

์ ์šฉ ์‹œ๋‚˜๋ฆฌ์˜ค

โ€ข
๋‹ค์ˆ˜์˜ ์ œํ’ˆ์ด ๊ฐ™์€ ๋””์ž์ธ ์‹œ์Šคํ…œ์„ ๊ณต์œ  (๋ฉ€ํ‹ฐ ํ”„๋กœ๋•ํŠธ ์กฐ์ง)
โ€ข
์™ธ๋ถ€ ํŒŒํŠธ๋„ˆ/SDK ์‚ฌ์šฉ์ž์—๊ฒŒ ๋””์ž์ธ ์‹œ์Šคํ…œ ๋ฐฐํฌ
โ€ข
์—„๊ฒฉํ•œ SemVer ๋ฒ„์ „ ๊ด€๋ฆฌ ํ•„์š”
โ€ข
์ปดํฌ๋„ŒํŠธ ๋ผ์ดํ”„์‚ฌ์ดํด(Alpha โ†’ Beta โ†’ Stable โ†’ Deprecated) ๊ด€๋ฆฌ ํ•„์š”

๋‹จ๊ณ„๋ณ„ ์›Œํฌํ”Œ๋กœ

1) ๋ชจ๋…ธ๋ ˆํฌ ๊ตฌ์„ฑ

my-design-system/ โ”œโ”€โ”€ packages/ โ”‚ โ”œโ”€โ”€ tokens/ # ๋””์ž์ธ ํ† ํฐ โ”‚ โ”œโ”€โ”€ icons/ # ์•„์ด์ฝ˜ ์„ธํŠธ โ”‚ โ”œโ”€โ”€ react/ # React ์ปดํฌ๋„ŒํŠธ โ”‚ โ””โ”€โ”€ docs/ # Storybook โ”œโ”€โ”€ .changeset/ โ””โ”€โ”€ package.json
Plain Text
๋ณต์‚ฌ

2) Changesets ์„ค์ •

pnpm add -Dw @changesets/cli pnpm changeset init
Bash
๋ณต์‚ฌ
PR๋งˆ๋‹ค .changeset/*.md ์ž‘์„ฑ:
--- "@my-org/react": minor --- Button: add `loading` prop
Markdown
๋ณต์‚ฌ

3) ์ž๋™ ๋ฒ„์ „ + ๋ฐฐํฌ

GitHub Actions:
- name: Create Release Pull Request or Publish uses: changesets/action@v1 with: publish: pnpm release env: NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
YAML
๋ณต์‚ฌ

4) Figma Library ๋ฒ„์ „ ์ •๋ ฌ

โ€ข
Figma Library ๊ฒŒ์‹œ ์‹œ Description์— ๋ฒ„์ „ ๋ช…์‹œ: v1.5.0
โ€ข
๋™์ผ ๋ช…์„ธ๋กœ Figma ์ปดํฌ๋„ŒํŠธ ์—…๋ฐ์ดํŠธ
โ€ข
๋ณ€๊ฒฝ ์‚ฌํ•ญ์„ Figma Library Description์— Changelog ํ˜•ํƒœ๋กœ ๊ธฐ๋ก

5) ์‚ฌ์šฉ์ฒ˜ ๋ฝ์Šคํ…

์‚ฌ์šฉ์ฒ˜ package.json:
{ "dependencies": { "@my-org/react": "1.5.0" } }
JSON
๋ณต์‚ฌ
โ€ข
Renovate / Dependabot์œผ๋กœ ์ž๋™ ์—…๋ฐ์ดํŠธ PR
โ€ข
PR ๋จธ์ง€ ์ „ Figma Library ๋ฒ„์ „๋„ ํ•จ๊ป˜ ์—…๋ฐ์ดํŠธํ–ˆ๋Š”์ง€ ์ฒดํฌ๋ฆฌ์ŠคํŠธ

Figma npm Registry ํ™œ์šฉ

์‚ฌ์šฉ ์ธก .npmrc:
@figma:registry=https://registry.figma.com //registry.figma.com/:_authToken=${FIGMA_TOKEN}
Plain Text
๋ณต์‚ฌ
์„ค์น˜:
npm install @figma/your-design-system
Bash
๋ณต์‚ฌ

์žฅ์ 

โ€ข
๋ถˆ๋ณ€์„ฑ: ํ•œ๋ฒˆ ๊ฒŒ์‹œ๋œ v1.5.0์€ ์˜์›ํžˆ ๋™์ผ
โ€ข
๋ช…ํ™•ํ•œ SemVer: Breaking Change ์ถ”์  ์šฉ์ด
โ€ข
๋‹ค์ค‘ ์ œํ’ˆ ์ผ๊ด€์„ฑ
โ€ข
์™ธ๋ถ€ ๋ฐฐํฌ ๊ฐ€๋Šฅ

ํ•œ๊ณ„

โ€ข
Figma Library๋Š” ์ง„์ •ํ•œ ๋ฒ„์ €๋‹์ด ๋ถ€์กฑ โ†’ Description์œผ๋กœ ์šฐํšŒ
โ€ข
๋ฉ”์ด์ € ์—…๊ทธ๋ ˆ์ด๋“œ ์‹œ ๋งˆ์ด๊ทธ๋ ˆ์ด์…˜ ๋ถ€๋‹ด
โ€ข
๋ชจ๋…ธ๋ ˆํฌ ์šด์˜ ๋…ธํ•˜์šฐ ํ•„์š”
โ€ข
Figma npm registry๋Š” ๋ฒ ํƒ€ ๋‹จ๊ณ„

Make์™€์˜ ๊ฒฐํ•ฉ

โ€ข
Make์—์„œ๋„ npm ํŒจํ‚ค์ง€ import ๊ฐ€๋Šฅ โ†’ ๋™์ผ ๋””์ž์ธ ์‹œ์Šคํ…œ ์‚ฌ์šฉ
โ€ข
Make ์‚ฐ์ถœ๋ฌผ์€ ๊ฒฐ๊ตญ ์ด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์˜ ์ธ์Šคํ„ด์Šค ์กฐํ•ฉ

๋‹ค๋ฅธ ์ „๋žต๊ณผ์˜ ๊ฒฐํ•ฉ

โ€ข
04 (Design Tokens): tokens ํŒจํ‚ค์ง€๋ฅผ ๋ณ„๋„ publish
โ€ข
05 (Storybook SoT): docs ํŒจํ‚ค์ง€๋กœ Storybook ๋ฐฐํฌ
โ€ข
07 (MCP ์ž๋™ํ™”): MCP๊ฐ€ ํ•ญ์ƒ ์ตœ์‹  ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๋ฒ„์ „ ์ฐธ์กฐ