UI/UX 설계서 v1.4.18 업데이트

05-회의진행 실시간 주요 메모 추천 기능 명확화 - UFR-MEET-030: AI가 중요한 내용으로 판단한 경우에만 추천 - 추천 빈도는 가변적 (3-5초 고정 간격 아님) - 프로토타입 확인: 05-회의진행.html AI 제안 탭 기능 포함 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2026-06-13 15:19:10 +00:00 · 2025-10-24 15:01:35 +09:00
parent e37d20942a
commit 734e182287
7 changed files with 826 additions and 809 deletions
@@ -4,7 +4,7 @@
 - **작성일**: 2025-10-21
 - **최종 수정일**: 2025-10-24
 - **작성자**: 이미준 (서비스 기획자)
- **버전**: 1.4.16
+- **버전**: 1.4.18
 - **설계 철학**: Mobile First Design

 ---
@@ -847,7 +847,15 @@ graph TD
       - 상태 표시 없음 (발언 중/온라인 등 제거)
       - 참석자 수 동적 업데이트 (초대 성공 시)

-   - **AI 제안 탭**: AI가 생성한 회의록 개선 제안 (3가지 유형)
+   - **AI 제안 탭**: AI가 생성한 회의록 개선 제안
+
+     - **실시간 주요 메모 추천** (UFR-MEET-030):
+       - 음성→텍스트 변환 후 AI가 실시간 분석
+       - **중요한 내용으로 판단된 경우에만** 주요 메모 항목 추천
+       - 추천 빈도는 중요 내용 발생에 따라 가변적 (고정 간격 아님)
+       - 각 추천 항목에 "주요 메모에 추가" 버튼 제공
+       - 클릭 시 해당 안건의 주요 메모에 자동 저장
+       - 실시간 업데이트: 새로운 추천은 상단에 표시

     - **논의사항 제안 카드**: 제안 내용 + "논의사항에 적용" 버튼
       - 제안 구조:
@@ -976,7 +984,6 @@ graph TD
  - 회의 총 시간
  - 참석자 수
  - 주요 키워드 (태그 클라우드)
-  - 발언 통계 (화자별 발언 횟수 및 시간 - 바 차트)

 - **안건별 AI 요약 섹션** (신규)
  - **안건 카드** (안건 개수만큼 반복):
@@ -986,7 +993,6 @@ graph TD
      - 🔒 "편집 불가" 아이콘 표시
      - 민트 그린 좌측 액센트 라인
    - **상세 요약 정리** (읽기 전용)
-      - 논의 주제
      - 발언자별 의견
      - 결정 사항
      - 보류 사항
@@ -1237,9 +1243,9 @@ graph TD

 #### 주요 기능
 1. 회의 기본 정보 표시
-2. **섹션별 AI 요약 표시** (섹션 최상단)
-3. 섹션별 상세 내용 표시
-4. **참고자료 표시** (섹션 하단)
+2. **안건별 AI 요약 표시** (안건 최상단)
+3. 안건별 상세 내용 표시
+4. **참고자료 표시** (안건 하단)
 5. Todo 항목 및 진행 상황 표시
 6. 첨부파일 다운로드
 7. 회의록 수정/공유 액션
@@ -1263,17 +1269,17 @@ graph TD
  - "대시보드" 탭 (기본 활성)
  - "회의록" 탭

- **회의록 탭 콘텐츠** (섹션별 구조)
-  - 각 섹션:
-    - 섹션 제목
+- **회의록 탭 콘텐츠** (안건별 구조)
+  - 각 안건:
+    - 안건 제목
    - 검증 완료 배지 (검증된 경우)
-    - **AI 회의 내용 요약 영역** (섹션 최상단, 강조 박스)
+    - **AI 회의 내용 요약 영역** (안건 최상단, 강조 박스)
      - 요약 아이콘 (💡)
      - AI 자동 생성 요약 (2-3문장)
      - 요약 생성/수정 시간
      - "수정" 버튼 (권한 있는 경우)
-    - 섹션 내용 (마크다운 렌더링)
-    - **참고자료 영역** (섹션 하단, 별도 영역)
+    - 안건 내용 (마크다운 렌더링)
+    - **참고자료 영역** (안건 하단, 별도 영역)
      - "참고자료" 라벨
      - 관련 회의록 링크 리스트 (최대 3개):
        - 링크 아이콘 (📄)
@@ -1331,17 +1337,17 @@ graph TD
  - 대시보드 (기본 활성)
  - 회의록
 - **메인 영역**:
-  - 회의록 탭: 전체 회의록 내용 (섹션별 구조)
+  - 회의록 탭: 전체 회의록 내용 (안건별 구조)
  - 대시보드 탭: 핵심내용, 결정사항, Todo 진행상황, 참고자료 (11-회의록대시보드.html 구조 참조)

 #### 인터랙션
 1. **탭 전환**
-   - "회의록" 탭: 전체 회의록 내용 표시 (섹션별 구조)
+   - "회의록" 탭: 전체 회의록 내용 표시 (안건별 구조)
   - "대시보드" 탭: 핵심내용, 결정사항, Todo, 참고자료 요약 표시
   - 탭 전환 시 URL 변경 없이 클라이언트 사이드 렌더링

 2. **회의록 탭 인터랙션**
-   - **섹션 네비게이션**: 섹션 제목 클릭 → 해당 섹션으로 스크롤
+   - **안건 네비게이션**: 안건 제목 클릭 → 해당 안건으로 스크롤
   - **접기/펼치기**: 긴 내용은 초기 접힌 상태, 클릭으로 펼침
   - **AI 요약 편집**:
     - "수정" 버튼 클릭 (권한 있는 경우) → 인라인 편집 모드
@@ -1354,10 +1360,10 @@ graph TD

 3. **대시보드 탭 인터랙션**
   - **핵심내용 섹션**:
-     - 키워드 태그 클릭 → 해당 키워드 관련 섹션으로 스크롤
+     - 키워드 태그 클릭 → 해당 키워드 관련 안건으로 스크롤
     - 통계 항목 클릭 → 상세 정보 툴팁 표시
   - **결정사항 섹션**:
-     - 결정사항 카드 클릭 → 회의록 탭의 해당 섹션으로 이동
+     - 결정사항 카드 클릭 → 회의록 탭의 해당 안건으로 이동
     - 배경 설명 접기/펼치기
   - **Todo 진행상황**:
     - 필터 탭 클릭 → 해당 상태의 Todo만 표시
@@ -1384,8 +1390,8 @@ graph TD
 - **입력**: 회의록 ID, 활성 탭 (회의록/대시보드/타임라인)
 - **출력**:
  - **회의 기본 정보**: 제목, 일시, 참석자, 장소, 상태, 작성자, 수정 시간
-  - **섹션별 AI 요약**: 자동 생성 요약, 수정 이력
-  - **섹션별 내용**: 마크다운 형식
+  - **안건별 AI 요약**: 자동 생성 요약, 수정 이력
+  - **안건별 내용**: 마크다운 형식
  - **참고자료 목록**:
    - 관련 회의록 (제목, 날짜, 관련도, 요약)
    - 프로젝트 문서 (제목, 작성자, 관련도)
@@ -1403,7 +1409,7 @@ graph TD

 #### 에러 처리
 - **회의록 로딩 실패**: "회의록을 불러올 수 없습니다" + 재시도 버튼
- **AI 요약 로딩 실패**: "요약을 불러올 수 없습니다" (섹션 내용은 정상 표시)
+- **AI 요약 로딩 실패**: "요약을 불러올 수 없습니다" (안건 내용은 정상 표시)
 - **참고자료 로딩 실패**: "참고자료를 불러올 수 없습니다" (빈 상태 표시)
 - **대시보드 데이터 로딩 실패**: "대시보드를 불러올 수 없습니다" + 재시도 버튼
 - **권한 없음**: "수정" 버튼 비활성화, "조회 권한만 있습니다" 메시지
@@ -2130,6 +2136,7 @@ graph TD
 | 1.4.14 | 2025-10-24 | 이미준 | 12-회의록목록조회 화면 데이터 아키텍처 문서화<br>- **데이터 아키텍처 섹션 추가**: 데이터/뷰 레이어 분리 구조 설명<br>  - 데이터 레이어: common.js → SAMPLE_MINUTES 배열 (30개 샘플)<br>  - 뷰 레이어: 12-회의록목록조회.html → renderMeetings(), createMeetingCard() 함수<br>  - 렌더링 방식: 동적 렌더링, 초기 10개 표시, "10개 더보기" 버튼으로 추가 로딩<br>- **정렬 옵션 레이블 변경**: "최신순" → "최근수정순", "회의일시순" → "최근회의순"<br>- **페이지네이션 기능 문서화**: 초기 10개 표시, "10개 더보기" 버튼 기능 설명<br>- **샘플 데이터 분포 명시**: 총 30개 (작성중 13개, 확정완료 17개)<br>- **프로토타입 파일 경로 추가**: design/uiux/prototype/12-회의록목록조회.html<br>- **스타일 가이드 버전 동기화**: v1.2.4 |
 | 1.4.15 | 2025-10-24 | 이미준 | 06-검증완료 화면 삭제 (유저스토리 v2.1.2 변경사항 반영)<br>- **화면 삭제**: 06-검증완료 화면 전체 삭제<br>  - 안건별 검증 기능이 11-회의록수정 화면으로 통합됨<br>  - 섹션별 검증 방식에서 안건별 검증 방식으로 변경 (유저스토리 UFR-COLLAB-030 → 안건 기반 구조로 전환)<br>- **유저스토리 매핑 업데이트**:<br>  - Collaboration 서비스: UFR-COLLAB-010 ~ UFR-COLLAB-030 → UFR-COLLAB-010 ~ UFR-COLLAB-020로 변경<br>  - 프로토타입 화면 목록 테이블에서 06-검증완료 행 제거<br>- **화면 번호 유지**: 다른 화면 번호는 변경하지 않음 (프로토타입 파일명 유지)<br>  - 07-회의종료, 09-Todo관리, 10-회의록상세조회, 11-회의록수정, 12-회의록목록조회 번호 유지<br>- **변경 이력**: 과거 버전의 UFR-COLLAB-030 언급은 역사적 맥락으로 유지 |
 | 1.4.16 | 2025-10-24 | 이미준 | 사용자 역할 용어 통일 (유저스토리 v2.1.2 반영)<br>- **용어 정의 명확화**: "회의 생성자"와 "회의 참석자" 용어로 통일<br>  - 설계 목표: "회의록 작성자" → "회의 참석자"로 수정<br>- **화면별 권한 정보 추가**:<br>  - 03-회의예약: 모든 사용자 (예약 생성 시 자동으로 회의 생성자가 됨)<br>  - 04-템플릿선택: 회의 생성자 전용<br>  - 05-회의진행: 회의 시작/종료는 회의 생성자 전용, 회의록 편집은 모든 참석자<br>  - 07-회의종료: 회의 생성자 전용<br>  - 09-Todo관리: 모든 회의 참석자 (본인이 담당자인 Todo만 조회/수정 가능)<br>  - 10-회의록상세조회: 모든 회의 참석자 (조회 전용)<br>  - 11-회의록수정: 검증완료 전(모든 참석자), 검증완료 후(회의 생성자만) - 기존 권한 제어 유지<br>  - 12-회의록목록조회: 모든 회의 참석자 (본인이 참석한 회의록만 조회)<br>- **스타일 가이드 동기화**: design/uiux/style-guide.md v1.2.5 (용어 정의 섹션 추가)<br>- **통일성 달성**: 유저스토리, 화면설계서, 스타일 가이드 간 용어 완전 통일 |
+| 1.4.17 | 2025-10-24 | 강지수 | 10-회의록상세조회 화면 용어 통일 (섹션 → 안건)<br>- **용어 변경 (요구사항설계검토-report-V1.2.md 반영)**:<br>  - 모든 "섹션별" → "안건별"로 용어 통일<br>  - 주요 기능, UI 구성요소, 인터랙션, 데이터 요구사항, 에러 처리 섹션 전체 업데이트<br>- **CSS 클래스명 변경 (공통 스타일 + 프로토타입)**:<br>  - common.css: `.section` → `.agenda`, `.section-header` → `.agenda-header`, `.section-title` → `.agenda-title`, `.section-content` → `.agenda-content`<br>  - 10-회의록상세조회.html: 모든 section 클래스를 agenda 클래스로 일괄 변경<br>- **HTML 주석 업데이트**: "회의록 섹션" → "회의록 안건", "섹션 내용" → "안건 내용"<br>- **일관성 달성**: 유저스토리 v2.1.2의 안건 기반 구조와 완전히 일치 |

 ---

@@ -2145,3 +2152,5 @@ graph TD
 - 타이포그래피
 - 컴포넌트 라이브러리
 - 아이콘 세트
+| 1.4.17 | 2025-10-24 | 강지수 | 07-회의종료 화면 STT 한계 반영 (유저스토리 v2.1.2)<br>- **STT 화자 식별 불가 반영**: STT는 화자를 식별할 수 없으므로 화자 관련 기능 제거<br>  - 발언 통계 섹션 삭제<br>  - 안건별 "발언자별 의견" 섹션 삭제<br>- **통계 영역 디자인 개선**: 정보성 디자인으로 명확화<br>  - 배경색: var(--white) → var(--gray-50)<br>  - 숫자 색상: var(--primary) → var(--gray-900)<br>  - 라벨 색상: var(--gray-500) → var(--gray-600)<br>  - 정보 표시 전용으로 시각적 구분 명확화<br>- **안건 섹션 구분 개선**:<br>  - 안건 간 하단 보더 추가 (1px solid var(--gray-200))<br>  - 섹션 제목에 primary 색상 세로 바 추가 (::before pseudo-element)<br>  - 콘텐츠 영역 좌측 패딩 추가로 계층 구조 명확화<br>- **연관 문서 업데이트**:<br>  - 유저스토리 UFR-MEET-040: "발언 횟수 (화자별)" 항목 제거<br>  - UI/UX 설계서 07-회의종료: 발언 통계 및 발언자별 의견 항목 제거 |
+| 1.4.18 | 2025-10-24 | 강지수 | 05-회의진행 실시간 주요 메모 추천 기능 명확화 (유저스토리 v2.1.1)<br>- **AI 제안 탭 기능 상세화**: 실시간 주요 메모 추천 기능 명시 추가<br>  - UFR-MEET-030: 실시간 AI 주요 메모 추천<br>  - 음성→텍스트 변환 후 AI가 실시간 분석<br>  - **중요한 내용으로 판단된 경우에만** 주요 메모 항목 추천<br>  - 추천 빈도는 중요 내용 발생에 따라 가변적 (3-5초 고정 간격 아님)<br>  - 각 추천 항목에 "주요 메모에 추가" 버튼 제공<br>  - 실시간 업데이트: 새로운 추천은 상단에 표시<br>- **프로토타입 확인**: 05-회의진행.html의 AI 제안 탭이 실시간 주요 메모 추천 기능을 포함하고 있음을 확인<br>- **참조**: design/uiux/요구사항설계검토-report-V1.2.md (실시간 주요 메모 추천 명시 부족 개선) |