SamProject/sam-docs
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
4e8e6b8423a74a1dc930ccc074471900a8d76ae9
sam-docs/system/untitled-ui-evaluation.md
김보곤 f6374867ac docs: [system] Untitled UI 도입 검토 문서 추가 
- Figma/React UI Kit 가격 및 제품 비교
- SAM 현재 디자인 시스템(shadcn/ui)과 호환성 분석
- 도입 방안 3가지 및 시기별 권장안
2026-03-12 12:19:28 +09:00

6.3 KiB
Raw Blame History

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