Maquina Components는 shadcn/ui에서 영감을 받아 실제 Rails 애플리케이션에서 사용되던 컴포넌트들을 통합하여 탄생했습니다. 초기 프로젝트별 일관성 부족 문제를 해결하기 위해 가장 많이 사용되는 요소들을 추출, 일관된 API와 스타일링을 갖춘 라이브러리로 발전시켰습니다.
기술적 선택
-
기반 기술: ERB 파셜, Tailwind CSS, Stimulus 컨트롤러(인터랙티브 요소), 순수 CSS(정적 컴포넌트)를 활용합니다.
-
대안 고려: ViewComponent 및 Phlex와 같은 Ruby 기반 컴포넌트 라이브러리 대신 ERB 파셜을 선택했습니다. 이는 ‘Rails 방식’에 대한 친숙도를 유지하고 팀의 도입 부담을 줄여 즉각적인 이해를 가능하게 하기 위함입니다.
포함된 컴포넌트
생산 애플리케이션에서 추출된 12가지 컴포넌트를 제공하며, 모든 컴포넌트는 CSS 변수를 통한 shadcn/ui 테마 컨벤션을 따르며 라이트/다크 모드를 기본 지원합니다.
- 주요 카테고리: 레이아웃(Sidebar, Header), 콘텐츠(Card, Alert, Badge, Table, Empty State), 내비게이션(Breadcrumbs, Dropdown Menu, Pagination), 인터랙티브(Toggle Group), 폼(Input, Select, Checkbox, Button) 등.
구성 가능성 (Composability)
-
컴포넌트들은 의도적으로 작게 설계되어 있습니다. 예를 들어, 카드는 여러 개의 파셜로 구성됩니다.
-
이는 개발자가 작은 파셜들을 조합하여 ProjectCard나 UserTable과 같이 애플리케이션 특화된 더 큰 컴포넌트를 유연하게 구축할 수 있도록 지원하며, 추상화 계층에 대한 완전한 소유권을 제공합니다.
Rails 프론트엔드 환경 내 포지셔닝
Rails 프론트엔드 개발에는 ViewComponent/Phlex, Inertia.js 등 다양한 접근 방식이 존재합니다. Maquina Components는 표준 ERB, 표준 Tailwind, 최소한의 JavaScript를 사용하여 서버 렌더링 Rails 애플리케이션에 새로운 패러다임 학습 없이 컴포넌트를 도입하고자 하는 개발자에게 실용적인 대안을 제시합니다.