Kidow

페이지를 옮길 때 화면이 툭 바뀌는 게 거슬릴 때. 네이티브 앱처럼 밀려 들어오거나 확대되며 이어지는 전환을 만든다. View Transitions API의 대안이다. 저쪽은 브라우저 지원과 라우터 연동에 제약이 있는데, 이건 Web Animations API 기반이라 그 제약을 피한다. 다만 직접 구현하는 만큼 코드가 붙는다. 프레임워크 6종을 지원한다. 이 컬렉션에서 이만큼 폭넓은 항목은 드물다. UI Components의 transitions.dev와 다르다. 저쪽은 컴포넌트 안의 개별 동작(모달·스켈레톤)이고, 이건 페이지 단위 전환이다. 층위가 다르니 같이 쓸 수 있다. hero 전환은 목록에서 상세로 넘어갈 때 특히 효과적이다. 상품 목록 같은 화면에 맞는다. 라이선스가 첫 화면에 없다. GitHub에서 확인할 것.

규모가 작다(20여 종). 이 컬렉션의 연출 계열 대부분이 50~200종인 것과 비교하면 먼저 볼 이유가 약하다. 특정 컴포넌트를 찾다가 여기에만 있으면 그때 가져오는 정도. 커스텀 훅을 함께 주는 점은 조금 다르다. 컴포넌트만 주는 곳이 대부분이다. Remix와 React Router v7까지 명시한 것도 특이하다. Next.js 외 환경이라면 확인해볼 만하다. 개인·소규모 팀이 운영하며 외주 연락처를 함께 노출한다. 유지보수 지속성은 기대치를 낮출 것. 라이선스가 없다. 상업 사용 전 확인 필요.

히어로 섹션이나 카드 배경에 쓸 그라디언트가 필요할 때. CSS로 직접 만들면 밋밋해지기 쉬운 질감(그레인·메시·디더)이 이 에셋의 값어치다. Design의 다른 asset과 달리 유료다. 대부분의 무료 대안으로 커버되지 않는 지점(고해상도 질감, 애니메이션 배경)이 필요할 때만 검토할 것. 이미지 파일이다. UI Components의 ThreeUI·연출 계열은 코드로 그리므로 반응형과 수정이 자유롭지만, 이건 고정된 결과물이다. 대신 성능 부담이 없고 결과가 예측 가능하다. 4K~12K는 웹에 그대로 올리기엔 크다. 압축과 포맷 변환을 반드시 거칠 것. 상업 라이선스가 구독에 포함된다고 명시돼 있다. 라이선스가 불분명한 항목이 많은 이 컬렉션에서는 오히려 드문 경우다.

shadcn/ui를 쓰다가 "이건 왜 없지" 싶을 때 먼저 볼 곳. 날짜 입력, 파일 드롭존, 확인 다이얼로그처럼 자주 필요한데 본체에 빠져 있는 것들이 모여 있다. UI Components의 cascader-shadcn·Shadcn Phone Input과 같은 갈래이나 범위가 넓다. 저 둘은 컴포넌트 하나짜리이고 이건 여러 개를 한 곳에서 제공한다. 빈자리를 채울 일이 생기면 여기부터 훑고 없으면 개별 프로젝트를 찾을 것. shadcn/ui 관례를 따르므로 기존 코드와 이질감이 적다. 라이선스가 명시돼 있지 않다. 상업 사용 전 GitHub에서 확인할 것.

컴포넌트 라이브러리를 직접 만들거나 팀의 작성 규칙을 정할 때. props 이름, 상태 표현, data 속성 같은 것을 매번 즉흥적으로 정하는 대신 기준으로 삼는다. Design의 The Component Gallery와 짝이다 — 저쪽은 여러 디자인 시스템이 실제로 어떻게 했는지 사례를 보여주고, 이건 어떻게 해야 하는지 원칙을 말한다. 사례와 규범. 쓸 코드를 주지 않는다. 읽고 판단하는 문서다. shadcn 본인이 공동 작성했다. UI Components의 shadcn/ui가 어떤 원칙 위에 서 있는지 이해하는 데도 쓸 수 있다. Tools의 Ultracite와 같은 제작자(Hayden Bleasel)다. 에이전트에게 컴포넌트 작성을 맡길 때 이 문서를 기준으로 제시하면 결과가 일관된다.

자료를 여러 곳에서 모아 정리해야 할 때. 브라우저·PDF 뷰어·노트 앱을 오가는 대신 한 곳에서 끝내는 것이 목적이다. 데이터가 로컬에 저장되고 내보내기가 된다. 노트 도구는 갇히면 빠져나오기 어려운데 그 위험이 낮은 편이다. 오픈 베타다. 기능과 형식이 바뀔 수 있으니 중요한 자료를 전부 옮기기 전에 내보내기가 실제로 되는지 확인할 것. Tools의 다른 항목과 성격이 다르다. 코드를 만들거나 검사하는 도구가 아니라 자료를 모으고 읽는 도구라 research 역할로 따로 두었다. 브라우저를 겸하므로 기본 브라우저를 바꾸는 부담이 있다. 리서치 세션에만 따로 쓰는 편이 현실적이다.

Vue나 Nuxt로 작업할 때의 기반 컴포넌트. React의 Radix UI에 해당하는 자리다. UI Components의 foundation 둘(shadcn/ui, Joly UI)은 React 전용이다. Vue 진영에서 같은 역할을 하는 것은 이것뿐이라 자리가 겹치지 않는다. 스타일이 없는 프리미티브다. 동작과 접근성만 주고 겉모습은 직접 입힌다. 빠르게 완성된 화면이 필요하면 맞지 않는다. 접근성·RTL·다국어가 기본 설계에 들어 있다. 국제화가 필요한 서비스라면 이 점이 크다. 채택 규모가 큰 편이라(월 290만 다운로드) 유지보수 위험이 낮다. 라이선스는 GitHub에서 확인할 것.

음성으로 대화하는 화면을 만들 때. 말하는 중·듣는 중 같은 상태 표시와 오디오 파형은 직접 만들면 까다로운데 그 부분이 준비돼 있다. UI Components의 AI 관련 넷(assistant-ui·AI Elements·Tool UI(현 assistant-ui Elements)·Manifest UI)은 전부 텍스트 챗 기준이다. 음성은 이것뿐이라 자리가 겹치지 않는다. ElevenLabs 음성 API를 쓰는 것이 전제일 가능성이 높다. 다른 음성 서비스를 쓴다면 얼마나 분리되는지 먼저 확인할 것. 페이지에 정보가 적다. 설치 방법과 라이선스를 문서·GitHub에서 확인한 뒤 판단할 것.

"이 버튼 색 좀 바꿔줘"를 말로 설명하기 어려울 때. 화면에서 요소를 집으면 에이전트가 그 코드로 바로 간다. 컴포넌트가 여러 파일에 흩어진 큰 프로젝트일수록 값어치가 크다. Tools의 Expect와 같은 제작자 계열(Million/Aiden Bai)이다. 저쪽은 변경분을 브라우저로 검증하는 쪽, 이건 변경할 위치를 찾아주는 쪽이라 작업 흐름에서 앞뒤로 붙는다. 개발 중에만 쓰는 도구다. 프로덕션 번들에 들어가지 않도록 설정을 확인할 것. "2배 빠르다"는 제작자 측 주장이다. 직접 써보고 판단할 것. 라이선스가 명시돼 있지 않다. GitHub에서 확인할 것.

에이전트에게 줄 설정 파일을 처음 만들 때. DESIGN.md나 AGENTS.md를 빈 화면에서 쓰는 대신 생성기로 초안을 뽑는다. Design의 getdesign.md·Inspo와 같은 갈래이나 방향이 반대다 — 저쪽은 남의 사이트에서 뽑아낸 기준을 가져오는 것이고, 이건 내 기준을 파일로 만들어내는 쪽이다. 프롬프트 라이브러리와 잡다한 도구(대비 검사, 이미지 최적화)가 섞여 있다. 성격이 하나로 모이지 않으므로 필요한 코너만 골라 쓸 것. 뉴스레터 유도가 붙어 있다. 아이콘 팩을 받으려면 구독해야 한다.

새 프로젝트의 린트·포맷 설정을 잡을 때. 규칙을 직접 고르고 충돌을 맞추는 과정을 건너뛴다. Tools의 Oxc와 층위가 다르다 — Oxc는 린터·포매터 자체이고, 이건 그것들(Oxlint 포함)을 어떻게 설정할지를 정해주는 프리셋이다. 둘은 경쟁이 아니라 위아래로 겹친다. 에이전트 연동이 핵심 중 하나다. 규칙을 사람과 에이전트가 같이 지키게 만드는 게 목적이라, Claude Code로 작업이 잦다면 값어치가 크다. 프리셋이므로 팀의 기존 규칙과 충돌할 수 있다. 진행 중인 프로젝트에 넣으면 대량의 수정이 한 번에 생길 수 있으니 새 프로젝트나 별도 브랜치에서 먼저 시도할 것. 채택 기업 목록은 사이트 자체 주장이다. 라이선스도 명시돼 있지 않으니 GitHub에서 확인할 것.

shadcn/ui 위에 얹을 조각이 필요할 때 목록을 훑어보는 용도. 이 컬렉션에 같은 성격이 이미 많다 — Shadcn UI Blocks(섹션 블록 200+), Componentry, beUI 등과 자리가 겹친다. 새로 도입하기 전에 기존 것들에 같은 위젯이 있는지 먼저 확인할 것. "위젯"이라는 이름이 붙었지만 구체적으로 무엇을 가리키는지는 사이트에서 분명하지 않다. 목록을 직접 보고 판단해야 한다. 개인이 만든 소규모 프로젝트다. 라이선스도 명시돼 있지 않으니 상업 사용 전 GitHub에서 확인할 것. shadcn 레지스트리 방식이라 도입 부담은 낮다. 필요한 것 하나만 가져오면 된다.

디스코드 봇을 만들 때. discord.js를 그대로 쓰면 이벤트 등록과 커맨드 배포를 매번 직접 엮어야 하는데 그 뼈대를 대신 잡아준다. 이 컬렉션에서 처음 나온 백엔드·봇 영역이다. 지금까지는 프론트엔드 UI와 개발 보조 도구 위주였다. discord.js 위에 한 겹 더 올라간다. 문제가 생기면 discord.js 쪽 문서까지 봐야 하므로, 단순한 봇이면 discord.js만으로도 충분하다. 커뮤니티 운영용 봇(공지, 역할 부여, 문의 접수 등)을 만들 일이 생기면 출발점으로 볼 것. MIT라 상업 사용에 제약이 없다.

회원가입이나 주문 폼에 전화번호를 받을 때. 국가 코드와 자릿수 검증을 직접 짜면 예외가 끝없이 나오는데 그 부분을 react-phone-number-input이 처리한다. cascader-shadcn과 같은 성격이다 — shadcn/ui에 없는 입력 패턴 하나를 채우는 단일 컴포넌트. 국내 서비스만 대상이면 과할 수 있다. 국가 선택이 필요 없다면 단순 입력에 정규식 검증이 가볍다. 해외 사용자가 섞이면 값어치가 생긴다. 의존성이 여럿 붙는다(react-phone-number-input + shadcn 컴포넌트 6종). 가볍게 하나만 가져오는 방식이 아니니 확인할 것. 라이선스가 명시돼 있지 않다. 상업 사용 전 GitHub에서 확인할 것.

페이지를 섹션 단위로 빠르게 채울 때. 히어로·요금제·로그인·푸터처럼 매번 비슷하게 만드는 것들이 카테고리로 정리돼 있다. shadcn/ui를 쓰고 있다면 그대로 붙는다. 별도 의존성이나 설치가 없어 부담이 가장 적은 축. Aceternity UI와 겹치는 영역인데 결이 다르다 — 저쪽은 화려한 연출이 붙은 블록이고 좋은 것이 유료에 있다. 이쪽은 장식 없이 단정하고 전부 무료다. 제품 내부 화면이나 담백한 랜딩이면 이쪽. 개인·상업 사용 모두 무료라고 명시돼 있다. 이 컬렉션에서 라이선스가 걸리지 않는 몇 안 되는 항목. UI Components의 registry나 연출 계열와 달리 '완성된 섹션'을 준다. 조각이 아니라 덩어리가 필요할 때 여기부터 볼 것.

시도·구·동처럼 단계가 있는 선택이나 대분류·중분류·소분류 카테고리 입력이 필요할 때. shadcn/ui에는 이 패턴이 없어서 직접 만들면 꽤 번거롭다. Ant Design의 Cascader에 해당하는 것이 shadcn 생태계에는 비어 있는데 그 빈자리를 채우는 물건이다. 단일 컴포넌트다. 이 컬렉션의 다른 항목처럼 세트가 아니라 특정 문제 하나를 푸는 조각이다. MIT이고 소스를 복사해 넣는 방식이라 필요한 대로 고쳐 쓸 수 있다. 개인 프로젝트에 규모가 작다(GitHub 114 스타). 유지보수를 기대하기보다 가져와서 내 코드로 관리할 것. 사이트가 robots.txt로 크롤링을 막고 있어 정보는 GitHub 저장소에서 확인했다.

Lucide를 쓰는 프로젝트에서 아이콘 몇 개에 움직임을 더할 때. 모양이 그대로라 기존 아이콘과 섞어도 티가 나지 않는다. Design의 AnimateIcons와 거의 같은 물건이다 — 둘 다 Lucide 기반, Motion 사용, MIT. 실질적 차이는 개수(AnimateIcons 1,170, 이쪽 350+)와 설치 경로(이쪽은 npm과 shadcn 레지스트리 둘 다) 정도다. 하나만 고르면 되고 둘 다 넣을 이유는 없다. Its Hover와는 다르다. 저쪽은 독자 세트에 브랜드 로고·이모지까지 포함하고 라이선스가 불명확하다. MIT라 상업 사용에 부담이 없다. 애니메이션 아이콘이 셋이나 쌓였다. 실제로는 하나만 쓰게 되므로, 새 프로젝트에서 한 번 비교해 정한 뒤 나머지는 참고용으로 둘 것.

플로팅 독이나 커스텀 커서처럼 눈에 띄는 조각이 필요할 때. 연출 계열 중에서도 장식성이 강한 쪽이다. 같은 계열에서 겹치는 것이 많다. Magic UI·Aceternity UI·beUI와 스택(React·Tailwind·Framer Motion)과 성격이 거의 같으므로, 새로 도입하기보다 이미 쓰는 곳에 같은 컴포넌트가 있는지 먼저 확인할 것. 템플릿까지 제공하는 게 차이점이다. 처음부터 페이지를 통째로 시작할 거면 볼 만하다. 개인이 운영하며 웹 개발 외주 서비스를 함께 홍보한다. 규모가 작으니 유지보수 지속성은 기대치를 낮출 것. 컴포넌트 수와 라이선스가 명시돼 있지 않다. 상업 사용 전 GitHub에서 확인할 것.

지도를 붙여야 하는데 Mapbox 과금을 피하고 싶을 때. MapLibre만 지원하므로 토큰이나 사용량 요금 걱정 없이 시작할 수 있다. UI Components의 Terrae와 정면으로 겹친다. 갈리는 지점은 — · 엔진: Terrae는 Mapbox GL·MapLibre GL 둘 다, 이건 MapLibre GL 전용 · 범위: Terrae는 사이클론·산불 같은 날씨·재난 연출 포함, 이건 지도 기본기에 집중 · 스타일: 둘 다 Tailwind·shadcn 호환 연출이 필요 없고 위치 표시·마커·팝업만 쓸 거면 이쪽이 가볍다. Mapbox 전용 기능이 필요하면 Terrae. 타일 제공자는 여전히 따로 정해야 한다. MapLibre는 렌더러일 뿐 타일을 주지 않는다. 라이선스가 명시돼 있지 않다. 상업 사용 전 GitHub에서 확인할 것.

필요한 아이콘 몇 개만 골라 넣을 때. 패키지 전체를 설치하는 대신 아이콘 단위로 소스를 가져오므로 번들에 딱 그만큼만 들어간다. Design의 AnimateIcons와 정면으로 겹친다. 갈리는 지점은 — · 설치: 이건 아이콘별 shadcn 레지스트리, AnimateIcons는 npm 패키지 하나 · 세트: AnimateIcons는 Lucide 기반이라 기존 아이콘과 모양이 일치, 이건 독자 세트에 브랜드 로고·이모지풍까지 포함 · 라이선스: AnimateIcons는 MIT로 명확, 이건 미표기 이미 Lucide를 쓰고 있으면 AnimateIcons가 자연스럽고, 특정 아이콘 몇 개의 연출만 필요하면 이쪽. 브랜드 로고가 섞여 있다. Design의 theSVG와 마찬가지로 상표이므로 각 회사 가이드라인을 따를 것. 라이선스가 없다. 상업 사용 전 GitHub에서 확인할 것.

금액이나 카운터처럼 숫자가 바뀌는 자리에 쓴다. 통화 포맷과 슬롯머신 연출이 기본 제공돼서 결제 금액, 대시보드 지표에 바로 맞는다. UI Components의 Torph와 정면으로 겹친다. 갈리는 지점은 — · 의존성: Torph는 없음, 이건 Motion 필요. 이미 Motion을 쓰고 있다면 부담 없음 · 프레임워크: Torph는 React·Vue·Svelte, 이건 React 전용 · 숫자 처리: 통화·슬롯머신은 이쪽만 있음 · 성숙도: 이건 v1.4.1, Torph는 v0.1.3 숫자가 주 용도면 이쪽, 프레임워크를 가리지 않아야 하면 Torph. 라이선스가 명시돼 있지 않다. npm과 GitHub에서 확인할 것.

챗 화면을 블록 단위로 빠르게 조립할 때. 개별 프리미티브가 아니라 완성된 덩어리를 가져오는 쪽이다. UI Components의 AI 관련이 넷이 됐다. 정리하면 — · assistant-ui: 런타임까지 포함한 본체. 챗 앱을 제대로 만들 거면 여기부터 · AI Elements(Vercel): 복사해 쓰는 컴포넌트, AI SDK와 묶임 · Tool UI(현 assistant-ui Elements): 툴 호출 결과 렌더링에 특화 · Manifest UI: 완성된 블록 조립, ChatGPT 앱 스타일 동작과 상태 관리가 필요하면 assistant-ui, 화면만 빨리 필요하면 이쪽이나 AI Elements. 정보가 적다. 블록 수·라이선스·유지보수 상태를 GitHub에서 확인한 뒤 판단할 것. "ChatGPT 앱"을 겨냥한다고 밝힌 만큼 그쪽 형태에 맞춰져 있다. 다른 형태의 챗 UI라면 덜 맞을 수 있다.

"이거 변환하는 사이트 뭐였지" 하고 매번 검색하게 되는 작업들을 한곳에서 끝낸다. 북마크 하나로 자잘한 도구 여러 개를 대체하는 게 요지. 자체 호스팅이 가능한 게 실질적인 강점이다. 사내 데이터나 토큰을 남의 사이트에 붙여넣기 꺼려진다면 Docker로 올려두고 그쪽을 쓸 것. 공개 사이트에 민감한 값을 넣지 말 것. Tools의 Toolfolio·Dev Resources와 다르다 — 저쪽은 도구를 찾는 목록이고, 이건 도구 자체다. 그래서 directory가 아니라 build로 두었다. GPLv3다. 코드를 가져다 쓰는 게 아니라 서비스를 쓰는 것이므로 대개 문제되지 않지만, 포크해 사내 배포판을 만들 거면 라이선스 조건을 확인할 것.

챗 UI를 바닥부터 만들 때. 스트리밍 중 취소, 툴 호출 승인, 스레드 분기처럼 직접 구현하면 오래 걸리는 것들이 이미 들어 있다. UI Components의 Tool UI(현 assistant-ui Elements)가 이 팀의 것이다. 이쪽이 본체(런타임 포함)고 저쪽은 툴 결과 렌더링 부분에 해당한다. AI Elements(Vercel)와 성격이 다르다 — AI Elements는 복사해 쓰는 컴포넌트 모음이라 동작을 직접 붙여야 하고, 이건 상태 관리와 런타임까지 포함한 라이브러리다. 백엔드가 LangGraph면 이쪽이 맞고, Vercel AI SDK만 쓰면 둘 다 후보다. React Native와 Ink(터미널)까지 지원한다. 웹 외 환경도 염두에 둔다면 선택지가 넓어진다. MIT이고 채택 규모가 이 컬렉션에서 가장 큰 편이다. 유지보수 위험이 낮은 축. Cloud는 유료다. 영속성을 직접 구현할지 호스팅을 쓸지가 비용 갈림길.

반투명 유리 느낌이나 볼록한 뉴모피즘 카드를 만들 때. backdrop-filter와 그림자 값을 손으로 맞추면 오래 걸리는데 슬라이더로 조절해 값을 가져온다. Tools의 FormSCN·ChartCN과 같은 갈래다 — 웹에서 만들어 코드만 내보내는 생성기. 뽑아낸 CSS는 하드코딩된 값이다. 디자인 토큰을 쓰는 프로젝트라면 그대로 넣지 말고 변수로 바꿔 넣을 것. 글래스모피즘은 backdrop-filter 성능 부담이 있고 배경에 따라 대비가 무너져 가독성이 떨어지기 쉽다. 큰 영역이나 본문 위에는 신중할 것. 개인이 만든 소규모 도구다. 사라져도 문제없도록 결과 CSS만 챙겨두면 된다.

아이폰에서 받은 HEIC를 웹에 올릴 PNG·WebP로 바꿔야 할 때처럼 일회성 변환에 쓴다. 설치 없이 바로 된다. VectorDrawable 지원이 특이하다. 안드로이드 리소스를 다룰 일이 있으면 기억해둘 것. 처리가 브라우저 안에서 이뤄지는지 서버로 올라가는지 사이트에 적혀 있지 않다. 비공개 이미지라면 확인 전까지 올리지 말 것. 로컬에서 확실히 끝내야 하면 Design의 Photon Studio를 쓸 것. 반복 작업이라면 도구 대신 sharp나 ImageMagick으로 스크립트를 짜는 편이 낫다. 이건 어디까지나 일회성용이다.

카테고리는 정해졌는데 후보를 모르겠을 때 훑는 용도. 인증·테스팅·호스팅처럼 한 번 정하면 오래 가는 선택 앞에서 목록을 넓게 보기 좋다. Tools의 Toolfolio와 같은 갈래(directory)지만 이쪽이 개발자 쪽에 특화돼 있다. 일반 SaaS까지 다루는 Toolfolio보다 밀도가 높다. 커뮤니티 제출 기반이라 등재 기준이 느슨하다. 후보 수집까지만 쓰고 판단은 따로 할 것. 광고 상품이 있다는 점도 감안할 것. 학습 자료까지 포함한다는 게 Toolfolio와 다른 점이다. 새 분야를 시작할 때의 출발점으로도 쓸 수 있다.

화려함이 아니라 제대로 동작하는 기본 컴포넌트가 필요할 때. 접근성을 전면에 내세운 몇 안 되는 곳이다. 역할은 foundation으로 두었다 — 장식용 연출 계열가 아니라 UI의 뼈대를 이루는 범용 컴포넌트이기 때문이다. 다만 shadcn/ui 위에 올라가는 보완재이지 대체재는 아니다. 기본은 shadcn/ui로 깔고, 여기서 부족한 것을 채우는 순서가 맞다. WCAG 2.1 AA 준수는 사이트의 주장이다. 실제로 쓸 컴포넌트는 키보드 조작과 스크린리더로 직접 확인할 것. React 19 / Tailwind v4 기준이다. 구버전이면 손봐야 한다. MIT로 명확해서 상업 프로젝트에 부담이 없다. 이 컬렉션에서 라이선스가 확실한 몇 안 되는 항목.

차트를 붙일 때. Recharts 설정을 문서 보며 맞추는 대신 데이터를 넣고 눈으로 확인한 뒤 코드를 가져온다. Tools의 FormSCN과 같은 갈래다 — 웹에서 만들어 코드만 내보내는 생성기. 라이브러리로 설치하는 물건이 아니다. 내보낼 때 데이터를 박을지 props로 받을지 고를 수 있다. 실제 프로젝트에 넣을 거면 props 쪽을 고를 것. UI Components의 Liveline과 용도가 갈린다 — 저건 실시간으로 흐르는 차트, 이건 정적인 데이터를 보여주는 일반 차트다. 결과가 Recharts 코드다. 이미 다른 차트 라이브러리를 쓰고 있다면 중복이 생긴다.