TL;DR

Astr yx는 Meta 내부에서 8년간 확장되어 13,000개 이상의 앱에서 사용된 설계 관례를 오픈소스로 제공하는 디자인 시스템이다. 이 시스템은 150개 이상의 접근성 고려 컴포넌트와 CSS custom property 기반 테마, TypeScript 타입을 갖춘 컴포넌트, 그리고 문서·템플릿·스캐폴딩을 지원하는 CLI를 한 벌로 제공하여 일관성과 생산성을 동시에 높인다. 내부 스타일은 StyleX로 관리되지만 소비자가 Tailwind나 CSS modules 같은 기존 스타일 도구로 오버라이드할 수 있게 설계되어 마이그레이션 비용을 낮추며, swizzle 기능을 통해 컴포넌트를 프로젝트로 이젝트하여 심층 커스터마이징이 가능하다. 베타 단계이므로 도입 전 패키지별 문서와 내부 실험용 패키지(예: lab, vega)가 퍼블리시되지 않은 부분을 확인해야 한다.

핵심 포인트

• 구성 요소의 내부 구현을 공개하여 필요한 경우 컴포넌트를 프로젝트로 완전히 이젝트하고 직접 수정할 수 있게 하는 'open internals' 접근 방식을 취한다.
• 스타일 시스템으로 StyleX를 사용하되 소비자가 className으로 Tailwind나 CSS modules와 같은 기존 도구를 그대로 적용할 수 있도록 호환성을 유지한다.
• 테마를 CSS custom property 오버라이드로 단순화하여 포크나 래핑 없이 디자이너가 룩앤필을 빠르게 변경할 수 있게 설계되었다.
• 150개 이상의 접근성 고려 컴포넌트를 TypeScript 타입과 함께 제공하여 편집기 기반 자동완성과 정적 검증을 가능하게 한다.