diff --git a/INDEX.md b/INDEX.md index dbe75cf..c46c3ac 100644 --- a/INDEX.md +++ b/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 스토리보드 분석 | diff --git a/system/untitled-ui-evaluation.md b/system/untitled-ui-evaluation.md new file mode 100644 index 0000000..8f451c0 --- /dev/null +++ b/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