docs: [system] Untitled UI 도입 검토 문서 추가

- Figma/React UI Kit 가격 및 제품 비교
- SAM 현재 디자인 시스템(shadcn/ui)과 호환성 분석
- 도입 방안 3가지 및 시기별 권장안

INDEX.md

@@ -81,6 +81,7 @@ docs/
 | [security-policy.md](system/security-policy.md) | 보안 정책 |
 | [server-access-management.md](system/server-access-management.md) | 서버 접근 권한, 백업, 리플리케이션 |
 | [scaling-roadmap.md](system/scaling-roadmap.md) | 스케일링 로드맵 |
+| [untitled-ui-evaluation.md](system/untitled-ui-evaluation.md) | Untitled UI 도입 검토 (Figma/React UI Kit 평가) |
 | [board-system-spec.md](system/board-system-spec.md) | 게시판 시스템 설계 |
 | [item-master-integration.md](system/item-master-integration.md) | 품목 마스터 통합 설계 |
 | [erp-analysis/](system/erp-analysis/) | ERP 스토리보드 분석 |

system/untitled-ui-evaluation.md

@@ -0,0 +1,166 @@
+# Untitled UI 도입 검토
+
+> **작성일**: 2026-03-12
+> **상태**: 검토 중
+> **작성자**: 개발팀장
+
+---
+
+## 1. 개요
+
+### 1.1 목적
+
+외부 UI 컴포넌트 라이브러리 **Untitled UI** 도입 여부를 검토한다. SAM 프로젝트의 현재 디자인 시스템(shadcn/ui + Tailwind CSS)과의 호환성, 비용 대비 효과, 도입 방안을 분석한다.
+
+### 1.2 배경
+
+SAM React 프론트엔드는 현재 shadcn/ui 60개 컴포넌트 + Atomic Design 구조로 운영 중이다. 디자인 품질 향상과 개발 속도 개선을 위해 상용 UI Kit 도입을 검토한다.
+
+---
+
+## 2. Untitled UI 소개
+
+### 2.1 제품 개요
+
+Untitled UI는 세계 최대 규모의 Figma UI Kit + React 컴포넌트 라이브러리이다. Atomic Design 시스템으로 유명하며, 디자이너와 개발자 모두를 위한 도구를 제공한다.
+
+- **공식 사이트**: https://www.untitledui.com
+- **핵심 특징**: Atomic Design 기반, 접근성(Accessibility) 준수, 반응형 지원
+
+### 2.2 제품 구성 및 가격
+
+| 제품 | 설명 | Free | Solo (1인) | Team (5인) |
+|------|------|------|-----------|-----------|
+| **Figma** | UI Kit / 디자인 시스템 | $0 | $129 | $359 |
+| **React** | React + Tailwind CSS + React Aria 컴포넌트 | $0 | $349 | $699 |
+| **Icons** | 4,600+ 아이콘 (다중 스타일) | $0 | $59 | $109 |
+
+> **결제 방식**: 1회 결제 (one-time payment), 평생 업데이트 포함, 무제한 프로젝트 사용 가능
+
+### 2.3 라이선스 구조
+
+- **Solo**: 1명 사용, 무제한 프로젝트
+- **Team**: 5명 사용, 무제한 프로젝트
+- 디자이너와 개발자가 **다른 제품**을 각각 Solo로 구매하면 Team 불필요
+
+---
+
+## 3. SAM 현재 디자인 시스템과 비교
+
+### 3.1 SAM 현재 스택
+
+| 항목 | 현재 (SAM) | Untitled UI React |
+|------|-----------|-------------------|
+| UI 프리미티브 | shadcn/ui (60개) | Untitled UI 컴포넌트 |
+| 스타일링 | Tailwind CSS v4 | Tailwind CSS |
+| 접근성 | Radix UI | React Aria |
+| 폼 | React Hook Form + Zod | (별도) |
+| 아이콘 | Lucide React (550+) | 4,600+ (유료) |
+| 테마 | CSS 변수 (light/dark/senior) | CSS 변수 기반 |
+
+### 3.2 SAM 프론트엔드 현황 (참고)
+
+- **페이지**: 249개
+- **컴포넌트**: 612개 (shadcn/ui 기반)
+- **핵심 템플릿**: `UniversalListPage` (214회), `IntegratedDetailTemplate` (182회)
+- **고빈도 molecules**: `FormField` (216회), `StatusBadge` (125회)
+- **프레임워크**: Next.js 15 + React 19
+
+> 상세 현황: `docs/system/react-component-architecture.md` 참조
+
+### 3.3 기술 호환성
+
+| 항목 | 호환 여부 | 비고 |
+|------|----------|------|
+| Tailwind CSS | ✅ 호환 | 동일 스타일링 프레임워크 |
+| React 19 | ✅ 호환 | React 기반 |
+| Next.js 15 | ✅ 호환 | React 프레임워크이므로 문제 없음 |
+| Radix UI ↔ React Aria | ⚠️ 공존 가능 | 접근성 라이브러리가 다름, 혼용 시 번들 증가 |
+| shadcn/ui 기존 코드 | ⚠️ 점진적 교체 필요 | 612개 컴포넌트가 이미 구축됨 |
+
+---
+
+## 4. 도입 시 장단점 분석
+
+### 4.1 장점
+
+| 항목 | 설명 |
+|------|------|
+| 디자인 품질 | 전문 디자이너가 설계한 고품질 UI 패턴 |
+| 디자인-개발 일관성 | Figma 시안 → React 코드 변환이 1:1 대응 |
+| 시간 절약 | 새 화면 개발 시 프리셋 활용으로 속도 향상 |
+| 접근성 | React Aria 기반의 체계적 접근성 지원 |
+| 아이콘 | 4,600+ 다양한 스타일의 아이콘 |
+| 업데이트 | 1회 결제로 평생 업데이트 |
+
+### 4.2 단점
+
+| 항목 | 설명 |
+|------|------|
+| 기존 코드 충돌 | shadcn/ui 612개 컴포넌트와 역할 중복 |
+| 학습 비용 | 새 컴포넌트 API 학습 필요 |
+| 번들 크기 | Radix UI + React Aria 공존 시 증가 |
+| 마이그레이션 부담 | 전면 교체 시 비용 큼 |
+| 커스텀 한계 | SAM 특화 컴포넌트(한국형 입력 등)는 자체 유지 필요 |
+
+---
+
+## 5. 추천 방안
+
+### 5.1 방안 A: Figma만 구매 ($129) — 추천
+
+```
+디자이너 → Figma Solo ($129) 구매 → 시안 제작
+개발자 → 기존 shadcn/ui 컴포넌트로 구현 (변경 없음)
+```
+
+**적합한 경우**:
+- 디자이너가 합류하여 체계적 시안이 필요할 때
+- 현재 React 코드를 유지하면서 디자인 품질만 높이고 싶을 때
+- 가장 저렴하고 리스크 없는 방법
+
+### 5.2 방안 B: Figma + React 모두 구매 ($478)
+
+```
+디자이너 → Figma Solo ($129) → 시안 제작
+개발자 → React Solo ($349) → 새 화면에 Untitled UI 컴포넌트 사용
+```
+
+**적합한 경우**:
+- 신규 프로젝트(MES 등)를 처음부터 Untitled UI로 시작할 때
+- 기존 SAM 코드는 shadcn/ui 유지, 신규 코드만 Untitled UI 적용
+
+### 5.3 방안 C: React만 구매 ($349)
+
+```
+개발자 → React Solo ($349) → 참고용 + 부분 적용
+디자이너 → Figma Free 버전으로 참고
+```
+
+**적합한 경우**:
+- 디자이너 없이 개발자가 직접 UI를 구현할 때
+- 고급 컴포넌트 패턴을 참고 자료로 활용할 때
+
+### 5.4 권장 결론
+
+> **현재 상황**: 디자이너 부재, 612개 컴포넌트 이미 구축, SAM 기능 개발 진행 중
+
+**단기 (현재)**: 도입 보류 — 기존 shadcn/ui 시스템이 잘 작동 중이며, 249 페이지가 이미 구축됨
+**중기 (디자이너 합류 시)**: 방안 A (Figma $129) — 디자인 시안 품질 향상
+**장기 (MES 등 신규 프로젝트)**: 방안 B ($478) — 신규 코드에 Untitled UI 적용 검토
+
+---
+
+## 6. SAM 내 디자인 관련 기존 자료
+
+| 문서 | 경로 | 내용 |
+|------|------|------|
+| React 컴포넌트 아키텍처 | `system/react-component-architecture.md` | Atomic Design, shadcn/ui 60개, 의존성 분석 |
+| React 프로젝트 구조 | `system/react-structure.md` | 249페이지, 612 컴포넌트 현황 |
+| MES Atomic Design | `projects/mes/00_baseline/docs_breakdown/react_atomic_design_summary.md` | 100종 UI 패턴, 4단계 마이그레이션 |
+| 디자인 인사이트 | `features/rd/design-insight.md` | UI/UX 패턴 수집, 100종 CSS 와이어프레임 |
+| 기획디자인 에디터 | `projects/planning-design/README.md` | Figma 대체 목적 자체 스토리보드 에디터 |
+
+---
+
+**최종 업데이트**: 2026-03-12