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๊ฐ ํญ์ ์ต์ ๋ผ์ด๋ธ๋ฌ๋ฆฌ ๋ฒ์ ์ฐธ์กฐ
