mirror of
https://github.com/hwanny1128/HGZero.git
synced 2025-12-06 16:06:23 +00:00
회의록별 대시보드 기능 추가
- 유저스토리 추가: 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 <noreply@anthropic.com>
This commit is contained in:
hiondal
parent
d3c8b57116
commit
27e8c12eaf
715
design/backend/api/meeting-dashboard-api.md
Normal file
715
design/backend/api/meeting-dashboard-api.md
Normal file
@ -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 초안 작성 |
|
||||
|
||||
662
design/uiux/uiux.md
Normal file
662
design/uiux/uiux.md
Normal file
@ -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 태그 사용
|
||||
- `<header>`, `<nav>`, `<main>`, `<section>`, `<article>` 등
|
||||
|
||||
**ARIA 속성**
|
||||
- role, aria-label, aria-describedby 등 적절히 사용
|
||||
- 동적 콘텐츠에 aria-live 적용
|
||||
|
||||
---
|
||||
|
||||
## 성능 최적화
|
||||
|
||||
### 로딩 전략
|
||||
|
||||
**초기 로딩**
|
||||
- Critical CSS 인라인
|
||||
- 폰트 preload
|
||||
- 이미지 lazy loading
|
||||
|
||||
**코드 스플리팅**
|
||||
- 라우트별 번들 분리
|
||||
- 동적 import 활용
|
||||
|
||||
**캐싱 전략**
|
||||
- 정적 리소스: 장기 캐싱
|
||||
- API 응답: 적절한 캐시 정책
|
||||
- Service Worker 활용
|
||||
|
||||
### 렌더링 최적화
|
||||
|
||||
**가상 스크롤**
|
||||
- 긴 리스트에 가상 스크롤 적용
|
||||
- 예: Todo 목록, 회의 목록
|
||||
|
||||
**애니메이션**
|
||||
- CSS transform/opacity 사용
|
||||
- JavaScript 애니메이션 최소화
|
||||
- requestAnimationFrame 활용
|
||||
|
||||
**WebSocket 최적화**
|
||||
- 필요한 경우에만 연결
|
||||
- 재연결 로직 구현
|
||||
- 메시지 배칭
|
||||
|
||||
---
|
||||
|
||||
## 구현 우선순위
|
||||
|
||||
### Phase 1: MVP (4주)
|
||||
1. 로그인 화면
|
||||
2. 전체 대시보드
|
||||
3. 회의 예약
|
||||
4. 회의 진행 (기본 기능)
|
||||
5. 회의록 공유
|
||||
|
||||
### Phase 2: 핵심 기능 (4주)
|
||||
1. **회의록별 대시보드**
|
||||
2. Todo 관리
|
||||
3. 실시간 협업
|
||||
4. 템플릿 선택
|
||||
|
||||
### Phase 3: 고도화 (4주)
|
||||
1. AI 기반 회의록 개선
|
||||
2. 관련 문서 자동 연결
|
||||
3. 회의 효율성 분석
|
||||
4. 고급 검색
|
||||
|
||||
---
|
||||
|
||||
## 변경 이력
|
||||
|
||||
| 버전 | 날짜 | 작성자 | 변경 내용 |
|
||||
|------|------|--------|-----------|
|
||||
| 1.0 | 2024-01-15 | 이미준 | 회의록별 대시보드 설계 추가 |
|
||||
|
||||
@ -191,6 +191,61 @@ UFR-MEET-060: [회의록공유] 회의록 작성자로서 | 나는, 회의 내
|
||||
|
||||
---
|
||||
|
||||
UFR-MEET-070: [회의록대시보드] 회의록 작성자로서 | 나는, 회의 결과를 한눈에 파악하기 위해 | 회의록별 대시보드를 통해 핵심 정보를 조회하고 싶다.
|
||||
- 시나리오: 회의록별 대시보드 조회
|
||||
회의록이 확정된 상황에서 | 대시보드 탭을 클릭하면 | 핵심내용, 결정사항, Todo 진행상황, 참고자료가 요약되어 표시된다.
|
||||
|
||||
[대시보드 구성 요소]
|
||||
1. 핵심내용
|
||||
- AI가 추출한 회의의 핵심 논의사항 (3-5개 포인트)
|
||||
- 주요 키워드 태그
|
||||
- 회의 통계 (참석자 수, 회의 시간, 발언 횟수)
|
||||
|
||||
2. 결정사항
|
||||
- 회의에서 결정된 사항 목록
|
||||
- 각 결정사항별 결정자, 결정 시간
|
||||
- 결정 근거 및 배경 (간략)
|
||||
|
||||
3. Todo 진행상황
|
||||
- 할당된 Todo 목록 (UFR-TODO-010 연동)
|
||||
- 각 Todo별 진행률 (0-100%) 표시
|
||||
- 상태별 필터링 (시작 전/진행 중/완료)
|
||||
- 담당자별 그룹핑
|
||||
- 마감일 임박 알림 (3일 이내)
|
||||
|
||||
4. 참고자료
|
||||
- 관련 회의록 (UFR-AI-040 연동)
|
||||
- 이전 회의록 링크 (시간순)
|
||||
- 관련도 점수 표시
|
||||
- 업무 이력 (UFR-RAG-030 연동)
|
||||
- 관련 프로젝트 문서
|
||||
- 이슈 트래커 링크
|
||||
- 사내 위키 페이지
|
||||
|
||||
[처리 결과]
|
||||
- 대시보드가 생성됨
|
||||
- 각 섹션별 데이터 로딩 상태 표시
|
||||
- 실시간 업데이트 (Todo 진행상황)
|
||||
- 섹션별 상세보기 링크 제공
|
||||
|
||||
[데이터 업데이트]
|
||||
- Todo 진행상황: 실시간 업데이트 (UFR-TODO-020 연동)
|
||||
- 참고자료: 매일 자동 업데이트
|
||||
- 핵심내용/결정사항: 회의록 수정 시 재생성
|
||||
|
||||
[Policy/Rule]
|
||||
- 대시보드는 회의록 확정 후 자동 생성
|
||||
- Todo 진행상황은 실시간 반영
|
||||
- 모바일 최적화 (반응형 디자인)
|
||||
|
||||
[비고]
|
||||
- **차별화 포인트**: 회의 결과를 한눈에 파악할 수 있는 통합 뷰 제공
|
||||
- 관련 정보를 한 화면에서 접근 가능하여 업무 효율성 향상
|
||||
|
||||
- M/21
|
||||
|
||||
---
|
||||
|
||||
3. STT 서비스 (기본 기능)
|
||||
1) 음성 인식 및 변환
|
||||
UFR-STT-010: [음성녹음인식] 회의 참석자로서 | 나는, 발언 내용이 자동으로 기록되기 위해 | 음성이 실시간으로 녹음되고 인식되기를 원한다.
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user