# UX/UI Consistency Guidelines

이 문서는 Astra 프로젝트의 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. 체크리스트
- [ ] 새로운 버튼이 기존의 아이콘 문법을 따르는가?
- [ ] 생성/편집 액션이 정의된 위치에 배치되었는가?
- [ ] 상태 변화에 대해 일관된 색상과 방식으로 피드백을 주는가?