mirror of
https://github.com/hwanny1128/HGZero.git
synced 2025-12-06 19:36:23 +00:00
96a4d74a43
- 화면설계서(uiux.md): 100개 인스턴스 변경 - "참석자" → "참여자" (88개) - "참석" → "참여" (12개) - 유저스토리(userstory.md): 132개 인스턴스 변경 - "참석자" → "참여자" (125개) - "참석" → "참여" (7개) - 프로토타입: 34개 인스턴스 변경 (7개 HTML 파일) - "참석자" → "참여자" (32개) - "참석" → "참여" (2개) 총 266개 인스턴스 변경으로 사용자 역할 용어 완전 통일 (생성자/참여자 체계) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
1954 lines
90 KiB
Markdown
1954 lines
90 KiB
Markdown
# 회의록 작성 및 공유 개선 서비스 - UI/UX 설계서
|
||
|
||
## 문서 정보
|
||
- **작성일**: 2025-10-21
|
||
- **최종 수정일**: 2025-10-28
|
||
- **작성자**: 이미준 (서비스 기획자)
|
||
- **버전**: 1.5.9
|
||
- **설계 철학**: Mobile First Design
|
||
|
||
---
|
||
|
||
## 목차
|
||
1. [설계 개요](#설계-개요)
|
||
2. [프로토타입 화면 목록](#프로토타입-화면-목록)
|
||
3. [화면 간 사용자 플로우](#화면-간-사용자-플로우)
|
||
4. [화면별 상세 설계](#화면별-상세-설계)
|
||
- [01-로그인](#01-로그인)
|
||
- [02-대시보드](#02-대시보드)
|
||
- [03-회의예약](#03-회의예약)
|
||
- [04-템플릿선택](#04-템플릿선택)
|
||
- [05-회의진행](#05-회의진행)
|
||
- [07-회의종료](#07-회의종료)
|
||
- [10-회의록상세조회](#10-회의록상세조회)
|
||
- [11-회의록수정](#11-회의록수정)
|
||
- [12-회의록목록조회](#12-회의록목록조회)
|
||
5. [공통 UI 컴포넌트](#공통-ui-컴포넌트)
|
||
6. [공통 에러 메시지 표준](#공통-에러-메시지-표준)
|
||
7. [화면 간 전환 및 네비게이션](#화면-간-전환-및-네비게이션)
|
||
8. [반응형 설계 전략](#반응형-설계-전략)
|
||
9. [접근성 보장 방안](#접근성-보장-방안)
|
||
10. [성능 최적화 방안](#성능-최적화-방안)
|
||
11. [변경 이력](#변경-이력)
|
||
12. [부록](#부록)
|
||
---
|
||
|
||
## 설계 개요
|
||
|
||
### 설계 목표
|
||
업무 지식이 없는 회의 참여자 누구라도 누락 없이 정확한 회의록을 작성하고 공유할 수 있는 직관적이고 효율적인 사용자 경험 제공
|
||
|
||
### 설계 원칙
|
||
|
||
#### 1. Mobile First 철학
|
||
- **우선순위 중심**: 작은 화면에서 가장 중요한 콘텐츠와 기능에 집중
|
||
- **점진적 향상**: 모바일 기본 경험 우선 구축 후, 화면 크기에 따라 기능 확장
|
||
- **성능 최적화**: 모바일 환경의 제약사항(네트워크, 처리 능력) 우선 고려
|
||
|
||
#### 2. 사용자 중심 설계
|
||
- **직관적 인터페이스**: 최소한의 학습으로 사용 가능한 UI
|
||
- **명확한 피드백**: 모든 사용자 액션에 대한 즉각적이고 명확한 피드백
|
||
- **오류 방지**: 실수를 사전에 방지하는 안전장치 제공
|
||
|
||
#### 3. 일관성과 예측 가능성
|
||
- **일관된 UI 패턴**: 동일한 기능은 항상 동일한 방식으로 표현
|
||
- **예측 가능한 동작**: 사용자가 기대하는 대로 동작
|
||
- **표준 준수**: 플랫폼별 디자인 가이드라인 준수
|
||
|
||
### 유저스토리 매핑
|
||
본 설계는 다음 유저스토리를 기반으로 작성됨:
|
||
- **User 서비스**: UFR-USER-010 (사용자 인증)
|
||
- **Meeting 서비스**: UFR-MEET-010 ~ UFR-MEET-060 (회의 관리, 회의록 작성/공유)
|
||
- **STT 서비스**: UFR-STT-010, UFR-STT-020 (음성 인식 및 변환)
|
||
- **AI 서비스**:
|
||
- UFR-AI-010 (AI 회의록 자동 작성)
|
||
- UFR-AI-020 (Todo 자동 추출)
|
||
- UFR-AI-030 (프롬프팅 기반 회의록 개선)
|
||
- **UFR-AI-040 (관련 회의록 자동 연결)** ← 신규 반영
|
||
- **RAG 서비스**: UFR-RAG-010, UFR-RAG-020 (맥락 기반 용어 설명)
|
||
- **Collaboration 서비스**: UFR-COLLAB-030 (안건별 검증완료 및 잠금 처리)
|
||
|
||
### 주요 추가 기능 (v1.1)
|
||
1. **AI 기반 회의 내용 요약 자동 생성**
|
||
- 각 섹션 최상단에 AI가 자동으로 생성한 2-3문장 요약 표시
|
||
- 참여자가 요약 내용 확인 후 수정 가능
|
||
- 실시간 동기화 및 자동 저장
|
||
|
||
2. **참고자료 자동 연결 (UFR-AI-040)**
|
||
- 각 섹션 하단에 관련 회의록 자동 연결
|
||
- 이전 회의록 및 맥락상 관련 회의록 링크 제공
|
||
- 관련도 표시 (퍼센트 또는 별점)
|
||
- 최대 3개 자동 표시, 더보기로 전체 목록 확인 가능
|
||
|
||
[↑ 목차로 돌아가기](#목차)
|
||
|
||
---
|
||
|
||
## 프로토타입 화면 목록
|
||
|
||
| 번호 | 화면명 | 관련 유저스토리 | 비즈니스 중요도 | 설명 | 사이드바 유무 | 이전화면 이동버튼 유무 | 비고 |
|
||
|------|--------|----------------|-------------------|------------------------|------------|------------------------|-------|
|
||
| 01 | 로그인 | UFR-USER-010 | 필수 | 사용자 인증 | X | X | |
|
||
| 02 | 대시보드 | UFR-USER-020 | 필수 | 메인 랜딩 페이지 | O | X | |
|
||
| 03 | 회의예약 | UFR-MEET-010 | 높음 | 회의 생성 | X | O | |
|
||
| 04 | 템플릿선택 | UFR-MEET-020 | 중간 | 회의록 템플릿 선택 | X | O | |
|
||
| 05 | 회의진행 | UFR-MEET-030, UFR-STT-010/020, UFR-AI-010 | 높음 | 실시간 회의 진행 및 회의록 작성 | X | X | |
|
||
| 07 | 회의종료 | UFR-MEET-040, UFR-MEET-050 | 높음 | 회의 통계 및 최종 확정 | X | X | |
|
||
| 10 | 회의록상세조회 | UFR-MEET-047 | 중간 | 회의록 상세 보기 | X | O | |
|
||
| 11 | 회의록수정 | UFR-MEET-055 | 중간 | 지난 회의록 수정 | X | O | |
|
||
| 12 | 회의록목록조회 | UFR-MEET-046 | 높음 | 회의록 목록 필터링/정렬/검색 | O | X | |
|
||
|
||
[↑ 목차로 돌아가기](#목차)
|
||
|
||
---
|
||
|
||
## 화면 간 사용자 플로우
|
||
|
||
### 주요 사용자 시나리오별 플로우
|
||
|
||
#### 시나리오 1: 새 회의 진행 (Full Flow)
|
||
```
|
||
로그인 → 대시보드 → 회의예약 → 템플릿선택 → 회의진행
|
||
→ 회의종료 → 회의록수정 (선택) → 대시보드
|
||
```
|
||
|
||
#### 시나리오 2: 지난 회의록 조회 및 수정
|
||
```
|
||
로그인 → 대시보드 → 회의록상세조회 → 회의록수정 → 대시보드
|
||
```
|
||
|
||
#### 시나리오 3: 빠른 회의 시작 (템플릿 스킵)
|
||
```
|
||
로그인 → 대시보드 → 회의진행 (기본 템플릿) → 회의종료 → 대시보드
|
||
```
|
||
|
||
### 플로우 다이어그램
|
||
|
||
```mermaid
|
||
graph TD
|
||
A[로그인] --> B[대시보드]
|
||
B --> C[회의예약]
|
||
C --> D[템플릿선택]
|
||
D --> E[회의진행]
|
||
E --> G[회의종료]
|
||
G --> H{회의록 수정?}
|
||
H -->|Yes| K[회의록수정]
|
||
H -->|No| B
|
||
K --> B
|
||
|
||
B --> I[회의록상세조회]
|
||
I --> J{수정 필요?}
|
||
J -->|Yes| K
|
||
K --> I
|
||
J -->|No| B
|
||
```
|
||
|
||
[↑ 목차로 돌아가기](#목차)
|
||
|
||
---
|
||
|
||
## 화면별 상세 설계
|
||
|
||
### 01-로그인
|
||
|
||
#### 개요
|
||
- **목적**: 사용자 인증 및 시스템 접근 권한 부여
|
||
- **관련 유저스토리**: UFR-USER-010
|
||
- **비즈니스 중요도**: 필수
|
||
- **접근 경로**: 애플리케이션 최초 진입
|
||
|
||
#### 주요 기능
|
||
1. 사번과 비밀번호를 이용한 LDAP 인증
|
||
2. 로그인 상태 유지 옵션
|
||
3. 비밀번호 찾기/재설정
|
||
4. 오류 처리 및 피드백
|
||
|
||
#### UI 구성요소
|
||
|
||
**Mobile (320px~768px)**
|
||
- 상단: 서비스 로고 및 타이틀
|
||
- 중앙: 로그인 폼
|
||
- 사번 입력 필드 (필수)
|
||
- 비밀번호 입력 필드 (필수, 마스킹)
|
||
- "로그인 상태 유지" 체크박스
|
||
- 로그인 버튼 (Primary CTA)
|
||
- 하단: "비밀번호 찾기" 링크
|
||
- 오류 메시지 영역
|
||
|
||
**Tablet/Desktop (768px+)**
|
||
- 좌측: 서비스 소개 및 주요 기능 설명 (선택)
|
||
- 우측: 로그인 폼 (모바일과 동일 구조)
|
||
|
||
#### 인터랙션
|
||
1. **입력 검증**
|
||
- 실시간 필드 유효성 검사 (형식 오류 즉시 표시)
|
||
- 빈 필드 제출 시 해당 필드로 포커스 이동
|
||
|
||
2. **로그인 처리**
|
||
- 로그인 버튼 클릭 → 로딩 인디케이터 표시
|
||
- 성공: 대시보드로 자동 이동 (페이드 전환)
|
||
- 실패: 오류 메시지 표시 (사번/비밀번호 불일치, 계정 잠금 등)
|
||
|
||
3. **키보드 인터랙션**
|
||
- Enter 키로 다음 필드 이동 또는 로그인 실행
|
||
- Tab 키로 포커스 이동
|
||
|
||
#### 데이터 요구사항
|
||
- **입력**: 사번(문자열), 비밀번호(문자열, 최소 8자)
|
||
- **출력**: 인증 토큰, 사용자 정보(이름, 권한)
|
||
- **연동**: User 서비스 - LDAP 인증 API
|
||
|
||
#### 에러 처리
|
||
- **인증 실패**: "사번 또는 비밀번호가 올바르지 않습니다." (보안상 구체적 정보 제공 X)
|
||
- **계정 잠금**: "보안을 위해 계정이 일시적으로 잠겼습니다. 관리자에게 문의하세요."
|
||
- **네트워크 오류**: [공통 에러 메시지 - 네트워크 오류](#네트워크-오류) 참조
|
||
- **서버 오류**: [공통 에러 메시지 - 서버 오류](#서버-오류) 참조
|
||
|
||
---
|
||
|
||
### 02-대시보드
|
||
|
||
#### 개요
|
||
- **목적**: 주요 기능 접근 허브, 최근 활동 요약 제공
|
||
- **관련 유저스토리**: UFR-USER-020 (대시보드 조회)
|
||
- **비즈니스 중요도**: 필수
|
||
- **접근 경로**: 로그인 후 메인 화면
|
||
|
||
#### 주요 기능
|
||
1. 빠른 회의 시작 및 예약
|
||
2. **최근 회의 목록** (최대 3개, 회의록 미생성 우선)
|
||
- 1순위: 진행중 회의 (참여 가능)
|
||
- 2순위: 예정된 회의 (시작 전)
|
||
- 3순위: 최근 종료된 회의 (회의록 있음, 1+2순위가 3개 미만일 때만 표시)
|
||
3. **통계 정보 표시** (예정된 회의, 작성중 회의록)
|
||
4. **내 회의록** (참여자/생성자로 등록된 최근 4개, 상태 포함)
|
||
|
||
#### UI 구성요소
|
||
|
||
**Mobile (320px~768px)**
|
||
- **헤더** (상단)
|
||
- "안녕하세요 👋" (H3, Bold)
|
||
- 부제: "오늘 {N}건의 회의가 예정되어 있어요" (Body, 회색)
|
||
- N = 예정된 회의 개수 (동적 업데이트)
|
||
- 예정된 회의가 없을 경우: "예정된 회의가 없습니다"
|
||
|
||
- **메인 콘텐츠** (스크롤, padding-bottom: 80px, background: gray-50)
|
||
- **통계 카드** (2열 그리드)
|
||
- "📅 예정된 회의" 카드
|
||
- 값: 전체 예정 + 진행 중 회의 개수
|
||
- "📝 작성중 회의록" 카드
|
||
- 값: 내가 참여한 회의 중 '작성중' 상태인 회의록 개수
|
||
- 높이: ~80px
|
||
- 클릭 액션: 없음 (정보 표시만)
|
||
- 반응형: 태블릿 이상에서 간격 증가
|
||
|
||
- **최근 회의** 섹션
|
||
- 헤더: "최근 회의" (H4)
|
||
- **정렬 기준** (UFR-USER-020 기준):
|
||
1. **1순위**: 회의록 미생성 회의 (진행중 + 예정) 우선 표시
|
||
2. **2순위**: 1순위가 3개 미만이면 최근 종료된 회의(회의록 있음)로 나머지 채움
|
||
3. **각 그룹 내 정렬**: 빠른 일시 순 (시작 시간 기준)
|
||
4. **최대 표시**: 3개
|
||
- **회의 카드** (클릭 가능 블록):
|
||
- 상태 라벨 (배지)
|
||
- 진행중: "진행중"
|
||
- 예정: "예정"
|
||
- 완료: "작성중" 또는 "확정완료"
|
||
- 회의 제목 (H5)
|
||
- 생성자 표시 (👑 아이콘) - 내가 생성한 회의인 경우
|
||
- 회의 일시 (아이콘: calendar_today)
|
||
- 참여자 수 (아이콘: people)
|
||
- 장소 정보
|
||
- 상태 버튼 (표시용):
|
||
- 진행중: "참여하기" 버튼
|
||
- 예정: 버튼 없음 (카드 클릭으로 처리)
|
||
- 완료: 버튼 없음 (카드 클릭으로 처리)
|
||
- 빈 상태: "예정된 회의가 없습니다"
|
||
|
||
- **내 회의록** 카드
|
||
- 헤더: "내 회의록" (H4) + "전체 보기 →" 링크 (회의록 목록 화면으로 이동)
|
||
- **최근 회의록 리스트** (최대 4개, 2x2 그리드):
|
||
- 필터: 내가 참여자 또는 생성자로 등록된 회의록
|
||
- 정렬: 최근 생성 순 (createdAt 기준)
|
||
- 각 항목:
|
||
- 회의 제목 (H5)
|
||
- 회의 일시 (날짜 + 시간)
|
||
- 참여자 수
|
||
- **상태 배지**:
|
||
- "작성중" (draft, 주황색 배지)
|
||
- "확정완료" (confirmed, 초록색 배지)
|
||
- 검증완료율 표시 (작성중인 경우만)
|
||
- 클릭 시: 회의록 상세 화면으로 이동
|
||
- 빈 상태: "참여한 회의록이 없습니다"
|
||
|
||
**Mobile (320px~768px)** - **v1.5.0 네비게이션 간소화**
|
||
- **하단 네비게이션**: 2개 메뉴만 표시
|
||
- 홈 (대시보드) - 활성 상태
|
||
- 회의록 (회의록 목록)
|
||
|
||
**Tablet/Desktop (768px+)**
|
||
- **좌측 사이드바**: [Desktop 좌측 사이드바](#desktop-좌측-사이드바-768px) 참조 (대시보드 활성)
|
||
|
||
- **메인 콘텐츠** (왼쪽 여백 240px)
|
||
- **헤더**
|
||
- "안녕하세요, {사용자명}님!" (H2)
|
||
- "오늘의 일정을 확인하세요" (부제)
|
||
|
||
- **통계 카드 그리드** (2개) - **v1.5.0 변경**
|
||
- 예정된 회의 (📅)
|
||
- 작성중 회의록 (📝)
|
||
|
||
- **최근 회의 그리드** (2-3컬럼)
|
||
- 회의 카드들 (진행중 우선)
|
||
- 참여하기/수정/보기 버튼
|
||
|
||
- **내 회의록 리스트**
|
||
- 화이트 카드 배경
|
||
- 전체보기 → 12-회의록목록조회.html
|
||
|
||
- **하단 네비게이션**: 숨김 (데스크톱에서는 사이드바 사용)
|
||
|
||
#### 인터랙션
|
||
1. **빠른 액션**
|
||
- "새 회의 시작" 클릭 → 템플릿선택 화면으로 이동 (페이드 전환)
|
||
- "회의 예약" 클릭 → 회의예약 화면으로 이동
|
||
|
||
2. **예정된/진행중 회의 인터랙션**
|
||
- **진행중 회의** (모든 참여자):
|
||
- "참여하기" 버튼 클릭 → 회의 진행 화면으로 즉시 이동
|
||
- 회의 항목 클릭 → 회의 상세 정보 표시 (모달 또는 화면 이동)
|
||
- 애니메이션: "진행중" 배지 깜빡임 효과 (1초 간격)
|
||
|
||
- **예정된 회의 - 생성자 (내가 생성한 회의)**:
|
||
- 회의 카드 클릭 → 회의예약 화면(수정 모드)으로 이동
|
||
- 회의 제목, 일시, 참여자, 안건 등 수정 가능
|
||
- 저장 시 참여자에게 변경 알림 발송
|
||
- 크라운 아이콘 표시 (생성자 구분)
|
||
|
||
- **예정된 회의 - 초대받은 참여자**:
|
||
- 회의 카드 클릭 → 시스템 알럿 표시
|
||
- 메시지: "아직 회의 시간이 되지 않아 참여하실 수 없습니다"
|
||
- 다음 버전에서 회의 상세 조회 기능으로 개선 예정
|
||
|
||
- **공통**:
|
||
- 회의 항목 호버: 카드 그림자 증가
|
||
- "전체 보기" 링크 클릭 → 회의 목록 화면으로 이동
|
||
|
||
3. **카드 인터랙션**
|
||
- 회의록 항목 클릭 → 회의록 상세 화면으로 이동
|
||
- "전체 보기" 링크 클릭 → 해당 목록 화면으로 이동
|
||
- 호버 효과: 카드 그림자 증가, 약간 상승 (transform: translateY(-2px))
|
||
|
||
4. **검색**
|
||
- 검색 아이콘 클릭: 전체 화면 검색 인터페이스 표시
|
||
- 실시간 자동완성 및 최근 검색어 제공
|
||
|
||
#### 데이터 요구사항
|
||
- **입력**:
|
||
- 사용자 ID (현재 로그인 사용자)
|
||
- 현재 날짜/시간 (예정된 회의 필터링용)
|
||
|
||
- **출력**:
|
||
- **예정된/진행중 회의**:
|
||
- 회의 ID, 제목, 일시, 참여자 목록, 상태 (예정/진행중), D-day
|
||
- **생성자 ID** (권한 판별용)
|
||
- **현재 사용자 역할** (creator | attendee)
|
||
- **참여 가능 시간** (시작 시간 - 10분)
|
||
- 필터 조건:
|
||
- **진행중 회의**: 회의 시작 시간 <= 현재 시간 AND 회의 종료 안 됨, 사용자가 참여자 또는 생성자
|
||
- **예정된 회의**: 회의 일시 >= 현재 시간, 사용자가 참여자 또는 생성자
|
||
- 정렬 우선순위:
|
||
1. 진행중 회의 우선 (상태 = ongoing)
|
||
2. 예정된 회의 (회의 일시 순, 가까운 순)
|
||
- 최대 3개 (진행중 회의 우선)
|
||
- **버튼 표시 조건**:
|
||
- 진행중 회의: "참여하기" 버튼 (항상 표시)
|
||
- 예정된 회의 (생성자): "수정" 버튼 (항상 표시)
|
||
- 예정된 회의 (참여자):
|
||
- 현재 시간 >= 시작 시간 - 10분: "참여하기" 버튼 활성화
|
||
- 현재 시간 < 시작 시간 - 10분: 버튼 비활성화 또는 타이머 표시
|
||
|
||
- **내 회의록**:
|
||
- 회의 ID, 제목, 일시, 참여자 수, 상태, 생성일시, 수정일시
|
||
- 필터: 사용자가 참여자 또는 생성자
|
||
- 정렬: 생성일시 (최근 순)
|
||
- 최대 3개
|
||
|
||
- **통계 데이터**:
|
||
- 예정된/진행중 회의 수 (진행중 회의 수 별도 배지)
|
||
- 작성중 회의록 수
|
||
|
||
- **연동**:
|
||
- Meeting 서비스 (회의 정보, 회의록 정보)
|
||
|
||
#### 에러 처리
|
||
- **데이터 로딩 실패**:
|
||
- 해당 카드에 "일시적으로 데이터를 불러올 수 없습니다." 표시
|
||
- "다시 시도" 버튼 제공 (새로고침 아이콘)
|
||
- 로그 기록 및 에러 추적
|
||
|
||
- **부분 데이터 로딩 실패**:
|
||
- 실패한 섹션만 에러 표시, 나머지 섹션은 정상 표시
|
||
- 사용자 경험 최소 방해
|
||
|
||
- **빈 상태** (각 섹션별):
|
||
- 예정된/진행중 회의: "예정된 회의가 없습니다"
|
||
- 내 회의록: "작성한 회의록이 없습니다. 첫 회의를 시작해보세요!"
|
||
|
||
- **진행중 회의 참여 실패**:
|
||
- "회의에 참여할 수 없습니다." 토스트 메시지
|
||
- 원인별 안내:
|
||
- 회의 종료됨: "이미 종료된 회의입니다"
|
||
- 권한 없음: [공통 에러 메시지 - 권한 오류](#권한-오류) 참조
|
||
- 네트워크 오류: [공통 에러 메시지 - 네트워크 오류](#네트워크-오류) 참조
|
||
|
||
- **예정된 회의 접근 제한**:
|
||
- **시간 제한 (초대받은 참여자)**:
|
||
- "아직 참여할 수 없습니다. N분 후 참여 가능합니다." 토스트 메시지
|
||
- 10분 전부터 참여 버튼 활성화
|
||
- 타이머 자동 갱신 (1분 간격)
|
||
- **권한 제한 (수정 시도)**:
|
||
- [공통 에러 메시지 - 권한 오류](#권한-오류) 참조
|
||
|
||
- **회의 수정 실패** (생성자):
|
||
- "회의 정보를 수정할 수 없습니다." 토스트 메시지
|
||
- 원인별 안내:
|
||
- 이미 시작된 회의: "진행 중인 회의는 수정할 수 없습니다"
|
||
- 네트워크 오류: [공통 에러 메시지 - 네트워크 오류](#네트워크-오류) 참조
|
||
- 권한 변경됨: [공통 에러 메시지 - 권한 오류](#권한-오류) 참조
|
||
|
||
- **네트워크 오류**: [공통 에러 메시지 - 네트워크 오류](#네트워크-오류) 참조
|
||
|
||
---
|
||
|
||
### 03-회의예약
|
||
|
||
#### 개요
|
||
- **목적**: 예정된 회의 일정 등록 및 참여자 초대
|
||
- **관련 유저스토리**: UFR-MEET-010
|
||
- **비즈니스 중요도**: 높음
|
||
- **접근 경로**: 대시보드 → "회의 예약" 버튼
|
||
- **권한**: 모든 사용자 (예약 생성 시 자동으로 회의 생성자가 됨)
|
||
|
||
#### 주요 기능
|
||
1. 회의 기본 정보 입력 (제목, 날짜/시간, 장소)
|
||
2. 참여자 추가 (이메일 또는 조직도 검색)
|
||
3. 회의 안건 사전 입력 (선택)
|
||
4. 참여자 초대 이메일 자동 발송
|
||
5. 캘린더 연동
|
||
|
||
#### UI 구성요소
|
||
|
||
**Mobile (320px~768px)**
|
||
- **헤더**
|
||
- 뒤로가기 버튼
|
||
- "회의 예약" 타이틀
|
||
- "저장" 버튼 (Primary)
|
||
|
||
- **폼 섹션** (스크롤)
|
||
- **회의 제목** (필수)
|
||
- 텍스트 입력 필드
|
||
- 최대 100자 카운터
|
||
|
||
- **날짜 및 시간** (필수)
|
||
- 날짜 선택기 (달력 UI)
|
||
- 시작 시간 선택기
|
||
- 종료 시간 선택기
|
||
- 종일 토글 (선택)
|
||
|
||
- **장소** (선택)
|
||
- 텍스트 입력 필드
|
||
- 온라인/오프라인 토글
|
||
- 온라인 선택 시: 회의 링크 자동 생성 옵션
|
||
|
||
- **참여자** (필수, 최소 1명)
|
||
- 참여자 칩 (제거 가능)
|
||
- "참여자 추가" 버튼
|
||
- 참여자 검색 (이메일 또는 이름)
|
||
|
||
- **안건** (선택)
|
||
- 다중 라인 텍스트 입력
|
||
|
||
**Tablet/Desktop (768px+)**
|
||
- 좌측: 폼 (모바일과 동일)
|
||
- 우측: 미리보기 패널 (입력 내용 실시간 프리뷰)
|
||
|
||
#### 인터랙션
|
||
1. **날짜/시간 선택**
|
||
- 달력 UI: 과거 날짜 비활성화
|
||
- 시간 선택: 30분 단위 드롭다운
|
||
- 충돌 감지: 동일 시간대 다른 회의 있을 경우 경고
|
||
|
||
2. **참여자 추가**
|
||
- "참여자 추가" 클릭 → 검색 모달 표시
|
||
- 실시간 검색 (이름, 이메일, 부서)
|
||
- 선택된 참여자는 칩 형태로 표시
|
||
- 칩의 X 버튼으로 제거 가능
|
||
|
||
3. **저장 처리**
|
||
- 필수 필드 검증
|
||
- 저장 성공: "회의가 예약되었습니다" 토스트 메시지, 대시보드로 이동
|
||
- 초대 이메일 발송 확인 다이얼로그
|
||
|
||
#### 데이터 요구사항
|
||
- **입력**:
|
||
- 제목(문자열, 최대 100자)
|
||
- 날짜(Date)
|
||
- 시작 시간(Time)
|
||
- 종료 시간(Time)
|
||
- 장소(문자열, 최대 200자, 선택)
|
||
- 참여자 목록(이메일 배열)
|
||
- 안건(문자열, 선택)
|
||
- **출력**: 회의 ID, 초대 이메일 발송 결과
|
||
- **연동**: Meeting 서비스, Notification 서비스
|
||
|
||
#### 에러 처리
|
||
- **필수 필드 누락**: 해당 필드에 빨간색 테두리 및 오류 메시지
|
||
- **참여자 0명**: "최소 1명의 참여자를 추가해주세요"
|
||
- **과거 날짜 선택**: "과거 날짜는 선택할 수 없습니다"
|
||
- **저장 실패**: "회의 예약에 실패했습니다. 다시 시도해주세요"
|
||
|
||
---
|
||
|
||
### 04-템플릿선택
|
||
|
||
#### 개요
|
||
- **목적**: 회의 유형에 맞는 회의록 템플릿 선택 및 커스터마이징
|
||
- **관련 유저스토리**: UFR-MEET-020
|
||
- **비즈니스 중요도**: 중간
|
||
- **접근 경로**: 대시보드 → "새 회의 시작" 또는 회의예약 → "회의 시작"
|
||
- **권한**: 회의 생성자 전용
|
||
|
||
#### 주요 기능
|
||
1. 사전 정의된 템플릿 선택 (일반, 스크럼, 킥오프, 주간)
|
||
2. 템플릿 미리보기
|
||
3. 섹션 추가/삭제/순서 변경
|
||
4. 커스텀 템플릿 저장
|
||
|
||
#### UI 구성요소
|
||
|
||
**Mobile (320px~768px)**
|
||
- **헤더**
|
||
- 뒤로가기 버튼
|
||
- "템플릿 선택" 타이틀
|
||
- "건너뛰기" 텍스트 버튼 (기본 템플릿 사용)
|
||
|
||
- **템플릿 카드 리스트**
|
||
- 각 템플릿 카드:
|
||
- 템플릿 이름 및 아이콘
|
||
- 간단한 설명
|
||
- "선택" 버튼
|
||
- "미리보기" 버튼
|
||
|
||
- **선택된 템플릿 상세** (모달 또는 전체 화면)
|
||
- 섹션 목록 (드래그하여 순서 변경 가능)
|
||
- 각 섹션: 이름, 삭제 버튼
|
||
- "섹션 추가" 버튼
|
||
- "이 템플릿으로 시작" 버튼 (Primary)
|
||
|
||
**Tablet/Desktop (768px+)**
|
||
- 좌측: 템플릿 목록
|
||
- 중앙: 선택된 템플릿 미리보기
|
||
- 우측: 커스터마이징 패널
|
||
|
||
#### 인터랙션
|
||
1. **템플릿 선택**
|
||
- 템플릿 카드 클릭: 해당 템플릿 상세 보기
|
||
- "선택" 버튼: 즉시 회의진행 화면으로 이동
|
||
|
||
2. **커스터마이징**
|
||
- 섹션 드래그: 순서 변경 (터치/마우스)
|
||
- 섹션 삭제: 스와이프 또는 삭제 아이콘
|
||
- 섹션 추가: "섹션 추가" → 섹션 이름 입력 모달
|
||
|
||
3. **저장 및 시작**
|
||
- "이 템플릿으로 시작": 회의진행 화면으로 전환
|
||
- 커스텀 템플릿 저장 옵션 (선택)
|
||
|
||
#### 데이터 요구사항
|
||
- **입력**: 없음 (또는 회의 ID - 예약된 회의인 경우)
|
||
- **출력**: 선택된 템플릿 구조 (섹션 배열)
|
||
- **연동**: Meeting 서비스
|
||
|
||
#### 에러 처리
|
||
- **템플릿 로딩 실패**: "템플릿을 불러올 수 없습니다" + 재시도 버튼
|
||
- **빈 템플릿**: "최소 1개의 섹션이 필요합니다"
|
||
|
||
---
|
||
|
||
### 05-회의진행
|
||
|
||
#### 개요
|
||
- **목적**: 실시간 회의 진행 및 AI 기반 회의록 자동 작성
|
||
- **관련 유저스토리**: UFR-MEET-030, UFR-STT-010/020, UFR-AI-010, UFR-AI-040, UFR-RAG-010/020, UFR-PART-020, UFR-HOST-010/020, UFR-TERM-010/020
|
||
- **비즈니스 중요도**: 높음 (핵심 화면)
|
||
- **접근 경로**: 대시보드 → "참여하기" 버튼 (페이지 전환)
|
||
- **권한** (MVP 개선):
|
||
- **회의 생성자 전용**: 회의 종료, 녹음 제어 (일시정지/재개/종료)
|
||
- **모든 참여자**: 회의 참여, AI 기반 메모 작성, 용어 확인, 관련 회의록 확인, 중도 퇴장
|
||
|
||
#### 주요 기능 (MVP 스코프 축소 v1.5.0)
|
||
1. 음성 녹음 및 실시간 텍스트 변환 (STT)
|
||
2. AI 자동 회의록 작성 (구조화)
|
||
3. **AI 기반 메모 작성** (UFR-PART-020): AI가 실시간으로 감지한 주요 내용을 참여자가 선택하여 개인 메모로 저장
|
||
4. 전문용어 자동 감지 및 맥락 기반 설명
|
||
5. **참고자료 자동 연결** (이전 회의록, 관련 회의록)
|
||
6. 참여자 관리 및 초대 기능
|
||
7. 회의 진행 시간 표시
|
||
|
||
**변경사항 (v1.5.0)**:
|
||
- ✅ 변경: "AI 제안" 탭 → "AI 기반 메모" 탭으로 기능 변경
|
||
- ✅ 추가: 개인 메모 입력 및 저장 기능 (각 참여자별 개별 저장)
|
||
- ✅ 정책: 메모는 회의 종료 전까지만 표시/편집 가능, 다른 참여자 메모는 볼 수 없음
|
||
|
||
#### UI 구성요소
|
||
|
||
**전체 레이아웃**
|
||
- **헤더** (Fixed, 상단)
|
||
- 좌측: "회의 진행 중" 제목 + 경과시간 배지 (빨강, 01:03)
|
||
- 우측: "회의 종료" 버튼 (민트 그린 테두리)
|
||
|
||
- **메인 콘텐츠 영역: 정보 패널** (탭 구조)
|
||
- **탭 네비게이션** (4개 탭)
|
||
- 참여자 (3명)
|
||
- AI 기반 메모
|
||
- 용어 사전
|
||
- 관련 자료 (32건)
|
||
|
||
- **참여자 탭** (4명)
|
||
- 제목: "참여자 (4명)" (동적으로 인원수 업데이트)
|
||
- **참여자 추가 폼**:
|
||
- 이메일 입력 필드: placeholder "이메일 주소 입력", form-control 스타일
|
||
- "초대" 버튼: btn btn-primary btn-sm
|
||
- 레이아웃: Flex (gap: 8px), 입력창(flex: 1) + 버튼
|
||
- 하단 여백: 16px (margin-bottom: var(--space-md))
|
||
- **참여자 목록** (아바타 + 이름)
|
||
- 김민준 (초록 아바타)
|
||
- 박서연 (파랑 아바타)
|
||
- 이준호 (노랑 아바타)
|
||
- 최유진 (핑크 아바타)
|
||
- **각 참여자 아이템**:
|
||
- 컬러 아바타 (avatar-sm: 32x32)
|
||
- 이름 (text-small font-medium, 14px)
|
||
- flex layout, 하단 구분선 (마지막 제외)
|
||
- 상태 표시 제거됨 (발언 중/온라인 등 표시 안 함)
|
||
|
||
- **AI 기반 메모 탭** (UFR-PART-020)
|
||
- 제목: "AI 기반 메모"
|
||
|
||
- **메모 입력 영역** (상단):
|
||
- **메모 입력 텍스트박스**:
|
||
- placeholder: "메모를 입력하세요..."
|
||
- 다중 행 입력 지원 (textarea)
|
||
- 배경: 화이트 (#FFFFFF)
|
||
- 테두리: 회색 실선 (1px solid #E5E7EB)
|
||
- 테두리 둥글기: 8px
|
||
- 내부 패딩: 12px
|
||
- 최소 높이: 80px
|
||
- **저장 버튼**:
|
||
- 텍스트: "저장"
|
||
- 스타일: btn btn-primary (민트 그린)
|
||
- 위치: 메모 입력창 하단 우측
|
||
- 여백: 상단 8px
|
||
- **구분선**:
|
||
- 메모 입력 영역 하단에 회색 구분선 (1px solid #E5E7EB)
|
||
- 상하 여백: 16px
|
||
|
||
- **AI가 감지한 주요 내용 영역** (하단):
|
||
- **섹션 헤더**:
|
||
- 텍스트: "AI가 감지한 주요 내용"
|
||
- 폰트: 16px Bold, gray-800
|
||
- 하단 여백: 12px
|
||
|
||
- **주요 내용 리스트**:
|
||
- **리스트 아이템 디자인**:
|
||
- 배경: 연한 회색 (#FAFAFA)
|
||
- 테두리: 회색 점선 (1px dashed #D0D0D0)
|
||
- 테두리 둥글기: 8px
|
||
- 내부 패딩: 12px
|
||
- 아이템 간 여백: 8px
|
||
- 호버 시: 민트 그린 배경 (#E8F9F3), 커서 포인터
|
||
|
||
- **아이템 구조**:
|
||
- 시간 태그 (좌측):
|
||
- 형식: "[HH:MM]"
|
||
- 폰트: 12px Bold, 민트 그린 (#4DD5A7)
|
||
- 배경: 민트 그린 연한 배경 (#E8F9F3)
|
||
- 패딩: 4px 8px
|
||
- 테두리 둥글기: 4px
|
||
- 주요 내용 텍스트 (우측):
|
||
- 폰트: 14px, gray-700
|
||
- flex-grow: 1
|
||
- 좌측 여백: 8px
|
||
|
||
- **아이템 예시**:
|
||
- `[15:32] 예산 책정 관련 결정`
|
||
- `[15:35] 다음 회의 일정 합의`
|
||
- `[15:38] API 설계 패턴 논의`
|
||
- `[15:42] 마이크로서비스 아키텍처 채택`
|
||
|
||
- **클릭 인터랙션**:
|
||
- 아이템 클릭 시 → 메모 입력창에 "[시간] 내용" 형식으로 자동 추가
|
||
- 기존 메모가 있으면 줄바꿈 후 추가
|
||
- 입력된 메모는 수정 가능
|
||
|
||
- **정책**:
|
||
- 각 참여자별로 개별 저장 (다른 참여자의 메모는 볼 수 없음)
|
||
- 메모는 회의 종료 전까지만 표시 및 편집 가능
|
||
- 회의 종료 시 AI가 회의록 생성할 때 모든 참여자의 메모 참조
|
||
|
||
- **용어 사전 탭**
|
||
- 제목: "용어 사전"
|
||
- 용어 검색 입력 필드 (placeholder: "용어 검색...")
|
||
- **카드 디자인** (gappa 스타일):
|
||
- 기본 상태:
|
||
- 배경: 화이트 (#FFFFFF)
|
||
- 테두리: 회색 실선 (1px solid #E5E7EB)
|
||
- 테두리 둥글기: 8px
|
||
- 내부 패딩: 16px
|
||
- 카드 간 여백: 12px
|
||
- 하이라이트 상태 (현재 회의에서 언급된 용어):
|
||
- 배경: 민트 그린 연한 배경 (#E8F9F3)
|
||
- 테두리: 민트 그린 실선 (1px solid #4DD5A7)
|
||
- 호버 시: 회색 배경 (#F9FAFB)
|
||
|
||
- **용어 카드 구조**:
|
||
- 용어명 (16px bold) + 카테고리 배지 (민트 그린 연한 배경) + 언급 아이콘 (💬, 언급된 경우만)
|
||
- 정의: 14px 일반 텍스트 (gray-600)
|
||
- 컨텍스트 (11px, gray-500, 상단 회색 구분선):
|
||
- "회의에서 N회 언급됨" (현재 회의에서 언급)
|
||
- "관련 회의록에서 언급됨" (관련 회의록에만 언급)
|
||
- "회의에서 언급됨 (HH:MM)" (시간 정보 포함)
|
||
- "{관련 회의록명} (날짜)에서 {컨텍스트 정보}" (특정 관련 회의록 정보)
|
||
|
||
- **용어 카드 예시**:
|
||
- AI + 기술 배지 + 💬
|
||
- 정의: Artificial Intelligence의 약자로, 인공지능을 의미합니다. 이 프로젝트에서는 회의록 자동 작성에 활용됩니다.
|
||
- 컨텍스트: "회의에서 5회 언급됨"
|
||
- API Gateway + 아키텍처 배지 + 💬
|
||
- 정의: 클라이언트와 백엔드 마이크로서비스 사이의 단일 진입점 역할을 하는 서버
|
||
- 컨텍스트: "API 설계 리뷰 회의 (2024-09-28)에서 AWS API Gateway 채택 결정"
|
||
- 마이크로서비스 + 아키텍처 배지 (하이라이트 없음)
|
||
- 정의: 애플리케이션을 작고 독립적인 서비스로 분할하는 소프트웨어 아키텍처 스타일
|
||
- 컨텍스트: "관련 회의록에서 언급됨"
|
||
- MVP + 방법론 배지 + 💬
|
||
- 정의: Minimum Viable Product의 약자
|
||
- 컨텍스트: "회의에서 언급됨 (14:23)"
|
||
- RESTful API + 기술 배지 + 💬
|
||
- 정의: REST 아키텍처 스타일로 작성한 웹 서비스 API 설계 방식
|
||
- 컨텍스트: "회의에서 3회 언급됨"
|
||
|
||
- 카드 클릭 시: 상세 설명 모달 표시
|
||
|
||
- **관련 자료 탭** (32건)
|
||
- 제목: "관련 회의록 (32건)"
|
||
- **카드 디자인** (gappa 스타일):
|
||
- 배경: 회색 (#F5F5F5)
|
||
- 테두리: 회색 점선 (1px dashed #9CA3AF)
|
||
- 테두리 둥글기: 8px
|
||
- 내부 패딩: 16px
|
||
- 카드 간 여백: 12px
|
||
- 호버 시: 회색 배경 (#F3F4F6)
|
||
- 구조: 헤더 + 메타정보 + 요약 텍스트
|
||
|
||
- **관련 회의록 카드 구조**:
|
||
- 헤더: 회의록 제목 (16px bold)
|
||
- 메타정보: 날짜 + 관련도 (12px, gray-500)
|
||
- 요약: 회의록 핵심 내용 또는 관련 컨텍스트 (14px 일반, gray-600)
|
||
|
||
- **관련 회의록 예시**:
|
||
- "2024년 4분기 제품 기획 회의"
|
||
- 메타정보: 2024-10-15 | 관련도 92%
|
||
- 요약: 신규 회의록 서비스의 MVP 범위와 일정을 논의. AI 기반 회의 요약 기능의 우선순위를 높게 설정.
|
||
- "API 설계 리뷰 회의"
|
||
- 메타정보: 2024-09-28 | 관련도 78%
|
||
- 요약: RESTful API 설계 패턴과 API Gateway 채택. 마이크로서비스 간 통신 방식 결정.
|
||
- "스프린트 회고 회의"
|
||
- 메타정보: 2024-10-01 | 관련도 65%
|
||
- 요약: 협업 도구 사용성 개선과 MVP 개발 프로세스 최적화 논의.
|
||
|
||
- 카드 클릭 시: **새 탭으로 열기** (target="_blank")
|
||
|
||
**반응형 디자인**
|
||
- **Mobile (320px~768px)**
|
||
- 헤더: 고정 상단, 좁은 너비
|
||
- 메인 콘텐츠: 전체 너비 사용
|
||
- 탭 콘텐츠: 세로 스크롤
|
||
- 하단 버튼 영역: 고정 하단
|
||
|
||
- **Desktop (768px+)**
|
||
- 헤더: 고정 상단, 넓은 너비
|
||
- 메인 콘텐츠: 최대 너비 제한 없이 반응형
|
||
- 탭 콘텐츠: 더 넓은 영역 활용
|
||
- 하단 버튼 영역: 고정 하단
|
||
|
||
#### 인터랙션
|
||
|
||
1. **탭 전환**
|
||
- **참여자 탭**: 현재 회의 참여자 목록 표시 (4명) 및 참여자 추가 기능
|
||
- **참여자 추가 폼** (상단):
|
||
- 이메일 입력 필드 (form-control 스타일, placeholder: "이메일 주소 입력")
|
||
- "초대" 버튼 (btn btn-primary btn-sm)
|
||
- 이메일 입력 후 "초대" 클릭 시:
|
||
1. 이메일 유효성 검증 (정규식: /^[^\s@]+@[^\s@]+\.[^\s@]+$/)
|
||
2. 빈 값 체크: 빈 값이면 "이메일 주소를 입력해주세요" 경고 토스트
|
||
3. 잘못된 형식: "올바른 이메일 형식이 아닙니다" 오류 토스트
|
||
4. 유효한 이메일: "{email}에게 초대 링크가 전송되었습니다" 성공 토스트
|
||
5. 입력창 초기화 (value = '')
|
||
6. 실제 구현 시 서버 API 호출 (/api/meetings/invite)
|
||
- **참여자 목록** (하단):
|
||
- 각 참여자: 아바타 + 이름
|
||
- 상태 표시 없음 (발언 중/온라인 등 제거)
|
||
- 참여자 수 동적 업데이트 (초대 성공 시)
|
||
|
||
- **AI 기반 메모 탭** (UFR-PART-020): AI가 감지한 주요 내용을 참여자가 선택하여 개인 메모로 저장
|
||
- **메모 작성 및 저장**:
|
||
- 메모 입력창에 자유롭게 메모 작성 가능
|
||
- "저장" 버튼 클릭 시 개인 메모로 저장 (각 참여자별 개별 저장)
|
||
- 저장 성공 시 "{n}개의 메모가 저장되었습니다" 성공 토스트
|
||
- 저장 실패 시 "메모 저장에 실패했습니다" 오류 토스트
|
||
- **AI가 감지한 주요 내용**:
|
||
- 음성→텍스트 변환 후 AI가 실시간으로 회의 내용 분석
|
||
- **중요한 내용으로 판단된 경우에만** 주요 내용 항목 표시
|
||
- 각 항목: "[시간] 주요 내용 텍스트" 형식 (예: "[15:32] 예산 책정 관련 결정")
|
||
- 실시간 업데이트: 새로운 항목은 하단에 추가
|
||
- 항목 클릭 시:
|
||
1. 메모 입력창에 "[시간] 내용" 형식으로 자동 추가
|
||
2. 기존 메모가 있으면 줄바꿈 후 추가
|
||
3. 입력된 메모는 수정 가능 (자동/수동 구분 표시)
|
||
4. 저장 버튼 활성화
|
||
- **정책**:
|
||
- 메모는 회의 종료 전까지만 표시/편집 가능
|
||
- 각 참여자의 메모는 다른 참여자에게 보이지 않음
|
||
- 회의 종료 시 AI가 모든 참여자의 메모를 참조하여 회의록 생성
|
||
|
||
- **용어 사전 탭**: 회의에서 언급된 전문용어 설명
|
||
- **용어 검색 기능**:
|
||
- 검색 입력창 (placeholder: "용어 검색...", form-control 스타일)
|
||
- 검색 버튼 (btn btn-primary btn-sm)
|
||
- Enter 키 지원
|
||
- 검색 동작:
|
||
1. 용어명과 정의 모두 검색
|
||
2. 일치하는 용어만 표시, 나머지는 숨김
|
||
3. 검색 결과에 하이라이트 효과 적용
|
||
4. 검색 결과 없으면 전체 목록 다시 표시
|
||
5. 입력창이 비어있으면 전체 목록 표시
|
||
- 용어 카드: 용어명 + 카테고리 배지 + 간단한 정의
|
||
- 카드 클릭 → 확장하여 상세 설명 표시
|
||
- 상세 설명: 이 회의에서의 의미, 관련 회의록 링크
|
||
|
||
- **관련 자료 탭**: AI가 찾은 관련 회의록 (32건)
|
||
- 회의록 링크 클릭 → **새 탭(target="_blank")에서 해당 회의록 열기**
|
||
- **녹음 중인 페이지 이탈 방지**: 모든 링크는 새 탭으로 열림
|
||
- 관련도 표시: 퍼센트 또는 별점으로 시각화
|
||
|
||
2. **회의 종료**
|
||
- 헤더의 "회의 종료" 버튼 클릭
|
||
- 확인 다이얼로그 표시: "회의를 종료하시겠습니까?"
|
||
- 확인 → 회의 종료 처리 및 07-회의종료.html로 이동
|
||
|
||
3. **실시간 업데이트**
|
||
- STT 음성 인식 결과 실시간 반영 (3-5초 주기)
|
||
- AI 제안 실시간 업데이트
|
||
- 용어 사전 자동 업데이트 (새로운 전문용어 감지 시)
|
||
- 관련 회의록 목록 동적 갱신
|
||
|
||
#### 데이터 요구사항
|
||
- **입력**:
|
||
- 회의 ID
|
||
- 오디오 스트림 (실시간 STT용)
|
||
- 참여자 초대 이메일
|
||
- **출력**:
|
||
- 실시간 텍스트 변환 결과 (STT)
|
||
- **AI가 감지한 주요 내용 목록** (시간 + 내용)
|
||
- **개인 메모** (각 참여자별 개별 저장)
|
||
- **전문용어 및 설명** (용어 사전)
|
||
- **관련 회의록 목록** (32건, 관련도 포함)
|
||
- 참여자 목록
|
||
- **연동**:
|
||
- STT 서비스 (UFR-AI-010)
|
||
- AI 서비스 (주요 내용 감지, UFR-AI-040)
|
||
- RAG 서비스 (관련 회의록 검색, 전문용어 자동 감지)
|
||
- PARTICIPANT 서비스 (메모 저장, UFR-PART-020)
|
||
|
||
#### 에러 처리
|
||
- **마이크 권한 거부**: "마이크 권한이 필요합니다" 토스트 + 설정 안내 링크
|
||
- **STT 실패**: "음성 인식에 실패했습니다" 토스트 + 재시도 안내
|
||
- **AI 주요 내용 감지 실패**: "AI 주요 내용 감지에 실패했습니다" 토스트 (회의 계속 진행 가능)
|
||
- **메모 저장 실패**: "메모 저장에 실패했습니다" 토스트 + 재시도 버튼
|
||
- **용어 사전 로드 실패**: "용어 사전을 불러올 수 없습니다" 메시지 표시
|
||
- **관련 자료 검색 실패**: "관련 회의록을 찾을 수 없습니다" 메시지 표시
|
||
- **참여자 초대 실패**: "초대 링크 전송에 실패했습니다" 토스트 + 재시도 버튼
|
||
- **회의 종료 실패**: "회의 종료 중 오류가 발생했습니다" 토스트 + 재시도 버튼
|
||
|
||
---
|
||
|
||
### 07-회의종료
|
||
|
||
#### 개요
|
||
- **목적**: 회의 종료 후 AI 요약 내용 확인 및 다음 단계 선택
|
||
- **관련 유저스토리**: UFR-MEET-040, UFR-MEET-050, UFR-AI-010, UFR-AI-020, UFR-AI-036
|
||
- **비즈니스 중요도**: 높음
|
||
- **접근 경로**: 회의진행 → "회의 종료" 버튼
|
||
- **권한**: 회의 생성자 전용
|
||
- **화면 정책**: **확인 전용 화면 (편집 불가)**
|
||
- 모든 내용은 읽기 전용
|
||
- 안건 내용 수정 불가
|
||
- Todo 수정 불가
|
||
- 확인 후 다음 단계 선택만 가능
|
||
|
||
#### 주요 기능
|
||
1. 회의 통계 표시 (시간, 참여자, 발언 횟수 등)
|
||
2. 주요 키워드 클라우드
|
||
3. **안건별 AI 요약 전체 표시** (신규)
|
||
- 안건별 AI 한줄 요약 (30자 이내, 편집 불가)
|
||
- 안건별 상세 요약 정리
|
||
- 안건별 Todo 자동 추출 결과
|
||
4. **3가지 선택 옵션 제공** (신규)
|
||
- 옵션 1: 회의록 수정 화면으로 이동
|
||
- 옵션 2: 바로 최종 확정
|
||
- 옵션 3: 대시보드로 이동
|
||
|
||
#### UI 구성요소
|
||
|
||
**Mobile (320px~768px)**
|
||
- **헤더**
|
||
- "회의가 종료되었습니다" 메시지
|
||
- 회의 제목
|
||
|
||
- **통계 카드**
|
||
- 회의 총 시간
|
||
- 참여자 수
|
||
- 주요 키워드 (태그 클라우드)
|
||
|
||
- **안건별 AI 요약 섹션** (신규)
|
||
- **안건 카드** (안건 개수만큼 반복):
|
||
- **안건 제목** (H4, Bold)
|
||
- **AI 한줄 요약** (읽기 전용, 회색 배경 박스)
|
||
- 30자 이내 간결한 표현
|
||
- 🔒 "편집 불가" 아이콘 표시
|
||
- 민트 그린 좌측 액센트 라인
|
||
- **상세 요약 정리** (읽기 전용)
|
||
- 발언자별 의견
|
||
- 결정 사항
|
||
- 보류 사항
|
||
- **Todo 자동 추출 결과** (있는 경우)
|
||
- Todo 항목 리스트
|
||
- 담당자, 마감일, 우선순위 표시
|
||
- 읽기 전용 (체크박스 비활성화)
|
||
|
||
- **3가지 선택 옵션** (하단 액션 바)
|
||
- **옵션 1**: "회의록 수정" 버튼 (Secondary)
|
||
- 회의록 수정 화면(11-회의록수정)으로 이동
|
||
- 회의록 상태: 작성중
|
||
- **옵션 2**: "바로 최종 확정" 버튼 (Primary, 강조)
|
||
- 확인 다이얼로그: "AI가 정리한 내용 그대로 최종 확정하시겠습니까?"
|
||
- 모든 안건 자동 검증 완료 처리
|
||
- 회의록 상태: 확정완료
|
||
- 참여자에게 확정 알림 발송
|
||
- **옵션 3**: "대시보드로 이동" 버튼 (Ghost)
|
||
- 회의록 상태: 작성중 (추후 편집 가능)
|
||
- 대시보드로 이동
|
||
|
||
**Tablet/Desktop (768px+)**
|
||
- 상단: 통계 카드 (Grid Layout)
|
||
- 중앙: 안건별 AI 요약 섹션 (2열 그리드)
|
||
- 하단: 3가지 선택 옵션 버튼 (가로 배치)
|
||
|
||
#### 인터랙션
|
||
1. **통계 표시**
|
||
- 애니메이션 효과로 숫자 카운트업
|
||
- 차트는 페이드인 효과
|
||
|
||
2. **안건별 AI 요약 확인** (읽기 전용)
|
||
- **안건 카드 확장/축소**:
|
||
- 초기: 안건 제목 + AI 한줄 요약만 표시
|
||
- 클릭 시: 상세 요약 + Todo 전체 펼침
|
||
- **편집 불가 안내**:
|
||
- AI 한줄 요약 영역에 🔒 아이콘 표시
|
||
- 호버 시: "이 내용은 편집할 수 없습니다" 툴팁
|
||
- **Todo 확인**:
|
||
- 체크박스 비활성화 (disabled)
|
||
- 읽기 전용 표시
|
||
|
||
3. **다음 단계 선택**
|
||
- **옵션 1: 회의록 수정**
|
||
- 11-회의록수정.html로 이동
|
||
- URL 파라미터: meetingId
|
||
- 회의록 상태: 작성중
|
||
- **옵션 2: 바로 최종 확정** (UFR-MEET-050 시나리오 2)
|
||
- 확인 다이얼로그 표시: "바로 최종 확정하시겠습니까? AI가 정리한 내용 그대로 확정됩니다."
|
||
- 확인 시:
|
||
- 모든 안건 검증률 100% 자동 설정
|
||
- 안건별 검증완료 처리
|
||
- 회의록 상태: "작성중" → "확정완료"로 변경
|
||
- 확정 시간 기록
|
||
- 참여자에게 확정 알림 발송
|
||
- 성공 토스트: "회의록이 최종 확정되었습니다"
|
||
- 10-회의록상세조회.html로 이동
|
||
- **시나리오 2 특징 (바로 확정)**:
|
||
- 회의록 수정 단계를 건너뜀
|
||
- AI 생성 내용을 그대로 확정
|
||
- 모든 안건이 자동으로 검증완료 처리됨
|
||
- 확정 후에도 회의 생성자는 수정 가능 (잠금 해제 필요)
|
||
- **옵션 3: 대시보드로 이동**
|
||
- 회의록 상태: 작성중
|
||
- 02-대시보드.html로 이동
|
||
- 추후 회의록 목록에서 편집 가능
|
||
|
||
#### 데이터 요구사항
|
||
- **입력**: 회의 ID
|
||
- **출력**:
|
||
- 회의 통계 (시간, 참여자 수, 발언 통계, 키워드)
|
||
- **안건별 AI 요약 데이터**:
|
||
- 안건 제목
|
||
- AI 한줄 요약 (30자 이내)
|
||
- 상세 요약 정리 (논의 주제, 발언자별 의견, 결정 사항, 보류 사항)
|
||
- 안건별 Todo 목록 (제목, 담당자, 마감일, 우선순위)
|
||
- 회의록 상태 (작성중/확정완료)
|
||
- **연동**: Meeting 서비스, AI 서비스
|
||
|
||
#### 에러 처리
|
||
- **통계 생성 실패**: "통계를 생성할 수 없습니다" + 건너뛰기 옵션
|
||
- **AI 요약 생성 실패**: "AI 요약을 생성할 수 없습니다. 회의록 수정 화면에서 직접 작성해주세요"
|
||
- **바로 확정 실패**: "회의록 확정에 실패했습니다. 다시 시도해주세요"
|
||
- **네트워크 오류**: 자동 재시도 3회, 실패 시 재시도 버튼 제공
|
||
|
||
---
|
||
|
||
### 10-회의록상세조회
|
||
|
||
#### 개요
|
||
- **목적**: 지난 회의록의 전체 내용 및 상세 정보 확인
|
||
- **관련 유저스토리**: UFR-MEET-047, UFR-AI-040, UFR-MEET-048
|
||
- **비즈니스 중요도**: 중간
|
||
- **접근 경로**: 대시보드 → "내 회의록" 항목 클릭
|
||
- **권한**: 모든 회의 참여자 (조회 전용)
|
||
|
||
#### 주요 기능 (MVP 스코프 축소 v1.5.0)
|
||
1. 회의 기본 정보 표시
|
||
2. **안건별 AI 요약 표시** (안건 최상단)
|
||
3. 안건별 상세 내용 표시
|
||
4. **참고자료 표시** (안건 하단)
|
||
5. **Todo 단순 조회** (UFR-MEET-047): 제목, 담당자만 표시 (D-day, 우선순위 라벨 제거)
|
||
6. 첨부파일 다운로드
|
||
7. 회의록 수정/공유 액션
|
||
|
||
**변경사항 (v1.5.0)**:
|
||
- ❌ 제거: Todo 관리 화면 연동 링크 (화면 자체가 제거됨)
|
||
- ❌ 제거: Todo D-day 라벨, 우선순위 배지 표시
|
||
- ✅ 변경: Todo는 단순 조회만 가능 (제목 + 담당자 + 마감일만 표시)
|
||
- ✅ 변경: "수정" 버튼을 회의 제목 우측으로 이동
|
||
|
||
#### UI 구성요소
|
||
|
||
**Mobile (320px~768px)**
|
||
- **헤더**
|
||
- 뒤로가기 버튼
|
||
- 회의 제목
|
||
- "수정" 버튼 (회의 제목 우측, 아이콘 또는 텍스트 버튼)
|
||
- 메뉴 버튼 (삭제, 공유 등)
|
||
|
||
- **기본 정보 카드**
|
||
- 회의 일시
|
||
- 참여자 아바타 및 이름 (역할 구분)
|
||
- 회의 장소
|
||
- 회의록 상태 배지 (작성중/확정완료)
|
||
- 작성자 및 최종 수정 시간
|
||
|
||
- **탭 네비게이션** (상단, Fixed)
|
||
- "대시보드" 탭 (기본 활성)
|
||
- "회의록" 탭
|
||
|
||
- **회의록 탭 콘텐츠** (안건별 구조)
|
||
- 각 안건:
|
||
- 안건 제목
|
||
- 검증 완료 배지 (검증된 경우)
|
||
- **AI 회의 내용 요약 영역** (안건 최상단, 강조 박스)
|
||
- 요약 아이콘 (💡)
|
||
- AI 자동 생성 요약 (2-3문장)
|
||
- 요약 생성/수정 시간
|
||
- "수정" 버튼 (권한 있는 경우)
|
||
- 안건 내용 (마크다운 렌더링)
|
||
- **참고자료 영역** (안건 하단, 별도 영역)
|
||
- "참고자료" 라벨
|
||
- 관련 회의록 링크 리스트 (최대 3개):
|
||
- 링크 아이콘 (📄)
|
||
- 회의 제목 (클릭 가능)
|
||
- 회의 날짜
|
||
- 관련도 표시 (퍼센트, 색상 코딩)
|
||
- 1-2줄 요약
|
||
- "더보기" 버튼 (3개 초과 시)
|
||
- 접기/펼치기 버튼 (선택)
|
||
|
||
- **대시보드 탭 콘텐츠** (11-회의록대시보드.html 구조 참조)
|
||
- **핵심내용 섹션** (💡)
|
||
- 번호 매김된 핵심 포인트 (4-5개)
|
||
- 주요 키워드 태그 클라우드
|
||
- 회의 통계 (참여자 수, 시간, 발언 횟수, 주요 의제 수)
|
||
|
||
- **결정사항 섹션** (✅)
|
||
- 결정사항 카드 리스트
|
||
- 각 카드: 결정 내용 + 결정자 + 시간 + 배경 설명
|
||
|
||
- **Todo 진행상황 섹션** (📋) - MVP 스코프 축소
|
||
- **단순 조회만 제공** (UFR-MEET-047)
|
||
- Todo 리스트:
|
||
- 각 Todo: 제목 + 담당자 + 마감일만 표시
|
||
- ❌ 제거: D-day 라벨, 우선순위 배지, 진행률 바, 상태별 필터
|
||
- ❌ 제거: Todo 관리 화면 연동 (클릭 액션 없음)
|
||
|
||
- **참고자료 섹션** (📚)
|
||
- 참고자료 탭 (관련 회의록/프로젝트 문서/이슈 트래커/위키 페이지)
|
||
- 각 참고자료 카드:
|
||
- 아이콘 + 제목 + 메타정보 (날짜, 작성자)
|
||
- 관련도 점수 배지 (92%, 88% 등)
|
||
- 2-3줄 요약
|
||
|
||
- **Todo 섹션** (단순 조회) - MVP 스코프 축소
|
||
- Todo 항목 리스트:
|
||
- Todo 내용 (제목)
|
||
- 담당자 이름
|
||
- 마감일
|
||
- ❌ 제거: 체크박스, 우선순위 배지, D-day 라벨
|
||
|
||
- **첨부파일 섹션**
|
||
- 파일 아이콘 + 파일명
|
||
- 다운로드 버튼
|
||
|
||
- **하단 액션 바** (Fixed) - MVP 스코프 축소
|
||
- "공유" 버튼
|
||
- ❌ 제거: "수정" 버튼 (헤더로 이동)
|
||
|
||
**Tablet/Desktop (768px+)**
|
||
- **상단**: 탭 네비게이션
|
||
- 대시보드 (기본 활성)
|
||
- 회의록
|
||
- **메인 영역**:
|
||
- 회의록 탭: 전체 회의록 내용 (안건별 구조)
|
||
- 대시보드 탭: 핵심내용, 결정사항, Todo 진행상황, 참고자료 (11-회의록대시보드.html 구조 참조)
|
||
|
||
#### 인터랙션
|
||
1. **탭 전환**
|
||
- "회의록" 탭: 전체 회의록 내용 표시 (안건별 구조)
|
||
- "대시보드" 탭: 핵심내용, 결정사항, Todo, 참고자료 요약 표시
|
||
- 탭 전환 시 URL 변경 없이 클라이언트 사이드 렌더링
|
||
|
||
2. **회의록 탭 인터랙션**
|
||
- **안건 네비게이션**: 안건 제목 클릭 → 해당 안건으로 스크롤
|
||
- **접기/펼치기**: 긴 내용은 초기 접힌 상태, 클릭으로 펼침
|
||
- **AI 요약 편집**:
|
||
- "수정" 버튼 클릭 (권한 있는 경우) → 인라인 편집 모드
|
||
- 수정 내용 자동 저장 (30초 간격)
|
||
- 실시간 동기화
|
||
- **참고자료 링크**:
|
||
- 회의록 링크 클릭 → 새 탭에서 해당 회의록 열기
|
||
- 관련도 색상 코딩: 90%+ (초록), 70-89% (노랑), 70% 미만 (회색)
|
||
- "더보기" 클릭 → 전체 참고자료 목록 모달
|
||
|
||
3. **대시보드 탭 인터랙션** - MVP 스코프 축소
|
||
- **핵심내용 섹션**:
|
||
- 키워드 태그 클릭 → 해당 키워드 관련 안건으로 스크롤
|
||
- 통계 항목 클릭 → 상세 정보 툴팁 표시
|
||
- **결정사항 섹션**:
|
||
- 결정사항 카드 클릭 → 회의록 탭의 해당 안건으로 이동
|
||
- 배경 설명 접기/펼치기
|
||
- **Todo 진행상황** (단순 조회만):
|
||
- ❌ 제거: 필터 탭, 진행률 바, Todo 관리 화면 연동
|
||
- Todo는 읽기 전용으로만 표시 (클릭 액션 없음)
|
||
- **참고자료 섹션**:
|
||
- 탭 전환 (관련 회의록/프로젝트 문서/이슈 트래커/위키 페이지)
|
||
- 참고자료 카드 클릭 → 해당 문서로 이동
|
||
- 관련도 점수: 배지로 표시 (92%, 88% 등)
|
||
|
||
4. **Todo 인터랙션** - MVP 스코프 축소
|
||
- ❌ 제거: Todo 체크박스, Todo 관리 화면 연동
|
||
- Todo는 단순 조회만 가능 (클릭 액션 없음)
|
||
|
||
5. **첨부파일 다운로드**
|
||
- 파일명 클릭: 다운로드 시작
|
||
- 진행 상황 표시
|
||
|
||
6. **수정 및 공유**
|
||
- "수정" 버튼: 회의록수정 화면으로 이동
|
||
- "공유" 버튼: 회의록공유 화면으로 이동
|
||
|
||
#### 데이터 요구사항
|
||
- **입력**: 회의록 ID, 활성 탭 (회의록/대시보드/타임라인)
|
||
- **출력**:
|
||
- **회의 기본 정보**: 제목, 일시, 참여자, 장소, 상태, 작성자, 수정 시간
|
||
- **안건별 AI 요약**: 자동 생성 요약, 수정 이력
|
||
- **안건별 내용**: 마크다운 형식
|
||
- **참고자료 목록**:
|
||
- 관련 회의록 (제목, 날짜, 관련도, 요약)
|
||
- 프로젝트 문서 (제목, 작성자, 관련도)
|
||
- 이슈 트래커 링크
|
||
- 위키 페이지 링크
|
||
- **대시보드 데이터** (대시보드 탭 선택 시):
|
||
- 핵심내용 (4-5개 포인트)
|
||
- 주요 키워드
|
||
- 회의 통계 (참여자 수, 시간, 발언 횟수, 의제 수)
|
||
- 결정사항 리스트 (결정 내용, 결정자, 시간, 배경)
|
||
- Todo 진행상황 (담당자별 그룹, 진행률)
|
||
- **Todo 목록 및 진행 상황**
|
||
- **첨부파일 목록**
|
||
- **연동**: Meeting 서비스, AI 서비스 (UFR-AI-040)
|
||
|
||
#### 에러 처리
|
||
- **회의록 로딩 실패**: "회의록을 불러올 수 없습니다" + 재시도 버튼
|
||
- **AI 요약 로딩 실패**: "요약을 불러올 수 없습니다" (안건 내용은 정상 표시)
|
||
- **참고자료 로딩 실패**: "참고자료를 불러올 수 없습니다" (빈 상태 표시)
|
||
- **대시보드 데이터 로딩 실패**: "대시보드를 불러올 수 없습니다" + 재시도 버튼
|
||
- **권한 없음**: "수정" 버튼 비활성화, "조회 권한만 있습니다" 메시지
|
||
- **첨부파일 다운로드 실패**: "파일 다운로드에 실패했습니다"
|
||
|
||
---
|
||
|
||
### 11-회의록수정
|
||
|
||
#### 개요
|
||
- **목적**: 지난 회의록 조회 및 수정
|
||
- **관련 유저스토리**: UFR-MEET-055, UFR-AI-040, UFR-COLLAB-030
|
||
- **비즈니스 중요도**: 중간
|
||
- **접근 경로**: 10-회의록상세조회 → 하단 액션 바 "수정" 버튼 클릭
|
||
- **권한 제어**:
|
||
- **검증완료 전**: 모든 참여자가 수정 가능
|
||
- **검증완료 후**: 회의 생성자만 수정 가능 (참여자는 "수정" 버튼 비활성화)
|
||
|
||
#### 주요 기능 (MVP 스코프 축소 v1.5.2)
|
||
1. 회의 기본 정보 표시 및 수정
|
||
- 회의 제목: 수정 가능
|
||
- 회의 일시/장소: 읽기 전용 (회의 예약 화면에서만 변경 가능)
|
||
- 참여자 관리: 회의 생성자만 추가/삭제 가능
|
||
2. **회의록 내용 수정 (안건별)** - 용어 변경: 섹션 → 안건
|
||
3. **AI 요약 표시 및 재생성 (안건별, UFR-AI-036)**
|
||
- AI 한줄 요약 표시 (30자 이내, 읽기 전용)
|
||
- 텍스트 편집 영역에서 안건 내용 수정 가능
|
||
- "AI 재생성" 버튼: 텍스트 편집 영역 내용 기반으로 한줄 요약만 재생성 (2-5초 처리)
|
||
- 재생성된 한줄 요약은 회의록 상세조회 화면의 대시보드 및 회의록 탭에 즉시 반영
|
||
4. **참고자료 편집** (추가/제거)
|
||
5. **Todo 단순 조회** (제목 + 담당자 + 마감일만 표시)
|
||
6. **안건별 검증 완료 체크박스 (UFR-COLLAB-030)**
|
||
- 회의 생성자: 검증 완료 체크박스 활성화, 잠금 해제 후 수정 가능
|
||
- 참여자: 검증완료 안건은 읽기 전용
|
||
7. 자동 저장 (30초 간격)
|
||
8. 수정 이력 관리
|
||
9. 상태 변경 (검증완료 → 작성중으로 자동 변경)
|
||
|
||
**변경사항 (v1.5.2)**:
|
||
- ✅ 명칭 변경: "AI 상세 요약" → "AI 요약"
|
||
- ✅ 기능 통합: AI 재생성 버튼 클릭 시 텍스트 편집 영역 내용 기반으로 한줄 요약 생성 (UFR-AI-036)
|
||
- ❌ 제거: AI 상세 요약 및 한줄 요약 분리 표시 (한줄 요약만 표시)
|
||
- ❌ 제거: 실시간 협업 표시 ("편집 중" 표시 제거)
|
||
- ❌ 제거: Todo 편집 기능 (체크박스, 담당자/마감일/우선순위 변경, 추가/삭제)
|
||
- ❌ 제거: 검증률 표시 및 최종 확정 버튼
|
||
- ✅ 정책: Last Write Wins (마지막 저장 우선) 적용
|
||
|
||
#### UI 구성요소
|
||
|
||
**Mobile (320px~768px)**
|
||
- **헤더**
|
||
- 뒤로가기 버튼 (10-회의록상세조회로 이동)
|
||
- "회의록 수정" 타이틀
|
||
- "저장" 버튼 (Primary)
|
||
- 자동 저장 인디케이터 ("저장됨", "저장 중...")
|
||
|
||
- **회의 기본 정보 영역**
|
||
- 회의 제목: 편집 가능 (텍스트 필드)
|
||
- 회의 일시: 읽기 전용 (📅 아이콘 + 날짜/시간 표시)
|
||
- 회의 장소: 읽기 전용 (📍 아이콘 + 장소명)
|
||
- 참여자 목록:
|
||
- 회의 생성자: 추가/삭제 가능 (05-회의진행 화면과 동일한 UI)
|
||
- 참여자: 읽기 전용 표시
|
||
- 각 참여자: 아바타 + 이름, 삭제(×) 버튼 (생성자는 삭제 불가)
|
||
- "참여자 추가" 버튼 (이메일 입력 + 초대)
|
||
- 회의록 상태 배지 (자동 관리)
|
||
|
||
- **편집 화면** (MVP 스코프 축소)
|
||
- **안건별 편집 영역** (용어 변경: 섹션 → 안건)
|
||
- 각 안건:
|
||
- **안건 헤더**
|
||
- 안건 제목 (H4, Bold)
|
||
- 검증 상태 배지 (검증완료/미검증)
|
||
- ❌ 제거: "편집 중" 표시 (실시간 협업 기능 제거)
|
||
- **AI 요약** (읽기 전용, UFR-AI-036)
|
||
- 💡 "AI 요약" 레이블
|
||
- AI 한줄 요약 표시 (30자 이내)
|
||
- 읽기 전용 영역 (회색 배경, 민트 그린 좌측 액센트 라인)
|
||
- 호버 시: "이 내용은 편집할 수 없습니다" 툴팁
|
||
- **텍스트 편집 영역**
|
||
- 안건 내용 편집 필드 (textarea)
|
||
- 논의 주제, 발언자별 의견, 결정 사항, 보류 사항 등 자유 작성
|
||
- "AI 재생성" 버튼: 텍스트 편집 영역 내용 기반으로 AI 요약의 한줄 요약 재생성
|
||
- 마지막 수정 시간 표시
|
||
- **참고자료 편집 영역**
|
||
- 기존 참고자료 목록 (제거 버튼 포함)
|
||
- "참고자료 추가" 버튼
|
||
- 회의록 검색 및 선택 UI
|
||
- **Todo 섹션 단순 조회** (편집 불가)
|
||
- Todo 목록 표시 (읽기 전용)
|
||
- 각 Todo 항목:
|
||
- Todo 제목
|
||
- 담당자
|
||
- 마감일
|
||
- ❌ 제거: 체크박스, 우선순위 배지, D-day 라벨, 편집/삭제 버튼
|
||
- **안건별 검증 영역** (UFR-COLLAB-030)
|
||
- **회의 생성자 화면**:
|
||
- 검증 완료 체크박스 (활성화)
|
||
- "잠금 해제" 버튼 (검증완료 안건만 표시)
|
||
- **참여자 화면**:
|
||
- 🔒 "읽기 전용" 배지 (검증완료 안건)
|
||
- 안내 텍스트: "(잠금됨 · 회의 생성자만 수정 가능)"
|
||
- 자동 저장 상태 표시 ("저장됨", "저장 중...")
|
||
|
||
**Tablet/Desktop (768px+)**
|
||
- **헤더**: Mobile과 동일 (뒤로가기, 타이틀, 저장 버튼, 자동 저장 인디케이터)
|
||
- **메인 영역**:
|
||
- 회의 기본 정보 영역 (Mobile과 동일)
|
||
- 편집 화면 (안건별 편집, AI 한줄/상세 요약, 참고자료, Todo, 안건별 검증)
|
||
- **우측 패널** (선택사항):
|
||
- 수정 이력 (v2.0 고도화 예정)
|
||
- 미리보기
|
||
|
||
#### 인터랙션
|
||
1. **화면 진입**
|
||
- 10-회의록상세조회 → "수정" 버튼 클릭
|
||
- 권한 확인: 검증완료 후에는 회의 생성자만 접근 가능
|
||
- 바로 편집 모드로 시작
|
||
|
||
2. **내용 수정**
|
||
- 텍스트 영역 클릭: 포커스 및 편집 가능
|
||
- 자동 저장: 30초 간격, 인디케이터 표시
|
||
- 수동 저장: "저장" 버튼 클릭
|
||
|
||
3. **AI 한줄 요약 확인 (UFR-AI-036)** - MVP 스코프 축소
|
||
- **읽기 전용 표시**:
|
||
- 🔒 아이콘으로 편집 불가 명시
|
||
- 회색 배경 + 민트 그린 좌측 액센트 라인
|
||
- **호버 인터랙션**:
|
||
- 툴팁 표시: "이 내용은 편집할 수 없습니다. 회의 종료 시 1회만 생성됩니다."
|
||
- **위치**: 각 안건 최상단 (안건 제목 바로 아래)
|
||
- ❌ 제거: "AI 재생성" 버튼 (한줄 요약은 회의 종료 시 1회만 생성)
|
||
|
||
4. **AI 상세 요약 편집** - MVP 스코프 축소
|
||
- 요약 텍스트 필드 클릭: 직접 수정 가능
|
||
- "AI 재생성" 버튼 클릭:
|
||
- 현재 안건 내용 기반으로 **상세 요약만** 재생성 (한줄 요약 제외)
|
||
- 로딩 인디케이터 표시
|
||
- 생성 완료 시 자동 업데이트
|
||
- 자동 저장 (30초 간격)
|
||
|
||
5. **안건별 검증 완료 체크박스 (UFR-COLLAB-030)** - MVP 스코프 축소
|
||
- **회의 생성자 권한**:
|
||
- 검증 완료 체크박스 클릭:
|
||
- 체크: 안건 검증 완료 처리 (배지 "검증완료"로 변경)
|
||
- 언체크: 미검증 상태로 변경
|
||
- "잠금 해제" 버튼 클릭 (검증완료 안건만 표시):
|
||
- 확인 다이얼로그: "이 안건의 잠금을 해제하시겠습니까?"
|
||
- 확인 시: 안건 검증 완료 체크 해제 → 편집 가능 상태로 변경
|
||
- **참여자 화면**:
|
||
- 검증완료 안건: 🔒 "읽기 전용" 배지 표시
|
||
- 안내 텍스트: "(잠금됨 · 회의 생성자만 수정 가능)"
|
||
- 모든 입력 필드 비활성화 (disabled)
|
||
- ❌ 제거: 검증률 계산 및 표시, "최종 확정" 버튼
|
||
|
||
6. **참고자료 편집**
|
||
- "참고자료 추가" 버튼 클릭:
|
||
- 회의록 검색 모달 표시
|
||
- 제목, 날짜, 키워드로 검색
|
||
- 선택된 회의록 추가
|
||
- 제거 버튼 (X): 참고자료 목록에서 제거
|
||
- 순서 변경: 드래그하여 순서 조정 (선택)
|
||
|
||
7. **Todo 섹션 단순 조회** - MVP 스코프 축소
|
||
- ❌ 제거: Todo 편집/추가/삭제 기능 전체 제거
|
||
- Todo는 읽기 전용으로만 표시 (제목 + 담당자 + 마감일)
|
||
- 모든 사용자 (생성자 포함)에게 조회만 가능
|
||
|
||
8. **상태 변경** - MVP 스코프 축소
|
||
- 확정완료 회의록 수정 시: 자동으로 "작성중" 상태로 변경
|
||
- ❌ 제거: "확정완료"로 변경 제안 (검증률 기능 제거로 인해)
|
||
|
||
9. **저장 로직** - MVP 스코프 축소
|
||
- **"저장" 버튼 클릭 시**:
|
||
- 검증완료된 안건: 저장 스킵
|
||
- 미검증 안건: 저장 진행
|
||
- **저장 결과 알림**:
|
||
- "N개 안건이 저장되었습니다"
|
||
- "M개 안건은 검증완료 상태로 저장되지 않았습니다"
|
||
- 저장 불가 안건 목록 표시
|
||
- **자동 저장** (30초 간격):
|
||
- 미검증 안건만 자동 저장
|
||
- 검증완료 안건은 자동 저장 스킵
|
||
|
||
10. **안건 기반 충돌 방지 (UFR-COLLAB-030)** - MVP 스코프 축소
|
||
- **안건 기반 충돌 방지 메커니즘**:
|
||
- **다른 안건 동시 편집**: 충돌 없음
|
||
- 참여자 A가 안건 1 편집
|
||
- 참여자 B가 안건 2 편집 가능
|
||
- 양쪽 모두 정상 저장
|
||
|
||
- **동일 안건 검증 완료 체크로 충돌 방지**:
|
||
- 검증완료된 안건: 편집 불가 (회의 생성자만 잠금 해제 가능)
|
||
- 미검증 안건: Last Write Wins (마지막 저장 우선)
|
||
|
||
- **동일 필드 동시 수정**: Last Write Wins
|
||
- 마지막에 저장된 변경 사항이 적용
|
||
- 별도 경고 없이 덮어쓰기
|
||
|
||
- ❌ 제거: 실시간 "편집 중" 표시
|
||
- ❌ 제거: 충돌 경고 모달 및 선택 옵션
|
||
|
||
#### 데이터 요구사항 (MVP 스코프 축소)
|
||
- **입력**:
|
||
- 회의록 ID (조회)
|
||
- 수정 내용 (안건 ID, 내용) - 용어 변경: 섹션 → 안건
|
||
- **AI 한줄 요약** (읽기 전용, 입력 불가)
|
||
- **AI 상세 요약 수정** (안건 ID, 요약 내용)
|
||
- **참고자료 변경** (추가/제거할 회의록 ID)
|
||
- **안건별 검증 상태** (안건 ID, 검증 여부)
|
||
- **출력**:
|
||
- 회의록 목록 (필터/정렬/검색 결과)
|
||
- 수정 결과 (성공/실패)
|
||
- **AI 한줄 요약** (회의 종료 시 생성, 편집 불가)
|
||
- **AI 상세 요약 재생성 결과** (한줄 요약 제외)
|
||
- 수정 이력 (누가, 언제, 무엇을)
|
||
- ❌ 제거: 검증률 출력
|
||
- **연동**: Meeting 서비스, AI 서비스 (UFR-AI-010, UFR-AI-036, UFR-AI-040), COLLAB 서비스 (UFR-COLLAB-030)
|
||
|
||
#### 에러 처리 (MVP 스코프 축소)
|
||
- **권한 없음**: "본인이 작성한 회의록만 수정할 수 있습니다"
|
||
- **자동 저장 실패**: "네트워크 연결을 확인해주세요. 로컬에 임시 저장됩니다"
|
||
- **AI 요약 재생성 실패**: "요약 생성에 실패했습니다. 수동으로 작성해주세요"
|
||
- **참고자료 검색 실패**: "회의록을 검색할 수 없습니다"
|
||
- **검증완료 안건 저장 시도**:
|
||
- 저장 결과 알림: "N개 안건이 저장되었습니다. M개 안건은 검증완료 상태로 저장되지 않았습니다"
|
||
- 저장 불가 안건 목록 표시
|
||
- **삭제 실패**: "회의록 삭제에 실패했습니다"
|
||
- ❌ 제거: 충돌 경고 모달 (Last Write Wins 적용으로 인해)
|
||
|
||
---
|
||
|
||
### 12-회의록목록조회
|
||
|
||
#### 개요
|
||
- **목적**: 회의록 목록 조회 및 필터링/정렬/검색 기능 제공
|
||
- **관련 유저스토리**: UFR-MEET-046 (회의록목록조회)
|
||
- **비즈니스 중요도**: 높음
|
||
- **프로토타입**: design/uiux/prototype/12-회의록목록조회.html
|
||
- **데이터 소스**: common.js → SAMPLE_MINUTES 배열 (30개 샘플 데이터)
|
||
- **접근 경로**:
|
||
- 대시보드 → "내 회의록" 전체 보기
|
||
- 하단 네비게이션 → "회의록" 메뉴
|
||
- **권한**: 모든 회의 참여자 (본인이 참여한 회의록만 조회)
|
||
|
||
#### 데이터 아키텍처
|
||
- **데이터 레이어**: common.js의 SAMPLE_MINUTES 배열
|
||
- 총 30개 샘플 데이터 (작성중 13개, 확정완료 17개)
|
||
- 각 회의록 객체 구조: id, meetingId, title, date, time, status, participants, participantCount, lastUpdated, sections, todos, completionRate
|
||
- **뷰 레이어**: 12-회의록목록조회.html
|
||
- JavaScript 기반 동적 렌더링
|
||
- renderMeetings() 함수: 필터링/정렬/검색 로직 처리 후 목록 생성
|
||
- createMeetingCard() 함수: 개별 회의록 카드 HTML 생성
|
||
- **렌더링 방식**:
|
||
- 페이지 로드 시: DOMContentLoaded 이벤트에서 renderMeetings() 호출
|
||
- 초기 표시: 10개 회의록 (displayedCount 변수로 관리)
|
||
- 추가 로딩: "10개 더보기" 버튼 클릭 시 10개씩 증가
|
||
- 필터/정렬/검색 시: 즉시 renderMeetings() 재호출하여 목록 갱신
|
||
|
||
#### 주요 기능
|
||
1. **회의록 목록 조회** (참여/생성한 회의록)
|
||
2. **필터링 기능**:
|
||
- 참여 유형: 참여한 회의, 생성한 회의
|
||
- 상태: 전체, 작성중, 확정완료
|
||
3. **정렬 기능**:
|
||
- 최근수정순 (수정 일시 기준, 최근 순) - 기본값
|
||
- 최근회의순 (회의 일시 기준, 최근 순)
|
||
- 제목순 (가나다순)
|
||
4. **검색 기능**:
|
||
- 제목, 참여자, 키워드로 통합 검색
|
||
- 실시간 검색 결과 업데이트
|
||
5. **페이지네이션**:
|
||
- 초기 10개 회의록 표시
|
||
- "10개 더보기" 버튼으로 추가 로딩
|
||
6. 회의록 상세 조회 (항목 클릭 시)
|
||
|
||
#### UI 구성요소
|
||
|
||
**Mobile (320px~768px)**
|
||
- **헤더** (Fixed, 상단)
|
||
- 뒤로가기 버튼
|
||
- "내 회의록" 타이틀
|
||
- 검색 아이콘 (검색창 포커스)
|
||
|
||
- **필터 및 정렬** (상단, 스크롤 가능)
|
||
- **필터 행 1** (2컬럼 그리드):
|
||
- 상태 필터 (Select)
|
||
- 옵션: 전체, 작성중, 확정완료
|
||
- 기본값: 전체
|
||
- 정렬 (Select)
|
||
- 옵션: 최신순, 회의일시순, 제목순
|
||
- 기본값: 최신순
|
||
|
||
- **참여 유형 필터** (탭 형식, 선택):
|
||
- 전체 (기본 선택)
|
||
- 참여한 회의
|
||
- 생성한 회의
|
||
|
||
- **검색 영역**
|
||
- 검색 입력 필드
|
||
- Placeholder: "회의 제목, 참여자, 키워드 검색"
|
||
- 실시간 검색 (입력 시 즉시 필터링)
|
||
|
||
- **통계 정보** (카드, 선택)
|
||
- 3컬럼 그리드:
|
||
- 전체: {count}개
|
||
- 작성중: {count}개
|
||
- 확정완료: {count}개
|
||
- 구분선으로 시각적 분리
|
||
|
||
- **회의록 목록** (스크롤 가능)
|
||
- 각 회의록 항목 (meeting-item):
|
||
- **좌측 영역**:
|
||
- 회의 제목 (H5, 볼드)
|
||
- **생성자 표시**: 현재 사용자가 회의 생성자인 경우 👑 아이콘 표시 (16px, title="생성자")
|
||
- 메타정보 (Caption, 회색):
|
||
- 회의 일시 (날짜 + 시간) · 참여자 수
|
||
- 검증완료율 (작성중 상태일 때만): "✓ {completionRate}% 검증완료" 배지
|
||
- 최종 수정 시간 (Caption, 회색):
|
||
- 상대 시간 표시 ("1시간 전", "어제", "3일 전")
|
||
- **우측 영역**:
|
||
- 상태 배지:
|
||
- "확정완료" (초록색 배지)
|
||
- "작성중" (노란색 배지)
|
||
- 조회 권한 표시 (조회 전용인 경우):
|
||
- "조회 전용" (Caption, 회색)
|
||
- 빈 상태:
|
||
- 검색 결과 없음: "검색 결과가 없습니다"
|
||
- 회의록 없음: "회의록이 없습니다"
|
||
|
||
**Mobile (320px~768px)**
|
||
- **하단 네비게이션**: [Mobile 하단 네비게이션](#mobile-하단-네비게이션-320px768px) 참조 (회의록 활성)
|
||
|
||
**Tablet/Desktop (768px+)**
|
||
- **좌측 사이드바**: [Desktop 좌측 사이드바](#desktop-좌측-사이드바-768px) 참조 (회의록 활성)
|
||
|
||
- **메인 콘텐츠** (중앙)
|
||
- 필터 및 정렬 (상단, 가로 배치)
|
||
- 참여 유형 필터 (탭 또는 버튼 그룹)
|
||
- 검색 영역
|
||
- 통계 정보 (3컬럼 카드)
|
||
- 회의록 목록 (Grid 또는 List Layout)
|
||
- 각 카드: 호버 시 그림자 증가, 약간 상승
|
||
|
||
#### 인터랙션
|
||
|
||
1. **필터링**
|
||
- 상태 필터 변경 → 즉시 목록 재렌더링
|
||
- 참여 유형 탭 선택 → 해당 유형 회의록만 표시
|
||
- 필터 조합 가능 (상태 + 참여 유형)
|
||
|
||
2. **정렬**
|
||
- 정렬 옵션 선택 → 즉시 목록 재정렬
|
||
- 정렬 기준:
|
||
- 최신순: `updatedAt DESC`
|
||
- 회의일시순: `meetingDate DESC`
|
||
- 제목순: `title ASC` (한글 가나다순)
|
||
|
||
3. **검색**
|
||
- 검색 아이콘 클릭 → 검색 입력 필드에 포커스
|
||
- 텍스트 입력 → 실시간 검색 (debounce 300ms)
|
||
- 검색 범위:
|
||
- 회의 제목 (부분 일치)
|
||
- 참여자 이름 (부분 일치)
|
||
- 키워드 (태그, 내용에서 추출된 키워드)
|
||
- 검색어 지우기: X 버튼 (검색어 입력 시 표시)
|
||
|
||
4. **회의록 조회**
|
||
- 회의록 항목 클릭 → 회의록 상세 화면으로 이동
|
||
- 전달 데이터: 회의록 ID
|
||
- 조회 전용 회의록: 읽기 모드로 표시
|
||
|
||
5. **통계 업데이트**
|
||
- 필터/검색 적용 시 → 통계 자동 갱신
|
||
- 전체, 작성중, 확정완료 개수 실시간 반영
|
||
|
||
6. **빈 상태 처리**
|
||
- 검색 결과 없음: "검색 결과가 없습니다" 메시지
|
||
- 필터링 결과 없음: 필터 조건에 맞는 회의록 없음 안내
|
||
- 회의록 없음: "회의록이 없습니다" + 회의 시작 유도 메시지
|
||
|
||
#### 데이터 요구사항
|
||
|
||
- **입력**:
|
||
- 사용자 ID (현재 로그인 사용자)
|
||
- 필터 조건:
|
||
- 참여 유형: `all` | `shared` | `attended` | `created`
|
||
- 상태: `all` | `draft` | `confirmed`
|
||
- 정렬 기준: `recent` | `date` | `title`
|
||
- 검색어 (선택)
|
||
|
||
- **출력**:
|
||
- 회의록 목록:
|
||
- 회의 ID
|
||
- 제목
|
||
- 회의 일시
|
||
- 참여자 목록 (또는 참여자 수)
|
||
- 상태 (`draft` | `confirmed`)
|
||
- 생성자 ID
|
||
- 생성일시 (`createdAt`)
|
||
- 수정일시 (`updatedAt`)
|
||
- 조회 권한 (편집 가능 여부)
|
||
- 통계:
|
||
- 전체 개수
|
||
- 작성중 개수
|
||
- 확정완료 개수
|
||
|
||
- **연동**:
|
||
- Meeting 서비스 (회의록 목록 조회 API)
|
||
- Share 서비스 (공유 정보 조회)
|
||
|
||
#### 에러 처리
|
||
|
||
- **데이터 로딩 실패**:
|
||
- "회의록을 불러오는 중 오류가 발생했습니다." 메시지
|
||
- "다시 시도" 버튼 제공
|
||
|
||
- **검색 실패**:
|
||
- "검색 중 오류가 발생했습니다." 토스트 메시지
|
||
- 기존 목록 유지
|
||
|
||
- **네트워크 오류**:
|
||
- "네트워크 연결을 확인해주세요." 토스트 메시지
|
||
- 자동 재시도 (최대 3회, exponential backoff)
|
||
|
||
- **권한 없음**:
|
||
- 접근 권한 없는 회의록 클릭 시:
|
||
- "접근 권한이 없습니다" 토스트 메시지
|
||
- 목록으로 복귀
|
||
|
||
- **빈 상태**:
|
||
- 검색 결과 없음: "검색 결과가 없습니다"
|
||
- 필터링 결과 없음: "조건에 맞는 회의록이 없습니다"
|
||
- 전체 회의록 없음: "회의록이 없습니다. 첫 회의를 시작해보세요!" + 회의 시작 버튼
|
||
|
||
[↑ 목차로 돌아가기](#목차)
|
||
|
||
---
|
||
|
||
## 공통 UI 컴포넌트
|
||
|
||
### 네비게이션
|
||
|
||
#### Mobile 하단 네비게이션 (320px~768px) - **v1.5.0 변경**
|
||
- **위치**: Fixed, 하단 (height: 64px)
|
||
- **배경**: 흰색, 상단 테두리 (1px solid #E5E7EB)
|
||
- **그림자**: 0 -2px 8px rgba(0, 0, 0, 0.08)
|
||
- **구성**: 2개 항목 (균등 분할)
|
||
- **홈** (대시보드)
|
||
- 아이콘: 🏠 (24px)
|
||
- 텍스트: "홈" (12px)
|
||
- 활성 상태: 민트 그린 (#4DD5A7)
|
||
- 비활성 상태: 회색 (#6B7280)
|
||
- **회의록** (회의록 목록)
|
||
- 아이콘: 📋 (24px)
|
||
- 텍스트: "회의록" (12px)
|
||
- ~~**Todo** (Todo 관리)~~ (MVP v2.4.0에서 제거됨)
|
||
- ~~아이콘: ✅ (24px)~~
|
||
- ~~텍스트: "Todo" (12px)~~
|
||
- **사용 화면**: 02-대시보드, 12-회의록목록조회
|
||
- **참고**: 프로필 메뉴는 프로토타입에서 제거됨 (Desktop 사이드바의 사용자 정보 영역으로 통합)
|
||
|
||
#### Desktop 좌측 사이드바 (768px+) - **v1.5.0 변경**
|
||
- **위치**: Fixed, 좌측 (width: 240px)
|
||
- **배경**: 흰색, 우측 테두리 (1px solid #E5E7EB)
|
||
- **구성**:
|
||
- **상단 영역**:
|
||
- 서비스 로고 (32px)
|
||
- 서비스명 (16px Bold)
|
||
- **메인 메뉴**:
|
||
- 대시보드
|
||
- 내 회의록
|
||
- ~~Todo~~ (MVP v2.4.0에서 제거됨)
|
||
- **하단 영역**:
|
||
- 사용자 정보 (아바타 + 이름)
|
||
- 로그아웃 버튼 (btn-ghost btn-sm)
|
||
- **사용 화면**: 02-대시보드, 12-회의록목록조회
|
||
|
||
#### 상단 헤더 (공통)
|
||
- **위치**: Sticky, 상단
|
||
- **배경**: 흰색, 하단 테두리 (1px solid #E5E7EB)
|
||
- **구성**:
|
||
- 좌측: 뒤로가기 버튼 (화면별 조건부)
|
||
- 중앙: 페이지 타이틀 (18px Bold)
|
||
- 우측: 액션 버튼 (저장, 메뉴 등)
|
||
- **Mobile 전용 (768px 미만)**:
|
||
- 우측 상단에 프로필 아이콘 버튼 추가 (👤, 24px)
|
||
- 클릭 시 드롭다운 메뉴 표시:
|
||
- 사용자 이름 (14px Bold)
|
||
- 로그아웃 버튼 (btn-ghost btn-sm)
|
||
- 드롭다운 위치: 우측 상단 기준 아래로 펼침
|
||
- 배경: 흰색, 그림자: var(--shadow-md)
|
||
- **Desktop (768px+)**:
|
||
- 프로필 아이콘 숨김 (사이드바 하단 영역 사용)
|
||
|
||
[↑ 목차로 돌아가기](#목차)
|
||
|
||
---
|
||
|
||
## 공통 에러 메시지 표준
|
||
|
||
### 네트워크 오류
|
||
- **메시지**: "네트워크 연결을 확인해주세요"
|
||
- **재시도**: 자동 재시도 최대 3회 (exponential backoff: 1s, 2s, 4s)
|
||
- **UI**: 오류 토스트 (빨강) + "다시 시도" 버튼
|
||
- **적용 화면**: 전체
|
||
|
||
### 데이터 로딩 실패
|
||
- **메시지**: "일시적으로 데이터를 불러올 수 없습니다"
|
||
- **UI**: 빈 상태 화면 + "다시 시도" 버튼
|
||
- **적용 화면**: 전체
|
||
|
||
### 권한 오류
|
||
- **메시지**: "접근 권한이 없습니다"
|
||
- **액션**: 3초 후 자동으로 이전 화면 또는 대시보드로 복귀
|
||
- **UI**: 경고 토스트 (주황)
|
||
- **적용 화면**: 회의록 상세, 회의록 수정
|
||
|
||
### 인증 오류
|
||
- **메시지**: "로그인이 필요합니다"
|
||
- **액션**: 로그인 화면으로 리다이렉트
|
||
- **UI**: 정보 토스트 (파랑)
|
||
- **적용 화면**: 전체 (인증 필요 화면)
|
||
|
||
### 입력 검증 오류
|
||
- **이메일 형식 오류**: "올바른 이메일 형식이 아닙니다"
|
||
- **필수 입력 누락**: "필수 항목을 입력해주세요"
|
||
- **날짜 형식 오류**: "올바른 날짜 형식이 아닙니다 (YYYY-MM-DD)"
|
||
- **UI**: 입력 필드 하단 오류 메시지 (빨강, 14px)
|
||
|
||
### 서버 오류
|
||
- **메시지**: "서버에 일시적인 문제가 발생했습니다"
|
||
- **UI**: 오류 토스트 (빨강) + "다시 시도" 버튼
|
||
- **로깅**: 오류 상세 정보를 서버로 전송 (Sentry)
|
||
- **적용 화면**: 전체
|
||
|
||
[↑ 목차로 돌아가기](#목차)
|
||
|
||
---
|
||
|
||
## 화면 간 전환 및 네비게이션
|
||
|
||
### 네비게이션 구조
|
||
|
||
#### Mobile (320px~768px)
|
||
- **Primary Navigation**: [Mobile 하단 네비게이션](#mobile-하단-네비게이션-320px768px) 참조
|
||
|
||
- **Secondary Navigation**: [상단 헤더](#상단-헤더-공통) 참조
|
||
|
||
#### Tablet/Desktop (768px+)
|
||
- **Primary Navigation**: [Desktop 좌측 사이드바](#desktop-좌측-사이드바-768px) 참조
|
||
- 설정
|
||
- 프로필
|
||
|
||
- **Breadcrumbs**: 상단 (선택)
|
||
- 현재 위치 경로 표시
|
||
- 클릭하여 상위 페이지로 이동
|
||
|
||
### 전환 애니메이션
|
||
- **화면 전환**: 페이드 또는 슬라이드 (200-300ms)
|
||
- **모달 표시**: 페이드 인 + 스케일 (150ms)
|
||
- **탭 전환**: 페이드 (100ms)
|
||
- **리스트 로딩**: 스켈레톤 UI 표시 후 페이드 인
|
||
|
||
### 딥 링크 지원
|
||
- 특정 회의록 직접 접근: `/minutes/{minuteId}`
|
||
- 특정 Todo 직접 접근: `/todo/{todoId}`
|
||
- 회의록 공유 링크: `/share/{shareToken}`
|
||
|
||
[↑ 목차로 돌아가기](#목차)
|
||
|
||
---
|
||
|
||
## 반응형 설계 전략
|
||
|
||
### 브레이크포인트
|
||
- **Mobile**: 320px ~ 767px
|
||
- **Tablet**: 768px ~ 1023px
|
||
- **Desktop**: 1024px 이상
|
||
|
||
### 레이아웃 전략
|
||
|
||
#### Mobile First 접근
|
||
1. **320px (Small Mobile) 기준 설계**
|
||
- 단일 컬럼 레이아웃
|
||
- 필수 기능만 표시
|
||
- 터치 친화적 UI (최소 44px 터치 영역)
|
||
- 하단 네비게이션
|
||
|
||
2. **768px (Tablet) 확장**
|
||
- 2컬럼 레이아웃 (일부 화면)
|
||
- 추가 정보 표시 (통계, 위젯)
|
||
- 사이드바 도입 (선택)
|
||
|
||
3. **1024px (Desktop) 최적화**
|
||
- 3컬럼 레이아웃 (대시보드, 회의진행)
|
||
- 좌측 고정 사이드바
|
||
- 마우스/키보드 인터랙션 강화
|
||
- 추가 기능 노출 (단축키, 고급 필터 등)
|
||
|
||
### 컴포넌트별 반응형 전략
|
||
|
||
#### 폼 (Form)
|
||
- Mobile: 단일 컬럼, 전체 너비
|
||
- Tablet: 2컬럼 (관련 필드 그룹화)
|
||
- Desktop: 2컬럼 + 미리보기 패널
|
||
|
||
#### 리스트 (List)
|
||
- Mobile: 카드 형태, 스택 레이아웃
|
||
- Tablet: 2컬럼 그리드
|
||
- Desktop: 3컬럼 그리드 또는 마스터-디테일
|
||
|
||
#### 테이블 (Table)
|
||
- Mobile: 카드 형태로 변환, 중요 정보만 표시
|
||
- Tablet: 스크롤 가능한 테이블
|
||
- Desktop: 고정 헤더 테이블, 모든 컬럼 표시
|
||
|
||
### 이미지 및 미디어
|
||
- Responsive Images: srcset 활용
|
||
- Lazy Loading: 뷰포트 진입 시 로딩
|
||
- 최적화: WebP 포맷, 적절한 압축
|
||
|
||
[↑ 목차로 돌아가기](#목차)
|
||
|
||
---
|
||
|
||
## 접근성 보장 방안
|
||
|
||
### WCAG 2.1 Level AA 준수
|
||
|
||
#### 1. Perceivable (인식 가능)
|
||
- **텍스트 대안**: 모든 이미지에 alt 텍스트 제공
|
||
- **색상 대비**: 최소 4.5:1 대비율 (일반 텍스트), 3:1 (대형 텍스트)
|
||
- **텍스트 크기 조절**: 200%까지 확대 가능, 레이아웃 깨지지 않음
|
||
- **색상만으로 정보 전달 금지**: 아이콘, 텍스트와 함께 사용
|
||
|
||
#### 2. Operable (조작 가능)
|
||
- **키보드 접근성**: 모든 기능 키보드로 조작 가능
|
||
- Tab: 다음 요소로 포커스 이동
|
||
- Shift + Tab: 이전 요소로 포커스 이동
|
||
- Enter/Space: 버튼 활성화
|
||
- Esc: 모달 닫기
|
||
- **포커스 표시**: 명확한 포커스 인디케이터 (2px 파란색 테두리)
|
||
- **터치 영역**: 최소 44x44px (모바일)
|
||
- **시간 제한 없음**: 자동 저장으로 세션 만료 방지
|
||
|
||
#### 3. Understandable (이해 가능)
|
||
- **명확한 레이블**: 모든 입력 필드에 레이블 제공
|
||
- **오류 식별 및 안내**: 오류 발생 시 명확한 설명 및 해결 방법 제공
|
||
- **일관된 UI**: 동일한 기능은 동일한 위치, 동일한 아이콘/텍스트
|
||
|
||
#### 4. Robust (견고함)
|
||
- **시맨틱 HTML**: 적절한 HTML 태그 사용 (header, nav, main, aside, footer)
|
||
- **ARIA 레이블**: 스크린 리더를 위한 ARIA 속성
|
||
- role, aria-label, aria-describedby, aria-live
|
||
- **호환성**: 최신 브라우저 및 보조 기술 지원
|
||
|
||
### 접근성 테스트
|
||
- 자동 테스트: Lighthouse, axe DevTools
|
||
- 수동 테스트: 키보드 네비게이션, 스크린 리더 (NVDA, JAWS, VoiceOver)
|
||
|
||
[↑ 목차로 돌아가기](#목차)
|
||
|
||
---
|
||
|
||
## 성능 최적화 방안
|
||
|
||
### 1. 로딩 성능
|
||
- **Code Splitting**: 라우트별 청크 분리
|
||
- **Lazy Loading**:
|
||
- 이미지: Intersection Observer
|
||
- 컴포넌트: React.lazy, dynamic import
|
||
- **Pre-fetching**: 다음 화면 리소스 미리 로딩
|
||
- **CDN 활용**: 정적 리소스 CDN 배포
|
||
|
||
### 2. 렌더링 성능
|
||
- **Virtual Scrolling**: 긴 리스트 (회의록, Todo)
|
||
- **Debounce/Throttle**:
|
||
- 검색 입력: 300ms debounce
|
||
- 스크롤 이벤트: 100ms throttle
|
||
- **Memoization**: React.memo, useMemo, useCallback
|
||
- **CSS 애니메이션**: JavaScript 대신 CSS transition 사용
|
||
|
||
### 3. 네트워크 최적화
|
||
- **API 요청 최적화**:
|
||
- 필요한 데이터만 요청 (GraphQL 또는 필드 선택)
|
||
- 배치 요청: 여러 API를 하나로 통합
|
||
- **캐싱 전략**:
|
||
- 브라우저 캐시: Cache-Control 헤더
|
||
- Service Worker: 오프라인 지원
|
||
- 메모리 캐시: React Query, SWR
|
||
- **압축**: Gzip, Brotli
|
||
|
||
### 4. 실시간 동기화 최적화
|
||
- **WebSocket 최적화**:
|
||
- Delta 전송: 전체 데이터가 아닌 변경 부분만 전송
|
||
- 배치 업데이트: 여러 변경 사항을 묶어서 전송
|
||
- 재연결 전략: 지수 백오프
|
||
- **Conflict Resolution**: Operational Transformation 또는 CRDT
|
||
|
||
### 5. 성능 모니터링
|
||
- **Core Web Vitals**:
|
||
- LCP (Largest Contentful Paint): < 2.5s
|
||
- FID (First Input Delay): < 100ms
|
||
- CLS (Cumulative Layout Shift): < 0.1
|
||
- **실시간 모니터링**: Sentry, Google Analytics
|
||
|
||
### 성능 목표
|
||
- **First Contentful Paint**: < 1.5s
|
||
- **Time to Interactive**: < 3.5s
|
||
- **Page Load (3G)**: < 5s
|
||
- **STT 지연 시간**: < 1s
|
||
- **실시간 동기화 지연**: < 500ms
|
||
|
||
[↑ 목차로 돌아가기](#목차)
|
||
|
||
---
|
||
|
||
## 변경 이력
|
||
|
||
| 버전 | 날짜 | 작성자 | 변경 내용 |
|
||
|------|------|--------|----------|
|
||
| 1.0 | 2025-10-21 | 이미준 | 최초 작성 - 11개 화면 설계 완료 |
|
||
| 1.1.x | 2025-10-21 | 이미준 | **주요 변경**: AI 요약 및 참고자료 기능, 회의록 상세 화면 개선, 대시보드 UI 개선<br>- 1.1.0: AI 요약/참고자료 기능 추가 (05, 10, 11 화면), UFR-AI-040 관련 회의록 자동 연결<br>- 1.1.1: 회의록 상세 탭 구조 개선 (회의록/대시보드), 참고자료 관련도 점수 표시<br>- 1.1.2: 대시보드 예정 회의 카드/Todo 정렬 개선, 12-회의록목록조회 신규 추가 (필터/정렬/검색) |
|
||
| 1.2.x | 2025-10-21 | 이미준, 최유진 | **주요 변경**: 대시보드 역할 기반 접근 제어, 회의진행 화면 개선, 스타일 가이드 신규 작성<br>- 1.2.0: 진행중 회의 표시 기능 (배지, 참여하기 버튼, 에러 처리)<br>- 1.2.1: 예정 회의 생성자/참여자 권한 차별화 (수정 버튼, 참여 시간 제한, 타이머)<br>- 1.2.2: 참고자료 새 탭 열기, 참여자 추가 초대, 스타일 가이드 신규 작성 (민트 그린 컬러 시스템)<br>- 1.2.3: 설정 메뉴 제거, Todo 클릭 시 회의록 상세로 이동 (URL 파라미터 전달) |
|
||
| 1.3.x | 2025-10-21 | 이미준, 도그냥 | **주요 변경**: 반응형 네비게이션 구조, 회의진행 화면 전면 개편, 공통 UI 컴포넌트 표준화<br>- 1.3.0: 반응형 네비게이션 (Mobile 하단 3개, Desktop 사이드바), 05-회의진행 2열 구조 재설계, 10-회의록상세조회 타임라인 탭 제거<br>- 1.3.1: AI 제안 탭 3가지 유형 상세화 (논의사항/결정사항/액션아이템), 디자인 통일성 개선<br>- 1.3.2: 참여자 추가 폼 + 이메일 유효성 검증, 버튼/검색창 스타일 통일<br>- 1.3.3: 공통 UI 컴포넌트/에러 메시지 섹션 신규 작성, 중복 내용 참조 링크 교체 (파일 크기 8~10% 감소) |
|
||
| 1.4.x | 2025-10-22~25 | 이미준, 강지수, 도그냥 | **주요 변경**: Todo 관리 기능 대폭 강화, 화면 번호 재정렬, 회의록 공유 기능 제거, 유저스토리 v2.3.0 반영<br>- 1.4.0~1.4.5: 네비게이션 사양 통일, 대시보드 모바일 최적화, 공유 기능 제거, 화면 번호 통일, 로그아웃 기능 추가<br>- 1.4.6~1.4.10: 검증완료 섹션 잠금 정책, Todo 관리 확장 (통계/필터/편집), 회의록 상세 탭 순서 변경, Todo 카드 디자인 전면 개선, 공통 스타일 관리<br>- 1.4.11~1.4.13: 회의진행 액션아이템 탭 개선, Todo 카드 HTML/CSS 완전 통일 (3개 화면), D-day 배지 정책 (회의 중 숨김)<br>- 1.4.14~1.4.16: 12-회의록목록조회 데이터 아키텍처 문서화, 06-검증완료 화면 삭제, 사용자 역할 용어 통일 (생성자/참여자)<br>- 1.4.17~1.4.20: STT 화자 식별 불가 반영, 05-회의진행 프로토타입 기준 전면 수정, 유저스토리 v2.3.0 반영 (충돌 방지 정책 강화) |
|
||
| 1.5.1 | 2025-10-27 | 강지수 | MVP 스코프 축소 v2.4.0 반영 (4개 화면 수정)<br>- **02-대시보드**: Todo 위젯 및 통계 제거 (UFR-USER-020 반영)<br> - Todo 위젯 전체 제거 (나의 Todo 섹션 삭제)<br> - 통계 카드: "나의 Todo" 제거, "작성중 회의록" 유지 (2개 항목)<br> - 네비게이션: 하단 네비게이션 및 사이드바에서 Todo 관리 메뉴 제거<br> - Desktop 통계 그리드: 2개 항목만 표시<br>- **05-회의진행**: "AI 제안" 탭 → "AI 기반 메모" 탭 기능 변경<br> - 메모 입력창 + 저장 버튼 추가<br> - AI가 감지한 주요 내용 리스트 표시 (시간 + 내용)<br> - 각 참여자별 개별 저장, 다른 참여자 메모 볼 수 없음<br> - 메모는 회의 종료 전까지만 표시/편집 가능<br> - 에러 처리: AI 주요 내용 감지 실패, 메모 저장 실패 추가<br>- **10-회의록상세조회**: Todo 단순 조회 기능으로 변경<br> - Todo는 제목 + 담당자 + 마감일만 표시<br> - D-day 라벨, 우선순위 배지, 진행률 바, 상태별 필터 제거<br> - Todo 관리 화면 연동 링크 제거 (화면 자체가 제거됨)<br> - "수정" 버튼을 헤더로 이동<br>- **11-회의록수정**: 실시간 협업 기능 제거, 안건 기반 충돌 방지 강화<br> - "편집 중" 표시 제거 (실시간 협업 기능 제거)<br> - Todo 편집/추가/삭제 기능 전체 제거 (단순 조회만 가능)<br> - AI 한줄 요약 재생성 불가 (회의 종료 시 1회만 생성)<br> - 검증률 표시 및 최종 확정 버튼 제거<br> - 저장 로직 추가: 검증완료 안건 저장 스킵, 저장 결과 알림<br> - 안건별 검증 완료 체크박스로 충돌 방지 (Last Write Wins 적용)<br> - 에러 처리: 충돌 경고 모달 제거 (LWW로 인해) |
|
||
| 1.5.2 | 2025-10-27 | 강지수 | AI 요약 기능 통합 및 단순화 (유저스토리 v2.4.0 반영)<br>- **11-회의록수정**: AI 요약 기능 통합<br> - 명칭 변경: "AI 상세 요약" → "AI 요약"<br> - AI 요약 영역: AI 한줄 요약만 표시 (30자 이내, 읽기 전용)<br> - 텍스트 편집 영역: 안건 내용 자유 작성 (논의 주제, 발언자별 의견, 결정 사항 등)<br> - "AI 재생성" 버튼: 텍스트 편집 영역 내용 기반으로 AI 요약의 한줄 요약 재생성 (2-5초 처리)<br> - 재생성된 한줄 요약은 회의록 상세조회 화면의 대시보드 및 회의록 탭에 즉시 반영<br> - AI 상세 요약 및 한줄 요약 분리 표시 제거<br>- **프로토타입 UI 개선**:<br> - AI 재생성 버튼 스타일 통일: btn-secondary → btn-primary (다른 화면과 일관성)<br> - 안건별 검증완료 UI 단순화: 참여자는 체크박스만, 회의 생성자는 검증완료 시 잠금해제 버튼 표시<br> - .creator-only CSS 클래스 추가: data-is-creator 속성 기반 표시 제어<br>- **관련 유저스토리**: UFR-AI-036 (AI 한줄요약 확인 및 재생성), UFR-MEET-055 (안건별 검증), UFR-COLLAB-030 (충돌 방지) |
|
||
| 1.5.3 | 2025-10-27 | 강지수 | Todo 추가/편집 권한 정책 명확화 (유저스토리 v2.4.1 반영)<br>- **10-회의록상세조회**: Todo 추가/편집 권한 정책 추가 (대시보드 탭)<br> - "추가" 버튼: 모든 회의 참여자에게 노출 (Todo 리스트 우측 상단)<br> - "편집(✏️)" 버튼: 회의 생성자에게만 노출 (각 Todo 항목 우측)<br> - Todo 추가 모달: 제목, 담당자, 마감일 입력 (모든 참여자)<br> - Todo 편집 모달: 제목, 담당자, 마감일 수정 (회의 생성자만)<br> - 담당자 필드: 추가 시 또는 생성자의 편집 시만 표시<br>- **프로토타입 UI 개선**: 10-회의록상세조회.html<br> - Todo 추가/편집 모달 바텀시트 스타일 통일 (모바일: 하단 슬라이드 업, 데스크톱: 중앙 모달)<br> - .creator-only 클래스 적용하여 편집 버튼 권한별 표시/숨김 처리<br> - JavaScript initPage() 함수에서 회의 생성자 여부 확인 후 creator-only 요소 제어<br> - Todo 추가 성공: "담당자에게 알림이 전송되었습니다" → "캘린더가 업데이트되었습니다" 순차 토스트<br> - Todo 편집 성공: 담당자 변경 시 알림, 마감일 변경 시 캘린더 업데이트 토스트<br>- **관련 유저스토리**: UFR-MEET-047 (회의록상세조회), Todo 권한 정책 신규 추가 |
|
||
| 1.5.4 | 2025-10-28 | 도그냥 | 대시보드 최근 회의 리스트 디자인 간소화 (UFR-USER-020 반영)<br>- **02-대시보드**: 최근 회의 정렬 기준 명확화 및 디자인 간소화<br> - **정렬 기준**:<br> - 1순위: 회의록 미생성 회의 (진행중 + 예정) 우선 표시<br> - 2순위: 미생성이 3개 미만이면 최근 종료된 회의(회의록 있음)로 나머지 채움<br> - 각 그룹 내 정렬: 빠른 일시 순 (시작 시간 기준)<br> - 최대 표시: 3개<br> - **회의 카드 (클릭 가능 블록)**:<br> - 상태 라벨 (배지): "진행중", "예정", "작성중", "확정완료"<br> - 회의 제목 + 생성자 아이콘(👑)<br> - 회의 일시, 참여자 수, 장소<br> - 상태 버튼 (표시용): "참여하기", "수정하기", "보기"<br> - **디자인 간소화**: D-day 표시, 깜박임 애니메이션, 세부 색상 지정 등 제거<br>- **유저스토리**: UFR-USER-020 (대시보드 조회) 동일하게 수정 |
|
||
| 1.5.5 | 2025-10-28 | 도그냥 | 회의예약 화면 임시저장 기능 제거<br>- **03-회의예약**: 헤더 임시저장 버튼 제거<br> - 헤더에서 "임시저장" 버튼 완전 제거<br> - JavaScript 변수 선언 제거 (draftSaveBtn)<br> - 임시저장 이벤트 리스너 제거<br> - 사용자는 "예약 완료" 버튼으로만 회의 예약 가능<br>- **유저스토리**: UFR-MEET-010, UFR-MEET-011 임시저장 관련 출력 항목 제거<br>- **프로토타입**: design/uiux/prototype/03-회의예약.html 수정 |
|
||
| 1.5.6 | 2025-10-28 | 도그냥, 지수 | 02-대시보드 예정 회의 권한 제어 개선 (MVP 일정 최우선)<br>- **예정 회의 카드 클릭 동작**: 생성자/참여자 역할별 차별화<br> - 생성자: 카드 클릭 → 회의예약 화면(수정 모드) 진입<br> - 참여자: 카드 클릭 → 시스템 알럿 표시 ("아직 회의 시간이 되지 않아 참여하실 수 없습니다")<br>- **버튼 표시 규칙 변경**: 예정 회의에서 "수정하기" 버튼 제거<br> - 진행중: "참여하기" 버튼 표시<br> - 예정: 버튼 없음 (카드 클릭으로 처리)<br> - 완료: "보기" 버튼 표시<br>- **프로토타입 수정**: design/uiux/prototype/02-대시보드.html<br> - 권한 체크 로직 추가 (isCreator 확인)<br> - 시스템 알럿 추가 (참여자 클릭 시)<br>- **유저스토리 반영**: UFR-USER-020, UFR-MEET-011 예외처리 추가<br>- **다음 버전 개선 계획**: 참여자용 회의 상세 조회 모달 기능 추가 예정 (회의 정보 제공 + 시작 시간 안내) |
|
||
| 1.5.7 | 2025-10-28 | 도그냥, 지수 | UFR-TODO 잔여 참조 제거 (문서 정리)<br>- **유저스토리 매핑 섹션**: "Todo 서비스" 항목 제거 (96라인)<br>- **프로토타입 화면 목록**: "09 Todo관리" 화면 취소선 처리 및 제거 표시 추가 (124라인)<br>- **09-Todo관리 화면**: 제거 안내 추가 (개요 섹션에 경고 메시지 삽입)<br> - MVP v2.4.0에서 제거됨을 명확히 표시<br> - Todo 기능은 회의록 상세조회(10번) 화면에서만 제공됨을 안내<br>- **Todo 편집 섹션**: MVP v2.4.0 제거 표시 추가 (1163라인)<br>- **관련 유저스토리**: UFR-TODO-010, UFR-TODO-030, UFR-TODO-040 참조 제거 또는 삭제 표시<br>- **참고**: Todo 관리 독립 화면은 제거되었으나 회의록 내 Todo 기능(추가/편집)은 10번 화면에서 유지됨 |
|
||
| 1.5.8 | 2025-10-28 | 지수, 도그냥 | MVP v2.4.5 반영: Todo 관리 및 검증완료 플로우 정리<br>- **사용자 플로우**: "검증완료" 단계 제거, "회의종료 → 회의록수정" 플로우로 변경<br> - 시나리오 1: 회의진행 → 회의종료 → 회의록수정 (선택) → 대시보드<br> - 시나리오 3 (Todo 관리) 제거 표시<br>- **플로우 다이어그램**: 검증완료 및 Todo 관련 플로우 제거, 회의종료 후 회의록수정 선택 플로우로 단순화<br>- **02-대시보드**: Todo 항목 클릭 시 회의록 상세 이동 로직 제거, Todo 데이터 요구사항 제거, Todo 관련 빈 상태 제거<br>- **07-회의종료**: Todo 서비스 연동 제거 (Meeting, AI 서비스만 연동)<br>- **10-회의록상세조회**: Todo 서비스 연동 제거<br>- **네비게이션**: 하단 네비게이션 및 Desktop 사이드바에서 Todo 관리 메뉴 제거 표시 (MVP v2.4.0)<br> - Mobile 하단 네비게이션: 3개 → 2개 항목 (홈, 회의록)<br> - Desktop 사이드바: Todo 메뉴 제거<br>- **변경 근거**: 유저스토리 v2.4.5 기준, Todo 관리 독립 화면 제거 및 회의 종료 후 회의록 수정 단계로 간소화 |
|
||
| 1.5.9 | 2025-10-28 | 지수, 도그냥 | 용어 통일: "참석자/참석" → "참여자/참여" 변경<br>- **화면설계서**: 100개 인스턴스 변경 (uiux.md)<br> - "참석자" → "참여자" (88개)<br> - "참석" → "참여" (12개): "내가 참석한 회의", "본인이 참석한 회의록", "참석한 회의" 등<br>- **유저스토리**: 132개 인스턴스 변경 (userstory.md)<br> - "참석자" → "참여자" (125개)<br> - "참석" → "참여" (7개): "참석 중인 사용자", "참석 권한", "참석률" 등<br>- **프로토타입**: 34개 인스턴스 변경 (9개 HTML 파일)<br> - "참석자" → "참여자" (32개)<br> - "참석" → "참여" (2개)<br>- **총 266개 인스턴스 변경**: 사용자 역할 용어 완전 통일 (생성자/참여자 체계) |
|
||
|
||
[↑ 목차로 돌아가기](#목차)
|
||
|
||
---
|
||
|
||
## 부록
|
||
|
||
### 참고 자료
|
||
- Mobile First 설계 원칙: Luke Wroblewski "Mobile First"
|
||
- 접근성 가이드라인: WCAG 2.1 Level AA
|
||
- 성능 최적화: Google Web Fundamentals
|
||
|
||
### 디자인 시스템 (추후 작성)
|
||
- 색상 팔레트
|
||
- 타이포그래피
|
||
- 컴포넌트 라이브러리
|
||
- 아이콘 세트
|
||
|