Kidow

결제 화면은 항목이 많고 예외 상황이 까다로운데(비례 배분, 결제 실패, 체험 만료, 해지 만류) 그 목록을 통째로 갖고 있어 무엇을 만들어야 하는지 체크리스트로도 쓸 만하다. 저장된 것 중 청구 관련 조각이 있는 곳은 Hirael(빌링 카드·구독 플랜), UIAble, Motiq 정도인데 이만큼 전용으로 깊은 곳은 없다. 다만 라이선스를 반드시 확인할 것 — 사이트는 "어떤 프로젝트에도 자유롭게 쓰고 수정할 수 있다"고 적었지만 저장소(dodopayments/billingsdk)의 실제 라이선스는 GPL-3.0이다. GPL은 카피레프트라 상용 제품에 코드를 넣을 때 조건이 따르므로, 사이트 문구만 믿지 말고 저장소 라이선스 파일과 예외 조항을 직접 확인해야 한다. 이 점이 MIT인 다른 저장 항목들과 결정적으로 갈리는 지점이다. 또 제작사가 결제 서비스 업체이므로 Dodo Payments 연동을 전제한 부분이 있는지도 함께 볼 것 — Stripe 등 다른 결제사 언급은 랜딩에서 확인되지 않았다.

저장된 것 중 성격이 가장 특이하다 — UI 컴포넌트와 Claude Code 훅을 같은 레지스트리로 배포한다. 훅 12종은 화면 요소가 아니라 에이전트 작업을 감싸는 자동화다. 파괴적 명령 가드, 시크릿 유출 가드, 브랜치 보호, 컨텍스트 사용량 모니터, 작업 끝났을 때 Slack·Discord·Telegram 알림, 세션 요약 — Claude Code를 상시로 쓴다면 UI보다 이쪽을 먼저 볼 만하다. shadcn CLI로 설치한다는 점에서 저장된 Sona UI(에이전트 스킬 배포)와 같은 흐름이지만, 그쪽이 "컴포넌트를 어떻게 쓸지" 알려주는 문서라면 이건 "에이전트 동작 자체를 바꾸는" 스크립트다. 컴포넌트 쪽에서는 AI·에이전트 계열이 두껍고(SmoothUI·GAIA UI와 비교), 개발 도구 뷰어들(JSON·Diff·API 응답·CLI 출력)은 ui.corr.sh·Geist와 겹친다. 브랜드 로고 207종과 AWS 아이콘이 포함된 점은 기술 스택 소개 섹션을 만들 때 유용하다. 라이선스 미표기라 상업 투입 전 확인 필요.

무료 Core가 Apache 2.0인데 범위가 상당히 넓다는 점이 핵심이다 — 가상화, 행 그룹화, 집계, 마스터-디테일, 셀 편집, Excel·Parquet 내보내기까지 무료에 들어 있어 상용 그리드의 유료 영역에 해당하는 것들이 열려 있다. 상품 목록이나 주문 관리처럼 행이 많고 편집·내보내기가 필요한 화면이면 먼저 검토할 만하다. 유료가 갈리는 지점은 명확하다 — 피벗, 트리 데이터, 서버사이드 데이터 로딩이다. 데이터가 커져 서버에서 정렬·필터·페이징을 처리해야 하는 순간 연 399달러가 발생하므로 그 전환점을 미리 가늠할 것. 저장된 데이터 테이블 항목들(Hirael, ui.corr.sh, Cubby의 Data Table)과는 급이 다르다 — 그쪽은 shadcn 수준의 테이블이고 이건 전용 그리드 엔진이다. 반대로 단순 목록에 이걸 쓰면 과하다. 라이선스 기간 중 버전을 영구 사용할 수 있는 구조라 갱신을 멈춰도 쓰던 버전은 남는다. 프로프라이어터리 PRO는 재배포 제한이 있으니 조건을 확인할 것.

파일 업로드는 직접 만들면 서명된 URL 발급, 진행률, 오류 처리, 검증을 다 붙여야 하는데 그 배선을 덜어주는 항목이다. 저장된 것 중 업로드를 전담하는 라이브러리는 이게 처음이다 — 다른 kit들(Hirael의 File Dropzone, ui.corr.sh의 File Upload, Delta의 File Upload)은 화면만 주고 실제 업로드 처리는 직접 해야 한다. 여기는 UI와 서버 라우트를 함께 준다. 스택 판단 — S3 호환이면 되므로 AWS S3뿐 아니라 Cloudflare R2, MinIO 등에 붙는다. 다만 Feedle은 Supabase Storage를 쓰므로 저장된 Supabase Library의 Dropzone 블록이 더 맞는 짝이다. Supabase Storage도 S3 호환 엔드포인트를 제공하므로 이걸 쓸 수 있을 가능성은 있으나 확인이 필요하다. MIT이고 최근까지 갱신되고 있다. 대용량 파일의 멀티파트 업로드나 업로드 진행률 표시 지원 여부는 문서에서 확인하지 못했으니 큰 파일을 다룰 계획이면 먼저 볼 것.

저장된 에디터 항목의 상류다 — Shadcn Tiptap과 editorcn이 모두 이것 위에 올라간 것이므로, 그 둘을 쓴다면 실제 토대가 여기다. 에디터 본체만 놓고 보면 MIT 오픈소스이고 확장 100종 이상이 무료라 비용 없이 쓸 수 있다. 값이 드는 지점은 따로다 — 실시간 협업, 댓글, DOCX 변환, AI 편집은 전부 유료 플랫폼 기능이고 월 49달러부터 시작해 협업이 제품의 핵심이면 Business 999달러까지 올라간다. 즉 "Tiptap은 무료인가"의 답은 용도에 달렸으니, 협업·댓글이 필요해지는 시점을 미리 가늠해둘 것. 저장된 Lexical(Meta)과 Plate(Slate 기반)이 경쟁 토대인데, Tiptap은 상용 서비스가 붙어 있어 직접 만들 부분이 가장 적은 대신 그 부분이 종속과 비용이 된다. 반대로 Lexical은 전부 직접 만들지만 비용이 없다. 자체 호스팅 옵션이 있으므로 데이터를 외부에 두기 어려운 경우에도 길은 있다.

저장된 에디터 항목 둘(Shadcn Tiptap, editorcn)이 모두 Tiptap(ProseMirror) 기반이므로 여기는 다른 토대를 고를 때의 선택지다. 갈리는 지점 — Tiptap 계열은 확장과 툴바가 이미 갖춰져 있어 바로 쓰기 좋고, Lexical은 본체가 얇은 대신 필요한 것을 직접 붙여야 한다. 따라서 에디터를 빨리 넣어야 하면 저장된 두 항목이 낫고, 편집기 동작 자체를 세밀하게 통제하거나 커스텀 노드·문서 모델을 설계해야 하면 여기로 내려온다. 신뢰 근거는 Meta가 자사 제품의 편집기를 이걸로 돌린다는 점과 2.4만 스타, MIT, 최근까지 이어지는 갱신이다. 주의 — 프레임워크라 UI가 전혀 없으므로 툴바·메뉴·단축키는 직접 만들거나 별도 컴포넌트를 붙여야 하고, 초기 구축 비용이 Tiptap 계열보다 크다. 접근성을 명시적으로 다룬다는 점은 에디터 영역에서 드문 장점이다.

무료 티어가 MIT이고 이커머스 블록만 20종을 여는 점이 Feedle 맥락에서 실질적이다 — 저장된 랜딩 위주 kit들(Efferd, Ruixen, PrebuiltUI)에는 이커머스 범주가 없고, 있는 곳은 Systaliko(위젯 단위)와 Hirael(블록 4종) 정도다. 상품 목록·장바구니·결제 화면을 블록으로 가져오려면 여기가 현재 가장 두껍다. 대시보드 13종과 AI 앱 13종도 무료 범위에 들어간다. 유료 판단 기준 — 199달러는 저장된 유료 kit 중 비싼 축이지만(UIAble Enterprise와 비슷, Hover.dev 49달러·The UI Factory 25유로보다 훨씬 위) 600종 이상과 완성 템플릿이 따라온다. Figma 파일이 필요하면 349달러 팀 티어여야 하므로 저장된 Launch UI(99달러에 Figma 포함)와 비교할 것. 15만 사용자와 v3.0이라는 점에서 유지 측면은 개인 프로젝트들보다 안정적이다. 무료분이 MIT로 명확한 것도 라이선스 미표기가 흔한 이 범주에서 장점이다.

인증은 화면 수가 많고 빠뜨리기 쉬운 곳인데(재설정, 기기 관리, 세션 목록, 계정 삭제 확인) 여기는 그 전부를 목록으로 갖고 있어 무엇을 만들어야 하는지 체크리스트로도 쓸 수 있다. 메일 템플릿 12종이 함께 오는 점이 특히 실용적이다 — 저장된 React Email과 달리 인증 흐름에 맞춘 실제 문안까지 있어 그대로 시작할 수 있다. 다만 전제 조건이 크다. Better Auth를 쓸 때만 그대로 붙고, Feedle처럼 Supabase Auth를 쓰는 경우에는 연동이 맞지 않으므로 저장된 Supabase Library의 인증 블록이 맞는 짝이다. 그래도 화면 구성과 메일 문안은 스택과 무관하게 참고가 된다. UI를 shadcn/ui·HeroUI·Zaidan 세 갈래로 내는 구조라 저장된 HeroUI를 쓰는 프로젝트면 바로 맞물린다. Agent Auth 항목이 있는 것은 에이전트가 사용자 대신 인증하는 흐름을 다루는 것으로 보이며 다른 곳에 거의 없다. MIT.

저장된 셰이더·WebGL 항목들과 층위가 다르다 — UVCanvas, 23rd, Chamaac, Vanta.js, Plasma UI는 이미 만들어진 효과를 가져다 쓰는 쪽이고, 이건 셰이더를 직접 쓸 때 밑에 까는 계층이다. 기성 효과로 안 되는 시각 표현이 필요하거나 GPU 연산(compute)을 써야 할 때 내려온다. 실용적으로 눈에 띄는 점 셋 — 첫째, 헤드리스 Node에서 같은 코드가 돌아가므로 서버에서 이미지·영상을 GPU로 렌더링하는 용도가 열린다. 둘째, 테스트용 결정적 목이 있어 셰이더 코드를 CI에서 검증할 수 있는데 이 영역에서는 드물다. 셋째, 번들 25KB 목표를 명시해 저장된 WebGL 항목들의 공통 약점(무게)을 정면으로 다룬다. 에이전트 대응이 문서 CLI·MCP·셰이더 검증까지 갖춰져 있어 Claude Code로 셰이더를 쓰게 할 때 실제로 유용할 가능성이 높다 — 저장된 MCP 제공 항목 중 검증 도구까지 붙은 것은 드물다. Vercel Labs·MIT라 유지 측면도 개인 프로젝트보다 낫다. WebGPU 자체가 브라우저 지원 범위가 WebGL보다 좁으니 대상 사용자 환경을 먼저 확인할 것.

저장된 Geist(Vercel), Astryx(Meta)와 같은 갈래 — 회사가 자사 콘솔을 만드는 데 실제로 쓰는 시스템이라 참고 가치가 크다. 특히 프래그먼트 27종이 실용적인데, Filter Bar, Inner Side Menu, Page Header/Nav/Section, Key Value Field Array, Form Item Layout, Text Confirm Dialog는 관리 화면을 만들 때 매번 다시 설계하게 되는 부분이다. Supabase 대시보드를 써봤다면 그 화면들의 구조를 그대로 열람하는 셈이다. UI 패턴 10편은 컴포넌트가 아니라 판단 기준을 다루므로 저장된 02UI("언제 이 컴포넌트를 쓰는가")와 같은 성격이고, 카피라이팅 가이드까지 있는 건 드물다. 주의 — 이건 Supabase 내부용 시스템 문서이므로 Library처럼 설치해 쓰라고 만든 것이 아니다. 코드를 가져오려면 저장소에서 직접 떼어내야 하고 브랜드 톤도 강하게 배어 있다. 같은 Supabase 스택이라면 Library(연동 블록)와 이것(디자인 참고)을 역할을 나눠 보면 된다.

Feedle이 Supabase 위에 있으므로 저장된 것 중 가장 직접적으로 쓰일 항목이다. 인증 화면과 파일 업로드는 매번 직접 만드는 부분인데 공식 블록이 있으면 Supabase 쪽 연동 코드까지 함께 온다는 게 다르다 — 서드파티 kit의 로그인 폼은 껍데기만 주고 연결은 직접 해야 한다. 실시간 계열(커서, 아바타 스택, 채팅, 플로우)은 Realtime 기능을 실제로 어떻게 엮는지 보여주는 예제 역할도 겸하므로 기능 자체를 안 쓰더라도 구현 참고가 된다. 무한 쿼리 훅은 상품 목록처럼 페이지네이션이 필요한 화면에 바로 대응된다. MCP 서버와 에이전트 스킬을 함께 제공하는 점은 저장된 Sona UI(스킬)·Astryx(MCP)와 같은 흐름인데, 여기는 UI가 아니라 백엔드 연동이라 Claude Code로 Supabase 작업을 맡길 때 더 실질적이다. 공식이라 유지가 끊길 걱정이 없다는 점도 개인 프로젝트 라이브러리들과 갈리는 지점이다.

Lens 프로토콜 위에 소셜 기능을 올릴 때만 의미가 있는 항목이다. 그 조건에 해당하지 않으면 지금 쓸 일은 없고, 저장 가치는 두 가지다 — 첫째, 탈중앙 소셜을 다루게 되면 컴포넌트 단위로 정리된 곳이 드무니 출발점이 된다. 둘째, 후원(팁), 인용, 수집, 팔로우처럼 소셜 기능을 블록으로 쪼갠 구성 자체가 일반 커뮤니티 기능을 설계할 때 참고가 된다. 주의 — 제작자가 직접 프로덕션 부적합이라고 밝히고 있고, Lens SDK와 wagmi, 지갑 연결(ConnectKit)까지 스택이 통째로 따라붙으므로 일반 웹 프로젝트에 조각만 떼어 쓰기는 어렵다. Text Editor, Audio/Video Player, Link Preview 정도는 범용으로 보이지만 Lens 컨텍스트에 묶여 있을 가능성이 크니 확인이 필요하다. 라이선스 미표기.

저장된 것 중 처음으로 에이전트용 스킬 파일을 레지스트리로 함께 배포하는 항목이다 — agent-skill에 SKILL.md와 참고 문서 네 편(컴포넌트 선택 기준, 소비자 검증, 디자인 원칙, 프로바이더 설정)이 들어 있어 "코딩 에이전트가 컴포넌트를 찾고 설치하고 조합하고 검증하는 절차"를 지시한다. MCP 서버를 제공하는 항목들(SmoothUI, Solace UI, The UI Factory, Astryx, 8StarLabs)과는 접근이 다르다 — MCP는 도구를 붙이는 쪽이고 이건 판단 기준을 문서로 주는 쪽이라, Claude Code로 UI를 맡길 때 어느 방식이 나은지 비교해볼 대상이다. 컴포넌트 자체는 42종으로 중간 규모이고 유체·변형 연출과 iOS식 제스처(Swipe Action Row, Hold to Delete)에 강점이 있다. Live Activity는 저장된 UICapsule의 Dynamic Island와 같은 계열이다. 라이선스 미표기라 상업 투입 전 확인이 필요하다.

핵심은 "기존 shadcn 프로젝트를 갈아엎지 않고 옆에 끼워 쓴다"는 설계다 — 제작자가 shadcn 컴포넌트와 나란히 돌아간다고 명시한다. 접근성이 중요한 화면(날짜 선택, 콤보박스, 메뉴)만 React Aria 구현으로 바꾸고 나머지는 그대로 두는 식이 가능하다. 저장된 React Aria 계열과 비교할 것 — Intent UI(87종)가 규모가 크고 HeroUI는 패키지 설치형이며 BoardUI는 에이전트 제품용인데, 이건 shadcn 병행을 전면에 내세운 유일한 쪽이다. React Router 전용 헬퍼가 있는 점도 드물어서 Next.js가 아닌 React Router 스택이면 눈여겨볼 만하다. 다만 실태를 감안할 것 — GitHub 스타 7개에 마지막 커밋이 2025년 12월로 9개월가량 지났다. MIT이고 코드를 복사해 소유하는 방식이니 그대로 가져와 직접 관리할 생각이면 문제없지만, 유지되는 라이브러리로 기대하지는 말 것.

문서 기반 AI 제품을 만들 때 가장 손이 많이 가는 부분을 덜어주는 항목이다 — 특히 바운딩 박스 인용은 RAG나 문서 추출에서 "모델이 이 답을 어느 페이지 어디서 가져왔는지" 보여줄 때 필요한데, 좌표를 받아 PDF 위에 겹쳐 그리는 구현을 직접 하면 꽤 번거롭다. Schema Builder도 문서에서 뽑을 필드를 사용자가 정의하게 하는 화면이라 같은 맥락이다. 저장된 것 중 문서 뷰어를 제대로 다루는 곳은 여기가 유일하다. 이름 주의 — 저장된 Extend UI(extend-ui.com, 제작자 kicky·rynkovski)는 shadcn 확장 라이브러리로 전혀 다른 프로젝트다. 이쪽은 문서 AI 회사 Extend가 자사 제품을 만들며 떼어낸 것이다. 6종뿐이지만 각각이 통째로 큰 기능이라 수량으로 볼 항목이 아니다. 라이선스 확인 필요.

저장된 Base UI 계열(9ui, Space UI, Balsa UI, PaceUI, UIAble, Hirael, glasscn) 중 기본형 충실도와 부가 항목의 균형이 좋은 쪽이다. 특히 훅 4종이 실질적이다 — use-list-virtualizer와 use-fuzzy-filter는 목록이 길어지면 반드시 필요해지는데 보통 별도 패키지(react-virtual, fuse.js)를 붙이게 되는 부분이라, 같은 톤으로 함께 오는 건 드물다. 폼 입력 쪽에서 Autocomplete, Number Field, OTP Field, Date Range Picker, Circular Slider를 갖춘 점은 저장된 Hirael과 같은 자리이니 둘을 비교할 것 — Hirael이 수량과 범위(SaaS·인프라 블록)에서 앞서고, 여기는 훅과 OKLCH 토큰 체계가 강점이다. QR Code가 컴포넌트로 있는 것도 다른 곳에 잘 없다. MIT라 상업 사용에 제약이 없고 Tailwind 4를 요구한다.

텍스트 애니메이션이 18종으로 저장된 것 중 한 곳에 모인 규모로는 가장 크다 — 저장된 text 역할 항목들이 대개 4~6종인 것과 비교된다. 글자 연출에 힘을 줘야 하는 히어로나 포트폴리오라면 여기를 먼저 훑을 만하다. 주의할 점은 설치 방식이다. shadcn CLI가 아니라 자체 CLI를 쓰므로 지금까지 저장한 레지스트리들과 워크플로가 갈리고, shadcn MCP로 에이전트에게 맡기는 흐름(8StarLabs UI 노트 참고)도 그대로는 안 된다. 파일이 평범한 .tsx로 떨어진다고 밝히고 있으니 실제로는 코드를 직접 복사해도 되는지 확인해볼 것. 기본형 55종은 shadcn/ui 원본과 겹치므로 그것 때문에 결제할 이유는 없고, 결제 근거는 프리미엄 템플릿이나 Agentic AI 인터페이스 계열이 되어야 한다. 가격 59~99달러는 저장된 유료 kit 중간대다. 라이선스 미표기.

범용 라이브러리가 아니라 "이런 게 필요한데 어디에도 없네" 싶을 때 뒤지는 곳이다. Heatmap, Partition Bar, Flip Clock, Status Monitor, JSON Viewer, Relative Time은 직접 만들면 번거롭고 다른 kit에 잘 없다. Transport Badge(대중교통 노선 배지)는 특히 용도가 좁아서, 이런 것까지 만들어 두는 성격의 모음이라는 걸 보여준다. 상태 표시 계열(Status Indicator, Status Monitor, System Banner)은 저장된 OpenStatus의 상태 페이지 레지스트리와 겹치니 함께 비교할 것. JSON Viewer는 저장된 Geist에도 있다. MCP 항목이 있지만 자체 MCP 서버가 아니라 shadcn 공식 MCP 서버에 레지스트리를 등록해 쓰는 방식이다 — components.json에 registries 항목만 추가하면 되므로, 이 방법은 다른 shadcn 레지스트리에도 그대로 적용할 수 있는 일반 기법이다. 저장된 레지스트리들을 Claude Code에 붙일 때 참고할 것. 라이선스와 제작자 정보는 확인하지 못했다.

저장된 배경 셰이더 항목 중 도입이 가장 간단하다 — 23rd, Chamaac, Solaris Sky가 모두 코드를 복사해 프로젝트에 넣는 방식인 데 비해 여기는 npm 설치 후 컴포넌트 한 줄이면 끝난다. 대신 소스를 소유하지 않으므로 셰이더를 직접 손볼 수는 없고, 주어진 7종이 마음에 들어야 쓸 수 있다. 히어로 섹션 배경을 빨리 얹어야 할 때 먼저 볼 것. 각 배경에 이름이 붙어 있어 고르기도 쉽다. WebGL 셰이더 공통의 주의점은 그대로 적용된다 — 저사양 기기와 배터리 부담이 크고 reduced-motion 대응은 직접 확인해야 한다. 정적 CSS 배경으로 충분하면 저장된 bg.ibelick이 훨씬 가볍다. Shadertoy 포크가 섞여 있으므로 상업 프로젝트에 넣기 전 원 저작물의 라이선스까지 확인할 것.

저장된 Vidstack과 같은 자리를 놓고 비교할 항목이고 갈리는 지점이 분명하다 — Vidstack은 자체 미디어 계층을 쓰는 반면 여기는 Google의 Shaka Player를 그대로 얹는다. 따라서 HLS·DASH 적응형 스트리밍이나 Widevine·PlayReady 같은 DRM이 필요한 상황이면 Shaka의 검증된 구현을 그대로 쓰는 이쪽이 유리하고, 단순 재생이면 Vidstack이 가볍다. 훅 17종이 UI와 분리돼 있다는 점도 실용적이다 — 플레이어 모양을 완전히 직접 만들면서 상태 관리만 가져올 수 있고, 저장된 AnimBits가 애니메이션을 훅으로 주는 것과 같은 발상이다. 재생 목록(use-playlist)과 미디어 세션(use-media-session, 잠금화면·OS 미디어 컨트롤 연동)까지 있는 것은 다른 플레이어 라이브러리에 잘 없다. shadcn CLI로 설치해 소스를 소유하므로 디자인을 자유롭게 바꿀 수 있다. Shaka Player가 무게가 있는 엔진이니 번들 크기를 확인할 것. 라이선스 미표기.

0.0.1이라 아직 실무에 넣을 단계는 아니고, 두 가지 문제를 헤드리스로 푼다는 접근을 기억해둘 항목이다. 둘 다 직접 만들면 까다로운 것들이다 — 컬러 피커는 색공간 변환과 포인터 처리가, drag-to-scrub 수치 입력은 Figma·Blender식 조작감을 재현하는 부분이 그렇다. 완성된 컬러 피커가 지금 필요하면 저장된 Hirael, glasscn, Delta Components, ABUI에 이미 있으니 그쪽이 빠르고, 여기는 스타일까지 직접 정해야 할 때의 선택지다. 수치 입력 쪽은 Hirael의 Number Field와 비교할 것. 저장된 DialKit이 값을 실시간으로 조절하는 개발 도구라 발상이 닿아 있다. 버전과 라이선스 모두 확인이 필요하며, 당장 쓰기보다 나중에 성숙하면 다시 볼 대상으로 둔다.

Feedle처럼 외부 고객이 쓰는 서비스를 운영한다면 장애 공지 창구가 필요해지는 시점에 후보가 된다. 무료 티어가 모니터 1개로 좁으니 실사용은 월 30달러부터로 잡거나 셀프호스팅을 고려할 것 — 도커 이미지가 8.5MB로 작아 부담이 적다. 실질적으로 눈여겨볼 점은 MCP 서버를 제공한다는 것으로, Claude Code에서 모니터를 만들고 장애를 열고 닫는 흐름을 그대로 시험해볼 수 있다. 저장된 MCP 제공 항목(SmoothUI, Solace UI, The UI Factory, Astryx)은 전부 컴포넌트 쪽인데 이건 운영 도구라 성격이 다르다. Terraform 프로바이더가 있어 인프라 코드로 관리할 수도 있다. 부가로 공개한 shadcn 레지스트리 26종(status-bar, status-calendar, status-feed, status-events, status-page-shell 등)은 OpenStatus를 쓰지 않고 상태 페이지를 직접 만들 때도 가져다 쓸 수 있다.

마케팅 문구 없이 "내가 실제로 다시 쓰는 것들"이라고 밝히는 구성이라 항목 선정이 실무적이다. 눈여겨볼 것은 두 갈래다. 첫째, 유틸리티가 개발 중에 쓰는 도구라는 점 — 특히 Chart Empty Loading Error는 차트에 늘 필요한 빈 상태·로딩·오류 세 가지를 묶어둔 것이라 직접 만들 때 빠뜨리기 쉬운 부분을 채운다. Responsive Preview Shell과 Screen Size Guard는 저장된 ABUI의 Breakpoint Display와 같은 갈래다. 둘째, 블록이 앱 내부 화면 쪽이다 — Settings Page, Audit Log, Mailbox, File Manager, Status Page, Form Builder는 랜딩 블록 kit들에 없는 것들이고 저장된 Hirael·Motiq와 같은 영역을 덮는다. Sankey 차트가 있는 점은 저장된 Bklit과 함께 드문 경우다. 제작자 정보와 라이선스가 사이트에 드러나 있지 않으니 상업 투입 전 확인이 필요하다.

범용 라이브러리가 아니라 개인 사이트·포트폴리오를 만들 때 필요한 조각들이라는 점에서 자리가 뚜렷하다 — 저장된 kit 대부분이 제품 랜딩이나 앱 내부를 겨냥하는데 여기는 "나를 소개하는 페이지"에 쓰이는 것들이다. GitHub 기여도 히트맵, 기술 스택 클라우드, 프로젝트 탐색기, 연락처 채널, 점으로 찍은 세계 지도는 직접 만들면 은근히 손이 가는 것들이라 개발자 포트폴리오를 세울 때 시간을 아낀다. Ask AI와 Model Picker가 있는 것도 요즘 개인 사이트에 챗봇을 붙이는 흐름에 맞는다. 17종뿐이니 여기 하나로 사이트를 끝낼 수는 없고 저장된 MVPBlocks의 개발자 포트폴리오 템플릿 같은 것과 함께 볼 것. 라이선스 미표기라 상업 투입 전 확인이 필요하다.

개인 디자인 시스템이라 규모는 작지만 AI 화면에 필요한 조각이 한 벌 갖춰져 있다는 점이 쓸모다 — Chat, Chat Input, Chat Message, Chat Reasoning, Chat Tool이 한 톤으로 묶여 있고 여기에 JSX Preview가 붙는다. JSX Preview는 모델이 생성한 컴포넌트를 그 자리에서 렌더링해 보여주는 용도라 저장된 AI 항목 중 드문 조각이다. 다만 대화형 UI 전반은 저장된 SmoothUI(AI 20종)와 GAIA UI가 더 두껍고 완성도도 검증됐으니 그쪽을 먼저 볼 것. Window와 Command Prompt, ASCII Wave는 터미널·레트로 톤 화면에 어울리고, Invisible Input과 Long Press Button은 다른 곳에 잘 없는 변형이다. 27종뿐이고 라이선스가 명시돼 있지 않아 상업 투입 전 확인이 필요하다.

저장된 Plasma UI와 같은 목표를 다른 방법으로 푼다 — Plasma는 WebGL로 실제 굴절을 계산해 모바일에 부적합하고 패널 개수 제한이 있는 반면, 여기는 CSS와 SVG 필터라 훨씬 가볍고 일반 컴포넌트에 그대로 얹힌다. 대신 유리 질감의 사실성은 Plasma가 위다. 판단 기준은 이것이다 — 화면 전체를 유리 재질로 덮는 연출이면 Plasma, 버튼·입력·사이드바 같은 평범한 UI에 유리 톤만 입히려면 glasscn. 일반 버전과 glass- 버전을 쌍으로 두어 부분적으로만 적용하기 쉽다는 점도 실용적이다. Base UI 기반이라 저장된 9ui·Space UI·PaceUI·UIAble·Hirael과 프리미티브를 공유한다. CSS backdrop-filter와 SVG 필터에 의존하므로 브라우저별 렌더링 차이와 성능은 실제 기기에서 확인할 것 — 특히 스크롤되는 목록 위에 깔면 부담이 커진다. MIT. 글래스모피즘 CSS만 필요하면 저장된 Aether CSS 생성기가 더 간단하다.

용도가 아주 좁은 대신 그 안에서는 대체재가 없다. 저장된 mapcn 위에 얹혀 있으므로 지도 자체가 필요하면 mapcn, 그 위에 항공 노선·항적·궤도를 그려야 하면 여기다 — 두 항목을 짝으로 볼 것. react-simple-maps는 SVG 기반 정적 지도 차트라 계열이 다르다. 항공 도메인이 아니어도 쓸 구석은 있다. 측지선(대권 항로) 그리기, 두 지점 간 애니메이션 이동, 네트워크 커버리지 표현은 물류 경로, 배송 추적, 노드 간 연결 시각화에 그대로 옮겨 쓸 수 있는 패턴이다. Satellite Orbit Tracker는 궤도 계산까지 들어가 있어 그 자체로 참고할 만하다. MIT라 상업 사용에 제약이 없고 코드를 복사해 소유하는 방식이다. 13종뿐이니 라이브러리가 아니라 특정 문제의 해답으로 둘 것.

저장된 SmoothUI와 같은 제작자(Eduardo Calvo)다. 그쪽이 범용 대체 라이브러리라면 이쪽은 양식이 강하게 정해진 테마이니 필요에 따라 갈라 쓰면 된다. 양식 선택 갈래(8bit/cnlibs, 8bitcn, Neobrutalism)에 들어가는데 그중 규모가 가장 크고, shadcn 전 목록을 덮으면서 HUD 조각까지 있어 화면 전체를 한 양식으로 끝낼 수 있다는 점이 다르다. 실용적으로는 두 갈래다 — 게임·SF 톤 제품이나 포트폴리오에서 양식 자체로 쓰거나, HUD·레이더·게이지·파형처럼 상태를 실시간으로 보여주는 조각만 뽑아 모니터링 대시보드에 얹는 식이다. 후자라면 저장된 ssych ui(금융 다크), Geist·Motiq(콘솔)와 비교해볼 것. Radix와 Base UI를 모두 지원하므로 기존 프로젝트 프리미티브에 맞춰 고를 수 있다. 폰트까지 레지스트리로 배포하는 점은 양식 통일에 실질적이다. 사이트 표기(55종)와 실제 수량 차이가 크니 목록을 직접 볼 것. Tailwind 4와 React 19를 요구하고 라이선스는 저장소 확인이 필요하다.

컴포넌트 수로 볼 곳이 아니라 구조를 참고할 곳이다 — 느슨한 컴포넌트 모음이 아니라 surfaces·tokens·surface-context 같은 토큰·표면 레이어를 아래에 깔아두고 그 위에 컴포넌트를 올린 형태라, 직접 디자인 시스템을 만들 때 레이어를 어떻게 나눌지 참고가 된다. 아이콘 라이브러리를 골라 끼우는 방식은 저장된 Efferd와 같은 접근이다. 개별 항목으로는 Editor, Code, Embed, MP3 Player가 눈에 띄는데 블로그나 문서 사이트를 만들 때 필요한 조각들이고 다른 kit에 잘 없다. Product Card는 상거래 화면용인데 저장된 Systaliko의 이커머스 조각들과 함께 볼 것. 11종뿐이니 주력으로 쓸 수는 없다. 라이선스 미표기라 상업 투입 전 확인이 필요하다.