UI 스택 어드바이저
스택 선택은 프로젝트에서 UI 결정 중 가장 영향력이 큽니다. 접근성 품질, 테마 유연성, 번들 크기, 그리고 결과물이 얼마나 '템플릿화'되어 보이는지가 결정됩니다. 신중하게 한 번 선택하고, 그 결정을 기록하세요.
지식 스냅샷: 2026년 11월. 라이브러리는 빠르게 변화합니다. 설치하기 전에 현재 메이저 버전과 API를 확인하세요(신선도 확인 참조). 여기에 나열된 것보다 이미 프로젝트에 있는 것을 선호하세요.
1단계 — 프로젝트 먼저 확인
package.json / pubspec.yaml / Package.swift / build.gradle에서 기존 UI 라이브러리, 스타일링(Tailwind 버전, CSS-in-JS), 프레임워크 버전, components.json(shadcn), DESIGN.md, 또는 토큰 파일을 확인하세요. 기존 라이브러리 옆에 두 번째 컴포넌트 라이브러리를 도입하지 마세요 — 기존 것을 확장하거나 래핑하세요. 프로젝트에서 이미 여기 추천된 것과 경쟁하는 라이브러리를 사용 중이라면 언급은 하되, 요청하지 않은 의존성을 추가로 변경하지는 마세요.
2단계 — 다섯 가지 질문에 답하기
- 플랫폼: 웹 전용, 모바일 전용, 또는 단일 코드베이스로 둘 다?
- 소유권: 복사하여 자유롭게 리스타일링하는 복사-인 방식(shadcn 모델) vs. 버전 관리되는 의존성과 테마 API(MUI/Mantine 모델)? 복사-인 = 최대 디자인 자유도 + 유지보수 필요. 의존성 = 더 빠르고, 일관적이며, 업그레이드가 쉽고, 차별화하기 더 어렵습니다.
- 제품 유형: 마케팅/랜딩(표현력, 모션 중심), 제품 UI/대시보드(밀집, 일관적, 키보드 친화적), 콘텐츠(타이포그래피 중심), 모바일 소비자 앱(네이티브 느낌, 제스처).
- 접근성 기준: 공공 부문/엔터프라이즈/EU(유럽 접근성법) → 검증된 접근성(React Aria, Base UI, Radix)을 갖춘 프리미티브를 선택하고, 대화형 위젯을 직접 만들지 마세요.
- 스타일링 시스템: Tailwind v4(새 웹 프로젝트 기본값), CSS Modules/vanilla-extract, 또는 CSS-in-JS; RN: NativeWind vs. Unistyles vs. Tamagui.
3단계 — 기본 선택 (다른 제약이 없을 때)
| 상황 | 기본 선택 | 이유 |
|---|---|---|
| React/Next.js 제품 UI | shadcn/ui (Base UI 프리미티브 — 2026년 7월 이후 기본값; Radix 및 React Aria도 지원) + Tailwind v4 | 코드를 소유하고, 접근성이 좋으며, 방대한 레지스트리 생태계, AI 도구가 잘 알고 있음 |
| React, 접근성 중요/복잡한 위젯(날짜 범위, 콤보박스, 드래그 & 드롭, i18n) | React Aria Components (또는 React Aria 변형을 사용한 shadcn / 그 위에 구축된 HeroUI v3) | 가장 엄격한 접근성 + i18n 동작 |
| React, 배터리 포함, Tailwind 없음 | Mantine | 100개 이상의 컴포넌트 + 훅 + 폼 + 날짜, 강력한 문서 |
| React, 엔터프라이즈/머티리얼 룩 또는 무거운 데이터 그리드 | MUI v9 (+ MUI X 데이터 그리드/날짜 선택기/차트) | 성숙하고 완전함; 차별화하기 더 어려움 |
| 엔터프라이즈 관리(특히 중국/APAC 팀) | Ant Design | 방대한 컴포넌트 세트, 데이터 밀집 패턴 |
| Vue / Nuxt | Nuxt UI v4 (무료, Reka UI + Tailwind v4 기반) 또는 shadcn-vue | |
| Svelte / SvelteKit | shadcn-svelte (Bits UI 기반) | |
| Solid | Kobalte / solid-ui (shadcn 포트) / Ark UI | |
| Angular | Spartan UI (shadcn 유사) 또는 Angular Material / PrimeNG | |
| 프레임워크 독립적 프리미티브 | Ark UI (Zag.js 상태 머신; React/Vue/Solid/Svelte) | |
| 마케팅 / 랜딩 페이지 감각 | shadcn + Motion + Magic UI / Aceternity / Animate UI / React Bits에서 선택한 요소들 | 1~3개의 시그니처 효과를 사용하고, 콜라주하지 마세요 |
| React Native / Expo (새 앱) | Expo + Expo Router + NativeWind v5 + React Native Reusables (RN용 shadcn) 또는 HeroUI Native; 진정한 네이티브 SwiftUI/Compose 컨트롤을 위한 @expo/ui; 모션을 위한 Reanimated 4 + Gesture Handler | |
| React Native, StyleSheet 스타일 성능 중심 | Unistyles 3 + 자체 컴포넌트 | |
| 하나의 코드베이스로 React Native + 웹 | Tamagui (컴파일러, 범용) 또는 react-native-web을 사용한 Expo + NativeWind | |
| Flutter | Material 3 (내장) / Cupertino; 머티리얼이 아닌 외관을 위한 forui 또는 shadcn_ui | |
| iOS 네이티브 | SwiftUI 시스템 컴포넌트 (iOS 26+의 Liquid Glass는 표준 컨트롤에 무료 제공) | 플랫폼과 최대한 싸우지 마세요 |
| Android 네이티브 | Jetpack Compose Material 3 (material3 1.5 라인에서 표현적 API) |
플랫폼별 세부 사항, 대안 및 트레이드오프는 참조에 있습니다 — 해당하는 것을 읽으세요:
references/web-react.md— React 프리미티브, 스타일 키트, shadcn 생태계 및 레지스트리, Tailwind 도구references/web-other.md— Vue, Svelte, Solid, Angular, Astro, 일반 HTML/웹 컴포넌트references/mobile.md— React Native/Expo, Flutter, SwiftUI, Compose, Kotlin Multiplatformreferences/motion.md— 플랫폼별 애니메이션 라이브러리 및 CSS/네이티브로 충분한 경우references/building-blocks.md— 아이콘, 폰트, 차트, 테이블, 폼, 토스트, 날짜, DnD, 가상화, 편집기, 명령 메뉴, 캐러셀, 지도, 3Dreferences/inspiration.md— 참고 자료(Mobbin, Refero 등) 및 AI 디자인 도구 참고처
4단계 — 결정 기록
프로젝트(DESIGN.md 또는 README "UI 스택" 섹션)에 선택 사항을 기록하세요: 라이브러리 + 버전, 스타일링 접근 방식, 아이콘 세트, 모션 라이브러리, 폰트, 그리고 이유. 향후 세션(및 다른 에이전트)이 재결정하는 대신 이를 읽을 것입니다.
신선도 확인 (설치 전에 수행)
npm view <pkg> version time.modified repository.url # 현재 버전 + 마지막 게시
npm view <pkg> deprecated # 지원 중단 알림(있는 경우)
# Flutter: https://pub.dev/packages/<pkg> (좋아요, pub 포인트, 마지막 게시)
# Swift: 저장소의 최신 릴리스 태그 확인
라이브러리를 피해야 하는 신호: 12개월 이상 릴리스 없음 + 중요한 미해결 이슈 존재, README에 "유지 관리되지 않음/보관됨" 명시, 피어 의존성이 오래된 React/RN에 고정됨, TypeScript 타입 없음, 접근성 문제 무시. 알려진 폐기/위험 예시: react-beautiful-dnd (deprecated → @atlaskit/pragmatic-drag-and-drop 또는 dnd kit 사용), @base-ui-components/react (이름 변경 → @base-ui/react), Chakra v2 API (v3는 Ark UI/Panda에서 재작성됨), Reanimated 2/3 제스처 API (useAnimatedGestureHandler는 v4에서 제거됨).
문서 MCP를 사용할 수 있는 경우(Context7, shadcn MCP, 디자인 시스템 조회용 Figma MCP 등), 메모리에 의존하는 대신 이를 사용하여 최신 문서를 읽으세요.
안티패턴
- 하나의 앱에 두 개의 컴포넌트 라이브러리(MUI + shadcn) → 초점, 간격, 테마 불일치.
- 대화상자, 메뉴, 콤보박스, 날짜 선택기, 토스트, 툴팁을 직접 구현 → 접근성 버그(포커스 트랩, 이스케이프, aria, 스크롤 잠금, 충돌). 프리미티브를 사용하세요.
- "애니메이션 컴포넌트" 라이브러리를 통째로 설치 → 필요한 1~3개의 조각만 복사하세요.
- 웹 UI 키트를 웹뷰를 통해 React Native 내부에서 사용하거나, iOS 사용자에게 강제로 Material 컴포넌트를 적용하는 경우.
- 라이브러리의 기본 테마를 그대로 사용 → "모든 shadcn 앱이 똑같아 보이는" 문제. 최소한 폰트, 반경, 강조 색상, 중립 온도, 밀도를 변경하세요(design-system-builder 및 color-theory 스킬 참조).