Kidow

로딩 중 화면이 덜컹거릴 때(레이아웃 시프트). 스켈레톤을 손으로 그리면 실제 레이아웃과 어긋나기 마련인데 그 어긋남 자체를 없애는 접근이다. 목록·카드처럼 같은 모양이 반복되는 화면에서 효과가 크다. 빌드 시점에 캡처하는 구조라 UI를 고치면 다시 돌려야 한다. CI에 넣어두지 않으면 스켈레톤만 옛 모습으로 남는다. UI Components의 transitions.dev에도 스켈레톤 로더가 있지만 그건 손으로 맞추는 템플릿이고, 이건 자동 생성이다.

연출 계열 중 유료 티어가 아예 없는 쪽. Magic UI·Aceternity·beUI는 좋은 것이 Pro에 몰려 있는데 여기는 전부 열려 있다. 예산이 걸리거나 오픈소스 프로젝트라면 여기부터 볼 것. 대신 규모가 작다(50종). 원하는 게 없을 확률이 다른 곳보다 높으니 먼저 목록을 훑고 판단할 것. MCP를 지원해서 Claude Code에서 직접 골라 설치할 수 있다. 같은 방식은 AI Canvas·Aceternity·Originkit에도 있다.

제품 소개 영상이 필요한데 After Effects를 다룰 줄 모를 때. 화면 녹화보다 나은 결과를 영상 편집 없이 얻는 게 목적이다. 애니메이션과 타이밍이 이미 정해진 조각을 에이전트가 조합하는 구조다. 그래서 빠른 대신 완전히 새로운 연출은 어렵다. Tools의 HyperFrames와 갈린다 — HyperFrames는 코드로 영상을 직접 짜는 쪽(정밀·자동화), 이건 말로 시켜서 뽑는 쪽(속도). 반복 자동 생성이면 HyperFrames, 일회성 소개 영상이면 이쪽. MIT에 무료라 라이선스 부담이 없다.

에이전트에게 코드를 맡길 때 결과물이 매번 제각각이면 이걸 물릴 것. 색·타이포·여백 기준이 고정돼 페이지마다 튀는 걸 막는다. 쓰는 법은 단순하다 — 카탈로그에서 마음에 드는 사이트의 DESIGN.md를 골라 에이전트에 참조로 넘긴다. 550곳을 훑어보는 것 자체가 레퍼런스가 된다. 어떤 방향으로 갈지 정하는 단계에서도 쓸 만하다. 남의 디자인 시스템을 그대로 가져오는 것이므로 자기 브랜드가 있으면 출발점으로만 쓰고 토큰은 바꿀 것.

새 프로젝트를 열었을 때 한 번 돌릴 것. 스택에 맞는 스킬을 알아서 찾아주므로 어떤 스킬이 있는지 몰라도 된다. 먼저 dry-run으로 무엇이 설치될지 확인한 다음 실행하는 편이 안전하다. 설치되는 건 결국 에이전트에게 주는 지침 파일이다. 내용은 직접 열어보고 프로젝트 관행과 어긋나는 부분은 손볼 것. Tools의 agentcn과 다르다 — agentcn은 에이전트 자체를 만드는 레시피, 이건 이미 쓰는 에이전트에 지식을 붙이는 쪽.

CLI 도구를 React로 짜고 싶을 때의 뼈대. 앱 구조와 실행 환경을 담당한다. UI Components의 termcn과 짝이다 — Gridland가 틀이면 termcn이 그 안에 넣는 조각(표·차트·스피너 등). 둘 다 OpenTUI 계열이라 같이 쓰기 좋다. 브라우저에서도 같은 코드가 도는 게 특징. 터미널 앱의 데모 페이지를 웹으로 그대로 내보낼 수 있다. Bun 전제로 안내되므로 Node 환경이라면 먼저 확인할 것.

아이콘 세트를 통째로 갈아야 할 때. 한두 개만 필요하면 Lucide 같은 무료 오픈소스가 빠르다. 스타일 계열이 갈려 있으니 프로젝트 하나에서는 한 계열로 통일할 것 — 섞으면 바로 티가 난다. 라이선스 주의: 무료분은 개인 프로젝트용이다. 상업 제품·클라이언트 작업에는 Lifetime 또는 유료 구독이 필요하고, 어느 쪽이든 아이콘 자체를 재판매하거나 템플릿에 넣어 파는 것은 금지된다. 유료는 출처 표기 불필요, 무료분은 표기 권장.

Tools의 Is Agentic과 같은 목적이지만 보는 층위가 다르다. 둘 다 돌려보고 비교할 것. Is Agentic은 에이전트가 실제로 사이트를 돌아다닌 경로를 보여주는 쪽(행동 관찰), 이건 표준 구현 여부를 항목별로 체크하는 쪽(스펙 대조)이다. 커머스 표준(x402·UCP·ACP)까지 본다는 게 이 도구의 특징이다 — 에이전트가 대신 결제·주문하는 흐름을 대비하는 항목들이다. robots.txt의 AI 봇 규칙처럼 당장 고칠 수 있는 것부터 권고해주니 배포 후 한 번 돌릴 것.

제품을 3D로 돌려보게 하거나 AR로 실제 공간에 놓아보게 할 때. 가구·기기처럼 크기 감이 중요한 상품에서 값어치가 크다. 공간을 보여주는 View360과 반대로 이건 물체 하나에 초점이 맞춰져 있다. glTF 모델이 있어야 시작된다 — 모델 제작 비용이 실제 도입 장벽이다. UI Components의 ThreeUI와 다르다. 저쪽은 장식용 비주얼, 이건 실제 모델 뷰어.

매장이나 실내 공간을 360도로 보여줘야 할 때. 사진 여러 장 대신 공간 자체를 전달하는 용도. 파노라마 이미지/영상 전용이다. 개별 제품을 돌려보게 하려면 View3D 쪽이 맞다. MIT라 라이선스 고민이 없다 — 이 컬렉션에서 상업 사용이 명시적으로 확인된 몇 안 되는 항목.

상품 목록이나 커뮤니티 피드처럼 아이템이 계속 늘어나는 화면을 만들 때. 상품 그리드나 피드에 바로 해당된다. 직접 구현하면 스크롤 위치 복원과 높이 계산에서 반드시 막히는데 그 부분이 해결돼 있다. 카드 높이가 제각각이면 Masonry, 사진 위주로 줄을 꽉 채우려면 Justified를 볼 것. 이 컬렉션의 shadcn 계열과 달리 복붙이 아니라 npm 의존성이다.

MCP 서버나 에이전트 앱의 화면을 만들 때. 채팅 버블·상태 표시·통계 카드처럼 매번 다시 짜게 되는 것들이 모여 있다. Tools의 agentcn이 로직이라면 이건 그 화면 쪽이다. 둘을 같이 보면 된다. Radix가 아니라 Base UI 기반이다. 기존 shadcn/ui 컴포넌트와 섞을 때 동작 차이를 확인할 것.

글쓰기 화면이 필요할 때. 커뮤니티나 블로그 글 작성기에 바로 맞는다. 툴바형과 Notion식 블록형 중 고를 수 있다. 커뮤니티 글이면 블록형, 상품 설명처럼 짧은 서식이면 툴바형이 무난하다. Tiptap 기반이라 확장·플러그인은 Tiptap 생태계를 그대로 따른다. 이 컬렉션의 shadcn-labs 계열과 달리 제작자가 다르다.

청구서·명세서·리포트를 PDF로 뽑아야 할 때. 주문 영수증이나 정산서에 바로 대응된다. 템플릿이 인보이스 쪽에 치우쳐 있으므로 일반 문서 레이아웃이 필요하면 맞지 않는다. Takumi/Forme 스택을 얹어야 하니 기존 PDF 생성 방식이 있다면 교체 비용을 먼저 볼 것.

거래 메일이나 마케팅 메일 템플릿이 필요할 때. 주문 확인·환영 메일·신상품 안내가 그대로 있다. React Email / MJML React / JSX Email 중 무엇을 쓰는지에 따라 설치 경로가 갈리므로 먼저 정할 것. 메일은 클라이언트마다 렌더가 제각각이다. 가져다 쓴 뒤 실제 발송 테스트는 반드시 거칠 것.

에이전트를 처음부터 짜기 전에 여기 레시피를 먼저 볼 것. 구조를 통째로 가져다 고치는 편이 빠르다. 프레임워크별로 갈리므로(Mastra, LangGraph 등) 쓸 스택부터 정하고 들어갈 것. 주식 분석 MCP나 로컬 도구에 에이전트를 붙일 때의 출발점으로 쓸 만하다.

링크를 공유했을 때 뜨는 미리보기 카드를 손보고 싶을 때. 공유 링크가 카톡·트위터에서 밋밋하게 보인다면 여기서 템플릿을 가져다 쓰는 게 제일 빠르다. Next.js의 ImageResponse(내부적으로 Satori)를 이미 쓰고 있다면 바로 얹힌다. 직접 디자인할 필요가 없어지는 게 핵심. 페이지마다 동적으로 생성하는 구조라 빌드가 아니라 요청 시점에 그려진다 — 응답 시간과 캐싱을 같이 확인할 것.

앱 안에 영상 UI를 넣어야 할 때. 플레이어 껍데기부터 오버레이까지 이미 만들어져 있어 직접 짜는 수고를 던다. Tools의 HyperFrames와 헷갈리지 말 것 — HyperFrames는 영상 파일(MP4)을 만들어내는 쪽, 이건 앱 화면에서 영상을 보여주는 쪽이다. Editframe에 묶이므로 그쪽 요금·제약을 먼저 확인할 것. 라이선스도 미표기라 상업 사용 전 GitHub에서 확인.

CLI 도구를 만들 때. 로컬 데스크탑 앱이나 MCP 서버에 진행 상황·표·차트를 터미널로 보여줄 일이 생기면 여기부터. 웹에는 쓸 수 없다. Ink 위에서 도는 별개 세계다.

반복적으로 찍어내야 하는 영상이 있을 때(제품 소개, 데이터 기반 리포트 영상 등). 결정론적 렌더라 CI에 걸어 자동 생성할 수 있다. 일회성 영상 하나뿐이면 그냥 영상 편집기가 빠르다.

네비게이션 구조를 정하는 단계에서. 메가메뉴로 갈지 사이드바로 갈지 고민될 때 유형별 실제 사례를 비교한다. 코드는 없다. 방향을 정한 뒤 구현은 UI Components에서.

이미 만들어둔 컴포넌트에 움직임만 얹고 싶을 때. 컴포넌트를 주지 않으므로 다른 연출 계열와 경쟁이 아니라 같이 쓰는 물건이다. CSS 버전이 있어서 React가 아닌 곳에도 적용된다. 모달 전환과 스켈레톤 로더가 실무에서 바로 쓰인다.

Framer로 디자인할 때. 이 컬렉션에서 유일하게 디자인 툴 캔버스에 직접 붙는다. 코드만 필요하면 다른 연출 계열가 낫다. 라이선스 미표기라 상업 프로젝트에 쓰기 전 반드시 확인.

버튼·모달·토스트·탭 같은 기본 컴포넌트에 애니메이션이 이미 들어간 버전이 필요할 때. React 19 / Tailwind 4 기준이라 구버전 프로젝트에는 맞춰야 한다. 커맨드 팔레트와 다이나믹 아일랜드가 특히 쓸만하다.

운영 중인 사이트를 AI 에이전트나 크롤러가 제대로 읽는지 점검할 때. 배포 후 한 번 돌려 권고사항만 훑어도 값어치가 있다. 리포트가 공개 URL로 남으니 비공개 내부 사이트에는 주의.

섹션 배경이나 히어로에 3D·WebGL 비주얼이 필요할 때. 성능 부담이 크니 페이지당 하나 정도로 제한할 것. 라이선스·가격이 사이트에 없다. 상업 사용 전 확인 필수.

새 프로젝트를 시작할 때 가장 먼저 깔 것. 이 컬렉션의 나머지 대부분이 이걸 전제로 하므로 순서가 뒤바뀌면 손해다. 폼·테이블·다이얼로그 같은 제품 내부 UI는 거의 이걸로 끝난다. 화려함이 필요하면 그때 연출 계열를 위에 얹는다.

랜딩·마케팅 페이지를 빠르게 찍어낼 때. 히어로·피처·가격 블록이 페이지 단위로 준비돼 있다. 제품 내부 UI에는 과하다. 좋은 블록은 All-Access(1회 결제)에 몰려 있으니 무료분으로 먼저 훑고 판단할 것.

Claude Code·Cursor로 작업하다가 컴포넌트 탐색과 설치를 에이전트에 맡기고 싶을 때. MCP 연결이 핵심이다. 직접 고를 생각이면 연출 계열 쪽 개별 라이브러리가 더 빠르다.

특정 이펙트 하나만 딱 필요할 때(테두리 빛, 구체, 액체 금속 등). npm 패키지라 복붙이 아니라 의존성으로 들어간다. 그래서 shadcn을 안 쓰는 프로젝트에도 넣을 수 있는 게 장점. Image Generation만 Three.js가 필요하다.