Astryx - Meta가 공개한 오픈소스 디자인 시스템
(astryx.atmeta.com)- React와 StyleX 기반으로 완전한 커스터마이징과 에이전트 대응이 특징
- 접근성과 브랜드 테마 적용이 가능한 160개 이상의 React 컴포넌트를 갖추고, 다크모드, 즉시 배포 가능한 템플릿, CLI를 하나의 통합 시스템으로 제공
- Meta 내부에서 지난 8년간 성장해 가장 많이 쓰이고 규모가 가장 큰 디자인 시스템으로, 13,000개 이상의 앱을 구동하며 엔지니어/디자이너/제품 팀에 의해 다듬어짐
- 색상/간격/radius/타이포그래피 등 모든 디자인 토큰을 CSS 커스텀 속성으로 제공하는 다수의 테마 지원
- 커맨드라인 또는 MCP를 통해 프로젝트 스캐폴딩, 템플릿 탐색, 테마 생성, 에이전트용 문서 확보 가능해 AI 코딩 도구와 결합
- AI 코딩 도구에 초기 설치 지시문을 붙여넣으면
npx astryx init실행으로 에이전트 문서 자동 설정
- AI 코딩 도구에 초기 설치 지시문을 붙여넣으면
- 개방된 내부 구조(Open internals): 컴포넌트가 닫힌 최상위 API에 갇히지 않고 어느 수준에서든 조합 가능하며, 필요한 빌딩 블록을 직접 export
swizzle기능으로 컴포넌트 전체 소스를 프로젝트로 추출해 직접 소유 가능
- 스타일링 종속(락인) 없음: 내부적으로 StyleX로 스타일을 작성하지만 사용자에게는 드러나지 않으며,
className을 통해 Tailwind/CSS modules/plain CSS로 오버라이드 가능 - 강조하지 않고 능력을 제공하는 가이드 우선(Guidance over enforcement) 원칙 - 값을 전달하면 컴포넌트가 그대로 렌더링, 디자인 의견은 문서와 예제에 포함
- 모든 컴포넌트가 동일한 네이밍/prop/조합 규칙을 따르고 문서화되어, 사람과 AI 모두 낯선 컴포넌트 동작을 예측 가능
- CLI가 컴포넌트/토큰/템플릿/문서 레퍼런스 역할 수행
npx astryx component(컴포넌트 목록),npx astryx docs(문서 주제),npx astryx template --list(페이지 템플릿),npx astryx docs tokens(간격/색상/radius 참조)
- 아키텍처: 3계층 구성
- Foundations: 타이포그래피, 색상, 레이아웃, 접근성 등 시각적 일관성의 빌딩 블록
- Components: 완전한 TypeScript 지원의 150개 이상 재사용 UI 빌딩 블록
- Patterns: 테이블 페이지, 상세 페이지 레이아웃, 폼 위저드, 네비게이션, 데이터 입력 플로우 등 검증된 설계 솔루션
- 콘텐츠만 넣으면 되는 프로덕션 레디 템플릿과, 라우팅/테마/컴포넌트가 연결된 완전한 예제 앱 제공
- MIT 라이선스
댓글과 토론
이 말인 즉슨 최소 13000의 react 앱이 메타 내부에서 굴러간다는데 메타가 리액트를 놓지 못하고 계속 끌고가야하는 동기가 엿보이네요
다른 라이브러리들은 너도나도 signal 도입하는데 리액트는 못하고 리액트 컴파일러까지 만들어가면서 리렌더링 붙잡고 있는 현황도
문득 혹시나 내부 코어 라이브러리가 dom 리렌더링에 의존하는 식으로 짜여져있어서 쉽사리 못바꾸는 건 아닐까 하는 생각이 드네요