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