Shadcn UI 라디오 버튼, 과도한 복잡성 논란!

Shadcn UI의 라디오 버튼은 Radix Primitives와 Tailwind CSS를 사용하여 구현되었으며, 이는 과도한 코드량과 불필요한 종속성을 유발한다는 비판을 받았다. 특히, 3개의 import와 45줄의 코드는 단순한 라디오 버튼 구현에 비해 과도하다는 지적이다. 또한, SVG 아이콘을 위해 별도의 아이콘 라이브러리(Icon Library)를 사용하는 것 역시 불필요한 복잡성을 더한다는 의견이 제기되었다.

Shadcn UI가 Radix Primitives를 사용하는 이유는 접근성(Accessibility)을 향상시키기 위함이다. Radix는 ARIA 속성(ARIA Attributes)을 사용하여 스크린 리더와 같은 보조 기술에 라디오 버튼의 의미를 전달한다. 하지만, HTML 기본 요소를 재사용하지 않고, ARIA 속성을 추가하는 방식은 ARIA 사용 규칙(ARIA Usage Rule)에 위배된다는 비판도 존재한다. 즉, 접근성을 위해 복잡성을 감수하는 트레이드오프(Trade-offs)가 발생한 것이다.

일부 개발자들은 CSS 스타일링을 통해 라디오 버튼을 더 간단하게 구현할 수 있다고 주장한다. `appearance: none`을 사용하여 기본 스타일을 제거하고, `::before` 의사 요소를 사용하여 커스텀 디자인을 적용할 수 있다. 이러한 방식은 별도의 종속성 없이 CSS 지식(CSS Knowledge)만으로 구현 가능하며, Shadcn UI의 30개 이상의 Tailwind 클래스보다 간결하다는 평가다. 하지만, 브라우저 호환성(Browser Compatibility)을 고려해야 한다는 단점도 존재한다.

이번 논쟁은 UI 컴포넌트 라이브러리의 역할과 복잡성에 대한 근본적인 질문을 제기한다. React 생태계(React Ecosystem)에서 UI를 구축하는 데 필요한 복잡성을 줄이기 위해 라이브러리를 사용하지만, 오히려 과도한 추상화와 종속성으로 인해 코드의 유지보수성을 저해할 수 있다는 지적이다. 특히, 새로운 개발자가 프로젝트에 합류할 때 학습 곡선(Learning Curve)이 높아진다는 점도 문제로 제기된다.