Tooling Terms
이 문서가 답하는 질문: Panda·Tailwind·Style Dictionary·Storybook·Changesets 등 디자인 시스템을 짓고 배포하는 도구의 어휘가 정확히 무엇을 가리키는가? 한 줄 답 (Pyramid Top): 이 카테고리는 “토큰과 컴포넌트를 코드·문서·패키지로 변환하는 도구 체인” 의 어휘다.
카테고리 개요
| 키워드 | 한 줄 정의 |
|---|---|
| Panda CSS | Zero-runtime + 타입 안전 recipe CSS-in-JS |
| Tailwind CSS | utility-first CSS 프레임워크 |
| Style Dictionary | DTCG → 플랫폼별 출력 변환 도구 |
| Storybook | 컴포넌트 카탈로그 + Living Docs |
| Changesets | 모노레포 버전·릴리스 관리 |
본문 (알파벳 순)
@theme directive
카테고리: Tooling 별칭: Tailwind v4 theme directive
Tailwind CSS v4의 CSS-first config. @theme { --color-primary: oklch(...); }로 토큰을 정의. JS config(tailwind.config.ts)의 대체.
관련: Tailwind CSS, JIT 참고: 07-panda-tailwind-interop
Autodocs (Storybook)
카테고리: Tooling 별칭: Storybook autodocs, docs page
Storybook의 자동 문서 생성 기능. argTypes·JSDoc를 읽어 props 표를 만든다. tags: ["autodocs"] 한 줄로 활성화.
Build-time vs Runtime CSS
카테고리: Tooling 별칭: zero-runtime, runtime CSS-in-JS
CSS를 빌드 타임에 생성(Panda, vanilla-extract) 하는지 런타임에 생성(styled-components, Emotion) 하는지의 분기. RSC와의 호환성이 결정적.
관련: Zero-runtime, Panda CSS, JIT
Changesets
카테고리: Tooling 별칭: @changesets/cli
모노레포 패키지별 버전 관리 도구. 변경마다 .changeset 마크다운을 만들고, CI에서 자동으로 changelog·publish.
관련: Versioning, Turborepo 참고: 08-pipeline-distribution
Chromatic
카테고리: Tooling 별칭: Chromatic by Storybook team
Storybook 스토리를 클라우드에서 스크린샷 비교하는 VRT 서비스. PR 단위 시각 회귀 자동 검출.
관련: Visual Regression Testing, Storybook
Codegen (build-time)
카테고리: Tooling 별칭: code generation, ts-codegen
Panda는 빌드 타임에 styled-system/ 폴더에 타입·함수·CSS를 생성. panda codegen이 그 명령어. TS context를 자동 갱신.
Generated Output (styled-system/)
카테고리: Tooling 별칭: outdir, panda output
Panda가 자동 생성하는 프로젝트 내 폴더. css(), cva(), sva(), recipe 함수, 토큰 타입이 들어있다. .gitignore 권장.
JIT (Just-In-Time)
카테고리: Tooling 별칭: on-demand compilation
Tailwind 2.x → 3.x의 핵심 변화. 사용된 className만 그때그때 생성. 결과 CSS는 KB 단위, 옛 모드는 MB 단위였다.
관련: Tailwind CSS, PostCSS, Zero-runtime
Lightning CSS
카테고리: Tooling 별칭: lightningcss, parcel css
Rust로 작성된 초고속 CSS 파서·트랜스파일러. Tailwind v4의 내부 엔진. PostCSS보다 수십 배 빠르다.
관련: PostCSS, Tailwind CSS
MDX
카테고리: Tooling 별칭: Markdown + JSX
Markdown 안에 JSX 컴포넌트를 임베드. Storybook docs, Nextra, Docusaurus의 사실상 표준 문서 포맷.
관련: Autodocs, Living Documentation
Monorepo
카테고리: Tooling 별칭: monorepo workspace
여러 패키지를 한 git repo에 두는 구조. pnpm workspaces + Turborepo가 사실상 표준. 디자인 시스템은 tokens / core / icons / themes로 분할.
관련: Turborepo, pnpm, Changesets
Panda CSS
카테고리: Tooling 별칭: pandacss, panda
Chakra UI 팀의 zero-runtime + 타입 안전 recipe CSS-in-JS. 빌드 타임에 정적 CSS 생성. RSC 호환. 2023~ 출시.
관련: Recipe, Zero-runtime, Codegen 참고: 07-panda-tailwind-interop
panda.config.ts
카테고리: Tooling 별칭: Panda config
Panda의 설정 파일. defineConfig({ theme, conditions, recipes }). 토큰·테마·조건·recipe를 모두 여기서 선언.
pnpm
카테고리: Tooling 별칭: pnpm workspaces
링크 기반 패키지 매니저. 디스크 절약 + 빠른 설치. 디자인 시스템 모노레포의 사실상 표준.
PostCSS
카테고리: Tooling 별칭: postcss plugin chain
CSS를 파싱·변환하는 JS 도구. Tailwind v3, autoprefixer, cssnano가 PostCSS 플러그인. v4는 Lightning CSS로 이전.
관련: Lightning CSS, Tailwind CSS
Preset (Panda/Tailwind)
카테고리: Tooling 별칭: theme preset, config preset
토큰·recipe 묶음을 재사용 가능한 모듈로 만든 것. Panda는 presets: [pandaPreset], Tailwind는 presets: [...]로 결합.
관련: Panda CSS, Tailwind CSS
Storybook
카테고리: Tooling 별칭: SB, Storybook 8
컴포넌트를 고립된 환경에서 렌더링·문서화하는 도구. addon 생태계가 핵심 가치. Chromatic·a11y·viewport·controls.
관련: Autodocs, Chromatic, MDX 참고: 08-pipeline-distribution
Style Dictionary
카테고리: Tooling 별칭: Amazon Style Dictionary
Amazon이 만든 DTCG → 다중 플랫폼 출력 변환 도구. transforms + formats로 CSS·iOS·Android·Flutter 동시 생성. 토큰 codegen의 사실상 표준.
관련: DTCG, Codegen, Transformation 참고: 08-pipeline-distribution
Tailwind CSS
카테고리: Tooling 별칭: tw, Tailwind v4
Adam Wathan의 utility-first CSS 프레임워크. v3는 JIT + JS config, v4(2025)는 Lightning CSS + @theme CSS-first config.
관련: @theme directive, JIT, PostCSS, Lightning CSS
참고: 07-panda-tailwind-interop
tailwind.config.ts
카테고리: Tooling 별칭: Tailwind config
Tailwind v3의 설정 파일. theme.extend로 토큰 정의. v4는 @theme directive로 CSS 안에서 정의하는 방식으로 이전.
관련: Tailwind CSS, @theme directive
tsup
카테고리: Tooling 별칭: tsup bundler
esbuild 기반 TypeScript 라이브러리 번들러. ESM/CJS dual + d.ts 동시 생성. 디자인 시스템 패키지 번들링의 사실상 표준 옵션.
관련: Monorepo, TypeScript
Turborepo
카테고리: Tooling 별칭: turbo, Vercel Turborepo
Vercel의 모노레포 빌드 캐시·태스크 오케스트레이션. turbo run build 한 줄로 의존성 순서대로 병렬 실행.
관련: Monorepo, pnpm, Changesets 참고: 08-pipeline-distribution
TypeScript (in design systems)
카테고리: Tooling 별칭: TS contract, typed tokens
디자인 시스템의 contract를 컴파일 타임에 강제하는 핵심 도구. 토큰 키·variant 값·prop 타입을 모두 좁힌다.
관련: VariantProps, Contract
Zero-runtime CSS-in-JS
카테고리: Tooling 별칭: build-time CSS-in-JS, static extraction
JS로 스타일을 작성하지만 빌드 시점에 모두 CSS로 추출하고 런타임 비용 0. Panda, vanilla-extract, Linaria, Astro의 sytling이 대표.
관련: Panda CSS, Build-time vs Runtime CSS 참고: 07-panda-tailwind-interop
요약 + Mermaid
이 카테고리는 짓고 배포하는 도구의 어휘다. Panda + Tailwind(스타일링), Style Dictionary(토큰 codegen), Storybook + Chromatic(문서·VRT), Changesets + Turborepo(릴리스)의 네 축이 표준 스택.