shared-dg05-coffeeQuokka/hgzero
1
0
Fork 0
mirror of https://github.com/hwanny1128/HGZero.git synced 2025-12-07 00:16:24 +00:00
Code Issues Packages Projects Releases Wiki Activity
hgzero/design-last/uiux_다람지/uiux.md
Minseo-Jo fe2bb9ab6b 프로토타입 개발 완료 (다람지팀) 
- 스타일 가이드 작성 (style-guide.md)
  - 14개 섹션으로 구성된 완전한 디자인 시스템
  - Mobile First 철학 및 접근성 기준 정의

- 공통 리소스 개발
  - common.css: 1,007줄 완전한 반응형 스타일시트
  - common.js: 400+줄 유틸리티 라이브러리

- 11개 프로토타입 화면 개발
  - 01-로그인: 사용자 인증
  - 02-대시보드: 메인 대시보드
  - 03-회의예약: 회의 생성 폼
  - 04-템플릿선택: 회의록 템플릿 선택
  - 05-회의진행: 실시간 회의 진행
  - 06-검증완료: 섹션별 검증
  - 07-회의종료: 회의 통계
  - 08-회의록공유: 공유 설정
  - 09-Todo관리: Todo 목록 및 진행 관리
  - 10-회의록상세조회: 회의록 상세 보기
  - 11-회의록수정: 지난 회의록 수정

- 주요 특징
  - Mobile First 반응형 디자인
  - WCAG 2.1 Level AA 접근성 준수
  - 실제 동작하는 인터랙션 구현
  - 일관된 예제 데이터 활용
  - 완전한 사용자 플로우 구현

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-21 09:56:29 +09:00

1242 lines
39 KiB
Markdown
Raw Blame History

# 회의록 작성 및 공유 개선 서비스 - UI/UX 설계서
## 문서 정보
- **작성일**: 2025-10-21
- **작성자**: 이미준 (서비스 기획자)
- **버전**: 1.0
- **설계 철학**: Mobile First Design
---
## 목차
1. [설계 개요](#설계-개요)
2. [프로토타입 화면 목록](#프로토타입-화면-목록)
3. [화면 간 사용자 플로우](#화면-간-사용자-플로우)
4. [화면별 상세 설계](#화면별-상세-설계)
5. [화면 간 전환 및 네비게이션](#화면-간-전환-및-네비게이션)
6. [반응형 설계 전략](#반응형-설계-전략)
7. [접근성 보장 방안](#접근성-보장-방안)
8. [성능 최적화 방안](#성능-최적화-방안)
9. [변경 이력](#변경-이력)
---
## 설계 개요
### 설계 목표
업무 지식이 없는 회의록 작성자도 누락 없이 정확한 회의록을 작성하고 공유할 수 있는 직관적이고 효율적인 사용자 경험 제공
### 설계 원칙
#### 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 ~ UFR-AI-040 (AI 회의록 작성, Todo 추출, 회의록 개선)
- **RAG 서비스**: UFR-RAG-010, UFR-RAG-020 (맥락 기반 용어 설명)
- **Collaboration 서비스**: UFR-COLLAB-010 ~ UFR-COLLAB-030 (실시간 협업)
- **Todo 서비스**: UFR-TODO-010, UFR-TODO-030 (Todo 관리)
---
## 프로토타입 화면 목록
| 번호 | 화면명 | 관련 유저스토리 | 비즈니스 중요도 | 비고 |
|------|--------|----------------|----------------|------|
| 01 | 로그인 | UFR-USER-010 | 필수 | 사용자 인증 |
| 02 | 대시보드 | - | 필수 | 메인 랜딩 페이지 |
| 03 | 회의예약 | UFR-MEET-010 | 높음 | 회의 생성 |
| 04 | 템플릿선택 | UFR-MEET-020 | 중간 | 회의록 템플릿 선택 |
| 05 | 회의진행 | UFR-MEET-030, UFR-STT-010/020, UFR-AI-010, UFR-COLLAB-010 | 높음 | 실시간 회의 진행 및 회의록 작성 |
| 06 | 검증완료 | UFR-COLLAB-030 | 중간 | 섹션별 검증 |
| 07 | 회의종료 | UFR-MEET-040, UFR-MEET-050 | 높음 | 회의 통계 및 최종 확정 |
| 08 | 회의록공유 | UFR-MEET-060 | 높음 | 공유 설정 |
| 09 | Todo관리 | UFR-TODO-010, UFR-TODO-030 | 높음 | Todo 목록 및 진행 관리 |
| 10 | 회의록상세조회 | UFR-MEET-045 | 중간 | 회의록 상세 보기 |
| 11 | 회의록수정 | UFR-MEET-055 | 중간 | 지난 회의록 수정 |
---
## 화면 간 사용자 플로우
### 주요 사용자 시나리오별 플로우
#### 시나리오 1: 새 회의 진행 (Full Flow)
```
로그인 → 대시보드 → 회의예약 → 템플릿선택 → 회의진행
→ 검증완료 → 회의종료 → 회의록공유 → 대시보드
```
#### 시나리오 2: 지난 회의록 조회 및 수정
```
로그인 → 대시보드 → 회의록상세조회 → 회의록수정 → 대시보드
```
#### 시나리오 3: Todo 관리
```
로그인 → 대시보드 → Todo관리 → 회의록상세조회 (Todo 출처 확인) → 대시보드
```
#### 시나리오 4: 빠른 회의 시작 (템플릿 스킵)
```
로그인 → 대시보드 → 회의진행 (기본 템플릿) → 회의종료 → 대시보드
```
### 플로우 다이어그램
```mermaid
graph TD
A[로그인] --> B[대시보드]
B --> C[회의예약]
C --> D[템플릿선택]
D --> E[회의진행]
E --> F{검증 완료?}
F -->|Yes| G[회의종료]
F -->|No| E
G --> H[회의록공유]
H --> B
B --> I[회의록상세조회]
I --> J{수정 필요?}
J -->|Yes| K[회의록수정]
K --> I
J -->|No| B
B --> L[Todo관리]
L --> M{Todo 출처 확인?}
M -->|Yes| I
M -->|No| B
E -.실시간 연동.-> L
```
---
## 화면별 상세 설계
### 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-대시보드
#### 개요
- **목적**: 주요 기능 접근 허브, 최근 활동 및 Todo 요약 제공
- **관련 유저스토리**: 여러 유저스토리의 진입점
- **비즈니스 중요도**: 필수
- **접근 경로**: 로그인 후 메인 화면
#### 주요 기능
1. 빠른 회의 시작
2. 내 회의록 목록 (최근 5개)
3. 내 Todo 요약 (진행 중/마감 임박)
4. 최근 공유받은 회의록
5. 전역 검색
#### UI 구성요소
**Mobile (320px~768px)**
- **헤더**
- 서비스 로고
- 검색 아이콘
- 프로필 아이콘 (메뉴)
- **메인 콘텐츠** (스크롤)
- **빠른 액션**
- "새 회의 시작" 버튼 (Primary, 눈에 잘 띄는 위치)
- "회의 예약" 버튼 (Secondary)
- **내 Todo** 카드
- 진행 중 Todo 개수 배지
- 마감 임박 Todo 최대 3개 표시
- "전체 보기" 링크
- **내 회의록** 카드
- 최근 회의록 5개 리스트
- 각 항목: 제목, 날짜, 상태 배지
- "전체 보기" 링크
- **공유받은 회의록** 카드
- 최근 공유받은 회의록 3개
- "전체 보기" 링크
- **하단 네비게이션** (Fixed)
- 홈, 회의록, Todo, 프로필
**Tablet/Desktop (768px+)**
- **사이드바** (좌측, Fixed)
- 서비스 로고
- 메인 메뉴
- 대시보드
- 내 회의록
- Todo
- 공유받은 회의록
- 프로필 정보
- **메인 콘텐츠** (Grid Layout)
- 좌측 컬럼 (2/3)
- 빠른 액션 (가로 배치)
- 내 회의록 리스트
- 우측 컬럼 (1/3)
- 내 Todo 위젯
- 공유받은 회의록 위젯
#### 인터랙션
1. **빠른 액션**
- "새 회의 시작": 템플릿선택 화면으로 이동 (모달 또는 전체 화면)
- "회의 예약": 회의예약 화면으로 이동
2. **카드 인터랙션**
- 카드 클릭: 해당 상세 화면으로 이동
- 스와이프(모바일): 빠른 액션 (삭제, 공유 등)
3. **검색**
- 검색 아이콘 클릭: 전체 화면 검색 인터페이스 표시
- 실시간 자동완성 및 최근 검색어 제공
#### 데이터 요구사항
- **입력**: 사용자 ID
- **출력**:
- 내 회의록 목록 (최근 5개)
- 내 Todo 목록 (진행 중, 마감 임박)
- 공유받은 회의록 목록 (최근 3개)
- **연동**: Meeting 서비스, Todo 서비스
#### 에러 처리
- **데이터 로딩 실패**: 해당 카드에 "일시적으로 데이터를 불러올 수 없습니다." 표시, 새로고침 버튼 제공
- **빈 상태**: "아직 작성한 회의록이 없습니다. 첫 회의를 시작해보세요!"
---
### 03-회의예약
#### 개요
- **목적**: 예정된 회의 일정 등록 및 참석자 초대
- **관련 유저스토리**: UFR-MEET-010
- **비즈니스 중요도**: 높음
- **접근 경로**: 대시보드 → "회의 예약" 버튼
#### 주요 기능
1. 회의 기본 정보 입력 (제목, 날짜/시간, 장소)
2. 참석자 추가 (이메일 또는 조직도 검색)
3. 회의 안건 사전 입력 (선택)
4. 참석자 초대 이메일 자동 발송
5. 캘린더 연동
#### UI 구성요소
**Mobile (320px~768px)**
- **헤더**
- 뒤로가기 버튼
- "회의 예약" 타이틀
- "저장" 버튼 (Primary)
- **폼 섹션** (스크롤)
- **회의 제목** (필수)
- 텍스트 입력 필드
- 최대 100자 카운터
- **날짜 및 시간** (필수)
- 날짜 선택기 (달력 UI)
- 시작 시간 선택기
- 종료 시간 선택기
- 종일 토글 (선택)
- **장소** (선택)
- 텍스트 입력 필드
- 온라인/오프라인 토글
- 온라인 선택 시: 회의 링크 자동 생성 옵션
- **참석자** (필수, 최소 1명)
- 참석자 칩 (제거 가능)
- "참석자 추가" 버튼
- 참석자 검색 (이메일 또는 이름)
- **안건** (선택)
- 다중 라인 텍스트 입력
- AI 안건 추천 버튼 (과거 회의 패턴 기반)
**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-COLLAB-010, UFR-RAG-010/020
- **비즈니스 중요도**: 높음 (핵심 화면)
- **접근 경로**: 템플릿선택 → "이 템플릿으로 시작"
#### 주요 기능
1. 음성 녹음 및 실시간 텍스트 변환 (STT)
2. AI 자동 회의록 작성 (구조화)
3. 실시간 협업 (여러 참석자 동시 편집)
4. 전문용어 자동 감지 및 맥락 기반 설명
5. 수동 편집 및 섹션별 작성
6. 회의 진행 시간 표시
#### UI 구성요소
**Mobile (320px~768px)**
- **헤더** (Fixed, 최소화 가능)
- 회의 제목
- 경과 시간 (00:00:00)
- 녹음 상태 인디케이터 (빨간 점 + 파형)
- 메뉴 버튼 (설정, 참석자 목록)
- **메인 콘텐츠** (스크롤)
- **실시간 발언 영역** (상단, 고정)
- 현재 발언자 이름
- 실시간 텍스트 변환 내용 (3-5초 지연)
- 화자 자동 식별 배지
- **회의록 섹션들** (탭 또는 아코디언)
- 각 섹션:
- 섹션 제목
- AI 자동 작성 내용 (실시간 업데이트)
- 수동 편집 버튼
- 검증 완료 체크박스
- 섹션 간 탭 또는 아코디언 전환
- **전문용어 하이라이트**
- 감지된 용어에 밑줄 또는 배경색
- 터치/클릭 시 맥락 기반 설명 툴팁
- **하단 액션 바** (Fixed)
- 녹음 일시정지/재개 버튼
- 수동 메모 추가 버튼
- 회의 종료 버튼
**Tablet/Desktop (768px+)**
- **좌측 패널** (30%)
- 참석자 목록
- 발언 통계
- 주요 키워드
- **중앙 패널** (50%)
- 회의록 섹션 (모바일과 동일)
- **우측 패널** (20%)
- 실시간 발언
- AI 제안 (Todo, 결정사항 후보)
#### 인터랙션
1. **실시간 업데이트**
- 발언 → STT → AI 분석 → 섹션별 자동 배치 (3-5초 주기)
- WebSocket 통해 모든 참석자에게 동기화
- 수정 사항 실시간 하이라이트 (3초간)
2. **수동 편집**
- 섹션 내 텍스트 클릭 → 편집 모드
- 편집 중 자동 저장 (30초 간격)
- 동시 편집 충돌 감지 및 해결
3. **전문용어 설명**
- 하이라이트된 용어 클릭 → 바텀시트(모바일) 또는 사이드 패널(데스크톱)
- 설명 내용:
- 간단한 정의
- 이 회의에서의 의미
- 관련 과거 회의록 링크
- 참조 문서 링크
4. **녹음 제어**
- 일시정지: 회의록 작성 중단, 재개 가능
- 종료: 확인 다이얼로그 → 회의종료 화면으로 이동
#### 데이터 요구사항
- **입력**: 회의 ID, 오디오 스트림
- **출력**:
- 실시간 텍스트 변환 결과
- 구조화된 회의록 데이터
- 전문용어 및 설명
- **연동**: STT 서비스, AI 서비스, RAG 서비스, Collaboration 서비스
#### 에러 처리
- **녹음 권한 거부**: "마이크 권한이 필요합니다" + 설정 안내
- **STT 실패**: "음성 인식에 실패했습니다. 수동으로 입력해주세요"
- **동기화 실패**: "네트워크 연결을 확인해주세요. 내용은 로컬에 저장됩니다"
- **충돌 발생**: "다른 참석자가 동일한 부분을 수정 중입니다" + 병합 옵션
---
### 06-검증완료
#### 개요
- **목적**: 회의록 섹션별 내용 검증 및 완료 표시
- **관련 유저스토리**: UFR-COLLAB-030
- **비즈니스 중요도**: 중간
- **접근 경로**: 회의진행 화면 내 또는 회의종료 전
#### 주요 기능
1. 섹션별 검증 상태 표시
2. 검증 완료 체크 (참석자별)
3. 미검증 섹션 안내
4. 섹션 잠금 (회의 생성자만)
#### UI 구성요소
**Mobile (320px~768px)**
- **헤더**
- "검증 완료" 타이틀
- 진행률 바 (전체 섹션 대비 검증 완료 비율)
- **섹션 리스트**
- 각 섹션 카드:
- 섹션 이름
- 검증 상태 아이콘 (✓ 완료 / ○ 미완료)
- 검증자 아바타 (여러 명 가능)
- "검증 완료" 버튼
- 잠금 아이콘 (회의 생성자가 잠근 경우)
- **하단 액션**
- "모두 검증 완료" 버튼 (모든 섹션 검증 시 활성화)
- "나중에 하기" 버튼
**Tablet/Desktop (768px+)**
- 좌측: 섹션 리스트 (모바일과 동일)
- 우측: 선택된 섹션 내용 프리뷰
#### 인터랙션
1. **섹션 검증**
- "검증 완료" 버튼 클릭 → 확인 다이얼로그
- 검증 완료 시: 체크 아이콘 표시, 검증자 아바타 추가
- 실시간 동기화: 다른 참석자에게 즉시 반영
2. **섹션 잠금** (회의 생성자만)
- 검증 완료된 섹션에 잠금 아이콘 표시
- 잠긴 섹션은 수정 불가
- 잠금 해제 가능
3. **진행률 표시**
- 상단 진행률 바: 실시간 업데이트
- 100% 완료 시: "모두 검증 완료" 버튼 활성화
#### 데이터 요구사항
- **입력**: 회의 ID, 섹션 목록
- **출력**: 섹션별 검증 상태, 검증자 정보
- **연동**: Collaboration 서비스
#### 에러 처리
- **검증 실패**: "검증 처리에 실패했습니다. 다시 시도해주세요"
- **동기화 실패**: "다른 참석자의 검증 상태를 불러올 수 없습니다"
---
### 07-회의종료
#### 개요
- **목적**: 회의 통계 표시 및 최종 회의록 확정
- **관련 유저스토리**: UFR-MEET-040, UFR-MEET-050, UFR-AI-020
- **비즈니스 중요도**: 높음
- **접근 경로**: 회의진행 → "회의 종료" 버튼
#### 주요 기능
1. 회의 통계 표시 (시간, 참석자, 발언 횟수 등)
2. 주요 키워드 클라우드
3. AI 자동 추출된 Todo 항목 확인
4. 최종 회의록 확정
5. 다음 액션 선택 (공유, 수정, 대시보드 복귀)
#### UI 구성요소
**Mobile (320px~768px)**
- **헤더**
- "회의가 종료되었습니다" 메시지
- 회의 제목
- **통계 카드**
- 회의 총 시간
- 참석자 수
- 주요 키워드 (태그 클라우드)
- 발언 통계 (화자별 발언 횟수 및 시간 - 바 차트)
- **AI Todo 추출 결과**
- "AI가 추출한 Todo" 섹션
- Todo 항목 리스트:
- Todo 내용
- 담당자 (자동 식별 또는 수동 지정)
- 마감일 (있는 경우)
- "Todo 수정" 버튼
- **최종 확정 섹션**
- "최종 회의록 확정" 버튼 (Primary)
- 필수 항목 체크리스트:
- ✓ 회의 제목 작성
- ✓ 참석자 목록 작성
- ✓ 주요 논의 내용 작성
- ✓ 결정 사항 작성
- **하단 액션**
- "회의록 공유하기" 버튼
- "회의록 수정하기" 버튼
- "대시보드로 돌아가기" 버튼
**Tablet/Desktop (768px+)**
- 상단: 통계 카드 (Grid Layout)
- 중앙: AI Todo 추출 결과
- 하단: 최종 확정 및 액션 버튼
#### 인터랙션
1. **통계 표시**
- 애니메이션 효과로 숫자 카운트업
- 차트는 페이드인 효과
2. **Todo 확인 및 수정**
- Todo 항목 클릭: 상세 편집 모달
- 담당자 변경, 마감일 설정 가능
- "Todo 추가" 버튼으로 수동 추가
3. **최종 확정**
- "최종 회의록 확정" 클릭:
- 필수 항목 검사
- 누락 시: 해당 섹션으로 이동 안내
- 완료 시: 확정 확인 다이얼로그
- 확정 후: Todo 자동 할당, 캘린더 연동
#### 데이터 요구사항
- **입력**: 회의 ID
- **출력**:
- 회의 통계 (시간, 참석자 수, 발언 통계, 키워드)
- AI 추출 Todo 목록
- 확정 회의록 버전 ID
- **연동**: Meeting 서비스, AI 서비스, Todo 서비스
#### 에러 처리
- **통계 생성 실패**: "통계를 생성할 수 없습니다" + 건너뛰기 옵션
- **Todo 추출 실패**: "AI Todo 추출에 실패했습니다. 수동으로 추가해주세요"
- **필수 항목 누락**: "필수 항목을 작성해주세요" + 해당 섹션으로 이동
- **확정 실패**: "회의록 확정에 실패했습니다. 다시 시도해주세요"
---
### 08-회의록공유
#### 개요
- **목적**: 회의록 공유 설정 및 참석자에게 전송
- **관련 유저스토리**: UFR-MEET-060
- **비즈니스 중요도**: 높음
- **접근 경로**: 회의종료 → "회의록 공유하기" 또는 대시보드 → 회의록 상세 → "공유"
#### 주요 기능
1. 공유 대상 선택 (전체/특정 참석자)
2. 공유 권한 설정 (읽기 전용/댓글/편집)
3. 공유 방식 선택 (이메일/링크)
4. 링크 보안 설정 (유효기간, 비밀번호)
5. 공유 이력 확인
#### UI 구성요소
**Mobile (320px~768px)**
- **헤더**
- 뒤로가기 버튼
- "회의록 공유" 타이틀
- "공유하기" 버튼 (Primary)
- **공유 설정 폼**
- **공유 대상**
- "참석자 전체" 라디오 버튼 (기본 선택)
- "특정 참석자 선택" 라디오 버튼
- 참석자 목록 (체크박스)
- **공유 권한**
- 드롭다운 또는 라디오 버튼
- 읽기 전용 (기본)
- 댓글 가능
- 편집 가능
- **공유 방식**
- "이메일 발송" 체크박스 (기본 선택)
- "링크 복사" 버튼
- **링크 보안 설정** (선택)
- "유효기간 설정" 토글
- 기간 선택 (7일, 30일, 90일, 무제한)
- "비밀번호 설정" 토글
- 비밀번호 입력 필드
- **공유 이력** (하단)
- 이전 공유 기록 리스트
- 각 항목: 공유 날짜, 대상, 권한
**Tablet/Desktop (768px+)**
- 좌측: 공유 설정 폼 (모바일과 동일)
- 우측: 회의록 미리보기
#### 인터랙션
1. **공유 대상 선택**
- "참석자 전체" 선택: 모든 참석자에게 발송
- "특정 참석자 선택": 체크박스로 개별 선택
2. **링크 생성 및 복사**
- "링크 복사" 클릭: 고유 URL 생성 → 클립보드 복사
- 토스트 메시지: "링크가 복사되었습니다"
3. **공유 실행**
- "공유하기" 버튼 클릭:
- 이메일 발송 진행 (로딩 인디케이터)
- 성공: "회의록이 공유되었습니다" 토스트
- 다음 회의 일정 언급 확인: 자동 캘린더 등록 제안
#### 데이터 요구사항
- **입력**:
- 회의 ID
- 공유 대상 (사용자 ID 배열)
- 공유 권한 (읽기/댓글/편집)
- 공유 방식 (이메일/링크)
- 링크 설정 (유효기간, 비밀번호)
- **출력**:
- 공유 링크 URL
- 이메일 발송 결과
- **연동**: Meeting 서비스, Notification 서비스
#### 에러 처리
- **공유 대상 미선택**: "공유할 대상을 선택해주세요"
- **이메일 발송 실패**: "일부 참석자에게 이메일 발송에 실패했습니다" + 재시도 옵션
- **링크 생성 실패**: "링크 생성에 실패했습니다. 다시 시도해주세요"
---
### 09-Todo관리
#### 개요
- **목적**: 할당된 Todo 목록 조회 및 진행 상황 관리
- **관련 유저스토리**: UFR-TODO-010, UFR-TODO-030
- **비즈니스 중요도**: 높음
- **접근 경로**: 대시보드 → 하단 네비게이션 "Todo" 또는 대시보드 "내 Todo" 카드 → "전체 보기"
#### 주요 기능
1. Todo 목록 표시 (상태별 필터링)
2. Todo 완료 처리
3. 회의록 원문으로 이동 (양방향 연결)
4. Todo 진행 상황 통계
5. 마감 임박 Todo 알림
#### UI 구성요소
**Mobile (320px~768px)**
- **헤더**
- "내 Todo" 타이틀
- 필터 버튼 (상태별)
- **통계 카드**
- 전체 Todo 개수
- 완료율 (원형 진행 바)
- 마감 임박 Todo 개수 (배지)
- **필터 탭**
- 전체, 진행 중, 완료, 마감 임박
- **Todo 리스트**
- 각 Todo 카드:
- 체크박스 (완료 처리)
- Todo 내용
- 마감일 (색상 코딩: 초록-여유, 노랑-임박, 빨강-지연)
- 우선순위 배지 (높음/보통/낮음)
- 관련 회의록 링크 아이콘
- 스와이프 액션: 수정, 삭제
- **FAB** (Floating Action Button)
- "Todo 추가" (수동 추가)
**Tablet/Desktop (768px+)**
- 좌측: Todo 리스트
- 우측: 선택된 Todo 상세 정보
- Todo 내용
- 담당자
- 마감일
- 우선순위
- 관련 회의록 섹션 (임베디드 뷰)
- 진행 메모 (추가 가능)
#### 인터랙션
1. **Todo 완료 처리**
- 체크박스 클릭:
- 확인 다이얼로그 ("완료 처리하시겠습니까?")
- 완료 시: 체크 애니메이션, 회의록에 실시간 반영
- 완료 Todo는 리스트 하단으로 이동 (취소선)
2. **회의록 연결**
- 회의록 링크 아이콘 클릭:
- 회의록상세조회 화면으로 이동
- 해당 Todo가 언급된 섹션으로 자동 스크롤
- 하이라이트 효과
3. **필터링**
- 필터 탭 클릭: 해당 상태의 Todo만 표시
- 마감 임박: 3일 이내 마감 Todo
4. **수동 추가**
- FAB 클릭: Todo 추가 모달
- 내용, 마감일, 우선순위 입력
#### 데이터 요구사항
- **입력**: 사용자 ID
- **출력**:
- Todo 목록 (상태, 내용, 담당자, 마감일, 우선순위, 회의록 링크)
- Todo 통계 (전체, 완료, 진행 중)
- **연동**: Todo 서비스, Meeting 서비스
#### 에러 처리
- **Todo 로딩 실패**: "Todo 목록을 불러올 수 없습니다" + 재시도 버튼
- **완료 처리 실패**: "완료 처리에 실패했습니다. 다시 시도해주세요"
- **빈 상태**: "할당된 Todo가 없습니다. 새 회의를 시작해보세요!"
---
### 10-회의록상세조회
#### 개요
- **목적**: 지난 회의록의 전체 내용 및 상세 정보 확인
- **관련 유저스토리**: UFR-MEET-045
- **비즈니스 중요도**: 중간
- **접근 경로**: 대시보드 → "내 회의록" 항목 클릭 또는 Todo관리 → 회의록 링크
#### 주요 기능
1. 회의 기본 정보 표시
2. 섹션별 상세 내용 표시
3. Todo 항목 및 진행 상황 표시
4. 첨부파일 다운로드
5. 회의록 수정/공유 액션
#### UI 구성요소
**Mobile (320px~768px)**
- **헤더**
- 뒤로가기 버튼
- 회의 제목
- 메뉴 버튼 (수정, 공유, 삭제)
- **기본 정보 카드**
- 회의 일시
- 참석자 아바타 및 이름 (역할 구분)
- 회의 장소
- 회의록 상태 배지 (작성중/확정완료)
- 작성자 및 최종 수정 시간
- **섹션별 내용** (아코디언 또는 스크롤)
- 각 섹션:
- 섹션 제목
- 검증 완료 배지 (검증된 경우)
- 섹션 내용 (마크다운 렌더링)
- 접기/펼치기 버튼 (선택)
- **Todo 섹션** (강조)
- Todo 항목 리스트:
- 체크박스 (완료/미완료)
- Todo 내용
- 담당자 이름
- 마감일
- 우선순위 배지
- **첨부파일 섹션**
- 파일 아이콘 + 파일명
- 다운로드 버튼
- **하단 액션 바** (Fixed)
- "수정" 버튼 (권한 있는 경우만)
- "공유" 버튼
**Tablet/Desktop (768px+)**
- 좌측: 섹션 목차 (네비게이션)
- 중앙: 회의록 내용 (모바일과 동일)
- 우측: 관련 정보
- 참석자 목록
- 관련 회의록 링크
- 통계 (발언 시간 등)
#### 인터랙션
1. **섹션 네비게이션**
- 섹션 제목 클릭: 해당 섹션으로 스크롤
- 접기/펼치기: 긴 내용의 경우 초기에는 접힌 상태
2. **Todo 인터랙션**
- Todo 체크박스: 완료 처리 (권한 있는 경우)
- Todo 클릭: Todo관리 화면으로 이동
3. **첨부파일 다운로드**
- 파일명 클릭: 다운로드 시작
- 진행 상황 표시
4. **수정 및 공유**
- "수정" 버튼: 회의록수정 화면으로 이동
- "공유" 버튼: 회의록공유 화면으로 이동
#### 데이터 요구사항
- **입력**: 회의록 ID
- **출력**:
- 회의 기본 정보 (제목, 일시, 참석자, 장소, 상태, 작성자, 수정 시간)
- 섹션별 내용
- Todo 목록 및 진행 상황
- 첨부파일 목록
- **연동**: Meeting 서비스, Todo 서비스
#### 에러 처리
- **회의록 로딩 실패**: "회의록을 불러올 수 없습니다" + 재시도 버튼
- **권한 없음**: "수정" 버튼 비활성화, "조회 권한만 있습니다" 메시지
- **첨부파일 다운로드 실패**: "파일 다운로드에 실패했습니다"
---
### 11-회의록수정
#### 개요
- **목적**: 지난 회의록 조회 및 수정
- **관련 유저스토리**: UFR-MEET-055
- **비즈니스 중요도**: 중간
- **접근 경로**: 대시보드 → "내 회의록" → 회의록상세조회 → "수정"
#### 주요 기능
1. 회의록 목록 조회 (필터링, 정렬, 검색)
2. 회의록 내용 수정 (섹션별)
3. 자동 저장 (30초 간격)
4. 수정 이력 관리
5. 상태 변경 (확정완료 → 작성중)
#### UI 구성요소
**Mobile (320px~768px)**
- **헤더**
- 뒤로가기 버튼
- "회의록 수정" 타이틀
- "저장" 버튼 (Primary)
- 자동 저장 인디케이터
- **필터 및 검색** (상단)
- 상태 필터: 전체 / 작성중 / 확정완료
- 정렬: 최신순 / 회의일시순 / 제목순
- 검색창: 제목, 참석자, 키워드
- **회의록 리스트** (목록 모드)
- 각 회의록 카드:
- 회의 제목
- 회의 일시
- 상태 배지
- 마지막 수정 시간
- 검증 완료율 (작성중인 경우)
- 스와이프 액션: 수정, 삭제
- **수정 모드** (편집 화면)
- 섹션별 편집 영역
- 각 섹션:
- 섹션 제목
- 편집 가능한 텍스트 영역
- 검증 완료 체크박스 (잠금 해제 필요)
- 자동 저장 상태 표시 ("저장됨", "저장 중...")
**Tablet/Desktop (768px+)**
- 좌측: 회의록 리스트
- 중앙: 선택된 회의록 편집 영역
- 우측: 수정 이력 패널
#### 인터랙션
1. **회의록 선택**
- 리스트에서 회의록 클릭: 편집 모드로 전환
- 편집 모드에서 다른 회의록 선택: 저장 확인 다이얼로그
2. **내용 수정**
- 텍스트 영역 클릭: 포커스 및 편집 가능
- 자동 저장: 30초 간격, 인디케이터 표시
- 수동 저장: "저장" 버튼 클릭
3. **섹션 잠금 해제**
- 잠긴 섹션: 회의 생성자에게 승인 요청
- 승인 대기 중: "승인 대기 중" 배지 표시
- 승인 완료: 편집 가능
4. **상태 변경**
- 확정완료 회의록 수정 시: 자동으로 "작성중" 상태로 변경
- 모든 섹션 검증 완료 시: "확정완료"로 변경 제안
#### 데이터 요구사항
- **입력**:
- 회의록 ID (조회)
- 수정 내용 (섹션 ID, 내용)
- **출력**:
- 회의록 목록 (필터/정렬/검색 결과)
- 수정 결과 (성공/실패)
- 수정 이력 (누가, 언제, 무엇을)
- **연동**: Meeting 서비스, Collaboration 서비스
#### 에러 처리
- **권한 없음**: "본인이 작성한 회의록만 수정할 수 있습니다"
- **자동 저장 실패**: "네트워크 연결을 확인해주세요. 로컬에 임시 저장됩니다"
- **충돌 발생**: "다른 참석자가 동일한 부분을 수정했습니다" + 병합 옵션
- **삭제 실패**: "회의록 삭제에 실패했습니다"
---
## 화면 간 전환 및 네비게이션
### 네비게이션 구조
#### Mobile (320px~768px)
- **Primary Navigation**: 하단 네비게이션 바 (Fixed)
- 홈 (대시보드)
- 회의록 (내 회의록 목록)
- Todo (Todo관리)
- 프로필 (설정 및 로그아웃)
- **Secondary Navigation**: 상단 헤더
- 뒤로가기 버튼 (화면별)
- 페이지 타이틀
- 액션 버튼 (저장, 메뉴 등)
#### Tablet/Desktop (768px+)
- **Primary Navigation**: 좌측 사이드바 (Fixed)
- 서비스 로고
- 대시보드
- 내 회의록
- Todo
- 공유받은 회의록
- 설정
- 프로필
- **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개 화면 설계 완료 |
---
## 부록
### 참고 자료
- Mobile First 설계 원칙: Luke Wroblewski "Mobile First"
- 접근성 가이드라인: WCAG 2.1 Level AA
- 성능 최적화: Google Web Fundamentals
### 디자인 시스템 (추후 작성)
- 색상 팔레트
- 타이포그래피
- 컴포넌트 라이브러리
- 아이콘 세트
Reference in New Issue View Git Blame Copy Permalink