메타, 리액트 디자인 시스템 '아스트릭스' 오픈소스 공개

ai.euno.news 자동 뉴스 요약

메타(Meta)가 사내에서 8년간 개발해 온 리액트(React) 기반 디자인 시스템 ‘아스트릭스(Astryx)‘를 베타 버전으로 오픈소스 공개했다. 리액트 19와 메타의 빌드타임 CSS-in-JS 컴파일러 스타일엑스(StyleX)를 기반으로 하며, 접근성을 갖춘 UI 컴포넌트 150여 개와 커스터마이징 가능한 CSS 디자인 토큰, 그리고 엔지니어뿐 아니라 AI 에이전트를 겨냥한 전용 CLI·MCP 툴링을 함께 제공한다.¹

아스트릭스의 핵심 설계 원칙은 컴포넌트의 동작·접근성 준수와 외형 표현을 분리하는 것이다. 색상 팔레트, 타이포그래피 위계, 모서리 반경 같은 외형은 중앙화된 디자인 토큰 계층에서 관리한다. 실제 스타일링은 스타일엑스가 담당해, 결정론적이고 충돌 없는 원자 단위 CSS를 빌드 시점에 생성한다. 컴포넌트는 컴파일 타임에 타입이 검증되는 xstyle 속성을 통해 스타일을 오버라이드받는다.

import * as stylex from '@stylexjs/stylex';

const overrides = stylex.create({
  card: { maxWidth: 400, marginBlock: 16 },
  saveButton: { alignSelf: 'flex-end' },
});

<Card xstyle={overrides.card} />
<Button label="Save" xstyle={overrides.saveButton} />

코어 패키지 @astryxdesign/core는 미리 컴파일된 CSS 파일과 타입이 지정된 리액트 컴포넌트를 함께 배포한다. 동시에 컴포넌트는 표준 className도 그대로 지원해, 별도의 컴파일러 설정 없이 테일윈드(Tailwind)나 CSS 모듈, 일반 스타일시트와도 섞어 쓸 수 있다. 컴포넌트 동작을 바꾸고 싶을 때는 리액트의 표준 합성 패턴을 쓰면 되지만, 내부 상태나 DOM 구조처럼 외부에 노출되지 않은 구현에 접근해야 하는 경우엔 CLI의 swizzle 명령으로 컴포넌트 소스 전체를 저장소로 이젝트할 수 있다. 다만 이젝트한 순간부터 해당 코드의 유지보수 책임은 개발자에게 넘어간다.

메타는 아스트릭스가 AI 워크플로를 기본으로 지원한다고 밝혔다. @astryxdesign/cli와 별도의 MCP 엔드포인트를 통해 AI 에이전트가 디자인 토큰과 컴포넌트 사양을 직접 참조하며 코드를 생성하거나 수정할 수 있도록 한 것이 특징이다. 라이선스는 MIT이며, 리액트 19 이상 환경이 필요하다.

공개 직후 레딧(Reddit)에서는 메타가 주도하는 프레임워크의 장기 유지보수와 거버넌스에 대한 우려가 제기됐다. 한편 일부 개발자는 벌써 아스트릭스의 토큰 구조와 컴포넌트 사양을 스벨트(Svelte) 5, 플러터(Flutter) 등 다른 UI 런타임으로 이식하는 작업에 착수한 것으로 전해졌다.¹

읽기 목록은 이 브라우저에 저장됩니다.