Frontend

섹션 단위로 페이지를 채우면서 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종은 많지 않다. 원하는 음색이 없을 수 있으니 미리 들어보고 판단할 것.

카드나 이미지에 입체감 있는 호버 효과가 필요할 때. 마우스를 따라 레이어가 기울고 깊이가 생기는 그 효과다. UI Components의 React Just Parallax와 갈린다 — 저쪽은 스크롤과 마우스에 따라 배경이 밀리는 평면 패럴랙스, 이건 요소 자체가 3D로 기우는 호버 효과. 목적이 다르니 같이 쓸 수도 있다. 2KB에 의존성이 없다. 이 컬렉션의 효과 라이브러리 중 가장 가벼운 축이고, 프레임워크도 가리지 않는다. Swiper를 만든 nolimits4web의 프로젝트다. 유지보수 이력이 있는 쪽이라 개인 소규모 프로젝트보다 안심할 수 있다. MIT로 명확하다. 효과가 강하니 페이지에 몇 개만 쓸 것. 카드 목록 전체에 걸면 산만해진다.

히어로 배경이나 이미지에 깊이감을 줄 때. 스크롤과 마우스 양쪽을 다루는 게 특징으로, 대부분의 패럴랙스 라이브러리는 스크롤만 본다. 목적이 하나로 좁다. Framer Motion을 이미 쓰고 있다면 useScroll·useTransform으로 비슷한 것을 만들 수 있으니 굳이 의존성을 늘릴 이유는 없다. 그쪽을 안 쓰는 프로젝트에서 값어치가 있다. 패럴랙스는 과하면 어지럽다. prefers-reduced-motion을 존중하는지 확인하고, 아니면 직접 분기 처리할 것. 모바일에서 마우스 패럴랙스는 동작하지 않는다. 터치 대응 범위를 확인할 것. 라이선스가 명시돼 있지 않다. npm과 GitHub에서 확인할 것.

금액이나 수량 계산 결과가 0.30000000000000004처럼 나올 때. toFixed()는 자릿수를 고정해버려서 정수는 정수대로 보이게 하려면 따로 손봐야 하는데 그 부분을 정리해준다. 커머스나 정산 화면처럼 숫자가 그대로 노출되는 곳에서 값어치가 크다. 표시용이다. 금액 계산 자체의 정확도가 중요하면 정수(원 단위)로 다루거나 Decimal 라이브러리를 쓰는 게 맞다. 이건 마지막 출력 단계의 도구다. UI Components의 Calligraph와 함께 쓸 수 있다. 여기서 값을 정리하고 저기서 바뀌는 모습을 보여주는 식. 작은 유틸리티다. 라이선스가 명시돼 있지 않으니 GitHub에서 확인할 것.

SaaS 랜딩이나 대시보드를 통째로 빠르게 세울 때. 일러스트까지 함께 주는 곳은 이 컬렉션에서 드물다. Aceternity UI와 구조가 같다 — 무료 일부 + 1회 결제 Pro. 가격은 이쪽이 $99, Aceternity는 All-Access. 둘 중 하나면 충분하니 무료분으로 품질을 비교한 뒤 정할 것. 상업 사용이 Pro에 묶여 있다. 무료 티어로 클라이언트 작업을 하면 안 된다. 라이선스 조건을 먼저 읽을 것. Framer Motion과 GSAP을 모두 쓴다. 둘 다 번들에 들어갈 수 있으니 확인할 것.

라이브러리가 아니라 기법 참고용이다. 카드에 마우스를 올렸을 때 입체적으로 반짝이는 효과를 어떻게 만드는지 코드로 확인한다. 그라디언트·블렌드 모드·마스크·3D 변환을 조합한 사례라, 비슷한 질감 효과를 직접 만들 때 출발점이 된다. 그대로 쓸 일은 드물다. 포켓몬 카드라는 소재가 특정돼 있고 계산이 무겁다. 아이디어와 구현 방식만 가져올 것. 저작권 주의: 포켓몬 카드 이미지와 디자인은 원저작자의 것이다. CSS 기법은 참고하되 카드 에셋을 그대로 쓰지 말 것. 성능 부담이 크다. 목록에 여러 개를 동시에 띄우면 느려진다.

디자이너와 개발자가 같은 컴포넌트를 쓰게 만들어야 할 때. React와 Figma 라이브러리가 짝으로 관리되는 게 이 제품의 핵심이고, 이 컬렉션에서 그 구조를 가진 것은 이것뿐이다. UI Components의 foundation(shadcn/ui·Joly UI·Reka UI)과 접근이 다르다. 저들은 코드를 내 것으로 가져오는 방식이고, 이건 완성된 시스템을 도입하는 방식이다. 자유도는 낮고 일관성은 높다. Storybook MCP를 제공해 에이전트가 컴포넌트 목록과 사용법을 직접 읽게 할 수 있다. 라이선스와 가격이 사이트에 명시돼 있지 않다. 상업 도입 전 반드시 확인할 것 — 유료 디자인 시스템일 가능성이 있다.

간단한 등장·퇴장 애니메이션에 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 부분과 유료 부분이 섞여 있다. 쓰려는 컴포넌트가 어느 쪽인지 확인할 것. 규모가 큰 만큼 번들 관리가 중요하다. 필요한 것만 가져오는지 확인할 것.

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

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

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

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에서 확인한 뒤 판단할 것.

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

회원가입이나 주문 폼에 전화번호를 받을 때. 국가 코드와 자릿수 검증을 직접 짜면 예외가 끝없이 나오는데 그 부분을 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 저장소에서 확인했다.

플로팅 독이나 커스텀 커서처럼 눈에 띄는 조각이 필요할 때. 연출 계열 중에서도 장식성이 강한 쪽이다. 같은 계열에서 겹치는 것이 많다. 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에서 확인할 것.

금액이나 카운터처럼 숫자가 바뀌는 자리에 쓴다. 통화 포맷과 슬롯머신 연출이 기본 제공돼서 결제 금액, 대시보드 지표에 바로 맞는다. 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라면 덜 맞을 수 있다.

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

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

랜딩 페이지에 스크롤 연동 연출이 필요할 때. 스크롤에 맞춰 움직이는 요소는 직접 만들면 성능과 되감기 처리에서 손이 많이 간다. 연출 계열에서 Componentry와 성격이 가장 가깝다 — 둘 다 Vercel OSS 후원에 전면 무료, shadcn CLI 설치다. 규모는 이쪽이 46종으로 조금 크고 랜딩 특화가 뚜렷하다. Aceternity UI와도 겹치는 영역인데, 저쪽은 페이지 블록이 통째로 있고 좋은 것이 유료에 있다. 이쪽은 전부 무료지만 조각 단위가 많다. 버튼·텍스트·레이아웃으로 계열이 나뉘어 있어 필요한 것만 골라 넣기 쉽다. "10k+ 개발자가 사용"은 사이트 자체 홍보 문구다. 판단 근거로 삼지 말 것.

지도에 마커나 오버레이를 얹어야 할 때. Mapbox GL을 직접 쓰면 지도 인스턴스와 이벤트를 명령형으로 다뤄야 하는데 그 부분을 컴포넌트로 감싼다. React 흐름과 어긋나지 않는 게 요지. 날씨·재난 연출(사이클론, 산불, 레이더)이 기본 제공된다. 반대로 말하면 일반적인 위치 표시 서비스에는 필요 없는 것들이 섞여 있다는 뜻이니 번들 크기를 확인할 것. Mapbox GL은 별도 계정과 토큰이 필요하고 사용량 과금이 있다. 무료로 가려면 MapLibre GL 쪽을 선택할 것 — 이 라이브러리가 둘 다 지원하는 게 실질적인 장점이다. 지도 타일 비용은 이 라이브러리와 별개다. 도입 전 타일 제공자부터 정할 것.