제품 내부 화면에 쓸 조각을 찾을 때. 마케팅용 연출이 아니라 인증 흐름·트리·목차처럼 애플리케이션에 필요한 것들이 Application UI에 모여 있다. 훅과 유틸리티까지 함께 제공하는 게 조금 다르다. 컴포넌트만 주는 곳이 대부분이다. 규모는 크지 않다(966 스타). Kibo UI와 자리가 겹치는데 저쪽이 더 깊고 제작자 이력도 확실하다. 이쪽은 없는 것을 찾을 때 보는 보조. 라이선스가 명시돼 있지 않다. 상업 사용 전 GitHub에서 확인할 것.
shadcn/ui에 없는 복잡한 컴포넌트가 필요할 때. 간트 차트, 칸반 보드, 에디터처럼 직접 만들면 며칠씩 걸리는 것들이 들어 있다. UI Components의 "shadcn 빈자리 채우기" 셋 중 가장 무게가 있다 — ui-x는 폼 입력 위주, cascader·Phone Input은 단일 컴포넌트, 이건 간트·칸반 같은 큰 것까지 다룬다. Tools의 Ultracite, Design의 components.build와 같은 제작자(Hayden Bleasel)다. 이 컬렉션에 그의 프로젝트가 셋이다. 간트·칸반은 프로젝트 관리 화면에 바로 쓰인다. 직접 구현하기 전에 여기부터 볼 것. 라이선스가 명시돼 있지 않다. 상업 사용 전 확인할 것.
다른 곳에 없는 연출이 필요할 때. 중력 효과나 SVG 경로 마퀴처럼 범용 라이브러리가 다루지 않는 것들이 있다. 연출 계열에서 Spell UI와 성격이 가장 가깝다 — 둘 다 범용 세트가 아니라 개성 있는 단품 위주다. 프로젝트에 맞는 게 없을 확률도 그만큼 높다. React Bits를 먼저 훑고 없을 때 오는 순서가 합리적이다. 저쪽이 규모와 안정성에서 앞선다. 라이선스가 명시돼 있지 않다. 상업 사용 전 GitHub에서 확인할 것.
연출 계열에서 먼저 볼 곳. 규모(165종)와 채택 규모(47.1k 스타)가 이 컬렉션에서 가장 크고, 유지보수 지속성도 가장 안정적인 축이다. 네 가지 변형을 주는 게 실질적인 강점이다. Tailwind를 안 쓰거나 TypeScript를 안 쓰는 프로젝트에도 그대로 들어간다. 이 컬렉션의 다른 라이브러리는 대개 TS+Tailwind 하나만 준다. Nur UI의 TS→JS 변환 기능이 여기서는 처음부터 변형으로 제공된다. 같은 필요라면 이쪽이 낫다. 라이선스가 MIT + Commons Clause다. 개인·상업 사용은 되지만 Commons Clause는 "이 소프트웨어를 판매하는 것"을 금지한다. 컴포넌트를 모아 유료 템플릿으로 되파는 식의 사용은 안 된다. 일반적인 제품 개발에는 문제없다. 설치 경로가 셋(shadcn CLI·jsrepo·복사)이라 프로젝트 상황에 맞춰 고를 수 있다.
색 조합이 막혔을 때 출발점을 얻는 용도. 포켓몬 디자인은 색 대비가 잘 잡혀 있어서 그대로 쓰기보다 방향을 잡는 데 쓴다. 실무용 도구는 아니다. 접근성 대비나 토큰 체계까지 봐주지 않으므로, 여기서 얻은 색은 대비율을 따로 검사한 뒤 쓸 것. 추출된 색은 포켓몬 캐릭터의 색이지 캐릭터 자체가 아니다. 색 조합에는 저작권이 붙지 않지만, 특정 포켓몬을 연상시키는 조합을 브랜드에 그대로 쓰는 것은 별개 문제다. 참고까지만. Design의 tool 역할 중 가장 가벼운 축이다. 재미로 열어보는 성격이 강하다. 무료이고 로그인이 필요 없다.
서체를 고를 때. 무료 폰트 사이트는 수천 종을 쌓아두는 곳이 많은데 여기는 214종으로 걸러져 있어 훑기 좋다. 가변 폰트 표시가 유용하다. 웹에서 굵기를 여러 단계 쓸 때 파일 하나로 해결되므로 로딩이 가벼워진다. Design의 다른 asset과 성격이 갈린다 — 아이콘·그라디언트·효과음이 있었고 서체는 이번이 처음이다. "무료"의 범위가 서체마다 다르다. 개인용만 무료인 것, 상업 사용까지 되는 것, 웹폰트 임베드가 별도인 것이 섞여 있을 수 있다. 사이트에 라이선스 설명이 없으니 쓰기 전 각 서체의 원 배포처에서 확인할 것. 한글 서체는 다루지 않는 것으로 보인다. 국문이 필요하면 눈누 같은 국내 서비스를 따로 볼 것.
TypeScript를 쓰지 않는 프로젝트에서 값어치가 있다. 이 컬렉션의 컴포넌트 라이브러리 대부분이 TS 코드를 주는데, 여기는 JS로 변환해 받을 수 있다. 그 점을 빼면 연출 계열의 다른 항목과 차별점이 약하다. 스택(React·Tailwind·motion·GSAP)도 규모가 비슷한 곳들과 같다. v0 프리뷰 연동이 있어 컴포넌트를 v0에서 바로 열어 변형해볼 수 있다. 컴포넌트 수가 공개돼 있지 않다. 목록을 훑어 쓸 만한 게 있는지 먼저 볼 것. 라이선스가 명시돼 있지 않다. 상업 사용 전 GitHub에서 확인할 것.
히어로 배경이나 인터랙티브 비주얼을 셰이더 코드 없이 만들 때. 값을 눈으로 조절해 결과를 확인하는 방식이라 GLSL을 몰라도 된다. Design의 tool 역할이나 다른 셋과 다르다 — Photon·Daydream·Palmier는 이미지·영상 편집기이고, 이건 웹에 얹을 인터랙티브 그래픽을 만드는 쪽이다. UI Components의 ThreeUI·Ripple Shader와 목적이 겹치지만 접근이 반대다. 저들은 코드로 만드는 것이고, 이건 도구로 만들어 임베드하는 것. 코드를 직접 다룰 생각이 없으면 이쪽이 빠르다. 라이브 임베드는 외부 서비스에 의존한다는 뜻이다. 서비스가 멈추면 그 그래픽도 멈춘다. 중요한 화면이라면 이미지·영상 내보내기 쪽을 고려할 것. 셰이더 기반이라 GPU 부담이 있다. 모바일과 저사양 기기에서 확인할 것. AI 기능은 유료 플랜의 크레딧제다. 무료로 어디까지 되는지 먼저 확인할 것.
아이콘 하나가 필요한데 어느 세트에 있는지 모를 때. 세트를 돌아다니지 않고 한 번에 검색한다. 한국어 검색이 되는 게 이 컬렉션에서 특이한 점이다. "종합격투기" 같은 단어로 찾아도 결과가 나온다. 영어 단어를 떠올려야 하는 다른 아이콘 사이트와 다르다. Design의 다른 아이콘 항목과 성격이 다르다 — Iconly Pro·Central Icon System은 하나의 세트를 제공하고, AnimateIcons·lucide-animated는 움직임을 더한 것이며, 이건 여러 세트를 가로질러 찾는 검색 도구다. 세트마다 라이선스가 다르다. 오픈소스라고 해도 MIT, Apache, CC-BY 등 조건이 갈리므로 쓸 아이콘이 속한 세트의 조건을 확인할 것. 한 프로젝트에서 여러 세트를 섞으면 선 굵기와 모서리가 제각각이 된다. 찾는 용도로 쓰되 실제로는 한 세트로 통일할 것.
대시보드 차트가 밋밋할 때. 기본 Recharts는 정적인데 여기는 등장·전환 애니메이션이 들어가 있다. 차트 관련이 셋이 됐다. 갈리는 지점은 — · Evil Charts: 완성된 차트 컴포넌트를 복사해 씀. 연출이 있는 정적 데이터용 · ChartCN(Tools): CSV를 넣으면 Recharts 코드를 만들어줌. 내 데이터로 시작할 때 · Liveline(UI Components): 실시간으로 흐르는 차트. 시세·센서값용 Recharts와 ECharts를 함께 쓴다. 어느 컴포넌트가 어느 쪽인지 확인할 것 — 둘 다 번들에 들어가면 무겁다. shadcn/ui 차트 프리미티브와 스타일이 맞으므로 기존 대시보드에 섞어 쓰기 좋다. 라이선스가 명시돼 있지 않다. 상업 사용 전 GitHub에서 확인할 것.
연출 계열 중 규모가 중간쯤(140종)이다. Lightswind(304+)보다 작고 Componentry(50)보다 크다. 이 컬렉션에 같은 성격이 이미 많다. 새로 도입할 이유를 찾기보다, 특정 컴포넌트를 검색하다 여기에만 있을 때 가져오는 용도로 둘 것. 복사·붙여넣기와 CLI를 모두 지원한다. 한두 개만 쓸 거면 복사, 여러 개면 CLI. 이름과 달리 스크롤 전용은 아니다. 일반 애니메이션 컴포넌트 전반을 다룬다. 라이선스가 명시돼 있지 않다. 상업 사용 전 GitHub에서 확인할 것.
셰이더로 물결 효과를 만드는 방법을 코드로 확인할 때. 패키지가 아니라 클론해서 보는 예제 프로젝트다. UI Components의 Pokémon Cards CSS와 같은 성격이다 — 가져다 쓰는 라이브러리가 아니라 기법 참고용. 다만 저쪽은 순수 CSS, 이건 WebGL 셰이더다. ThreeUI나 UI-Layouts처럼 완성된 3D 컴포넌트를 주는 곳과 다르다. 셰이더 코드를 직접 이해하고 고칠 생각일 때 본다. 규모가 작다(35 스타, 커밋 18회). 유지보수를 기대할 프로젝트가 아니라 한 번 읽고 가져오는 쪽이다. 라이선스가 명시돼 있지 않다. 코드를 그대로 가져다 쓸 거면 제작자에게 확인하거나 직접 다시 작성할 것. 셰이더는 GPU 부담이 있다. 전체 화면에 상시로 돌리면 배터리와 발열에 영향이 간다. 2026-10-03 확인: 마지막 커밋 2024-08-10, 2년 넘게 갱신 없음.
섹션 단위로 페이지를 채우면서 3D나 스크롤 연출까지 함께 필요할 때. 이 컬렉션의 연출·블록 계열과 자리가 겹친다. 구분되는 점은 Three.js 기반 3D 컴포넌트가 같은 라이브러리 안에 있다는 것 — Lightswind UI 외에는 드물다. Shadcn UI Blocks와 비교할 것. 저쪽은 장식 없이 단정하고 전부 무료, 이건 연출이 강하고 일부가 Pro다. 제품 내부 화면이면 저쪽, 마케팅 페이지면 이쪽. Framer Motion·GSAP·Three.js를 모두 쓴다. 필요한 것만 가져와도 의존성이 따라붙을 수 있으니 번들을 확인할 것. Pro와 무료의 경계를 먼저 확인할 것. 라이선스 조건도 GitHub에서 볼 것.
페이지를 옮기는 동안 아무 반응이 없어 멈춘 것처럼 보일 때. 상단 얇은 바 하나로 "지금 가고 있다"를 알린다. App Router에서 특히 필요하다. 서버 컴포넌트로 이동할 때 체감 지연이 생기는데 그 구간을 메운다. NProgress가 오래 방치돼 있어 그 대체재로 나왔다. 기존 프로젝트에서 NProgress를 쓰고 있다면 교체를 검토할 만하다. UI Components의 SSGOI와 함께 볼 것. 저쪽은 전환 애니메이션 자체, 이건 기다리는 동안의 표시. 목적이 다르니 같이 쓸 수 있다. 라이선스가 명시돼 있지 않다. GitHub에서 확인할 것. 주의(2026-10-03 확인): GitHub 마지막 커밋이 2025-05-05로 1년 넘게 멈춰 있다. 기능이 단순해 당장 문제는 없지만 Next.js 메이저 업데이트 후에는 동작을 직접 확인할 것.
계절감이나 분위기를 주는 배경 연출이 필요할 때. 이벤트 페이지나 날씨 관련 화면에 얹는다. UI Components의 Terrae와 겹치는 영역이 있다. 저쪽은 지도 위의 날씨·재난 연출이고, 이건 화면 전체에 덮는 효과다. 지도가 아니면 이쪽. 용도가 아주 좁다. 상시로 쓸 물건이 아니라 특정 시즌이나 캠페인에 쓰는 종류다. 움직이는 파티클이라 성능 부담이 있다. 모바일과 저사양 기기에서 확인하고 prefers-reduced-motion 처리도 직접 해야 할 가능성이 높다. 정보가 적다. 설치 방법과 라이선스가 없으니 GitHub에서 확인할 것.
버튼이나 알림에 소리를 붙일 때. 음원 파일까지 함께 들어 있어 따로 구하지 않아도 된다. Design의 soundcn과 갈린다 — 저쪽은 효과음 700종을 주는 음원 모음이고, 이건 음원 28종에 재생을 처리하는 React 래퍼가 붙은 것. 소리 종류가 많이 필요하면 soundcn, 코드까지 한 번에 해결하려면 이쪽. soundcn 노트에 적은 주의가 그대로 적용된다 — 기본은 꺼짐, 끌 수 있는 설정, 의미 있는 곳에만. MIT로 명확하다. soundcn은 라이선스 미표기였으니 상업 프로젝트라면 이 차이가 크다. 28종은 많지 않다. 원하는 음색이 없을 수 있으니 미리 들어보고 판단할 것.
타이밍을 눈으로 맞춰야 하는 복잡한 애니메이션을 만들 때. 코드에서 숫자를 고치고 새로고침하는 반복 대신 타임라인에서 끌어 조정한다. Tools의 build로 두었다. 결과물을 프로젝트에 넣는 라이브러리이면서 동시에 편집 도구라 애매하지만, 만드는 데 쓰는 쪽에 무게를 두었다. UI Components의 연출 계열과 층위가 다르다. 저들은 완성된 효과를 주고, 이건 내가 원하는 움직임을 직접 설계하는 도구다. 3D(THREE.js·React Three Fiber) 쪽에서 특히 쓰인다. UI Components의 ThreeUI나 View3D로 만든 장면에 움직임을 입힐 때. 에디터는 개발 중에만 쓰고 프로덕션 번들에서는 빠지도록 설정해야 한다. 확인할 것. 학습 곡선이 있다. 단순한 등장·퇴장 효과라면 Tailwind Animations나 Framer Motion이 빠르다.
카드나 이미지에 입체감 있는 호버 효과가 필요할 때. 마우스를 따라 레이어가 기울고 깊이가 생기는 그 효과다. UI Components의 React Just Parallax와 갈린다 — 저쪽은 스크롤과 마우스에 따라 배경이 밀리는 평면 패럴랙스, 이건 요소 자체가 3D로 기우는 호버 효과. 목적이 다르니 같이 쓸 수도 있다. 2KB에 의존성이 없다. 이 컬렉션의 효과 라이브러리 중 가장 가벼운 축이고, 프레임워크도 가리지 않는다. Swiper를 만든 nolimits4web의 프로젝트다. 유지보수 이력이 있는 쪽이라 개인 소규모 프로젝트보다 안심할 수 있다. MIT로 명확하다. 효과가 강하니 페이지에 몇 개만 쓸 것. 카드 목록 전체에 걸면 산만해진다.
히어로 배경이나 이미지에 깊이감을 줄 때. 스크롤과 마우스 양쪽을 다루는 게 특징으로, 대부분의 패럴랙스 라이브러리는 스크롤만 본다. 목적이 하나로 좁다. Framer Motion을 이미 쓰고 있다면 useScroll·useTransform으로 비슷한 것을 만들 수 있으니 굳이 의존성을 늘릴 이유는 없다. 그쪽을 안 쓰는 프로젝트에서 값어치가 있다. 패럴랙스는 과하면 어지럽다. prefers-reduced-motion을 존중하는지 확인하고, 아니면 직접 분기 처리할 것. 모바일에서 마우스 패럴랙스는 동작하지 않는다. 터치 대응 범위를 확인할 것. 라이선스가 명시돼 있지 않다. npm과 GitHub에서 확인할 것.
국내 서비스에 필요한 데이터를 찾을 때. 공공데이터포털·행정안전부·국토교통부 같은 국내 출처가 정리돼 있어 영어권 목록에서는 안 나오는 것들이 잡힌다. Tools의 Public APIs와 짝이다. 저쪽은 글로벌 위주, 이건 국내 위주. 국내 주소·부동산·교통·행정 데이터가 필요하면 여기부터 볼 것. 국내 공공 API는 대개 신청과 승인 절차가 있고 일일 호출 한도가 있다. 목록에서 찾은 뒤 실제 발급 조건을 확인할 것. 이 컬렉션에서 세 번째 한국어 자료다(BananaX, Velopers에 이어). MIT로 명확하다. 다만 이건 목록의 라이선스이고 개별 API의 이용 약관은 각각 다르다.
금액이나 수량 계산 결과가 0.30000000000000004처럼 나올 때. toFixed()는 자릿수를 고정해버려서 정수는 정수대로 보이게 하려면 따로 손봐야 하는데 그 부분을 정리해준다. 커머스나 정산 화면처럼 숫자가 그대로 노출되는 곳에서 값어치가 크다. 표시용이다. 금액 계산 자체의 정확도가 중요하면 정수(원 단위)로 다루거나 Decimal 라이브러리를 쓰는 게 맞다. 이건 마지막 출력 단계의 도구다. UI Components의 Calligraph와 함께 쓸 수 있다. 여기서 값을 정리하고 저기서 바뀌는 모습을 보여주는 식. 작은 유틸리티다. 라이선스가 명시돼 있지 않으니 GitHub에서 확인할 것.
SaaS 랜딩이나 대시보드를 통째로 빠르게 세울 때. 일러스트까지 함께 주는 곳은 이 컬렉션에서 드물다. Aceternity UI와 구조가 같다 — 무료 일부 + 1회 결제 Pro. 가격은 이쪽이 $99, Aceternity는 All-Access. 둘 중 하나면 충분하니 무료분으로 품질을 비교한 뒤 정할 것. 상업 사용이 Pro에 묶여 있다. 무료 티어로 클라이언트 작업을 하면 안 된다. 라이선스 조건을 먼저 읽을 것. Framer Motion과 GSAP을 모두 쓴다. 둘 다 번들에 들어갈 수 있으니 확인할 것.
사이드 프로젝트나 데모에 쓸 데이터 출처를 찾을 때. 날씨·환율·지도·이미지처럼 직접 만들 필요 없는 것들을 훑는다. Tools의 Dev Resources와 같은 제작자(Marcel Cruz)다. 저쪽은 도구, 이건 API로 대상이 갈린다. 등재는 되어 있어도 서비스가 죽었거나 인증 정책이 바뀐 경우가 흔하다. 쓰기 전에 실제로 호출해볼 것. 무료 API는 호출 제한과 서비스 종료 위험이 따른다. 프로덕션에 넣을 거면 유료 대안이 있는지 함께 확인할 것.
라이브러리가 아니라 기법 참고용이다. 카드에 마우스를 올렸을 때 입체적으로 반짝이는 효과를 어떻게 만드는지 코드로 확인한다. 그라디언트·블렌드 모드·마스크·3D 변환을 조합한 사례라, 비슷한 질감 효과를 직접 만들 때 출발점이 된다. 그대로 쓸 일은 드물다. 포켓몬 카드라는 소재가 특정돼 있고 계산이 무겁다. 아이디어와 구현 방식만 가져올 것. 저작권 주의: 포켓몬 카드 이미지와 디자인은 원저작자의 것이다. CSS 기법은 참고하되 카드 에셋을 그대로 쓰지 말 것. 성능 부담이 크다. 목록에 여러 개를 동시에 띄우면 느려진다.
디자이너와 개발자가 같은 컴포넌트를 쓰게 만들어야 할 때. React와 Figma 라이브러리가 짝으로 관리되는 게 이 제품의 핵심이고, 이 컬렉션에서 그 구조를 가진 것은 이것뿐이다. UI Components의 foundation(shadcn/ui·Joly UI·Reka UI)과 접근이 다르다. 저들은 코드를 내 것으로 가져오는 방식이고, 이건 완성된 시스템을 도입하는 방식이다. 자유도는 낮고 일관성은 높다. Storybook MCP를 제공해 에이전트가 컴포넌트 목록과 사용법을 직접 읽게 할 수 있다. 라이선스와 가격이 사이트에 명시돼 있지 않다. 상업 도입 전 반드시 확인할 것 — 유료 디자인 시스템일 가능성이 있다.
"이 섹션을 어떻게 만들지" 단계에서 사례를 찾을 때. 사이트 전체가 아니라 요소 단위로 검색되는 게 핵심이다. Design의 inspiration 넷과 대상이 갈린다 — Navbar Gallery는 네비게이션만, loadmo.re는 모바일 사이트, Inspo는 사이트 전체와 DESIGN.md, Component Gallery는 컴포넌트 명세와 접근성. 이건 살아 있는 사이트의 디테일과 인터랙션. MCP가 있어 에이전트에게 "이런 히어로 섹션 참고해서 만들어줘"를 맡길 수 있다. 다만 MCP는 유료 플랜에 포함된다. 인터랙션 분류(스크롤 애니메이션·페이지 전환·프리로더)가 특히 쓸모 있다. 정적인 갤러리에서는 못 보는 부분이다. 월 $9다. 무료로 얼마나 볼 수 있는지 먼저 확인할 것.
국내 기업들이 실제로 어떤 문제를 어떻게 풀었는지 훑을 때. 해외 자료와 달리 국내 서비스 규모와 환경이 전제된 사례라 바로 대입해보기 좋다. 블로그를 하나씩 찾아다닐 필요가 없다는 게 핵심. 카테고리 필터로 관심 영역만 볼 수 있다. Tools의 Deta Surf와 같은 research 역할이나 성격이 다르다 — 저쪽은 자료를 모으고 정리하는 도구, 이건 읽을 자료 자체를 공급하는 곳이다. 이 컬렉션에서 두 번째 한국어 자료다(첫 번째는 Design의 BananaX). 정기적으로 들르는 용도다. 특정 문제를 풀 때 검색하는 곳은 아니다.
간단한 등장·퇴장 애니메이션에 Framer Motion을 넣기 아까울 때. 순수 CSS라 JS 번들이 늘지 않고 성능 부담이 없다. 이 컬렉션의 연출 계열 대부분이 Framer Motion이나 GSAP을 요구하는 것과 대조된다. 가장 가벼운 선택지다. 스크롤 연동 애니메이션을 CSS만으로 처리한다. Vengeance UI 같은 곳의 스크롤 연출과 목적이 겹치지만 구현 비용이 훨씬 낮다. 네이티브 dialog 지원이 실용적이다. 요즘 모달을 dialog로 만들면 등장 효과 붙이기가 번거로운데 그 부분이 해결된다. Tools의 autoskills·CanIRun.ai와 같은 제작자(midudev)다. MIT라 상업 사용에 제약이 없다.
규모가 이 컬렉션에서 가장 크다(컴포넌트 304 + 블록 445). 원하는 것이 있을 확률이 높다는 게 장점이고, 그만큼 품질 편차를 직접 확인해야 한다는 게 단점이다. 3D(WebGL·Three.js)까지 한 라이브러리에 들어 있다. UI Components의 ThreeUI를 따로 쓰지 않아도 되는 경우가 있다. MIT 부분과 유료 부분이 섞여 있다. 쓰려는 컴포넌트가 어느 쪽인지 확인할 것. 규모가 큰 만큼 번들 관리가 중요하다. 필요한 것만 가져오는지 확인할 것.
모바일 화면의 방향을 잡을 때. 데스크탑 레퍼런스는 흔한데 모바일만 모아둔 곳은 드물다. Design의 다른 inspiration과 대상이 갈린다 — Navbar Gallery는 네비게이션, Component Gallery는 컴포넌트 명세, Inspo는 사이트 전체(데스크탑 위주), 이건 모바일 경험. "남다른 사례" 위주라 실험적인 것이 많다. 그대로 따라 하기보다 아이디어를 얻는 용도로 볼 것. 커머스처럼 전환이 중요한 화면에는 과할 수 있다. 코드는 없다. 방향을 정한 뒤 구현은 UI Components에서.