Show GN: AriaX - React Aria와 StyleX로 구현한 shadcn/ui 컴포넌트 레지스트리

AriaX, React Aria와 StyleX로 구현한 shadcn/ui 컴포넌트 레지스트리를 소개합니다. 아마 많은 분들이 shadcn/ui를 좋아하실 듯합니다. 저도 shadcn/ui의 깔끔한 기본스타일과 쉬운 커스터마이징이 좋아서 잘 쓰고 있습니다. 하지만 shadcn/ui가 사용하는 Tailwind CSS에 대해서는 때때로 불편함을 느낍니다. Tailwind CSS는 스페이싱을 규격화해주고 일부 경우 약간의 CSS 입력을 간편하게 해주지만 그 대가로 "이 CSS 설정을 하려면 Tailwind CSS에서는 뭘 해야하지?"같은 고민을 해야합니다. 더 나아가 shadcn/ui와 Tailwind CSS가 결합되어 있으므로, Tailwind CSS를 원하지 않거나 새로운 CSS 라이브러리를 시험해보고 싶어도 선택의 여지가 많지 않았습니다. 그래서 AriaX를 만들었습니다. AriaX는 shadcn/ui의 공식 React Aria 기반 버전을 구현 기준으로 삼았습니다. 생성된 DOM/계산된 CSS 속성이 일치하는 것을 목표로 개발했기에, 신규 컴포넌트 라이브러리지만 버그를 줄일 수 있었습니다. 공식 홈페이지의 예제 코드를 Storybook 스토리로 자동 변환하고 shadcn/ui 공식 버전과 AriaX 버전으로 렌더해서 비교하며, 일부 애니메이션 및 인터랙션은 AI가 생성한 보조 테스트로 시험했습니다. 버그를 줄이기 위해서 공식 버전과 일치하는 생성물을 만들었기에, 처음부터 StyleX로 자연스럽게 구현한 코드와 약간 다른 스타일의 코드가 있습니다. 또한, 원본과 최대한 일치하게 하다 보니 원본의 일부 버그까지 잠재적으로 동일하게 가질 수 있습니다. 하지만 StyleX로 스타일을 설정할 수 있는 shadcn/ui 컴포넌트 라이브러리를 찾으신다면 좋은 선택이 될 것이라 생각합니다. https://garrettjavalia.github.io/shadcn-ariax/ 에서 실제로 동작하는 예제를 간단히 살펴보실 수 있습니다. pnpm dlx shadcn@4.21.1 add garrettjavalia/shadcn-ariax/button 로 설치하실 수 있습니다. 현재 공식 레지스트리 디렉토리 등록을 준비 중이므로 등록이 완료되면 pnpm dlx shadcn@4.21.1 add @ariax/button 와 같이 간편하게 설치 가능할 예정입니다. shadcn/ui나 StyleX를 처음 써보신다면 저 설치 명령어 말고도 약간의...