메타(Meta)가 내부에서 8년 동안 개발·운영해온 React 기반 디자인 시스템 ‘Astryx’를 베타 버전으로 오픈소스 공개했다. Astryx는 메타의 컴파일타임 CSS 엔진 StyleX 위에 구축됐으며, 90개 이상의 React 컴포넌트, 10가지 사전 제작 테마, 대시보드·설정·폼 등의 페이지 단위 템플릿을 제공한다. Facebook·Instagram·WhatsApp·Threads 등 메타 서비스에서 이미 실전 검증된 StyleX가 기반 엔진이며, Figma·Snowflake 같은 외부 기업도 StyleX를 사용하고 있다.
Astryx의 핵심 차별점은 AI 에이전트가 직접 읽고 활용할 수 있는 구조다. 각 컴포넌트에 조합 힌트가 담긴 JSDoc 주석이 달려 있으며, `astryx`(약칭 `xds`) CLI와 MCP(모델 컨텍스트 프로토콜) 서버를 함께 제공한다. CLI는 `npx astryx manifest –json` 명령으로 모든 커맨드·인자·플래그·응답 타입을 JSON 형태로 반환하는 자기 서술 매니페스트를 지원해, AI 에이전트가 `–help` 텍스트를 파싱하지 않고도 CLI 전체 명세를 한 번에 파악할 수 있다. 이를 통해 에이전트가 설정 페이지 스캐폴딩, 컴포넌트 문서 조회, 전체 페이지 소스 생성 등을 구조적으로 수행할 수 있다.
테마 시스템은 CSS 변수 계단식(cascade) 방식으로 동작한다. default·neutral·daily·butter·chocolate·matcha·stone·gothic·brutalist·y2k 등 10가지 테마를 기본 제공하며, 변수 값만 교체하면 모든 컴포넌트가 일괄적으로 재스타일된다. 컴포넌트 코드 수정 없이 브랜드 전환이 가능해 멀티브랜드 제품에 적합하다. 설치는 Next.js·Vite·Tailwind 모두 지원하며, MIT 라이선스로 상업적 이용이 가능하다. 코드베이스의 약 4분의 3이 TypeScript로 작성됐다.
현재 Astryx는 공개 베타 단계로, CLI 버전은 0.0.14에 머물러 있어 API 변경 가능성이 있다. shadcn/ui와 비교하면 컴포넌트 조합·CLI 스캐폴딩 방식은 유사하지만, StyleX 컴파일타임 스타일링과 MCP 기반 에이전트 도구 지원이 차별화 요소다. 메타는 Astryx가 내부 평가·모니터링 대시보드 구축, 에이전트가 생성하는 UI, 멀티브랜드 제품 개발 등 세 가지 주요 활용 시나리오를 염두에 두고 있다고 밝혔다.
저작권자 © STORIUM 무단전재 및 재배포 금지
