Kidow

앞서 저장한 Scroll Mask와 목적이 똑같으니 둘 중 하나만 고르면 된다. 차이는 구현과 지원 범위다 — Scroll Mask는 animation-timeline: scroll()을 쓰는 순수 CSS 유틸리티라 지원 브라우저가 더 좁고, tw-fade는 npm 플러그인으로 설치하며 Safari 26+까지 포함해 지원 범위가 넓은 편이다. 또 tw-fade는 "스크롤할 내용이 남아 있을 때만" 페이드를 보이는 판정이 들어 있어 끝에 도달했을 때의 어색함이 없다. 파이어폭스는 아직 부분 지원이므로 확인할 것. 둘 다 Tailwind v4 전제다.

저장된 차트 계열 중 설계 방향이 가장 다르다 — 차트 종류를 늘리는 대신 축·격자·범례·툴팁을 부품으로 쪼개 조립하게 한다. 그래서 기성 차트로 안 되는 요구(축 두 개, 커스텀 규칙선, 특이한 상호작용)가 있을 때 유리하고, 반대로 "막대 차트 하나 빨리"면 오히려 손이 더 간다. 지도 시각화(Choropleth·Tile)를 같은 API로 다룬다는 점은 저장된 다른 차트 라이브러리에 없는 강점이고, 저장해둔 react-simple-maps를 따로 들이지 않아도 지도와 차트를 한 체계로 묶을 수 있다. Sankey는 Bklit과 함께 몇 안 되는 선택지. 이름이 같은 shadcndeck 쪽 생성기와 혼동하지 말 것.

"AI가 만들면 죄다 비슷하게 생긴다"는 문제를 정면으로 겨냥한 접근. 컴포넌트 코드를 받는 게 아니라 잘 쓰인 프롬프트를 받는 것이라, Claude Code로 화면을 만드는 작업 흐름에 그대로 얹힌다는 게 요점이다. 저장해둔 Flexnative(인텐트·프롬프트 제공)와 같은 방향이며 이쪽이 3D·배경 연출에 더 치우쳐 있다. 다만 프롬프트는 결과가 모델과 실행 시점에 따라 달라지므로 코드 라이브러리처럼 재현성을 기대하기 어렵고, 생성된 코드는 결국 직접 검수해야 한다. 유료는 상업 라이선스 조건이 걸려 있으니 클라이언트 작업이면 플랜 조건을 확인할 것.

다크 모드를 기본으로 가는 제품을 디자인할 때 훑는 레퍼런스. 다크 테마는 밝은 화면을 단순히 반전한다고 되지 않는 영역이라(순수 검정 대신 뉴트럴 계열, 그림자 대신 표면 밝기 차이, 채도 낮춘 강조색, 대비 관리) 실제로 잘 된 사례를 보는 게 가장 빠르다. 저장해둔 다른 갤러리(CollectUI, Recent)와 달리 주제가 하나로 좁혀져 있어 목적이 분명할 때 효율이 높다. 개발자 도구·AI 제품은 다크가 기본인 경우가 많으니 그 계열 카테고리를 먼저 볼 것.

저장된 컴포넌트 라이브러리 중 범위가 가장 넓은 축 — 프리미티브(59종) + 화면 조각(Compositions) + 팔레트·테마 관리 + 에이전트용 문서가 한 묶음이다. 특히 Vue를 지원하는 점이 드물다(저장된 대부분이 React 전용이라 Vue 프로젝트에서는 선택지가 거의 없다). "코딩 에이전트" 문서와 템플릿 디자인 스킬을 별도로 두었다는 건 Claude Code로 화면을 짜는 작업 흐름을 전제로 설계했다는 뜻이라, 에이전트에게 디자인 시스템을 일관되게 따르게 하고 싶을 때 참고할 만하다. 주의: 범위가 넓다는 건 도입 시 프로젝트 구조에 깊게 관여한다는 뜻이므로, 기존 shadcn 프로젝트에 부분 도입하기보다 새 프로젝트에서 기반으로 택할지 판단할 것. 라이선스는 사이트에서 확인하지 못했다.

저장된 다른 아이콘 세트와 용도가 완전히 다르다 — Lucide·Phosphor·Iconoir가 UI 기능 아이콘이라면 여기는 삽화에 가까운 손그림이다. 빈 상태 화면, 온보딩 일러스트, 블로그 삽화, 프레젠테이션처럼 "그림"이 필요한 자리에 맞고, 버튼이나 내비게이션에 쓰면 톤이 튄다. 26만 개라는 수량은 브라우징이 아니라 검색을 전제로 한 규모이고 동의어 검색이 있어 실제로 찾아진다. 출처 표기 불필요라 라이선스 부담이 없는 점도 장점. 주의: 다섯 가지 스타일이 섞이면 산만하므로 프로젝트에서는 한 스타일로 고정할 것.

저장해둔 레퍼런스 갤러리들보다 범위가 넓어 브랜딩·타이포·패키지까지 볼 수 있다는 게 차이다. 실무적으로 특히 유용한 건 두 카테고리 — OG 이미지(공유 링크 썸네일을 어떻게 디자인하는지 모아 보기 어려운 영역이다)와 앱 스크린샷(스토어 등록용 이미지 구성). 둘 다 만들 일은 반드시 생기는데 참고 자료를 찾기 번거로운 축이라 여기를 기억해둘 값어치가 있다. 웹 UI만 필요하면 저장해둔 CollectUI 쪽이 밀도가 높다.

국가 선택 드롭다운, 언어 전환기, 통화 선택, 국제 배송 폼처럼 국기가 필요한 화면에 쓴다. 직접 하면 국기 SVG를 어디선가 모아 크기와 비율을 통일하는 작업이 생기는데 그걸 없애준다. 비율 옵션이 있는 게 실무에서 중요한 부분 — 국기는 원본 비율이 제각각이라 목록에 나란히 놓으면 정렬이 깨지는데 4:3이나 정사각으로 통일할 수 있다. 주의: 국기와 언어는 1:1이 아니므로(영어=미국기, 스페인어=스페인기 식의 매핑은 정확하지 않다) 언어 선택기에는 국기 대신 언어명을 쓰는 편이 맞고, 분쟁 지역 관련 표기는 서비스 대상 지역 기준으로 신중히 판단할 것.

저장된 AI UI 계열 중 "사람의 승인이 필요한 에이전트"에 초점을 맞춘 쪽. 에이전트가 실제 작업(결제, 발송, 삭제)을 하려 할 때 사람이 확인하고 승인하는 화면은 대부분의 AI UI 라이브러리가 안 다루는 영역인데, 여기는 승인 카드와 워크플로 시각화를 프리미티브로 갖고 있다. 에이전트 제품에서 이 화면의 품질이 곧 신뢰도이므로 참고 가치가 크다. MIT라 상업 사용에 걸림돌이 없다. 21종으로 작으니 전체 채택보다 prompt-kit·AI Elements 위에 승인 흐름만 얹는 조합이 현실적이다.

히어로나 섹션 배경에 깔 분위기용 그라디언트가 필요할 때. CSS로 내보내지므로 이미지 파일이 아니라 코드로 들어가 용량 부담이 없고 다크모드에 맞춰 색만 바꾸기도 쉽다. 저장해둔 Grainient(유료, 그레인 질감 중심)와 비교하면 이쪽은 무료이고 레이어 블렌드 기반이라 더 부드러운 톤이다. Tailwind 내보내기가 있어 클래스로 바로 붙일 수 있는 점이 실무에서 편하다. 주의: 큰 면적의 블렌드 그라디언트는 저사양 기기에서 페인트 비용이 있을 수 있고, 텍스트 대비를 해치기 쉬우니 본문 위에 깔 때는 대비를 확인할 것.

브라우저 표준 API로 전환을 만든다는 점이 핵심 — 애니메이션 라이브러리 없이, DOM을 이중으로 렌더링하지 않고 브라우저가 스냅샷을 찍어 보간하므로 구현이 가볍고 성능이 좋다. 특히 다크모드 토글의 원형 확산 전환은 View Transitions로 만드는 게 사실상 정석이라 여기 템플릿을 그대로 쓰면 된다. 저장해둔 glimm(WebGL 밴드 전환)과 비교하면 — glimm은 연출이 강하고 독립적이며, 이쪽은 표준 기반이라 가볍고 콘텐츠 자체가 변형된다. 사파리와 파이어폭스 지원 상황은 시점에 따라 다르니 사용 전 확인하고, 폴백이 자연스러운지 반드시 테스트할 것.

저장해둔 AI UI 계열(prompt-kit, AI Elements, AICSS, agentcn)과 결정적으로 다른 축 — 저 셋이 서버의 모델과 대화하는 화면이라면, 여기는 모델 자체를 브라우저에서 WebGPU로 돌리는 구성까지 포함한다. 그래서 데이터가 서버로 나가면 안 되는 기능(로컬 요약, 기기 내 분류, 오프라인 동작)을 만들 때 참고할 유일한 축이다. 현실적 제약은 분명하다: WebGPU 지원 브라우저가 필요하고, 모델 가중치를 내려받아야 하므로 첫 로딩이 수십~수백 MB가 될 수 있으며, 기기 성능에 따라 속도 편차가 크다. 즉 "보조 기능"으로는 쓸 만해도 주 기능을 여기에 걸기는 이르다. 프라이버시가 판매 포인트인 제품에서 검토할 것.

실용 컴포넌트 모음이 아니라 인터랙션 실험실에 가깝다. 다크 패턴 없이 재미를 주는 요소(당기는 줄로 다크모드 토글, 인형뽑기 캡차)가 필요할 때 아이디어를 얻는 용도이고, 개인 사이트·포트폴리오·이벤트 페이지처럼 성격이 자유로운 곳에 어울린다. 물리 시뮬레이션은 계산 비용이 있으니 모바일 성능은 반드시 확인할 것. 저장해둔 ibelick Lab과 같은 성격(실험 모음)이지만 이쪽은 물리 기반이라 더 무겁고 더 튄다. 라이선스가 확인되지 않았으므로 코드를 가져다 쓸 계획이면 저장소에서 먼저 확인할 것.

특이한 축은 "인텐트"와 "프롬프트"다 — 컴포넌트 목록뿐 아니라 인증·결제 같은 기능 단위 흐름과, AI 에이전트에 넣을 프롬프트를 함께 제공한다. Claude Code로 화면을 만들 때 컴포넌트를 하나씩 지시하는 대신 기능 단위로 지시하는 방식에 맞춘 구성이라 참고할 만하다. 다만 블록·패턴 자체는 저장해둔 계열과 크게 겹치므로, 이 프롬프트·인텐트 접근이 마음에 들 때 꺼낼 항목으로 두면 된다. 이름 때문에 React Native로 오해하기 쉬우니 주의.

Lucide와 규모가 비슷한 선 아이콘 세트. Lucide보다 선이 조금 더 가늘고 기하학적인 편이라 미니멀한 디자인에 잘 맞는다. 실무 판단은 늘 같다 — 수량보다 자주 쓸 아이콘들의 톤이 맞는지부터 볼 것. Swift와 Flutter 배포판이 있어 웹과 모바일 앱이 같은 아이콘을 써야 하는 경우 통일이 쉬운 점은 저장된 다른 세트 대비 장점이다. 저장해둔 morphicons가 Iconoir를 지원 세트로 포함하므로 아이콘 모핑을 쓸 계획이면 조합이 된다.

저장해둔 차트 계열(Bklit, chartcn, Rosen Charts, Evil Charts, Liveline)과 같은 자리지만 선택 이유가 다르다 — 기능이 아니라 질감이다. 레트로·터미널·브루탈리즘 톤의 제품에서 차트만 매끈한 SaaS 스타일이면 톤이 깨지는데 그 간극을 메운다. recharts 스타일 API라 기존 차트 코드에서 옮기기 쉬운 점도 장점. 주의: 캔버스 렌더링이라 SVG 차트와 달리 텍스트 선택·접근성 처리가 제한적이고, 디더링은 저해상도 질감이라 정밀한 수치 판독에는 불리하다 — 정확한 데이터 읽기가 목적인 대시보드보다 연출용 화면에 맞다. 라이선스 미확인이므로 상업 사용 전 확인할 것.

저장해둔 AI 채팅 UI 계열과 나란히 비교할 항목 — prompt-kit(shadcn 관례, SDK 비종속), AI Elements(Vercel AI SDK 공식), agentcn(에이전트 실행 화면), 그리고 AICSS. AICSS의 차별점은 React 외에 Vue·Svelte도 지원한다는 점이라, React가 아닌 스택에서 에이전트 UI를 만들 때는 사실상 몇 안 되는 선택지가 된다. 툴 호출과 사고 과정 표시는 에이전트 제품에서 반드시 필요한데 직접 만들면 상태 종류가 많아 번거로운 부분이다. 주의: 무료와 Pro가 나뉘므로 필요한 블록이 무료 범위에 있는지 먼저 확인할 것.

특징은 Base UI와 Radix 양쪽 기반 컴포넌트를 함께 제공한다는 점이다 — 저장된 대부분의 연출 계열 라이브러리가 Radix/shadcn 전제라, Base UI로 기반을 정한 프로젝트에서 쓸 수 있는 선택지는 드물다(UI TripleD와 같은 이유로 가치가 있다). GSAP까지 쓰는 구성이라 Motion만 쓰는 프로젝트라면 의존성이 하나 더 늘어날 수 있으니 필요한 컴포넌트가 어느 쪽을 쓰는지 확인할 것. Tailwind v4 전제.

재생↔일시정지, 메뉴↔닫기, 복사↔체크처럼 상태가 바뀌는 아이콘 버튼에 쓴다. 보통은 두 아이콘을 페이드로 교차시키는데 그건 상태 변화를 설명하지 못한다 — 모핑은 "같은 것이 변했다"는 관계를 보여주므로 의미 전달이 다르다. 중요한 실무 이점: 이미 쓰고 있는 아이콘 세트(Lucide 등)를 그대로 쓰면서 모핑만 얹는 구조라 아이콘 세트를 바꿀 필요가 없다. 저장해둔 Lucide Animated·itshover가 "미리 만들어진 애니메이션 아이콘 세트"라면 여기는 "임의의 두 아이콘을 잇는 엔진"이라 성격이 다르다. 중단 가능한 스프링이라 연타에도 어색하지 않다. 선 아이콘 전용이므로 면(fill) 아이콘에는 맞지 않는다.

저장해둔 연출 계열 대부분이 무료라 유료로 넘어갈 이유는 "여기에만 있는 컴포넌트"뿐이다. 실제로 Isometric Pillars, Light Rays, Holographic Button처럼 구현 난도가 높고 무료 모음에 잘 없는 항목이 있으므로, 랜딩 히어로 연출에 시간을 많이 쓰는 상황이면 39달러 1회는 회수 가능한 편이다. 같은 제작자의 Scroll Mask(무료 CSS 유틸리티)를 먼저 써보면 코드 품질과 취향을 가늠할 수 있다. 구독이 아니라 1회 결제라는 점은 장점.

가로 스크롤 목록이나 긴 세로 목록에서 "더 있다"는 신호를 주는 가장 깔끔한 방법. 흔히 쓰는 고정 그라디언트 오버레이와 달리 스크롤 위치에 반응해서 끝에 도달하면 마스크가 사라지므로 어색함이 없고, JS 스크롤 리스너가 필요 없어 성능 부담도 없다. 주의는 하나 — animation-timeline: scroll()은 비교적 최신 기능이라 지원 범위를 caniuse에서 확인하고, 미지원 브라우저에서는 마스크가 적용되지 않는 형태로 자연스럽게 떨어지는지 확인할 것. Tailwind v4 전제이므로 v3 프로젝트에서는 그대로 쓸 수 없다.

UI 사운드를 실제로 넣을 때 가장 실용적인 자원. 핵심은 두 가지다 — (1) 오디오가 CC0라 라이선스 확인 부담이 없다(저장해둔 다른 사운드 항목 중 라이선스가 모호한 것과 대비된다), (2) 같은 큐를 12가지 톤으로 제공해 제품 성격에 맞춰 전체 사운드 팔레트를 한 번에 통일할 수 있다. 개별 효과음을 여기저기서 주워 쓰면 톤이 어긋나는데 그 문제를 구조적으로 해결한다. 순서는 저장해둔 Velvet UI(언제 어떤 소리를 낼지 원칙) → 여기(무엇을 쓸지) → soundz.js·soundcn(어떻게 재생할지)로 보면 된다. 소리는 항상 옵트인, 음소거 컨트롤 상시 노출은 변하지 않는 원칙이다.

아직 규모가 작고 일부 컴포넌트가 작업 중 상태인 초기 단계 프로젝트. 저장된 동류 레지스트리가 이미 많으므로 지금 시점에서 전면 도입할 이유는 크지 않고, OTP 입력처럼 필요한 항목이 정확히 있을 때 개별로 가져다 쓰는 정도가 맞다. 성장하는 프로젝트일 수 있으니 나중에 다시 확인할 대상으로 두되, 라이선스 미표기 상태는 상업 사용 전 반드시 확인할 것.

화면 유형별 시각 레퍼런스가 필요할 때 훑는 곳. 저장해둔 갤러리들과 성격이 갈린다 — navbar.gallery는 내비게이션, cta.gallery는 전환 문구, details.so는 인터랙션 디테일, 여기는 화면 전체의 비주얼 톤과 레이아웃이다. 주의: 대부분 Dribbble 계열의 콘셉트 작업이라 실제 제품의 제약(데이터 양, 에러 상태, 빈 화면, 반응형)이 반영돼 있지 않은 경우가 많다. 톤과 레이아웃 아이디어만 가져오고 구조는 실제 제품 사례에서 확인할 것.

"실제 DOM 콘텐츠에 셰이더 효과를 입히는" 드문 접근. 보통의 연출 계열 라이브러리는 장식 레이어를 따로 얹지만 여기는 HTML 자체를 캔버스로 올려 파티클로 흩어지게 하거나 유리 굴절을 통과시킨다 — 텍스트·이미지가 그대로 효과의 대상이 된다. 그래서 전환 연출이나 히어로에서 임팩트가 크다. 대신 비용도 분명하다: 캔버스로 올라간 콘텐츠는 텍스트 선택·검색·스크린리더 접근이 불가능하므로 중요한 콘텐츠에는 쓰지 말고 장식 구간에만, 그리고 미지원 환경 폴백을 반드시 확인할 것. 라이선스에 Commons Clause가 붙어 있어 이 컴포넌트를 상품으로 되파는 형태는 금지된다는 점도 유의.

저장된 shadcn 레지스트리 계열과 같은 성격. Primitives와 Components를 층으로 나눠 둔 구성이라 기본형부터 가져다 쓰기 좋다. 다만 동류 항목이 이미 많으므로 전면 도입 후보라기보다 필요한 컴포넌트가 있을 때 확인하는 목록에 둘 것. 라이선스 미확인 상태이니 상업 사용 전 저장소를 볼 것.

Lucide(약 1,700종)보다 수량이 많아 세부 개념 아이콘이 필요할 때 후보가 된다. 다만 아이콘 세트 선택은 수량보다 일관성과 스타일 적합성이 우선이므로, 실제로는 자주 쓸 20~30개가 원하는 톤으로 나오는지부터 확인하는 게 맞다. 여러 세트를 한 번에 검색하려면 저장해둔 Icônes·yesicon을 쓰고, 굵기 변형이 필요하면 Phosphor, 애니메이션이 필요하면 Lucide Animated·itshover를 볼 것. 라이선스가 확인되지 않으므로 상업 프로젝트 전 명시 문서를 찾을 것.

게임·커뮤니티·개인 프로젝트처럼 톤이 자유로운 곳에서 정체성을 만들 때. shadcn 컴포넌트 구조를 그대로 따르므로 기존 shadcn 프로젝트에서 스타일만 갈아끼우는 형태로 적용할 수 있는 게 장점이다. 주의: 픽셀 폰트와 강한 테두리는 가독성과 접근성(대비, 작은 글씨)에서 불리하므로 정보 밀도가 높은 화면이나 업무용 제품에는 맞지 않는다. 레트로 로더가 필요하면 저장해둔 Dot Matrix와 톤이 맞는다.

번들 크기를 의식하면서 모션을 넣고 싶을 때 후보. 다만 저장된 마이크로 인터랙션 계열이 이미 여럿이라(Kinetics는 CSS까지 뽑히고 153종, Motion Primitives는 조립 단위가 정돈됨) 굳이 새로 도입할 이유를 찾으려면 여기에만 있는 컴포넌트가 있어야 한다. 트리셰이킹을 내세우지만 Framer Motion 자체가 번들에 들어가므로 실질 절감 폭은 확인이 필요하다. 라이선스 미표기이므로 상업 사용 전 저장소에서 확인할 것.

"이거 뭐라고 부르지"에서 막혀 검색이 안 될 때 쓰는 도구. 이름을 모르면 문서도 못 찾고 AI에게 설명하기도 어려운데, 그 구간을 정확히 겨냥한다. 특히 코딩 에이전트에 넣을 프롬프트를 함께 주는 점이 실무적이다 — Claude Code에 "그 회색 알약 모양"이라고 쓰는 것과 정식 명칭으로 쓰는 것은 결과가 다르다. macOS 용어가 많아 데스크톱 앱 쪽 작업에서 특히 유용하며, 저장해둔 animation-vocabulary류 접근(모션 용어 역검색)의 UI 요소 버전이라 보면 된다.