feat: v2.12.0 - UI/UX Refinement (Model Sync & Premium Tooltips)

2026-04-30 00:19:06 +09:00
parent f8a57cfbb0
commit 326672cb93
25 changed files with 5606 additions and 363 deletions
@@ -0,0 +1,44 @@
+# UX/UI Consistency Guidelines
+
+이 문서는 ConnectAI(G1nation) 프로젝트의 UI 일관성과 사용자 경험을 유지하기 위한 핵심 규칙을 정의합니다. 모든 신규 기능 및 UI 수정은 이 가이드라인을 준수해야 합니다.
+
+---
+
+## 🎨 1. 상호작용 패턴 (Interaction Pattern)
+
+### Rule A: 생성 및 추가 (Create/Add)
+*   **시각적 문법:** 핵심 생성 액션은 `+` 아이콘을 포함한 버튼 형태를 사용합니다.
+*   **배치 규칙:**
+    *   **섹션 레벨:** 섹션 전체에 항목을 추가할 경우 우측 상단 또는 우측 하단에 명확한 버튼으로 배치합니다.
+    *   **콘텐츠 레벨:** 특정 아이템 내 추가는 아이템 우측 상단에 작은 `+` 아이콘 버튼으로 고정합니다.
+
+### Rule B: 편집 및 수정 (Edit/Modify)
+*   **편집 가능 여부 안내:** 수정이 불가능한 'Source of Truth' 데이터는 편집 버튼을 노출하지 않으며, 필요 시 툴팁으로 사유를 안내합니다.
+*   **수정 방식:** 편집 기능이 있는 경우 공통적으로 `⚙️` (설정) 또는 `⋮` (더보기) 아이콘을 사용하며, 모달(Modal) 창 또는 사이드 패널 방식을 통해 체계적으로 수정합니다.
+
+---
+
+## 🖌️ 2. 비주얼 가이드라인 (Visual Guidelines)
+
+### A. 아이코노그래피 (Iconography) 통일
+*   **추가:** `+` (Plus)
+*   **편집/설정:** `⚙️` (Gear) 또는 `⋮` (Vertical Ellipsis)
+*   **삭제:** `🗑️` (Trash)
+*   **동기화:** `↻` (Refresh)
+
+### B. 정보 계층 구조 (Information Hierarchy)
+*   **핵심 액션 우선:** 사용자가 가장 자주 사용하는 기능(질문 입력, 채팅 시작)이 시각적으로 가장 강조되어야 합니다.
+*   **그룹화:** 관련 있는 기능(AI 엔진 설정, 지식 베이스 관리, 도구 모음)은 시각적으로 그룹화하여 인지 부하를 줄입니다.
+
+### C. 피드백 및 상태 메시지 (Feedback & State)
+*   **색상 코드:**
+    *   🟢 **성공:** 녹색 계열 (#00FF41) - Toast 알림 사용
+    *   🔴 **오류:** 빨간색 계열 (#ff5252) - 에러 모달 또는 명확한 배너 사용
+    *   🟡 **정보/진행:** 파란색/보라색 계열 - Thinking Bar 및 로딩 애니메이션 사용
+
+---
+
+## 🚀 3. 체크리스트
+- [ ] 새로운 버튼이 기존의 아이콘 문법을 따르는가?
+- [ ] 생성/편집 액션이 정의된 위치에 배치되었는가?
+- [ ] 상태 변화에 대해 일관된 색상과 방식으로 피드백을 주는가?