From 27e8c12eafa652d9eca0fb56f91041f64eecfa5a Mon Sep 17 00:00:00 2001 From: hiondal Date: Mon, 20 Oct 2025 13:46:20 +0900 Subject: [PATCH] =?UTF-8?q?=ED=9A=8C=EC=9D=98=EB=A1=9D=EB=B3=84=20?= =?UTF-8?q?=EB=8C=80=EC=8B=9C=EB=B3=B4=EB=93=9C=20=EA=B8=B0=EB=8A=A5=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 유저스토리 추가: UFR-MEET-070 [회의록대시보드] - 핵심내용, 결정사항, Todo 진행상황, 참고자료 4개 섹션 정의 - AI, RAG, Todo 서비스 연동 명시 - 복잡도: M/21 - UI/UX 설계서 작성 (design/uiux/uiux.md) - 회의록별 대시보드 화면 구조 상세 설계 - 5개 주요 영역: Header, 핵심내용, 결정사항, Todo 진행상황, 참고자료 - 스타일 시스템 정의 (색상, 타이포그래피, 간격, 반응형) - WCAG 2.1 Level AA 접근성 가이드라인 - 인터랙션 및 데이터 요구사항 명세 - 에러 처리 및 성능 최적화 방안 - API 설계서 작성 (design/backend/api/meeting-dashboard-api.md) - 5개 주요 엔드포인트 정의 - 대시보드 전체 조회 - 핵심내용 조회 - 결정사항 조회 (페이지네이션) - Todo 진행상황 조회 (필터링) - 참고자료 조회 (타입별 필터, 페이지네이션) - 데이터 모델 정의 (TypeScript Interface) - Redis 캐싱 전략 (섹션별 TTL 설정) - 성능 최적화 (병렬 처리, 선택적 로딩, 인덱싱) - 보안 (JWT 인증, Rate Limiting) - 에러 코드 및 테스트 시나리오 차별화 포인트: - 회의 결과를 한눈에 파악할 수 있는 통합 뷰 - Todo 진행상황 실시간 업데이트 (WebSocket) - 관련 회의록 및 업무 이력 자동 연결 (RAG) - Mobile First 반응형 설계 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- design/backend/api/meeting-dashboard-api.md | 715 ++++++++++++++++++++ design/uiux/uiux.md | 662 ++++++++++++++++++ design/userstory.md | 55 ++ 3 files changed, 1432 insertions(+) create mode 100644 design/backend/api/meeting-dashboard-api.md create mode 100644 design/uiux/uiux.md diff --git a/design/backend/api/meeting-dashboard-api.md b/design/backend/api/meeting-dashboard-api.md new file mode 100644 index 0000000..2a19e8e --- /dev/null +++ b/design/backend/api/meeting-dashboard-api.md @@ -0,0 +1,715 @@ +# 회의록별 대시보드 API 설계서 + +## 개요 + +### 목적 +회의록이 확정된 후 회의 결과를 한눈에 파악할 수 있는 대시보드 데이터를 제공하는 API + +### 버전 +- API Version: v1.0 +- 작성일: 2024-01-15 +- 작성자: 이준호 (Backend Developer) + +### 관련 유저스토리 +- **UFR-MEET-070**: [회의록대시보드] 회의록 작성자로서 | 나는, 회의 결과를 한눈에 파악하기 위해 | 회의록별 대시보드를 통해 핵심 정보를 조회하고 싶다. + +--- + +## API 엔드포인트 + +### 1. 대시보드 전체 데이터 조회 + +#### 요청 + +```http +GET /api/v1/meetings/{meeting_id}/dashboard +``` + +**Path Parameters** + +| 이름 | 타입 | 필수 | 설명 | +|------|------|------|------| +| meeting_id | string (UUID) | Y | 회의 ID | + +**Query Parameters** + +| 이름 | 타입 | 필수 | 기본값 | 설명 | +|------|------|------|--------|------| +| include | string[] | N | all | 포함할 섹션 (key_points, decisions, todos, references) | +| todo_status | string | N | all | Todo 필터 (all, not_started, in_progress, completed) | + +**Headers** + +```http +Authorization: Bearer {access_token} +Content-Type: application/json +``` + +#### 응답 + +**Success (200 OK)** + +```json +{ + "meeting_id": "uuid-1234", + "meeting_title": "2024 Q4 마케팅 전략 회의", + "meeting_date": "2024-01-15T14:00:00Z", + "location": "본사 대회의실", + "participants_count": 5, + "key_points": { + "points": [ + { + "id": "kp-001", + "order": 1, + "content": "Q4 마케팅 예산을 전년 대비 30% 증액하여 디지털 채널 확대에 집중하기로 결정", + "meeting_section_id": "section-123", + "timestamp": "2024-01-15T14:25:00Z" + }, + { + "id": "kp-002", + "order": 2, + "content": "신규 인플루언서 마케팅 캠페인을 2월부터 시작하며, 타겟 연령층을 20-30대로 설정", + "meeting_section_id": "section-124", + "timestamp": "2024-01-15T14:35:00Z" + } + ], + "keywords": [ + { + "tag": "#디지털마케팅", + "count": 15 + }, + { + "tag": "#예산증액", + "count": 8 + } + ], + "statistics": { + "participants_count": 5, + "duration_minutes": 90, + "speech_count": 32, + "agenda_count": 8 + } + }, + "decisions": { + "items": [ + { + "id": "decision-001", + "content": "Q4 마케팅 예산 30% 증액 승인 (총 3억 → 3.9억)", + "decider": { + "user_id": "user-001", + "name": "김민준", + "position": "마케팅 본부장" + }, + "decided_at": "2024-01-15T14:25:00Z", + "background": "디지털 채널 성과가 예상을 상회하며, 경쟁사 대비 투자 비중이 낮아 시장 점유율 확대를 위해 예산 증액 필요", + "meeting_section_id": "section-123", + "related_todo_ids": ["todo-001", "todo-002"] + } + ], + "total_count": 3 + }, + "todos": { + "summary": { + "total": 12, + "not_started": 3, + "in_progress": 6, + "completed": 3 + }, + "groups": [ + { + "assignee": { + "user_id": "user-002", + "name": "박서연", + "position": "디지털 마케팅 팀장" + }, + "todos": [ + { + "todo_id": "todo-001", + "title": "인플루언서 후보 리스트 작성 및 제안서 준비", + "progress": 75, + "status": "in_progress", + "due_date": "2024-01-20T23:59:59Z", + "priority": "high", + "meeting_section_id": "section-124", + "last_updated_at": "2024-01-16T10:30:00Z" + } + ], + "total_count": 4 + } + ] + }, + "references": { + "related_meetings": { + "items": [ + { + "meeting_id": "meeting-456", + "title": "2024 Q3 마케팅 전략 회의", + "date": "2023-12-20T14:00:00Z", + "author": { + "user_id": "user-001", + "name": "김민준" + }, + "relevance_score": 92, + "summary": "이전 분기 마케팅 전략 회의로, 디지털 채널 투자 확대 방향성이 처음 논의되었으며, 예산 증액 근거 자료로 활용 가능" + } + ], + "total_count": 3 + }, + "project_documents": { + "items": [ + { + "document_id": "doc-789", + "type": "project", + "title": "Q4 디지털 마케팅 프로젝트 기획서", + "created_at": "2024-01-10T09:00:00Z", + "author": { + "user_id": "user-002", + "name": "박서연" + }, + "relevance_score": 88, + "summary": "Q4 디지털 채널 확대 계획 및 예산 배분 전략이 상세히 기술되어 있음" + } + ], + "total_count": 5 + }, + "issues": { + "items": [], + "total_count": 0 + }, + "wiki_pages": { + "items": [], + "total_count": 0 + } + }, + "generated_at": "2024-01-16T10:00:00Z" +} +``` + +**Error Responses** + +```json +// 401 Unauthorized +{ + "error": { + "code": "UNAUTHORIZED", + "message": "인증이 필요합니다." + } +} + +// 403 Forbidden +{ + "error": { + "code": "FORBIDDEN", + "message": "이 회의록에 접근 권한이 없습니다." + } +} + +// 404 Not Found +{ + "error": { + "code": "MEETING_NOT_FOUND", + "message": "회의를 찾을 수 없습니다." + } +} + +// 500 Internal Server Error +{ + "error": { + "code": "INTERNAL_SERVER_ERROR", + "message": "서버 오류가 발생했습니다. 잠시 후 다시 시도해주세요." + } +} +``` + +--- + +### 2. 핵심내용 조회 + +#### 요청 + +```http +GET /api/v1/meetings/{meeting_id}/dashboard/key-points +``` + +**Path Parameters** + +| 이름 | 타입 | 필수 | 설명 | +|------|------|------|------| +| meeting_id | string (UUID) | Y | 회의 ID | + +#### 응답 + +**Success (200 OK)** + +```json +{ + "meeting_id": "uuid-1234", + "points": [ + { + "id": "kp-001", + "order": 1, + "content": "Q4 마케팅 예산을 전년 대비 30% 증액하여 디지털 채널 확대에 집중하기로 결정", + "meeting_section_id": "section-123", + "timestamp": "2024-01-15T14:25:00Z" + } + ], + "keywords": [ + { + "tag": "#디지털마케팅", + "count": 15 + } + ], + "statistics": { + "participants_count": 5, + "duration_minutes": 90, + "speech_count": 32, + "agenda_count": 8 + }, + "generated_at": "2024-01-16T10:00:00Z" +} +``` + +--- + +### 3. 결정사항 조회 + +#### 요청 + +```http +GET /api/v1/meetings/{meeting_id}/dashboard/decisions +``` + +**Path Parameters** + +| 이름 | 타입 | 필수 | 설명 | +|------|------|------|------| +| meeting_id | string (UUID) | Y | 회의 ID | + +**Query Parameters** + +| 이름 | 타입 | 필수 | 기본값 | 설명 | +|------|------|------|--------|------| +| page | integer | N | 1 | 페이지 번호 | +| size | integer | N | 10 | 페이지 크기 (최대 50) | + +#### 응답 + +**Success (200 OK)** + +```json +{ + "meeting_id": "uuid-1234", + "decisions": { + "items": [ + { + "id": "decision-001", + "content": "Q4 마케팅 예산 30% 증액 승인 (총 3억 → 3.9억)", + "decider": { + "user_id": "user-001", + "name": "김민준", + "position": "마케팅 본부장" + }, + "decided_at": "2024-01-15T14:25:00Z", + "background": "디지털 채널 성과가 예상을 상회하며...", + "meeting_section_id": "section-123", + "related_todo_ids": ["todo-001", "todo-002"] + } + ], + "pagination": { + "current_page": 1, + "total_pages": 1, + "total_items": 3, + "page_size": 10 + } + }, + "generated_at": "2024-01-16T10:00:00Z" +} +``` + +--- + +### 4. Todo 진행상황 조회 + +#### 요청 + +```http +GET /api/v1/meetings/{meeting_id}/dashboard/todos +``` + +**Path Parameters** + +| 이름 | 타입 | 필수 | 설명 | +|------|------|------|------| +| meeting_id | string (UUID) | Y | 회의 ID | + +**Query Parameters** + +| 이름 | 타입 | 필수 | 기본값 | 설명 | +|------|------|------|--------|------| +| status | string | N | all | Todo 상태 필터 (all, not_started, in_progress, completed) | +| assignee_id | string (UUID) | N | - | 담당자 ID 필터 | + +#### 응답 + +**Success (200 OK)** + +```json +{ + "meeting_id": "uuid-1234", + "summary": { + "total": 12, + "not_started": 3, + "in_progress": 6, + "completed": 3 + }, + "groups": [ + { + "assignee": { + "user_id": "user-002", + "name": "박서연", + "position": "디지털 마케팅 팀장" + }, + "todos": [ + { + "todo_id": "todo-001", + "title": "인플루언서 후보 리스트 작성 및 제안서 준비", + "progress": 75, + "status": "in_progress", + "due_date": "2024-01-20T23:59:59Z", + "priority": "high", + "meeting_section_id": "section-124", + "last_updated_at": "2024-01-16T10:30:00Z" + } + ], + "total_count": 4 + } + ], + "generated_at": "2024-01-16T10:00:00Z" +} +``` + +--- + +### 5. 참고자료 조회 + +#### 요청 + +```http +GET /api/v1/meetings/{meeting_id}/dashboard/references +``` + +**Path Parameters** + +| 이름 | 타입 | 필수 | 설명 | +|------|------|------|------| +| meeting_id | string (UUID) | Y | 회의 ID | + +**Query Parameters** + +| 이름 | 타입 | 필수 | 기본값 | 설명 | +|------|------|------|--------|------| +| type | string | N | all | 참고자료 타입 (all, meetings, documents, issues, wiki) | +| page | integer | N | 1 | 페이지 번호 | +| size | integer | N | 5 | 페이지 크기 (최대 20) | + +#### 응답 + +**Success (200 OK)** + +```json +{ + "meeting_id": "uuid-1234", + "type": "all", + "related_meetings": { + "items": [ + { + "meeting_id": "meeting-456", + "title": "2024 Q3 마케팅 전략 회의", + "date": "2023-12-20T14:00:00Z", + "author": { + "user_id": "user-001", + "name": "김민준" + }, + "relevance_score": 92, + "summary": "이전 분기 마케팅 전략 회의로..." + } + ], + "pagination": { + "current_page": 1, + "total_pages": 1, + "total_items": 3, + "page_size": 5 + } + }, + "project_documents": { + "items": [], + "pagination": { + "current_page": 1, + "total_pages": 0, + "total_items": 0, + "page_size": 5 + } + }, + "issues": { + "items": [], + "pagination": { + "current_page": 1, + "total_pages": 0, + "total_items": 0, + "page_size": 5 + } + }, + "wiki_pages": { + "items": [], + "pagination": { + "current_page": 1, + "total_pages": 0, + "total_items": 0, + "page_size": 5 + } + }, + "generated_at": "2024-01-16T10:00:00Z" +} +``` + +--- + +## 데이터 모델 + +### KeyPoint + +```typescript +interface KeyPoint { + id: string; // 핵심 포인트 ID + order: number; // 순서 (1, 2, 3...) + content: string; // 핵심 내용 텍스트 + meeting_section_id: string; // 회의록 섹션 ID (링크용) + timestamp: string; // ISO 8601 형식 (언급 시간) +} +``` + +### Keyword + +```typescript +interface Keyword { + tag: string; // 키워드 태그 (#디지털마케팅) + count: number; // 언급 횟수 +} +``` + +### Statistics + +```typescript +interface Statistics { + participants_count: number; // 참석자 수 + duration_minutes: number; // 회의 시간 (분) + speech_count: number; // 발언 횟수 + agenda_count: number; // 주요 의제 수 +} +``` + +### Decision + +```typescript +interface Decision { + id: string; // 결정사항 ID + content: string; // 결정 내용 + decider: User; // 결정자 정보 + decided_at: string; // ISO 8601 형식 (결정 시간) + background: string; // 결정 근거/배경 + meeting_section_id: string; // 회의록 섹션 ID + related_todo_ids: string[]; // 관련 Todo ID 배열 +} +``` + +### User + +```typescript +interface User { + user_id: string; // 사용자 ID + name: string; // 이름 + position?: string; // 직책 (선택) +} +``` + +### TodoSummary + +```typescript +interface TodoSummary { + total: number; // 전체 Todo 수 + not_started: number; // 시작 전 수 + in_progress: number; // 진행 중 수 + completed: number; // 완료 수 +} +``` + +### TodoGroup + +```typescript +interface TodoGroup { + assignee: User; // 담당자 정보 + todos: Todo[]; // Todo 배열 + total_count: number; // 담당자의 전체 Todo 수 +} +``` + +### Todo + +```typescript +interface Todo { + todo_id: string; // Todo ID + title: string; // Todo 제목 + progress: number; // 진행률 (0-100) + status: string; // 상태 (not_started, in_progress, completed) + due_date: string; // ISO 8601 형식 (마감일) + priority: string; // 우선순위 (low, medium, high, urgent) + meeting_section_id: string; // 회의록 섹션 ID + last_updated_at: string; // ISO 8601 형식 (최종 업데이트 시간) +} +``` + +### Reference + +```typescript +interface Reference { + id: string; // 참고자료 ID + type: string; // 타입 (meeting, document, issue, wiki) + title: string; // 제목 + date?: string; // ISO 8601 형식 (날짜) + created_at?: string; // ISO 8601 형식 (생성일) + author: User; // 작성자 + relevance_score: number; // 관련도 점수 (0-100) + summary: string; // 요약 (100자 이내) +} +``` + +--- + +## 캐싱 전략 + +### Redis 캐싱 + +**대시보드 전체 데이터** +- Key: `dashboard:meeting:{meeting_id}` +- TTL: 30분 +- 캐시 무효화: 회의록 수정, Todo 업데이트 시 + +**핵심내용** +- Key: `dashboard:keypoints:{meeting_id}` +- TTL: 1시간 +- 캐시 무효화: 회의록 수정 시 + +**Todo 진행상황** +- Key: `dashboard:todos:{meeting_id}` +- TTL: 5분 (실시간 업데이트) +- 캐시 무효화: Todo 상태 변경 시 + +**참고자료** +- Key: `dashboard:references:{meeting_id}:{type}` +- TTL: 24시간 +- 캐시 무효화: 매일 자동 업데이트 + +--- + +## 성능 최적화 + +### 응답 시간 목표 + +- 대시보드 전체 조회: < 500ms +- 개별 섹션 조회: < 200ms + +### 최적화 전략 + +1. **병렬 처리** + - 각 섹션(핵심내용, 결정사항, Todo, 참고자료)을 병렬로 조회 + - Promise.all 활용 + +2. **데이터 선택적 로딩** + - `include` 파라미터로 필요한 섹션만 조회 + - 프론트엔드에서 탭 전환 시 필요한 데이터만 요청 + +3. **페이지네이션** + - 결정사항, 참고자료에 페이지네이션 적용 + - 대량 데이터 조회 시 성능 저하 방지 + +4. **인덱싱** + - meeting_id, user_id, status 등 주요 필드에 인덱스 생성 + +--- + +## 보안 + +### 인증 및 권한 + +**인증 방식** +- JWT Bearer Token 인증 + +**권한 검증** +- 회의 참석자 또는 조직 멤버만 조회 가능 +- 회의록 공유 권한 설정 준수 + +### Rate Limiting + +``` +- 사용자당: 100 requests/minute +- IP당: 200 requests/minute +``` + +--- + +## 에러 코드 + +| HTTP Status | Error Code | 설명 | +|-------------|-----------|------| +| 400 | INVALID_PARAMETER | 잘못된 파라미터 | +| 401 | UNAUTHORIZED | 인증 필요 | +| 403 | FORBIDDEN | 권한 없음 | +| 404 | MEETING_NOT_FOUND | 회의를 찾을 수 없음 | +| 404 | DASHBOARD_NOT_GENERATED | 대시보드 미생성 (회의록 미확정) | +| 429 | RATE_LIMIT_EXCEEDED | 요청 한도 초과 | +| 500 | INTERNAL_SERVER_ERROR | 서버 오류 | +| 503 | SERVICE_UNAVAILABLE | 서비스 일시 중단 | + +--- + +## 테스트 시나리오 + +### 1. 정상 케이스 + +**시나리오**: 회의록 확정 후 대시보드 조회 +1. 회의록 확정 +2. AI가 대시보드 데이터 생성 (핵심내용, 결정사항 추출) +3. `GET /api/v1/meetings/{meeting_id}/dashboard` 호출 +4. 200 OK 응답 확인 +5. 모든 섹션 데이터 포함 확인 + +### 2. 캐싱 테스트 + +**시나리오**: 동일 대시보드 연속 조회 +1. 첫 번째 조회 (DB 조회) +2. 두 번째 조회 (캐시 조회) +3. 응답 시간 비교 (캐시 조회가 50% 이상 빠름) + +### 3. 실시간 업데이트 테스트 + +**시나리오**: Todo 진행상황 실시간 반영 +1. 대시보드 조회 +2. Todo 진행률 업데이트 (75% → 100%) +3. 대시보드 재조회 +4. 변경된 진행률 확인 + +### 4. 에러 케이스 + +**시나리오**: 권한 없는 사용자 접근 +1. 다른 사용자 계정으로 로그인 +2. 회의 ID로 대시보드 조회 +3. 403 Forbidden 응답 확인 + +--- + +## 변경 이력 + +| 버전 | 날짜 | 작성자 | 변경 내용 | +|------|------|--------|-----------| +| 1.0 | 2024-01-15 | 이준호 | 회의록별 대시보드 API 초안 작성 | + diff --git a/design/uiux/uiux.md b/design/uiux/uiux.md new file mode 100644 index 0000000..c37a38b --- /dev/null +++ b/design/uiux/uiux.md @@ -0,0 +1,662 @@ +# 회의록 서비스 UI/UX 설계서 + +## 목차 +1. [개요](#개요) +2. [설계 원칙](#설계-원칙) +3. [회의록별 대시보드](#회의록별-대시보드) +4. [반응형 디자인 전략](#반응형-디자인-전략) +5. [접근성 가이드라인](#접근성-가이드라인) + +--- + +## 개요 + +### 프로젝트 정보 +- **프로젝트명**: 회의록 작성 및 공유 개선 서비스 +- **버전**: v1.0 +- **작성일**: 2024-01-15 +- **작성자**: 이미준 (서비스 기획자) + +### 설계 목적 +- 업무 지식이 없어도 누구나 쉽게 회의록을 작성하고 공유할 수 있는 서비스 +- AI 기반 자동 회의록 작성 및 Todo 추출 기능 제공 +- 관련 회의록 및 업무 이력과의 연결을 통한 맥락 기반 정보 제공 + +### 주요 차별화 포인트 +1. **맥락 기반 용어 설명**: 관련 회의록과 업무이력을 바탕으로 실용적인 정보 제공 +2. **강화된 Todo 연결**: Action item이 담당자의 Todo와 실시간으로 연결 +3. **프롬프팅 기반 회의록 개선**: AI를 활용한 다양한 형식의 회의록 생성 +4. **회의록별 대시보드**: 회의 결과를 한눈에 파악할 수 있는 통합 뷰 + +--- + +## 설계 원칙 + +### 1. Mobile First +- 모바일 화면을 우선 설계하고 태블릿/데스크톱으로 확장 +- 모바일에서 핵심 기능이 모두 동작해야 함 +- 터치 인터랙션 최적화 + +### 2. 사용자 중심 설계 +- 업무 지식이 없어도 직관적으로 사용 가능 +- 최소한의 클릭으로 주요 작업 완료 +- 명확한 피드백 제공 + +### 3. 일관성 +- 동일한 기능은 동일한 방식으로 동작 +- 일관된 색상, 타이포그래피, 간격 시스템 +- 플랫폼별 네이티브 패턴 준수 + +### 4. 접근성 +- WCAG 2.1 Level AA 준수 +- 키보드 네비게이션 지원 +- 스크린 리더 호환성 + +### 5. 성능 +- 초기 로딩 시간 3초 이내 +- 인터랙션 반응 시간 100ms 이내 +- 점진적 로딩을 통한 사용자 경험 개선 + +--- + +## 회의록별 대시보드 + +### 화면 개요 + +#### 목적 +- 회의록이 확정된 후 회의 결과를 한눈에 파악할 수 있는 통합 뷰 제공 +- 핵심 정보를 빠르게 확인하고 관련 자료로 이동할 수 있는 허브 역할 + +#### 진입 경로 +1. 회의록 공유 화면에서 "대시보드" 탭 클릭 +2. 전체 대시보드에서 특정 회의록 클릭 후 "대시보드" 탭 선택 + +#### 사용자 스토리 +- 유저스토리 ID: **UFR-MEET-070** +- "회의록 작성자로서 | 나는, 회의 결과를 한눈에 파악하기 위해 | 회의록별 대시보드를 통해 핵심 정보를 조회하고 싶다." + +--- + +### 화면 구조 + +#### 1. Header 영역 + +**구성 요소** +- 뒤로가기 버튼: 회의록 본문으로 복귀 +- 회의 제목: 큰 폰트로 강조 (H2) +- 회의 메타 정보 + - 날짜/시간 (아이콘: 📅) + - 장소 (아이콘: 📍) + - 참석자 수 (아이콘: 👥) +- 탭 네비게이션 + - 회의록 (기본 회의록 본문) + - 대시보드 (현재 화면) + - 타임라인 (시간순 발언 기록) + +**레이아웃** +``` +┌─────────────────────────────────────┐ +│ ← 회의록으로 돌아가기 │ +│ │ +│ 2024 Q4 마케팅 전략 회의 │ +│ 📅 2024-01-15 14:00 │ +│ 📍 본사 대회의실 👥 참석자 5명 │ +│ │ +│ [회의록] [대시보드] [타임라인] │ +└─────────────────────────────────────┘ +``` + +**스타일 가이드** +- 배경색: #FFFFFF +- 하단 경계선: 1px solid #E5E7EB +- 제목 폰트: 24px, Bold, #111827 +- 메타 정보: 14px, Regular, #6B7280 +- 탭 활성화: Primary Color (#00D9B1), 하단 2px 보더 + +--- + +#### 2. 핵심내용 섹션 + +**구성 요소** +1. **섹션 헤더** + - 아이콘: 💡 + - 제목: "핵심내용" + - 하단 경계선: 2px solid #F3F4F6 + +2. **핵심 포인트 리스트** (3-5개) + - 번호 배지 (1, 2, 3...) + - 핵심 내용 텍스트 + - 좌측 Primary Color 보더 (3px) + +3. **주요 키워드 태그** + - 해시태그 형식 (#디지털마케팅, #예산증액 등) + - 클릭 시 관련 섹션으로 이동 또는 관련 문서 검색 + +4. **회의 통계** + - 참석자 수 + - 회의 시간 + - 발언 횟수 + - 주요 의제 수 + +**레이아웃** +``` +┌─────────────────────────────────────┐ +│ 💡 핵심내용 │ +├─────────────────────────────────────┤ +│ ┃ ① Q4 마케팅 예산을 전년 대비 │ +│ ┃ 30% 증액하여 디지털 채널... │ +│ ┃ │ +│ ┃ ② 신규 인플루언서 마케팅 캠페인 │ +│ ┃ 을 2월부터 시작하며... │ +│ ┃ │ +│ ┃ ③ 경쟁사 분석 결과를 바탕으로... │ +│ │ +│ #디지털마케팅 #예산증액 #인플루언서│ +│ │ +│ ┌──────┬──────┬──────┬──────┐ │ +│ │ 5명 │ 90분 │ 32회 │ 8개 │ │ +│ │참석자│회의 │발언 │주요 │ │ +│ │ │시간 │횟수 │의제 │ │ +│ └──────┴──────┴──────┴──────┘ │ +└─────────────────────────────────────┘ +``` + +**인터랙션** +- 핵심 포인트 클릭: 해당 내용이 언급된 회의록 위치로 이동 +- 키워드 태그 클릭: 관련 회의록/문서 검색 +- 통계 항목 클릭: 상세 분석 정보 표시 (모달) + +**데이터 요구사항** +- AI 분석 결과 (UFR-AI-010) + - 핵심 포인트 텍스트 배열 (3-5개) + - 주요 키워드 배열 + - 회의록 섹션 링크 정보 +- 회의 통계 데이터 + - 참석자 수 + - 회의 시작/종료 시간 + - 발언 횟수 (화자별) + - 의제 수 + +**에러 처리** +- AI 분석 실패 시: "핵심 내용을 분석하는 중입니다. 잠시만 기다려주세요." 메시지 +- 데이터 로딩 실패 시: "데이터를 불러올 수 없습니다. 새로고침 해주세요." 메시지 + +--- + +#### 3. 결정사항 섹션 + +**구성 요소** +1. **섹션 헤더** + - 아이콘: ✅ + - 제목: "결정사항" + +2. **결정사항 카드** (여러 개) + - 결정 내용 (Bold, 강조) + - 결정자 정보 (아이콘: 👤, 이름, 직책) + - 결정 시간 (아이콘: 🕐, HH:MM) + - 결정 근거/배경 (접을 수 있는 영역) + +**레이아웃** +``` +┌─────────────────────────────────────┐ +│ ✅ 결정사항 │ +├─────────────────────────────────────┤ +│ ┌─────────────────────────────────┐ │ +│ │ Q4 마케팅 예산 30% 증액 승인 │ │ +│ │ (총 3억 → 3.9억) │ │ +│ │ │ │ +│ │ 👤 김민준 (마케팅 본부장) │ │ +│ │ 🕐 14:25 │ │ +│ │ │ │ +│ │ ▼ 배경: 디지털 채널 성과가 │ │ +│ │ 예상을 상회하며, 경쟁사... │ │ +│ └─────────────────────────────────┘ │ +│ │ +│ ┌─────────────────────────────────┐ │ +│ │ 인플루언서 마케팅 캠페인 2월 │ │ +│ │ 1일 론칭 결정 │ │ +│ │ ... │ │ +│ └─────────────────────────────────┘ │ +└─────────────────────────────────────┘ +``` + +**인터랙션** +- 결정사항 카드 클릭: 해당 결정이 논의된 회의록 위치로 이동 +- 배경 영역 클릭: 상세 내용 펼치기/접기 +- 결정자 이름 클릭: 해당 참석자의 발언 목록 보기 + +**데이터 요구사항** +- 결정사항 정보 + - 결정 내용 텍스트 + - 결정자 ID, 이름, 직책 + - 결정 시간 (타임스탬프) + - 결정 근거/배경 텍스트 + - 회의록 섹션 링크 + +**에러 처리** +- 결정사항 없음: "이 회의에서 결정된 사항이 없습니다." +- 데이터 로딩 실패: 재시도 버튼 제공 + +--- + +#### 4. Todo 진행상황 섹션 + +**구성 요소** +1. **섹션 헤더** + - 아이콘: 📋 + - 제목: "Todo 진행상황" + +2. **필터 버튼** + - 전체 (개수) + - 시작 전 (개수) + - 진행 중 (개수) + - 완료 (개수) + +3. **담당자별 Todo 그룹** + - 그룹 헤더 + - 담당자 이름 (아이콘: 👤) + - Todo 개수 배지 + - Todo 카드 (여러 개) + - Todo 제목 + - 진행률 프로그레스 바 (0-100%) + - 마감일 (D-day 형식) + - 우선순위 배지 + +**레이아웃** +``` +┌─────────────────────────────────────┐ +│ 📋 Todo 진행상황 │ +├─────────────────────────────────────┤ +│ [전체 12] [시작 전 3] [진행 중 6] │ +│ [완료 3] │ +│ │ +│ ┌─ 👤 박서연 (4개) ───────────────┐ │ +│ │ ┌─────────────────────────────┐ │ │ +│ │ │ 인플루언서 후보 리스트 작성 │ │ │ +│ │ │ ████████░░ 75% D-5 [높음]│ │ │ +│ │ └─────────────────────────────┘ │ │ +│ │ ┌─────────────────────────────┐ │ │ +│ │ │ 디지털 채널별 예산 배분... │ │ │ +│ │ │ ████░░░░░░ 40% D-2 [긴급]│ │ │ +│ │ └─────────────────────────────┘ │ │ +│ └─────────────────────────────────┘ │ +│ │ +│ ┌─ 👤 이준호 (3개) ───────────────┐ │ +│ │ ... │ │ +│ └─────────────────────────────────┘ │ +└─────────────────────────────────────┘ +``` + +**인터랙션** +- 필터 버튼 클릭: 해당 상태의 Todo만 표시 +- Todo 카드 클릭: Todo 상세 정보 모달 표시 또는 Todo 관리 화면으로 이동 +- 진행률 바 클릭: 진행률 업데이트 UI 표시 +- 담당자 그룹 헤더 클릭: 그룹 접기/펼치기 + +**데이터 요구사항** +- Todo 목록 (UFR-TODO-010 연동) + - Todo ID + - 제목 + - 담당자 ID, 이름 + - 진행률 (0-100%) + - 상태 (시작 전/진행 중/완료) + - 마감일 + - 우선순위 (낮음/보통/높음/긴급) + - 회의록 섹션 링크 + +**실시간 업데이트** +- WebSocket 연결을 통해 Todo 진행상황 실시간 반영 (UFR-TODO-020) +- 진행률 변경 시 프로그레스 바 애니메이션 +- 상태 변경 시 해당 Todo 이동 애니메이션 + +**에러 처리** +- Todo 없음: "할당된 Todo가 없습니다." +- 데이터 로딩 실패: 재시도 버튼 제공 +- 실시간 연결 끊김: "실시간 업데이트가 일시 중단되었습니다." 경고 표시 + +--- + +#### 5. 참고자료 섹션 + +**구성 요소** +1. **섹션 헤더** + - 아이콘: 📚 + - 제목: "참고자료" + +2. **탭 네비게이션** + - 관련 회의록 (개수) + - 프로젝트 문서 (개수) + - 이슈 트래커 (개수) + - 위키 페이지 (개수) + +3. **참고자료 카드** (여러 개) + - 문서 아이콘 (타입별 다른 아이콘) + - 문서 제목 + - 메타 정보 + - 작성일 + - 작성자 + - 관련도 점수 (%) + - 요약 내용 (2-3줄) + +**레이아웃** +``` +┌─────────────────────────────────────┐ +│ 📚 참고자료 │ +├─────────────────────────────────────┤ +│ [관련 회의록 3] [프로젝트 문서 5] │ +│ [이슈 트래커 2] [위키 페이지 4] │ +│ │ +│ ┌─────────────────────────────────┐ │ +│ │ 📄 2024 Q3 마케팅 전략 회의 │ │ +│ │ 2023-12-20 • 김민준 • 92% │ │ +│ │ 이전 분기 마케팅 전략 회의로, │ │ +│ │ 디지털 채널 투자 확대 방향성이 │ │ +│ │ 처음 논의되었으며... │ │ +│ └─────────────────────────────────┘ │ +│ │ +│ ┌─────────────────────────────────┐ │ +│ │ 📄 인플루언서 마케팅 효과 분석 │ │ +│ │ 2024-01-05 • 박서연 • 88% │ │ +│ │ 인플루언서 마케팅 ROI 분석... │ │ +│ └─────────────────────────────────┘ │ +└─────────────────────────────────────┘ +``` + +**인터랙션** +- 탭 클릭: 해당 타입의 참고자료만 표시 +- 참고자료 카드 클릭: 해당 문서로 이동 (새 탭 또는 현재 탭) +- 관련도 점수 클릭: 관련도 계산 근거 표시 (툴팁) + +**데이터 요구사항** +- 관련 회의록 (UFR-AI-040 연동) + - 회의록 ID + - 제목 + - 날짜 + - 참석자 (주 작성자) + - 관련도 점수 (0-100%) + - 요약 내용 (100자 이내) + +- 업무 이력 (UFR-RAG-030 연동) + - 문서 ID + - 문서 타입 (프로젝트 문서/이슈/위키) + - 제목 + - 작성일 + - 작성자 + - 관련도 점수 + - 요약 내용 + +**에러 처리** +- 참고자료 없음: "관련 참고자료가 없습니다." +- 데이터 로딩 실패: 재시도 버튼 제공 +- 문서 링크 오류: "문서를 불러올 수 없습니다." 메시지 + +--- + +### 스타일 시스템 + +#### 색상 팔레트 + +**Primary Color** +- Main: #00D9B1 (Turquoise) +- Light: rgba(0, 217, 177, 0.1) +- Dark: #00B794 + +**Secondary Color** +- Gray Scale + - 900: #111827 + - 800: #1F2937 + - 700: #374151 + - 600: #6B7280 + - 500: #9CA3AF + - 400: #D1D5DB + - 300: #E5E7EB + - 200: #F3F4F6 + - 100: #F9FAFB + - 50: #FAFAFA + +**Status Colors** +- Success: #10B981 +- Warning: #F59E0B +- Error: #EF4444 +- Info: #3B82F6 + +#### 타이포그래피 + +**폰트 패밀리** +- 기본: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif +- 한글: "Noto Sans KR", "Apple SD Gothic Neo", sans-serif + +**폰트 크기** +- H1: 32px / 2rem (Bold) +- H2: 24px / 1.5rem (Bold) +- H3: 20px / 1.25rem (Semibold) +- H4: 18px / 1.125rem (Semibold) +- Body: 16px / 1rem (Regular) +- Body Small: 14px / 0.875rem (Regular) +- Caption: 12px / 0.75rem (Regular) + +**폰트 굵기** +- Bold: 700 +- Semibold: 600 +- Medium: 500 +- Regular: 400 + +**줄 높이** +- 제목: 1.2 +- 본문: 1.6 + +#### 간격 시스템 + +``` +spacing-1: 4px +spacing-2: 8px +spacing-3: 12px +spacing-4: 16px +spacing-5: 20px +spacing-6: 24px +spacing-8: 32px +spacing-10: 40px +spacing-12: 48px +``` + +#### 경계선 반경 + +``` +radius-sm: 4px +radius-md: 8px +radius-lg: 12px +radius-xl: 16px +radius-full: 9999px +``` + +#### 그림자 + +``` +shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05) +shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1) +shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15) +``` + +--- + +## 반응형 디자인 전략 + +### 브레이크포인트 + +``` +Mobile: 0-767px (기본) +Tablet: 768-1023px +Desktop: 1024px+ +``` + +### 모바일 (0-767px) + +**레이아웃** +- 단일 컬럼 레이아웃 +- 패딩: 16px (spacing-4) +- 섹션 간 간격: 24px (spacing-6) + +**회의록별 대시보드 최적화** +- 통계 카드: 2x2 그리드 +- Todo 그룹: 기본 펼침 상태, 스와이프로 접기/펼치기 +- 참고자료 탭: 가로 스크롤 가능 + +**인터랙션** +- 터치 타겟 최소 크기: 44x44px +- 스와이프 제스처 지원 +- 하단 고정 액션 버튼 + +### 태블릿 (768-1023px) + +**레이아웃** +- 2컬럼 레이아웃 (일부 섹션) +- 패딩: 24px (spacing-6) +- 섹션 간 간격: 32px (spacing-8) + +**회의록별 대시보드 최적화** +- 통계 카드: 4x1 그리드 +- Todo 그룹: 사이드바에 요약, 메인 영역에 상세 +- 참고자료: 2컬럼 그리드 + +### 데스크톱 (1024px+) + +**레이아웃** +- 3컬럼 레이아웃 (대시보드 등) +- 최대 너비: 1200px (중앙 정렬) +- 패딩: 32px (spacing-8) +- 섹션 간 간격: 48px (spacing-12) + +**회의록별 대시보드 최적화** +- 통계 카드: 4x1 그리드 +- Todo 그룹: 좌우 분할 레이아웃 (리스트/상세) +- 참고자료: 3컬럼 그리드 +- 호버 효과 강화 + +--- + +## 접근성 가이드라인 + +### WCAG 2.1 Level AA 준수 + +#### 1. 지각 가능성 (Perceivable) + +**색상 대비** +- 일반 텍스트: 최소 4.5:1 +- 큰 텍스트 (18px+ Bold, 24px+): 최소 3:1 +- UI 컴포넌트: 최소 3:1 + +**대체 텍스트** +- 모든 의미 있는 이미지에 alt 속성 제공 +- 아이콘에는 aria-label 또는 visually-hidden 텍스트 제공 + +**색상에만 의존하지 않기** +- 상태 표시 시 색상 + 아이콘/텍스트 병용 +- 예: 에러 상태 = 빨간색 + ⚠️ 아이콘 + "오류" 텍스트 + +#### 2. 작동 가능성 (Operable) + +**키보드 네비게이션** +- 모든 인터랙티브 요소에 키보드로 접근 가능 +- Tab 키로 순차 이동 +- Enter/Space 키로 활성화 +- Esc 키로 모달/드롭다운 닫기 + +**포커스 표시** +- 포커스된 요소에 명확한 시각적 표시 +- 포커스 아웃라인: 2px solid #3B82F6 + +**충분한 시간** +- 자동 타임아웃 시 경고 제공 +- 시간 연장 옵션 제공 + +#### 3. 이해 가능성 (Understandable) + +**명확한 레이블** +- 모든 폼 요소에 레이블 제공 +- 플레이스홀더만으로 레이블 대체 금지 + +**에러 메시지** +- 명확하고 구체적인 에러 메시지 +- 해결 방법 제공 + +**일관된 네비게이션** +- 동일한 기능은 동일한 위치에 배치 +- 예측 가능한 동작 + +#### 4. 견고성 (Robust) + +**시맨틱 HTML** +- 적절한 HTML5 태그 사용 +- `
`, `