# 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
