사람과 AI가 같은 도구로 화면을 만드는 디자인 시스템
컴포넌트를 고르고 테마를 바꾸는 작업에서 사람과 AI 어시스턴트가 동일한 문법과 문서를 따릅니다. 메타에서 8년간 내부 앱 13,000개 이상에 쓰이며 다듬어진 오픈소스 디자인 시스템입니다. React 19와 StyleX 기반이지만, 사용자는 기존 CSS나 Tailwind로 스타일을 덮어쓸 수 있어 기존 프로젝트에 자연스럽게 녹아듭니다.
메타 내부에서 자라난 구조
Astryx는 메타 내부에서 8년간 사용되며 가장 많이 쓰인 디자인 시스템으로 성장했습니다. 현재 베타 버전으로 공개되며, 150개 이상의 접근성 준수 컴포넌트와 다크 모드, 즉시 배포 가능한 템플릿, CLI 도구를 하나의 체계로 묶어 제공합니다. 빌드 플러그인이나 별도 스타일링 라이브러리 설치 없이 미리 만들어진 CSS를 가져와 타입이 지정된 React 컴포넌트를 바로 씁니다. 이 구조 덕분에 개발자와 AI 어시스턴트가 동일한 참조 자료를 바탕으로 코드를 작성할 수 있습니다.
잠금 없는 커스터마이징
컴포넌트는 최상위 API에 갇히지 않고 어떤 수준에서든 조합할 수 있도록 설계되었습니다. 더 깊은 수정이 필요할 때 swizzle 명령으로 컴포넌트 전체 소스를 프로젝트로 가져와 직접 소유할 수 있습니다. 스타일링도 StyleX로 작성되었지만 사용자에게는 보이지 않으며, className을 통해 Tailwind, CSS 모듈, 일반 CSS 중 프로젝트에 맞는 방식으로 덮어쓸 수 있습니다. 테마는 CSS 커스텀 프로퍼티 오버라이드의 집합이므로, 디자이너가 포크나 래핑 없이 브랜드에 맞는 색상을 적용할 수 있습니다.
설치와 초기 설정
React 19 이상과 react, react-dom이 필요합니다. @astryxdesign/core, @astryxdesign/theme-neutral, @stylexjs/stylex를 설치하고 개발 의존성으로 @astryxdesign/cli를 추가합니다. PostCSS나 Babel 설정 없이 몇 줄의 CSS import와 테마 프로바이더만 추가하면 됩니다. CLI 접근을 안정화하려면 package.json의 scripts에 astryx 명령을 등록해 두는 것이 좋습니다. 이는 AI 어시스턴트나 신규 개발자가 CLI를 직접 호출할 때 경로 오류를 방지하기 위한 권장 사항입니다.
사람과 AI를 위한 원칙
Astryx는 강제보다 안내를 우선시합니다. 컴포넌트는 제약이 아닌 기능을 제공하며, 디자인 의견은 문서와 예시에 담겨 있습니다. 모든 컴포넌트는 동일한 네이밍, 프로프, 조합 규칙을 따르고 상세히 문서화되어 있어 몇 가지만 익히면 나머지도 예측 가능합니다. API, 규약, 문서, CLI가 함께 설계되어 사람이 편해진 변화는 AI에게도 동일하게 적용됩니다. 이러한 규약은 주장이 아닌 측정으로 검증되며, 새로운 상황이 틀렸음을 증명하면 재검토됩니다.
적용 전 확인 사항
현재 베타 단계이므로 안정성을 요구하는 프로덕션 환경에서는 주의가 필요합니다. @astryxdesign/lab은 npm에 공개되지 않으며, 차트 관련 패키지(vega, charts)는 @canary 태그로만 배포되어 안정 버전이 없습니다. MIT 라이선스로 공개되어 있어 상업적 사용이 가능합니다. React 19 생태계에 맞춘 프로젝트라면, 사람과 AI가 동일한 워크플로우를 공유해야 하는 팀에 적합합니다. 기존 스타일링 체계를 유지하면서 컴포넌트 일관성을 확보하고 싶다면 도입을 고려해 볼 만합니다.
