System Architecture

원문: https://github.com/facebook/astryx/wiki/System-Architecture · 번역 기준: 2026-09-03

Astryx는 내부 도구와 제품을 만들기 위한 design system입니다. 세 부류의 대상을 섬깁니다: UI를 구축하는 제품 빌더, 시각적 정체성을 정의하는 테마 작성자, 그리고 코드를 생성하는 AI 어시스턴트. 이 페이지는 오늘날 존재하는 그대로의 시스템을 설명합니다.

Authoring / 아키텍처 리뷰: 최소 컴포넌트 템플릿과 시스템 lookup은 Architecture Cheat Sheet에서 시작하세요.

Astryx란 무엇인가

사전 컴파일된 CSS와 타입이 지정된 React 컴포넌트를 배포하는 컴포넌트 라이브러리입니다. 소비자는 CSS 파일을 import하고 props를 사용합니다 — 빌드 플러그인도, 스타일링 라이브러리도 필요 없습니다. 내부적으로 Astryx는 authoring에 StyleX를 사용하지만(Why StyleX 참조), 그것은 소비자가 상호작용하지 않는 구현 세부사항입니다.

import '@astryxdesign/core/astryx.css';
import { Button, Stack, Card } from '@astryxdesign/core';

<Stack gap="md">
  <Card>
    <Button variant="primary">Save</Button>
  </Card>
</Stack>

90개 이상의 컴포넌트. 열 개의 퍼블리시된 패키지(core, cli, build, 그리고 일곱 개의 테마). 무엇이 배포되고 어떻게 배포되는지는 Distribution을 참조하세요.

빌더의 작업(Jobs)

Astryx는 세 가지 작업에 걸쳐 개발자를 섬깁니다. 각 작업은 서로 다른 인터페이스와 서로 다른 수준의 제어를 가집니다.

작업	빌더가 원하는 것	Astryx 인터페이스
페이지 구축	"컴포넌트로 UI를 만들고 싶다"	컴포넌트 API — 타입이 지정된 props, 컴포지션
시각 스타일 설정	"내 프로젝트의 look and feel을 정의하고 싶다"	`defineTheme()` — CSS custom properties
컴포넌트 커스터마이징	"테마가 제공하는 것 이상으로 무언가를 바꾸고 싶다"	`className`, 안정적인 클래스 이름, swizzle

에스컬레이션 경로

Props (use a component as designed)
  ↓ need different colors/spacing?
Theme tokens (defineTheme with token overrides)
  ↓ need different component-level styles?
Theme component overrides (defineTheme with components config)
  ↓ need different structure or behavior?
className + CSS (target stable class names)
  ↓ need full control?
Swizzle (eject the component source, own it)

각 단계는 더 많은 책임을 대가로 더 많은 제어를 줍니다. 대부분의 빌더는 theme token 이상으로 넘어가지 않습니다.

커스터마이징

최소 노력에서 최대 제어까지. 각 레벨은 더 많은 책임을 대가로 더 많은 힘을 줍니다.

Props (설계된 대로 컴포넌트 사용)

Props는 스타일이 아니라 의도를 정의합니다. 컴포넌트는 제약된 옵션들 — variant, size, slot — 을 노출하고 스타일링은 내부에서 처리합니다.