메타, 1.3만 개 앱 지탱한 디자인 시스템 '아스트릭스' 오픈소스 공개

아스트릭스(Astryx)는 메타가 오픈소스로 공개한 프론트엔드 디자인 시스템이다. 메타 사내에서 8년 동안 발전하며 13,000개 이상의 애플리케이션을 구동해 온 핵심 기반이다. 가장 큰 특징은 인간 개발자와 AI 코딩 에이전트가 완벽히 동일한 규칙, 문서, CLI를 사용해 협업할 수 있도록 설계되었다는 점이다.

프로젝트는 MIT 라이선스 하에 현재 베타 상태로 제공된다. 리액트 19와 StyleX를 기반으로 구축되었으며, 150개 이상의 접근성 보장 컴포넌트, 7가지 프리셋 테마, 다크 모드, 업무용 템플릿, 전용 CLI를 패키지로 묶어 제공한다.

무엇을 할 수 있는가

기존 디자인 시스템 다수는 상위 API가 지나치게 닫혀 있거나 특정 스타일링 라이브러리를 강제하는 한계가 있었다. 아스트릭스는 이 지점을 깔끔하게 해결했다.

내부적으로 StyleX를 사용해 스타일을 작성하지만, 사용하는 개발자 입장에서는 이를 알 필요가 없다. 빌드 플러그인 없이 사전 빌드된 CSS를 불러오기만 하면 되며, Tailwind, CSS 모듈, 순수 CSS의 className으로 자유롭게 스타일을 덮어쓸 수 있다.

더 깊은 수준의 커스터마이징이 필요할 때는 CLI의 swizzle 기능을 제공한다. 특정 컴포넌트의 전체 소스코드를 프로젝트 내부로 추출해 직접 수정하고 관리할 수 있다.

테마 시스템은 CSS 커스텀 속성을 기반으로 작동한다. neutral, butter, chocolate, matcha 등 7가지 테마가 기본 제공되며, 컴포넌트를 래핑하거나 포크할 필요 없이 CSS 변수 수정만으로 손쉽게 브랜딩을 변경할 수 있다.

시작 방법과 AI 에이전트 활용

아스트릭스를 사용하려면 피어 의존성으로 리액트 19 이상이 필요하며, 개발 환경에는 Node 22 이상과 pnpm 11이 권장된다.

설치 방식은 간단하다. @astryxdesign/core와 테마 패키지, @stylexjs/stylex를 설치한 뒤 테마 프로바이더로 감싸주면 된다. 복잡한 PostCSS나 바벨 설정은 전혀 필요하지 않다.

AI 에이전트 지원도 핵심이다. 전용 도구인 @astryxdesign/cli를 전역 또는 프로젝트 단위로 설치하면, Cursor나 Claude Code 같은 코딩 에이전트가 컴포넌트 문서와 템플릿을 직접 조회하고 정밀하게 코드를 생성할 수 있다.

모든 컴포넌트가 동일한 네이밍 규칙과 속성 구조를 따르기 때문에, 인간 개발자뿐 아니라 AI도 낯선 컴포넌트의 동작 방식을 쉽게 예측할 수 있다.

현재 베타 단계인 만큼 차트 컴포넌트는 canary 태그로만 제공되며, 일부 실험실 컴포넌트는 아직 npm에 정식 공개되지 않았다.

왜 중요한가

리액트 19 기반의 새 프로젝트를 시작하거나 일상적으로 AI 에이전트를 활용해 프론트엔드를 개발하는 팀이라면 아스트릭스를 적극적으로 검토해 볼 만하다. 대규모 사내 서비스에서 검증된 UI 아키텍처를 AI 친화적인 인터페이스와 결합한 영리한 구조다.

shadcn/ui나 MUI 같은 대안들과 비교했을 때, 엔터프라이즈급 접근성 규격과 자유도 높은 swizzle 방식을 동시에 챙겼다는 점이 돋보인다. 다만 리액트 19가 필수라 기존 레거시 앱에 즉시 적용하기는 어렵고, 이제 막 공개된 만큼 커뮤니티의 검증 기간이 필요하다.