diff --git a/design/uiux/style-guide.md b/design/uiux/style-guide.md index e44d73d..9bd5e52 100644 --- a/design/uiux/style-guide.md +++ b/design/uiux/style-guide.md @@ -412,9 +412,10 @@ ``` **메뉴 항목**: -- 홈 (📊) → 대시보드 -- 회의록 (📋) → 회의록목록 +- 홈 (🏠) → 대시보드 +- 회의록 (📋) → 회의록목록조회 - Todo (✅) → Todo관리 +- 프로필 (👤) → 사용자 프로필 및 설정 ### 사이드바 네비게이션 (Desktop) ```css @@ -1181,9 +1182,10 @@ | 버전 | 날짜 | 작성자 | 변경 내용 | |------|------|--------|----------| | 1.0 | 2025-10-21 | 최유진 | 최초 작성 - reference/sampleimg 샘플 이미지 기반 스타일 가이드 작성 | -| 1.0.1 | 2025-10-21 | 이미준 | 네비게이션 간소화 및 인터랙션 개선
- 설정 메뉴 제거 (사이드바, 하단 네비게이션, 메뉴 모달)
- 로그아웃 기능은 프로필 영역으로 통합
- Todo 항목 클릭 시 회의록 상세 화면으로 이동하는 인터랙션 추가
- 네비게이션 메뉴 항목 간소화: 대시보드, 회의 목록, Todo 관리 (3개 항목으로 축소) | -| 1.1 | 2025-10-21 | 이미준 | 반응형 네비게이션 및 2열 레이아웃 패턴 추가
- **반응형 네비게이션 전략**: Mobile (하단 네비게이션), Desktop (왼쪽 사이드바 240px)
- **사이드바 네비게이션 (Desktop)**: 로고 영역, 메뉴 항목 (대시보드/회의 목록/Todo 관리), 사용자 정보 영역
- **하단 네비게이션 (Mobile)**: 홈/회의록/Todo (3개 메뉴, 프로필 제거)
- **2열 레이아웃 패턴**: 회의 진행 화면용 (왼쪽 65% 에디터, 오른쪽 35% 탭 패널)
- **탭 네비게이션 사용 예시**: 회의록 상세 (2개 탭), 회의 진행 (4개 탭) | +| 1.0.1 | 2025-10-21 | 이미준 | 네비게이션 간소화 및 인터랙션 개선
- 설정 메뉴를 프로필 메뉴로 통합 (사이드바, 하단 네비게이션)
- 로그아웃 및 개인 설정 기능은 프로필 영역에서 접근
- Todo 항목 클릭 시 회의록 상세 화면으로 이동하는 인터랙션 추가
- 네비게이션 메뉴 항목: 대시보드, 회의 목록, Todo 관리, 프로필 (4개 항목) | +| 1.1 | 2025-10-21 | 이미준 | 반응형 네비게이션 및 2열 레이아웃 패턴 추가
- **반응형 네비게이션 전략**: Mobile (하단 네비게이션), Desktop (왼쪽 사이드바 240px)
- **사이드바 네비게이션 (Desktop)**: 로고 영역, 메뉴 항목 (대시보드/회의 목록/Todo 관리), 사용자 정보 영역
- **하단 네비게이션 (Mobile)**: 홈/회의록/Todo/프로필 (4개 메뉴)
- **2열 레이아웃 패턴**: 회의 진행 화면용 (왼쪽 65% 에디터, 오른쪽 35% 탭 패널)
- **탭 네비게이션 사용 예시**: 회의록 상세 (2개 탭), 회의 진행 (4개 탭) | | 1.1.1 | 2025-10-21 | 도그냥 | 회의 진행 화면 개선
- **메모 기능 제거**: 하단 액션바에서 메모 버튼 제거 (일시정지, 회의종료만 유지)
- **AI 제안 적용 기능 개선**:
- 논의사항 제안: "논의사항에 적용" 버튼으로 논의사항 섹션에 직접 추가
- 결정사항 제안: "결정사항에 적용" 버튼으로 결정사항 섹션에 직접 추가
- 액션아이템 제안: "액션아이템에 적용" 버튼으로 중복 제거 후 액션아이템 섹션에 추가
- 적용 시 해당 섹션 탭으로 자동 이동 및 성공 토스트 표시 | | 1.1.2 | 2025-10-21 | 도그냥 | 우측 사이드바 탭 디자인 개선 (gappa 프로토타입 기반)
- **AI 제안 카드**: 회색 배경(#F5F5F5), 민트 그린 점선 테두리, 헤더 (✨/📋 아이콘 + 제목), 본문, 액션 버튼
- **용어 사전 카드**:
- 흰색 배경, 회색 실선 테두리
- 하이라이트 카드: 민트 그린 연한 배경(#E8F9F3), 민트 그린 테두리 (현재 회의에서 언급된 용어)
- 용어명 + 카테고리 배지 + 언급 아이콘 (💬)
- 하단 컨텍스트: "회의에서 N회 언급됨" 또는 "관련 회의록에서 언급됨"
- 호버 시: 민트 그린 테두리 + 그림자
- **관련 회의록 카드**: 회색 배경(#F5F5F5), 회색 점선 테두리, 제목 + 메타정보 (날짜, 관련도) + 요약 텍스트 | | 1.1.3 | 2025-10-21 | 도그냥 | 용어 사전 및 관련 회의록 탭 디자인 통일성 개선
- **용어 사전 카드 디자인 개선**:
- 기본 상태: 민트 배경에서 화이트 배경 + 회색 테두리로 변경
- 하이라이트 상태: 민트 연한 배경 + 민트 테두리 (현재 회의 언급 용어만)
- 용어명: 16px Semibold
- 배지: 민트 연한 배경, 테두리 제거
- 언급 아이콘: 14px
- 컨텍스트: 상단 회색 구분선, 11px
- 호버: 민트 테두리 + 그림자
- **관련 회의록 카드 타이틀 강조**:
- 제목 폰트: Semibold → Bold (16px)
- 호버 시: 더 진한 회색 배경
- **사이드바 패널 타이틀 통일**:
- h3: 14px Bold (섹션 타이틀)
- h4: 14px Semibold (서브 타이틀) | | 1.1.4 | 2025-10-21 | 도그냥 | 우측 사이드바 3개 탭 (AI제안, 용어사전, 관련회의록) 디자인 통일성 개선
- **공통 디자인 원칙 수립**: 모든 카드가 일관된 디자인 시스템을 따르도록 개선
- 배경: `#FAFAFA` (연한 회색)
- 테두리: `1px dashed #D0D0D0` (회색 점선)
- 타이틀: 16px Bold, 민트 그린 (`var(--primary)`)
- 본문: 14px, gray-700
- 호버 상태: 진한 회색 배경 (#F0F0F0) + 민트 그린 테두리
- **AI 제안 카드**: 헤더 폰트 Bold (16px)
- **용어 사전 카드**: 배경 회색(#FAFAFA), 점선 테두리, 타이틀 민트 그린, 컨텍스트 구분선 점선으로 변경
- **관련 회의록 카드**: 타이틀 민트 그린으로 변경, 호버 시 민트 테두리 추가
- **통일성 체크리스트** 추가: 9가지 디자인 규칙 명시 | +| 1.2 | 2025-10-22 | 이미준 | 프로토타입 기반 스타일 가이드 업데이트
- **하단 네비게이션 복원**: 4개 메뉴 (홈/회의록/Todo/프로필) - 프로토타입 구현 기준 반영
- **프로필 메뉴 기능**: 사용자 정보, 개인 설정, 로그아웃 접근
- **일관성 개선**: 프로토타입과 스타일 가이드 통일 | diff --git a/design/uiux/uiux.md b/design/uiux/uiux.md index 918906a..c3e733a 100644 --- a/design/uiux/uiux.md +++ b/design/uiux/uiux.md @@ -2,9 +2,9 @@ ## 문서 정보 - **작성일**: 2025-10-21 -- **최종 수정일**: 2025-10-21 +- **최종 수정일**: 2025-10-22 - **작성자**: 이미준 (서비스 기획자) -- **버전**: 1.5 +- **버전**: 1.4 - **설계 철학**: Mobile First Design --- @@ -1773,7 +1773,7 @@ graph TD - **위치**: Fixed, 하단 (height: 64px) - **배경**: 흰색, 상단 테두리 (1px solid #E5E7EB) - **그림자**: 0 -2px 8px rgba(0, 0, 0, 0.08) -- **구성**: 3개 항목 (균등 분할) +- **구성**: 4개 항목 (균등 분할) - **홈** (대시보드) - 아이콘: 🏠 (24px) - 텍스트: "홈" (12px) @@ -1783,8 +1783,11 @@ graph TD - 아이콘: 📋 (24px) - 텍스트: "회의록" (12px) - **Todo** (Todo 관리) - - 아이콘: ✓ (24px) + - 아이콘: ✅ (24px) - 텍스트: "Todo" (12px) + - **프로필** (사용자 프로필 및 설정) + - 아이콘: 👤 (24px) + - 텍스트: "프로필" (12px) - **사용 화면**: 02-대시보드, 09-Todo관리, 12-회의록목록조회 #### Desktop 좌측 사이드바 (768px+) @@ -2039,6 +2042,7 @@ graph TD | 1.3.1 | 2025-10-21 | 도그냥 | 회의진행 화면 AI 제안 탭 기능 상세화 및 디자인 통일성 개선
- **05-회의진행**: AI 제안 탭 3가지 제안 유형 추가 및 상세 인터랙션 정의
- **논의사항 제안**: "논의사항에 적용" 버튼 클릭 시 논의사항 섹션(section-1)에 내용 자동 추가, 자동 탭 전환, 성공 토스트 표시
- **결정사항 제안**: "결정사항에 적용" 버튼 클릭 시 결정사항 섹션(section-2)에 내용 자동 추가, 자동 탭 전환, 성공 토스트 표시
- **액션아이템 제안**: "3개 Todo 생성" 버튼 클릭 시 액션아이템 섹션(section-3)에 중복 체크 후 추가, 자동 탭 전환, 성공 토스트 표시
- 중복 체크 로직: Set 자료구조로 기존 Todo 제목과 비교, 중복 제외한 항목만 추가
- **AI 제안 카드 디자인 통일성 개선**:
- 배경: #FAFAFA (연한 회색) - 용어사전/관련회의록 탭과 동일
- 테두리: 1px dashed #D0D0D0 (회색 점선) - 통일된 스타일
- 헤더: 16px Bold, 민트 그린 (#4DD5A7) - 일관된 타이틀 스타일
- 본문: 14px, gray-700 - 가독성 중심
- 프로토타입 파일 수정: design/uiux/prototype/05-회의진행.html | | 1.3.2 | 2025-10-21 | 도그냥 | 회의진행 화면 참석자 탭 개선 및 UI 일관성 강화
- **05-회의진행**: 참석자 탭 참석자 추가 기능 및 UI 정리
- **참석자 추가 폼 추가**: 이메일 입력 필드(form-control) + "초대" 버튼(btn btn-primary btn-sm)
- 이메일 유효성 검증: 정규식으로 형식 체크
- 빈 값 체크: "이메일 주소를 입력해주세요" 경고 토스트
- 잘못된 형식: "올바른 이메일 형식이 아닙니다" 오류 토스트
- 성공: "{email}에게 초대 링크가 전송되었습니다" 토스트 + 입력창 초기화
- **참석자 상태 표시 제거**: 발언 중/온라인 등 상태 아이콘 및 텍스트 모두 제거
- **참석자 수 동적 업데이트**: 4명으로 업데이트 (최유진 추가)
- **참고자료 영역 제거**: 회의개요 탭의 참고자료 섹션 삭제 (우측 관련회의록 탭으로 통합)
- **버튼 스타일 통일**: 모든 버튼에 .btn 기본 클래스 추가
- 편집 버튼 (4개 섹션): btn btn-ghost btn-sm
- AI 제안 적용 버튼 (3개): btn btn-primary btn-sm
- 수정 버튼 (3개): btn btn-ghost btn-sm
- 하단 일시정지/종료 버튼: btn btn-ghost, btn btn-error
- **검색창 스타일 통일**: 용어사전 검색창을 .input → .form-control 클래스로 변경
- 프로토타입 파일 수정: design/uiux/prototype/05-회의진행.html | | 1.3.3 | 2025-10-21 | 도그냥 | UI/UX 설계 문서 최적화 및 중복 제거
- **공통 UI 컴포넌트 섹션 신규 작성**: 반복 사용되는 UI 컴포넌트를 공통 섹션으로 분리
- **Mobile 하단 네비게이션**: 위치, 배경, 그림자, 3개 항목 (홈/회의록/Todo) 상세 스펙 정의
- **Desktop 좌측 사이드바**: 로고 영역, 메뉴 리스트, 사용자 정보 영역 상세 스펙 정의
- **상단 헤더**: Mobile/Desktop별 제목, 액션 버튼 배치 가이드
- **공통 에러 메시지 표준 섹션 신규 작성**: 반복 사용되는 에러 메시지를 표준화
- **네트워크 오류**: 자동 재시도 3회 (exponential backoff), 토스트 메시지, 재시도 버튼
- **데이터 로딩 실패**: 스켈레톤 UI 30초, 타임아웃 처리, 재시도 버튼
- **권한 오류**: 401/403 에러 처리, 명확한 안내 메시지
- **인증 오류**: 토큰 만료 자동 갱신, 로그인 리다이렉트
- **입력 검증 오류**: 실시간 인라인 검증, 포커스 이동
- **서버 오류**: 500 에러 에러 ID 제공, 고객센터 안내
- **중복 내용 참조 링크 교체**: 8개 화면에서 반복된 네비게이션/에러 메시지 설명을 공통 섹션 참조로 변경
- 01-로그인, 02-대시보드, 12-회의록목록조회 등
- 예상 파일 크기 감소: 1,500~2,200자 (약 8~10%)
- **목차 업데이트**: 공통 UI 컴포넌트, 공통 에러 메시지 표준 섹션 추가 | +| 1.4 | 2025-10-22 | 이미준 | 프로토타입 기반 네비게이션 사양 업데이트
- **Mobile 하단 네비게이션**: 4개 메뉴 항목으로 복원 (홈/회의록/Todo/프로필)
- 프로필 메뉴 추가: 👤 아이콘, 사용자 정보 및 설정 접근
- 프로토타입 구현 기준 반영 (12-회의록목록조회.html 등)
- **일관성 개선**: 프로토타입과 UI/UX 설계서 간 네비게이션 사양 통일
- **스타일 가이드 동기화**: design/uiux/style-guide.md v1.2와 정합성 확보 | ---