From 4afe831f9a92302346e81f1aa827256e303c4b6d Mon Sep 17 00:00:00 2001 From: yabo0812 Date: Tue, 21 Oct 2025 14:18:59 +0900 Subject: [PATCH] =?UTF-8?q?UI/UX=20=EC=84=A4=EA=B3=84=EC=84=9C=20=ED=9A=8C?= =?UTF-8?q?=EC=9D=98=EB=A1=9D=20=EC=83=81=EC=84=B8=20=ED=99=94=EB=A9=B4=20?= =?UTF-8?q?=EA=B5=AC=EC=A1=B0=20=EA=B0=9C=EC=84=A0=20(v1.2)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 프로토타입 기반 화면 구조 재설계 - 10-회의록상세조회: 탭 기반 네비게이션 추가 - 회의록 탭: 기존 섹션 기반 구조 유지 (AI 요약 + 참고자료 포함) - 대시보드 탭: 핵심내용, 결정사항, Todo 진행상황, 참고자료 섹션 - 타임라인 탭: 시간순 회의 흐름 (선택사항) - 대시보드 탭 상세 설계 - 핵심내용 섹션: 번호 매김 포인트, 키워드 태그, 회의 통계 - 결정사항 섹션: 결정 내용 카드 (결정자, 시간, 배경) - Todo 진행상황 섹션: 상태별 필터, 담당자별 그룹화 - 참고자료 섹션: 4개 카테고리 탭 (관련 회의록/프로젝트 문서/이슈 트래커/위키 페이지) - 참고자료 관련도 점수 표시 시스템 - 백분율 배지 표시 (92%, 88%, 85% 등) - 색상 코딩: 90%+ 초록, 70-89% 노랑, 70% 미만 회색 - 인터랙션 개선 - 탭 전환: 클라이언트 사이드 렌더링 - 키워드 태그 클릭 시 관련 섹션 스크롤 - 참고자료 카드 클릭 시 해당 문서로 이동 - 데이터 요구사항 확장 - 대시보드 데이터: 핵심내용, 키워드, 통계, 결정사항, Todo 진행상황 - 참고자료 메타데이터: 관련도 점수, 카테고리, 요약 포함 - 참조 프로토타입 - design-gappa/uiux/prototype/11-회의록대시보드.html - design-gappa/uiux/prototype/05-회의진행.html - design-gappa/uiux/prototype/08-최종확정.html 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- design/uiux/uiux.md | 121 ++++++++++++++++++++++++++++++++------------ 1 file changed, 89 insertions(+), 32 deletions(-) diff --git a/design/uiux/uiux.md b/design/uiux/uiux.md index 99d1710..148198c 100644 --- a/design/uiux/uiux.md +++ b/design/uiux/uiux.md @@ -4,7 +4,7 @@ - **작성일**: 2025-10-21 - **최종 수정일**: 2025-10-21 - **작성자**: 이미준 (서비스 기획자) -- **버전**: 1.1 +- **버전**: 1.2 - **설계 철학**: Mobile First Design --- @@ -929,12 +929,17 @@ graph TD - 회의록 상태 배지 (작성중/확정완료) - 작성자 및 최종 수정 시간 -- **섹션별 내용** (아코디언 또는 스크롤) +- **탭 네비게이션** (상단, Fixed) + - "회의록" 탭 (기본 활성) + - "대시보드" 탭 + - "타임라인" 탭 (선택) + +- **회의록 탭 콘텐츠** (섹션별 구조) - 각 섹션: - 섹션 제목 - 검증 완료 배지 (검증된 경우) - **AI 회의 내용 요약 영역** (섹션 최상단, 강조 박스) - - 요약 아이콘 (💡 또는 📝) + - 요약 아이콘 (💡) - AI 자동 생성 요약 (2-3문장) - 요약 생성/수정 시간 - "수정" 버튼 (권한 있는 경우) @@ -942,13 +947,36 @@ graph TD - **참고자료 영역** (섹션 하단, 별도 영역) - "참고자료" 라벨 - 관련 회의록 링크 리스트 (최대 3개): - - 링크 아이콘 + - 링크 아이콘 (📄) - 회의 제목 (클릭 가능) - 회의 날짜 - - 관련도 표시 (퍼센트 또는 별점) + - 관련도 표시 (퍼센트, 색상 코딩) + - 1-2줄 요약 - "더보기" 버튼 (3개 초과 시) - 접기/펼치기 버튼 (선택) +- **대시보드 탭 콘텐츠** (11-회의록대시보드.html 구조 참조) + - **핵심내용 섹션** (💡) + - 번호 매김된 핵심 포인트 (4-5개) + - 주요 키워드 태그 클라우드 + - 회의 통계 (참석자 수, 시간, 발언 횟수, 주요 의제 수) + + - **결정사항 섹션** (✅) + - 결정사항 카드 리스트 + - 각 카드: 결정 내용 + 결정자 + 시간 + 배경 설명 + + - **Todo 진행상황 섹션** (📋) + - 상태별 필터 탭 (전체/시작 전/진행 중/완료) + - 담당자별 그룹화 + - 각 Todo: 제목 + 진행률 바 + 마감일 + 우선순위 배지 + + - **참고자료 섹션** (📚) + - 참고자료 탭 (관련 회의록/프로젝트 문서/이슈 트래커/위키 페이지) + - 각 참고자료 카드: + - 아이콘 + 제목 + 메타정보 (날짜, 작성자) + - 관련도 점수 배지 (92%, 88% 등) + - 2-3줄 요약 + - **Todo 섹션** (강조) - Todo 항목 리스트: - 체크박스 (완료/미완료) @@ -966,31 +994,48 @@ graph TD - "공유" 버튼 **Tablet/Desktop (768px+)** -- 좌측: 섹션 목차 (네비게이션) -- 중앙: 회의록 내용 (모바일과 동일) -- 우측: 관련 정보 - - 참석자 목록 - - 관련 회의록 링크 - - 통계 (발언 시간 등) +- **상단**: 탭 네비게이션 + - 회의록 (기본) + - 대시보드 + - 타임라인 +- **메인 영역**: + - 회의록 탭: 전체 회의록 내용 (섹션별 구조) + - 대시보드 탭: 핵심내용, 결정사항, Todo 진행상황, 참고자료 (11-회의록대시보드.html 구조 참조) #### 인터랙션 -1. **섹션 네비게이션** - - 섹션 제목 클릭: 해당 섹션으로 스크롤 - - 접기/펼치기: 긴 내용의 경우 초기에는 접힌 상태 +1. **탭 전환** + - "회의록" 탭: 전체 회의록 내용 표시 (섹션별 구조) + - "대시보드" 탭: 핵심내용, 결정사항, Todo, 참고자료 요약 표시 + - "타임라인" 탭: 시간 순서대로 회의 진행 과정 표시 (선택) + - 탭 전환 시 URL 변경 없이 클라이언트 사이드 렌더링 -2. **AI 요약 인터랙션** - - 요약 영역 표시: 섹션 최상단에 강조 박스로 표시 - - "수정" 버튼 클릭 (권한 있는 경우): - - 인라인 편집 모드로 전환 +2. **회의록 탭 인터랙션** + - **섹션 네비게이션**: 섹션 제목 클릭 → 해당 섹션으로 스크롤 + - **접기/펼치기**: 긴 내용은 초기 접힌 상태, 클릭으로 펼침 + - **AI 요약 편집**: + - "수정" 버튼 클릭 (권한 있는 경우) → 인라인 편집 모드 - 수정 내용 자동 저장 (30초 간격) - 실시간 동기화 + - **참고자료 링크**: + - 회의록 링크 클릭 → 새 탭에서 해당 회의록 열기 + - 관련도 색상 코딩: 90%+ (초록), 70-89% (노랑), 70% 미만 (회색) + - "더보기" 클릭 → 전체 참고자료 목록 모달 -3. **참고자료 인터랙션** - - 회의록 링크 클릭: - - 새 탭에서 해당 회의록 열기 - - 또는 현재 화면에서 전환 (사용자 설정) - - 관련도 표시: 시각적으로 중요도 표시 (높음/중간/낮음 색상 구분) - - "더보기" 클릭: 전체 참고자료 목록 모달 표시 +3. **대시보드 탭 인터랙션** + - **핵심내용 섹션**: + - 키워드 태그 클릭 → 해당 키워드 관련 섹션으로 스크롤 + - 통계 항목 클릭 → 상세 정보 툴팁 표시 + - **결정사항 섹션**: + - 결정사항 카드 클릭 → 회의록 탭의 해당 섹션으로 이동 + - 배경 설명 접기/펼치기 + - **Todo 진행상황**: + - 필터 탭 클릭 → 해당 상태의 Todo만 표시 + - Todo 카드 클릭 → Todo관리 화면으로 이동 + - 진행률 바: 실시간 업데이트 + - **참고자료 섹션**: + - 탭 전환 (관련 회의록/프로젝트 문서/이슈 트래커/위키 페이지) + - 참고자료 카드 클릭 → 해당 문서로 이동 + - 관련도 점수: 배지로 표시 (92%, 88% 등) 4. **Todo 인터랙션** - Todo 체크박스: 완료 처리 (권한 있는 경우) @@ -1005,20 +1050,31 @@ graph TD - "공유" 버튼: 회의록공유 화면으로 이동 #### 데이터 요구사항 -- **입력**: 회의록 ID +- **입력**: 회의록 ID, 활성 탭 (회의록/대시보드/타임라인) - **출력**: - - 회의 기본 정보 (제목, 일시, 참석자, 장소, 상태, 작성자, 수정 시간) - - **섹션별 AI 요약 (자동 생성 요약 및 수정 이력)** - - 섹션별 내용 - - **참고자료 목록 (관련 회의록 링크, 관련도)** - - Todo 목록 및 진행 상황 - - 첨부파일 목록 + - **회의 기본 정보**: 제목, 일시, 참석자, 장소, 상태, 작성자, 수정 시간 + - **섹션별 AI 요약**: 자동 생성 요약, 수정 이력 + - **섹션별 내용**: 마크다운 형식 + - **참고자료 목록**: + - 관련 회의록 (제목, 날짜, 관련도, 요약) + - 프로젝트 문서 (제목, 작성자, 관련도) + - 이슈 트래커 링크 + - 위키 페이지 링크 + - **대시보드 데이터** (대시보드 탭 선택 시): + - 핵심내용 (4-5개 포인트) + - 주요 키워드 + - 회의 통계 (참석자 수, 시간, 발언 횟수, 의제 수) + - 결정사항 리스트 (결정 내용, 결정자, 시간, 배경) + - Todo 진행상황 (담당자별 그룹, 진행률) + - **Todo 목록 및 진행 상황** + - **첨부파일 목록** - **연동**: Meeting 서비스, AI 서비스 (UFR-AI-040), Todo 서비스 #### 에러 처리 - **회의록 로딩 실패**: "회의록을 불러올 수 없습니다" + 재시도 버튼 - **AI 요약 로딩 실패**: "요약을 불러올 수 없습니다" (섹션 내용은 정상 표시) -- **참고자료 로딩 실패**: "참고자료를 불러올 수 없습니다" +- **참고자료 로딩 실패**: "참고자료를 불러올 수 없습니다" (빈 상태 표시) +- **대시보드 데이터 로딩 실패**: "대시보드를 불러올 수 없습니다" + 재시도 버튼 - **권한 없음**: "수정" 버튼 비활성화, "조회 권한만 있습니다" 메시지 - **첨부파일 다운로드 실패**: "파일 다운로드에 실패했습니다" @@ -1331,6 +1387,7 @@ graph TD |------|------|--------|----------| | 1.0 | 2025-10-21 | 이미준 | 최초 작성 - 11개 화면 설계 완료 | | 1.1 | 2025-10-21 | 이미준 | AI 요약 및 참고자료 기능 추가
- 05-회의진행: AI 회의 내용 요약 자동 생성 및 참고자료 자동 연결 추가
- 10-회의록상세조회: 섹션별 AI 요약 표시 및 참고자료 영역 추가
- 11-회의록수정: AI 요약 수정 및 참고자료 편집 기능 추가
- 관련 유저스토리: UFR-AI-040 (관련 회의록 자동 연결) | +| 1.2 | 2025-10-21 | 이미준 | 회의록 상세 화면 구조 개선 (프로토타입 기반)
- 10-회의록상세조회: 탭 기반 네비게이션 추가 (회의록/대시보드/타임라인)
- 대시보드 탭 추가: 핵심내용, 결정사항, Todo 진행상황, 참고자료 섹션
- 참고자료 관련도 점수 표시 (백분율 + 색상 코딩)
- 참고자료 카테고리 탭 (관련 회의록/프로젝트 문서/이슈 트래커/위키 페이지)
- 참조: design-gappa/uiux/prototype 파일 (11-회의록대시보드.html, 05-회의진행.html) | ---