Kidow

542 bookmarks
Newest
Chamaac UI — WebGL 셰이더 배경 + 애니메이션 아이콘 63종 (총 90종)
Chamaac UI — WebGL 셰이더 배경 + 애니메이션 아이콘 63종 (총 90종)
간판은 셰이더지만 실제 무게 중심은 애니메이션 아이콘 63종이다. 저장된 Morphicons(애니메이션 아이콘 전문)와 이 부분이 정면으로 겹치므로 아이콘만 필요하면 둘을 비교할 것. 셰이더 배경 쪽은 10종으로 23rd, Vanta.js, Solaris Sky 같은 background 항목들과 겹치는데, React Three Fiber를 쓰므로 이미 R3F가 들어간 프로젝트라면 의존성 추가 없이 붙는다는 게 선택 이유가 된다. Dock과 AI Input처럼 특정 용도 컴포넌트가 섞여 있어 단일 목적 micro가 아니라 kit으로 둔다. 무료지만 라이선스 표기가 없어 상업 투입 전 저장소 확인이 필요하다. WebGL 셰이더는 저사양 기기와 배터리에 부담이 크니 배경으로 깔 때는 프레임 제한이나 reduced-motion 대응을 직접 넣어야 한다.
·chamaac.com·
Chamaac UI — WebGL 셰이더 배경 + 애니메이션 아이콘 63종 (총 90종)
The UI Factory — 두 가지 디자인 테마를 가진 유료 컴포넌트 70종 (25€ 평생)
The UI Factory — 두 가지 디자인 테마를 가진 유료 컴포넌트 70종 (25€ 평생)
디자인 톤이 확실히 서 있는 화면이 필요할 때 본다. 저장된 유료 kit 중 가장 싸다 — Cue+ 99달러, Ruixen Pro 99달러, Atelier UI 79.99달러, SPY UI 라이프타임 249달러와 비교해 25유로이고 상업 사용 무제한이 명시돼 있어 조건도 깔끔하다(라이선스가 불분명한 Nexus UI와 대비되는 지점). 다만 70종은 저 가격대 다른 유료 라이브러리보다 적으니 양이 아니라 Ink & Acid / Modern 두 테마의 완성도가 취향에 맞는지로 판단할 것. Tailwind v4를 요구한다. Solace UI와 함께 MCP를 제공하는 몇 안 되는 레지스트리라 Claude Code에서 직접 붙여 쓰는 실험 대상으로 묶어둔다. 프로프라이어터리라 코드 재배포는 불가.
·uithefactory.com·
The UI Factory — 두 가지 디자인 테마를 가진 유료 컴포넌트 70종 (25€ 평생)
Solace UI — 마케팅 페이지용 shadcn 블록 39종 (MCP 레지스트리 제공)
Solace UI — 마케팅 페이지용 shadcn 블록 39종 (MCP 레지스트리 제공)
저장된 랜딩 블록 계열(Efferd 183종, Ruixen 240종) 대비 규모가 훨씬 작은 초기 프로젝트라 이걸 먼저 볼 이유는 없다. 다만 히어로 8종과 팀 소개 7종은 한 범주만 놓고 보면 선택지가 충분하고, 폰 목업·채팅 메시지·히어로 비디오처럼 모바일 SaaS 랜딩에 특화된 조각은 다른 곳에 잘 없어서 그 용도로 본다. 실질적으로 눈여겨볼 점은 레지스트리 자체가 MCP를 제공한다는 것으로, Claude Code에서 컴포넌트를 직접 찾아 설치시키는 흐름을 시험해볼 대상이다 — 저장된 레지스트리 중 이걸 갖춘 곳은 드물다. 라이선스가 명시돼 있지 않아 상업 투입 전 확인이 필요하고, 항목 수가 적어 시간이 지나야 쓸 만해질 수 있으니 나중에 다시 볼 것.
·solaceui.com·
Solace UI — 마케팅 페이지용 shadcn 블록 39종 (MCP 레지스트리 제공)
Nexus UI — 모션 이펙트 중심 컴포넌트 85종 + Next.js 템플릿 18종
Nexus UI — 모션 이펙트 중심 컴포넌트 85종 + Next.js 템플릿 18종
Next.js App Router 프로젝트에서 RSC를 깨지 않는 애니메이션 조각이 필요할 때 본다. 저장된 Framer Motion 계열 kit(ObsidianUI, Odyssey UI, useLayouts, Rare UI 등)과 범위가 상당히 겹치므로 새로 고를 이유는 크지 않고, 차별점은 RSC 호환과 reduced-motion 대응을 명시한 점, 그리고 Next.js 템플릿 18종을 함께 준다는 점 정도다. 랜딩 블록은 한 종씩만 있어 얇으니 섹션 단위로 뽑아 쓸 거면 Efferd나 Ruixen이 낫다. 가장 주의할 점은 상업 라이선스가 유료 티어에 묶여 있다는 것으로, 클라이언트 작업이나 상용 제품에 넣으려면 무료 컴포넌트라도 라이선스 조건을 먼저 확인해야 한다 — MIT인 Atelier UI 무료분이나 Cue Kit과 다른 지점이다.
·nexus-ui.com·
Nexus UI — 모션 이펙트 중심 컴포넌트 85종 + Next.js 템플릿 18종
HeroUI v3 (구 NextUI) — React Aria 기반 완성형 컴포넌트 라이브러리 100종+
HeroUI v3 (구 NextUI) — React Aria 기반 완성형 컴포넌트 라이브러리 100종+
shadcn/ui처럼 코드를 복사해 소유하는 방식이 아니라 패키지로 설치해 쓰는 완성형 라이브러리가 필요할 때 본다. 저장된 foundation 중 React Aria 계열(React Aria 본체, Intent UI, BoardUI)과 같은 줄기지만, React Aria가 헤드리스 기반이고 Intent UI가 복붙 방식인 데 비해 여기는 스타일까지 완성된 패키지라 손댈 일이 가장 적다. 대신 디자인 톤이 이미 정해져 있어 브랜드에 맞추려면 shadcn/ui나 Base UI 쪽이 자유롭다. Tailwind v4를 요구하므로 v3 프로젝트에는 바로 못 넣는다. 컬러 피커와 날짜·시간 범주가 유난히 두꺼워서 ColorPicker나 DateRangePicker가 필요하면 다른 곳을 뒤지는 것보다 여기가 빠르다. 문서가 llms.txt와 Docs Agent API를 제공해 Claude Code로 작업할 때 유리하다. 라이선스는 사이트에서 확인하지 못했고 저장소 확인이 필요하다(NextUI 시절은 MIT였다).
·heroui.com·
HeroUI v3 (구 NextUI) — React Aria 기반 완성형 컴포넌트 라이브러리 100종+
interior.dev — 클릭 직후 0.5초를 다루는 마이크로 인터랙션 59종
interior.dev — 클릭 직후 0.5초를 다루는 마이크로 인터랙션 59종
"동작은 끝냈고 스타일은 네 것"이라는 방향이라 디자인 톤이 강한 다른 kit들과 성격이 다르다. 겉모습을 가져오는 게 아니라 로딩·확인·검증·스트리밍처럼 상태 전환의 동작 패턴이 필요할 때 본다. 특히 Feedle처럼 폼과 비동기 처리가 많은 화면에서 Hold to Confirm(오삭제 방지), Inline Validation, Password Strength, Streaming Text, Value Flash 같은 조각이 바로 쓰인다. 범주 분류가 "언제 쓰는가" 기준이라 02UI(컴포넌트 선택 판단 기준)와 짝지어 보면 좋고, Design Spells가 실제 앱의 마이크로 인터랙션 사례집이라면 여기는 그것을 구현한 코드 쪽이다. 저장된 단일 목적 micro 항목들(loading.dev 스피너, Evil Buttons, Theme Toggles)과 달리 범주를 아울러 kit으로 둔다. MIT라 상업 프로젝트에 제약 없다.
·interior.dev·
interior.dev — 클릭 직후 0.5초를 다루는 마이크로 인터랙션 59종
PrebuiltUI — HTML·React·Vue 공용 Tailwind 컴포넌트 435종
PrebuiltUI — HTML·React·Vue 공용 Tailwind 컴포넌트 435종
React·shadcn CLI에 묶이지 않은 컴포넌트가 필요할 때 쓴다. 저장된 kit 대부분(Efferd, Ruixen, Odyssey, useLayouts, Nexvyn 등)이 React+shadcn 레지스트리 설치 방식이라 Vue나 순수 HTML 프로젝트에서는 쓸 수 없는데, 여기는 Tailwind 마크업만 주므로 그 자리를 메운다. 랜딩 섹션(Hero·CTA·FAQ·Footer)과 기본 폼 요소가 한 곳에 다 있어 정적 페이지나 마케팅 페이지를 빨리 세울 때 유리하다. 반대로 애니메이션·모션은 거의 없으니 연출이 필요하면 Motion 기반 kit 쪽을 본다. 라이선스가 명시돼 있지 않아 상업 프로젝트에 넣기 전 확인이 필요하고, 프리미엄 템플릿은 별도 구매 대상이다. 랜딩 블록만 놓고 보면 Efferd·Ruixen과 범위가 겹치므로 React 프로젝트라면 그쪽이 먼저다.
·prebuiltui.com·
PrebuiltUI — HTML·React·Vue 공용 Tailwind 컴포넌트 435종
Hyperiux Vault — GSAP·Three.js 기반 모션 이펙트 (무료 56종)
Hyperiux Vault — GSAP·Three.js 기반 모션 이펙트 (무료 56종)
스택이 갈리는 지점이 선택 기준이다 — 저장된 연출·kit 계열이 거의 다 Framer Motion/Motion인 반면 여기는 GSAP + Lenis 조합이라, 스크롤 기반 연출(스크럽, 피닝, 관성 스크롤)을 본격적으로 하는 프로젝트라면 이쪽이 맞는다. 반대로 이미 Motion을 쓰고 있다면 GSAP과 Lenis가 통째로 따라오므로 의존성이 겹친다. 무료 56종이 상업 사용 가능하다고 명시된 점은 라이선스 미표기가 흔한 이 계열에서 드문 장점이니 그 안에서 먼저 찾아볼 것. Pro는 구독이라 1회 결제인 Cue+·CharmUI·Atelier UI와 조건이 다르다는 점도 감안할 것. 스크롤 연출 관련 저장 항목: ScrollX UI, Scroll Mask·tw-fade(가장자리 페이드), Transition Kit·glimm(페이지 전환).
·vault.hyperiux.com·
Hyperiux Vault — GSAP·Three.js 기반 모션 이펙트 (무료 56종)
bg.ibelick — 복붙용 전체 화면 배경 스니펫 20종
bg.ibelick — 복붙용 전체 화면 배경 스니펫 20종

저장된 background 계열 중 가장 가볍고 단순한 쪽 — 셰이더도 캔버스도 없이 CSS 그라디언트·패턴만으로 만든 것이라 의존성이 0이고 성능 부담도 없다. 그래서 대시보드나 도구형 제품처럼 배경에 GPU를 쓰기 싫은 곳에 맞다. 계열 구분: bg.ibelick(CSS만, 최경량) → Aura Gradients(CSS, 206종으로 폭이 넓음) → Vanta.js(WebGL 프리셋) → Canvas UI·Solaris Sky(셰이더 전문). 같은 제작자의 ibelick Lab·Motion Primitives·prompt-kit이 이미 저장돼 있으니 코드 취향은 일관적이다. 20종으로 적으니 원하는 게 없으면 Aura Gradients로 넘어갈 것. 라이선스 미확인이므로 상업 사용 전 저장소에서 볼 것. 주의(2026-10-03 확인): 저장소 ibelick/background-snippets 마지막 커밋이 2024-09-26으로 2년 가까이 갱신이 없다. CSS 스니펫이라 낡아도 동작에는 지장이 적지만 새 항목은 기대하지 말 것.

·bg.ibelick.com·
bg.ibelick — 복붙용 전체 화면 배경 스니펫 20종
Agent Elements — Claude Code 스타일 에이전트 UI 컴포넌트
Agent Elements — Claude Code 스타일 에이전트 UI 컴포넌트
저장된 AI UI 계열이 이제 여섯이 됐으니 초점으로 갈라 쓸 것 — prompt-kit(shadcn 관례, SDK 비종속), AI Elements(Vercel AI SDK 공식), AICSS(React·Vue·Svelte 다중 프레임워크), Beautiful UI(사람의 승인 화면), brainless(터미널 에이전트 실행 로그 재현), 그리고 Agent Elements다. 여기의 특징은 승인·되묻기·도구 카드가 한 세트로 들어 있다는 점 — 에이전트가 작업을 제안하고 사람이 확인하는 왕복이 컴포넌트 단위로 갖춰져 있다. brainless가 터미널 출력의 재현이라면 이쪽은 그 상호작용까지 포함한다고 보면 된다. MCP와 Vercel AI SDK를 모두 지원하므로 어느 쪽 스택이든 붙일 수 있다. 8종 남짓으로 작으니 전체 채택보다 승인·도구 카드만 가져오는 조합이 현실적이다. 라이선스 종류는 저장소에서 확인할 것.
·agent-elements.21st.dev·
Agent Elements — Claude Code 스타일 에이전트 UI 컴포넌트
Efferd — shadcn 블록 183종 (앱 셸·대시보드 포함)
Efferd — shadcn 블록 183종 (앱 셸·대시보드 포함)
저장된 블록 계열(Tailark, blocks.so, ONONC, Ruixen)이 대부분 랜딩 섹션에 몰려 있는 반면 여기는 인증·대시보드·앱 셸을 별도 범주로 갖고 있다 — 즉 마케팅 페이지가 아니라 제품 내부 화면을 세울 때 쓸 수 있는 쪽이다. 저장해둔 useLayouts와 이 지점에서 겹치니 둘을 비교할 것. 아이콘 라이브러리를 5종 중 고를 수 있는 것도 실용적인데, 저장된 아이콘 항목(Lucide·Phosphor·Iconoir·Keyline 등) 중 무엇을 쓰든 블록이 따라온다는 뜻이다. Radix·Base UI 양쪽 지원도 Ruixen과 같은 강점. 주의: 전체는 유료이므로 무료 범위에 필요한 블록이 있는지 먼저 확인하고, 라이선스가 명시돼 있지 않으니 상업 사용 조건은 구매 전 문의해둘 것.
·efferd.com·
Efferd — shadcn 블록 183종 (앱 셸·대시보드 포함)
Ruixen UI — 랜딩 섹션 위주 240종 (Radix·Base UI 양쪽 지원)
Ruixen UI — 랜딩 섹션 위주 240종 (Radix·Base UI 양쪽 지원)

두 가지가 저장된 kit 계열과 갈린다. (1) Radix와 Base UI 양쪽 프리미티브를 지원한다 — 저장된 대부분이 Radix 전제라 Base UI로 기반을 정한 프로젝트에서 쓸 수 있는 선택지는 드물다(Sora UI, UI TripleD, Space UI 정도). (2) Tailwind v3와 v4를 모두 지원해 v3 프로젝트에서도 바로 쓸 수 있다(최근 저장 항목 다수가 v4 전제다). 내용물은 랜딩 섹션 쪽으로 치우쳐 있으므로 앱 내부 화면보다 마케팅 페이지를 세울 때 후보다 — 같은 목적의 Tailark·blocks.so·ONONC와 비교할 것. 유료는 1회 99달러에 상업 라이선스 포함이지만 무료 170종이 먼저이므로 그쪽으로 품질을 본 뒤 판단하면 된다.

추가(2026-10-07): 무료분이 MIT로 확인됐다(llms.txt·GitHub) — 상업 사용에 걸림이 없다. 부록 도구 중 쓸모 있는 건 Tailwind v3→v4 변환기(v4 전제 레지스트리를 v3 프로젝트에 들일 때)와 Extrude(SVG 로고를 3D로 뽑아 PNG·GLB로 내보내기). 글래스·그라디언트·섀도 생성기는 Design 쪽 생성기들과 겹치니 따로 찾아올 이유는 없다.

·ruixen.com·
Ruixen UI — 랜딩 섹션 위주 240종 (Radix·Base UI 양쪽 지원)
Odyssey UI — AI 채팅·가격표·앱 셸까지 묶은 애니메이션 컴포넌트 (레지스트리 UI 271항목)
Odyssey UI — AI 채팅·가격표·앱 셸까지 묶은 애니메이션 컴포넌트 (레지스트리 UI 271항목)
AI 컴포넌트 8종에 Token Usage와 Model Selector가 들어 있는 게 눈에 띈다 — 저장해둔 AI UI 계열(prompt-kit, AI Elements, AICSS, Beautiful UI, brainless) 어디에도 토큰 사용량 표시와 모델 선택기는 잘 없다. AI 제품을 만든다면 그 두 개만 떼어 봐도 값어치가 있다. 가격표 6종도 실무에서 매번 새로 짜는 구간이라 발췌 후보. 반대로 음악 카드(Spotify 스타일)나 로고 클라우드는 용도가 한정적이다. 46종 규모라 전면 도입 대상은 아니고 범주가 뚜렷해 필요한 것만 집어오기 좋은 구성이다. 라이선스 종류는 확인하지 못했으므로 상업 사용 전 GitHub에서 볼 것.
·odysseyui.com·
Odyssey UI — AI 채팅·가격표·앱 셸까지 묶은 애니메이션 컴포넌트 (레지스트리 UI 271항목)
SEESAW — 폰트로도 검색되는 웹 디자인 갤러리
SEESAW — 폰트로도 검색되는 웹 디자인 갤러리
솔직히 말하면 저장된 갤러리(Curated, Inspora, CollectUI, Recent 등)와 수집 대상이 거의 같다. 여기만의 축은 하나 — 폰트로 검색이 된다는 점이다. "이 서체를 실제로 쓴 사이트가 어떻게 생겼나"를 찾을 때, 폰트 견본만 보는 것과 실제 사용례를 보는 것은 판단이 다르므로 서체를 고르는 단계에서 값어치가 있다(저장해둔 Best Free Fonts가 서체 목록이라면 여기는 사용례). 그 목적이 아니면 이미 저장된 갤러리로 충분하니 중복 방문은 피할 것.
·seesaw.website·
SEESAW — 폰트로도 검색되는 웹 디자인 갤러리
Curated — 산업별로 거르는 실제 웹사이트 갤러리
Curated — 산업별로 거르는 실제 웹사이트 갤러리
저장된 갤러리 중 "산업별 필터"가 가장 실용적인 축이다 — 만들려는 제품과 같은 업종의 사이트만 모아 보면 그 업종의 관행(금융은 신뢰 표현, AI는 데모 배치, 이커머스는 상품 그리드)이 금방 드러난다. 콘셉트 작업이 아니라 실제 운영 사이트라 데이터 양과 반응형 같은 현실 제약이 반영돼 있다는 점도 Dribbble 계열 갤러리 대비 장점이다. 저장해둔 것들과 역할 구분: Supahero는 히어로 구간만, dark.design은 다크 테마만, CollectUI·Inspora는 전반, Curated는 산업별이다. Pro는 월 9달러인데 필터 저장이 핵심이므로 자주 쓰게 될 때 판단하면 된다. Framer 템플릿 스토어는 Framer를 안 쓰면 해당 없음.
·curated.design·
Curated — 산업별로 거르는 실제 웹사이트 갤러리
UXSnaps — 대형 앱의 UI/UX를 분해해 설명하는 자료
UXSnaps — 대형 앱의 UI/UX를 분해해 설명하는 자료
저장된 레퍼런스 갤러리들과 결정적으로 다른 점은 "왜 그렇게 만들었는지"를 글로 설명한다는 것이다. CollectUI·Uiinspoo·Design Spells는 결과물을 보여주고 판단은 내 몫인데, 여기는 의도와 패턴을 언어로 정리해준다 — 그래서 화면을 베끼는 게 아니라 원리를 가져오기에 적합하다. 저장해둔 Learn UI(디자인 엔지니어링 원리, 인터랙티브)와 짝이 되는 자료이며, 그쪽이 모션·구현 감각이라면 여기는 제품 UX 판단이다. 주의: 대형 앱의 선택은 그 규모의 사용자와 데이터가 전제된 것이라 소규모 제품에 그대로 옮기면 과한 경우가 많다 — 결론보다 그 결론에 이른 근거를 보고 판단할 것.
·uxsnaps.com·
UXSnaps — 대형 앱의 UI/UX를 분해해 설명하는 자료
posts.design — 기업들이 실제로 올린 소셜 게시물 아카이브
posts.design — 기업들이 실제로 올린 소셜 게시물 아카이브
저장해둔 swiped.design과 같은 계열(콘텐츠 레퍼런스)이지만 축이 다르다 — swiped는 개인이 쓰는 글의 구조, 여기는 회사가 올리는 시각물이다. 사이드 프로젝트나 제품을 공개할 때 출시 게시물의 이미지 구성과 카피를 어떻게 짜는지 실제 사례로 볼 수 있고, Headers·OG images 갈래는 저장해둔 Recent의 OG 이미지 카테고리와 함께 보면 된다(OG 이미지는 만들 일이 반드시 생기는데 참고 자료가 드문 축이다). 목적별 분류가 실용적이라 "출시"나 "리브랜딩"처럼 지금 필요한 상황만 골라 볼 수 있다. 주의: 대기업 계정의 제작 여력을 전제로 한 결과물이 많으므로 형식과 정보 구성만 참고하고 제작 난도는 걸러서 볼 것.
·posts.design·
posts.design — 기업들이 실제로 올린 소셜 게시물 아카이브
Deck Gallery — 잘 만든 발표 자료·브랜드 가이드라인 모음
Deck Gallery — 잘 만든 발표 자료·브랜드 가이드라인 모음
이 북마크함에서 드문 축 — UI가 아니라 문서·발표 자료의 레퍼런스다. 쓸모가 생기는 상황은 두 가지다. (1) 브랜드 가이드라인 64건: 제품의 컬러·타이포·로고 사용 규칙을 문서로 정리해야 할 때 구성 방식을 볼 수 있다. 저장해둔 로고착착·Logosystem이 로고 자체라면 여기는 "그 로고를 어떻게 문서화하는가"다. (2) 리포트 95건: 수치를 담은 문서의 레이아웃과 차트 배치 참고. 저장된 차트 라이브러리(chartcn·Bklit)로 구현하기 전에 지면 구성을 보는 용도로 쓸 수 있다. 피치덱은 15건으로 적으니 투자 유치 자료가 목적이면 기대를 낮출 것. 무료 범위와 Pro 차이는 확인이 필요하다.
·deck.gallery·
Deck Gallery — 잘 만든 발표 자료·브랜드 가이드라인 모음
Theme Toggles — 다크모드 전환 토글 14종
Theme Toggles — 다크모드 전환 토글 14종
다크모드는 거의 모든 프로젝트에 들어가는데 토글 아이콘 전환은 매번 직접 만들게 되는 구간이다 — 해·달 아이콘을 페이드로 바꾸면 밋밋하고, 모핑을 직접 짜면 SVG 경로 보간이 번거롭다. 14종 중에 고르면 끝난다. React 외에 Svelte·Vue도 지원해 저장된 항목 중 프레임워크 폭이 넓은 축이다. 전환 연출을 화면 전체로 확장하고 싶으면 저장해둔 Transition Kit의 View Transitions 다크모드 원형 확산과 조합하면 된다(토글은 여기, 화면 전환은 그쪽). 아이콘 모핑 일반이 필요하면 morphicons 쪽. 라이선스 미확인이므로 상업 사용 전 저장소에서 확인할 것.
·toggles.dev·
Theme Toggles — 다크모드 전환 토글 14종
useLayouts — 레이아웃·내비게이션까지 포함한 복붙 컴포넌트 모음
useLayouts — 레이아웃·내비게이션까지 포함한 복붙 컴포넌트 모음
저장된 kit 계열 중 드물게 "레이아웃"과 "내비게이션"을 독립 범주로 갖고 있다. 대부분의 모음이 히어로·카드·버튼에 몰려 있어 앱 셸(사이드바·헤더·분할 화면)이나 내비게이션 패턴은 직접 짜게 되는데 그 구간을 채운다. 내비게이션은 저장해둔 navbar.gallery(레퍼런스)에서 패턴을 고르고 여기서 구현을 가져오는 조합이 된다. Radix 기반이라 저장된 shadcn 프로젝트에 섞기 쉽다. 다만 kit 계열이 이미 두터우므로 전면 도입보다 레이아웃·내비게이션 범주만 발췌하는 쪽이 실효가 크다. 라이선스 미확인이므로 상업 사용 전 GitHub에서 확인할 것.
·uselayouts.com·
useLayouts — 레이아웃·내비게이션까지 포함한 복붙 컴포넌트 모음
Nexvyn/UI — 기본 컴포넌트와 연출 조각이 섞인 React 라이브러리
Nexvyn/UI — 기본 컴포넌트와 연출 조각이 섞인 React 라이브러리
기본 폼 요소와 눈에 띄는 연출 조각이 한 곳에 있는 구성이라 성격이 어중간하다 — 기본형만 필요하면 저장해둔 foundation 계열(Radix·Base UI·React Aria)이 접근성 면에서 낫고, 연출만 필요하면 kit 계열이 규모가 크다. 그래서 전면 도입 대상이라기보다 개별 항목을 집어오는 쪽이다. 실제로 건질 만한 건 다른 곳에 드문 것들이다: Phone/Laptop Mockup(저장해둔 Opensource UI의 기기 목업과 비교), AI Input(prompt-kit·AICSS 계열과 비교), Password Input(MicroKit·Spectrum UI에도 있음), Table of Contents·Scroll Indicator(문서 사이트용). 라이선스가 확인되지 않으므로 상업 사용 전 GitHub 저장소에서 확인할 것.
·ui.nexvyn.dev·
Nexvyn/UI — 기본 컴포넌트와 연출 조각이 섞인 React 라이브러리
neat-annotations — CSS만으로 손글씨 주석과 화살표
neat-annotations — CSS만으로 손글씨 주석과 화살표
제품 설명, 온보딩 가이드, 문서의 스크린샷 설명, 발표 자료처럼 "여기를 보세요"를 표시해야 할 때. 보통은 이미지 편집기로 화살표를 그려 넣는데 그러면 텍스트가 이미지에 박혀 번역·복사·반응형이 안 되고 수정할 때마다 다시 그려야 한다. CSS 주석이면 실제 DOM 요소를 가리키고 라벨도 텍스트로 남는다. JS가 없어 서버 컴포넌트나 정적 사이트에도 그대로 들어가고 번들에 영향이 없다. 저장해둔 Fumadocs·Blume 같은 문서 사이트와 조합하면 스크린샷 없이 실제 UI 위에 설명을 얹을 수 있다. 주의: 화살표 위치가 레이아웃에 의존하므로 반응형에서 어긋나기 쉽다 — 중요한 화면은 모바일 폭에서 확인할 것. Shantell Sans는 한글을 지원하지 않으므로 한국어 라벨이면 손글씨 느낌의 한글 폰트를 따로 지정해야 한다.
·neat-annotations.syabro.com·
neat-annotations — CSS만으로 손글씨 주석과 화살표
23rd — 선택지를 줄인 shadcn 레지스트리 (React·Svelte 5)
23rd — 선택지를 줄인 shadcn 레지스트리 (React·Svelte 5)
앞서 저장한 Evil Buttons와 같은 제작자(radiumcoders)다. 두 프로젝트를 합쳐 보면 버튼은 Evil Buttons, 배경·섹션·셰이더는 여기로 나뉘는 구성이다. 설계 방향은 저장해둔 Cube Motion과 같은 계열 — 값을 고를 수 있게 하는 대신 좋은 기본값을 강제해 일관성을 얻는 쪽이다. 실질적 이점은 Svelte 5 지원인데, 저장된 컴포넌트 라이브러리가 사실상 전부 React 전용이라 Svelte 프로젝트에서 쓸 수 있는 선택지는 드물다(Balsa UI의 Vue 지원, AICSS의 Vue·Svelte 지원 정도). 아직 14종 규모라 전면 도입 대상은 아니고 배경·셰이더가 필요할 때 후보로 둘 것. 셰이더 배경은 공통적으로 GPU 부담과 모바일 성능을 확인해야 한다.
·23rd.dev·
23rd — 선택지를 줄인 shadcn 레지스트리 (React·Svelte 5)
Evil Buttons — 애니메이션 버튼 31종 shadcn 레지스트리
Evil Buttons — 애니메이션 버튼 31종 shadcn 레지스트리
버튼 하나에만 효과를 넣고 싶을 때 뒤지기 좋은 특화 모음. 저장된 연출 계열 라이브러리 대부분이 버튼을 한두 종만 갖고 있는 반면 여기는 31종이 전부 버튼이라 선택지가 넓고, 플레이그라운드에서 바로 비교해볼 수 있다. 질감 있는 버튼(메탈·뉴모피즘)은 저장해둔 Cult UI 쪽이 강하니 성격에 따라 나눠 볼 것. 주의 두 가지 — 강한 효과의 버튼은 주요 CTA 하나에만 쓰는 게 맞고(전부에 쓰면 어디를 눌러야 할지 흐려진다), 라이선스가 명시돼 있지 않으므로 상업 프로젝트 전 저장소에서 확인할 것.
·evilbuttons.com·
Evil Buttons — 애니메이션 버튼 31종 shadcn 레지스트리
Cue Kit — 컴포넌트마다 제작 프롬프트를 함께 주는 모션 라이브러리
Cue Kit — 컴포넌트마다 제작 프롬프트를 함께 주는 모션 라이브러리
저장해둔 연출 계열과 갈리는 지점은 "프롬프트 공개"다. 코드만 복사하면 그 컴포넌트 하나로 끝나지만 프롬프트가 있으면 같은 방식으로 변형을 만들어낼 수 있어서, Claude Code로 작업할 때는 코드보다 프롬프트 쪽이 더 오래 쓸모 있을 수 있다. 저장된 GetLayers·Flexnative도 프롬프트를 제공하지만 그쪽은 프롬프트가 상품이고 여기는 MIT 코드와 프롬프트를 함께 준다는 차이가 있다. 주의: Framer Motion·GSAP·Three.js가 컴포넌트마다 다르게 쓰이므로 하나를 가져올 때 어떤 의존성이 따라오는지 확인할 것 — 전부 도입하면 애니메이션 라이브러리가 셋이 된다. 유료 Cue+는 1회 99달러로 구독이 아니지만, 무료 40종을 먼저 써보고 판단할 것.
·kit.cuedesign.space·
Cue Kit — 컴포넌트마다 제작 프롬프트를 함께 주는 모션 라이브러리
loading.dev — React 로딩 스피너 27종 라이브러리
loading.dev — React 로딩 스피너 27종 라이브러리
저장해둔 로더 항목과 역할이 갈린다 — Loading UI는 CSS 복붙 48종이라 의존성이 안 늘고, Dot Matrix는 도트 매트릭스 톤 특화이며, 여기는 npm 패키지로 설치해 컴포넌트로 쓰는 방식이다. 즉 프로젝트 여러 곳에서 같은 스피너를 일관되게 쓰고 크기·색을 props로 관리하고 싶으면 패키지 쪽이 편하고, 한두 곳에만 필요하면 복붙이 낫다. 27종 이름이 구체적이라(Comet, Snake, Swirl 같은) 고르기도 쉽다. 주의: 로딩 표시는 종류보다 타이밍이 중요하다 — 0.3초 안에 끝나는 요청에 스피너를 띄우면 깜빡임이 되어 오히려 느려 보이므로 지연 표시를 함께 구현할 것. 라이선스 미확인이므로 상업 사용 전 저장소에서 확인.
·loading.dev·
loading.dev — React 로딩 스피너 27종 라이브러리
Learn UI — 인터랙티브 데모로 배우는 디자인 엔지니어링
Learn UI — 인터랙티브 데모로 배우는 디자인 엔지니어링
저장해둔 자료 대부분이 "가져다 쓰는 것"이라면 이건 "판단력을 기르는 것"이다. 스프링 값이나 전환 곡선을 왜 그렇게 잡는지 몰라서 매번 감으로 맞추고 있다면 여기 모션 챕터가 직접적인 해답이 된다 — 값을 조작해보는 그림이 붙어 있어 글로만 읽는 것보다 남는 게 다르다. 참여 면면도 신뢰할 만한데, Emil Kowalski는 저장해둔 Sonner·Vaul의 제작자이고 Rauno Freiberg는 Vercel 디자인 엔지니어로 UI 디테일 글로 알려진 사람이다. 실용 연결: 여기서 원리를 잡고 → Kinetics·Motion Primitives에서 재료를 고르고 → DialKit으로 값을 맞추고 → Design Spells·details.so에서 아이디어를 얻는 흐름으로 쓰면 된다. 용어집은 저장해둔 NameThatUI와 함께 용어 확인용으로도 쓸 수 있다.
·learn-ui.com·
Learn UI — 인터랙티브 데모로 배우는 디자인 엔지니어링
Design Spells — 실제 앱의 마이크로 인터랙션·이스터에그 수집
Design Spells — 실제 앱의 마이크로 인터랙션·이스터에그 수집
"이 앱의 이 동작이 왜 기분 좋은가"를 항목 단위로 모아둔 자료. 화면 전체 레이아웃을 보는 갤러리들과 달리 한 동작·한 디테일 단위라, 만들고 있는 기능에 작은 즐거움을 더할 아이디어를 찾을 때 효율이 높다. 태그(이스터에그, 404, 컨페티, 전환)로 목적에 맞춰 좁혀볼 수 있는 점도 실용적이다. 저장해둔 details.so와 가장 가까운 성격이며 이쪽이 모바일 앱과 이스터에그 비중이 크다. 구현체는 저장된 연출 계열·모션 라이브러리에서 찾고 여기서는 "무엇을 만들지"의 재료를 얻을 것. 주의: 디테일은 제품 톤에 맞을 때만 즐겁고 업무용 도구에 과하게 넣으면 방해가 된다.
·designspells.com·
Design Spells — 실제 앱의 마이크로 인터랙션·이스터에그 수집
ObsidianUI — Motion 기반 인터랙션 컴포넌트 52종 + 블록 18종
ObsidianUI — Motion 기반 인터랙션 컴포넌트 52종 + 블록 18종
규모는 작지만 항목이 구체적이라 발췌용으로 볼 만한 모음. Apple Spotlight(맥OS 스포트라이트풍 오버레이)와 Circle Menu는 기성 라이브러리에 잘 없는 축이다. 다만 Fractal Glass는 저장해둔 ibelick Lab에도 있고 Magnetic 계열은 Motion Primitives·Kinetics와 겹치므로 중복을 확인하고 가져올 것. MIT라 사용 조건은 깔끔하다. Motion 의존이므로 애니메이션 라이브러리 통일 원칙은 동일하게 적용된다.
·obsidianui.dev·
ObsidianUI — Motion 기반 인터랙션 컴포넌트 52종 + 블록 18종
02UI — "언제 이 컴포넌트를 쓰는가"를 다루는 UI 레퍼런스
02UI — "언제 이 컴포넌트를 쓰는가"를 다루는 UI 레퍼런스
설치해 쓰는 라이브러리가 아니라 판단 기준을 주는 자료다. 저장해둔 같은 계열과 역할이 갈린다 — component.gallery는 컴포넌트의 정식 명칭과 여러 디자인 시스템의 구현 비교, components.build는 접근성·표준 관점의 기준, 그리고 02UI는 선택 판단(모달 vs 드로어, 토스트 vs 인라인 메시지 같은 갈림길)이다. 비교 가이드 8편이 핵심이므로 컴포넌트를 고르다 막혔을 때 그쪽을 먼저 볼 것. 디자이너 대상이라 코드 레벨 세부는 없으니 구현은 저장된 라이브러리에서 찾고, 여기서는 "무엇을 쓸지"만 정하는 식으로 나눠 쓰면 된다.
·02ui.com·
02UI — "언제 이 컴포넌트를 쓰는가"를 다루는 UI 레퍼런스