UI/UX 설계서 회의록 상세 화면 구조 개선 (v1.2)

- 프로토타입 기반 화면 구조 재설계
- 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 <noreply@anthropic.com>

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 요약 및 참고자료 기능 추가<br>- 05-회의진행: AI 회의 내용 요약 자동 생성 및 참고자료 자동 연결 추가<br>- 10-회의록상세조회: 섹션별 AI 요약 표시 및 참고자료 영역 추가<br>- 11-회의록수정: AI 요약 수정 및 참고자료 편집 기능 추가<br>- 관련 유저스토리: UFR-AI-040 (관련 회의록 자동 연결) |
+| 1.2 | 2025-10-21 | 이미준 | 회의록 상세 화면 구조 개선 (프로토타입 기반)<br>- 10-회의록상세조회: 탭 기반 네비게이션 추가 (회의록/대시보드/타임라인)<br>- 대시보드 탭 추가: 핵심내용, 결정사항, Todo 진행상황, 참고자료 섹션<br>- 참고자료 관련도 점수 표시 (백분율 + 색상 코딩)<br>- 참고자료 카테고리 탭 (관련 회의록/프로젝트 문서/이슈 트래커/위키 페이지)<br>- 참조: design-gappa/uiux/prototype 파일 (11-회의록대시보드.html, 05-회의진행.html) |
 
 ---