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

역할 용어 통일 및 검증완료 화면 제거
- style-guide.md v1.2.5: 용어 정의 섹션 신규 추가
  - 회의 생성자/참석자 권한 상세 정의
  - 사용 금지 용어 명시 ("회의록 작성자" 등)
- uiux.md v1.4.16: 유저스토리 v2.1.2 반영
  - 06-검증완료 화면 제거 (11-회의록수정에 통합)
  - 용어 통일: "회의록 작성자" → "회의 생성자" 또는 "참석자"
  - 화면별 권한 명시 추가
- 구버전 보고서 파일 삭제 (V1.0, V1.1)

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
yabo0812
2025-10-24 11:23:02 +09:00
parent 97f1d8966c
commit 86fd30f4cc
4 changed files with 55 additions and 878 deletions
+18 -82
View File
@@ -2,9 +2,9 @@
## 문서 정보
- **작성일**: 2025-10-21
- **최종 수정일**: 2025-10-23
- **최종 수정일**: 2025-10-24
- **작성자**: 이미준 (서비스 기획자)
- **버전**: 1.4.14
- **버전**: 1.4.16
- **설계 철학**: Mobile First Design
---
@@ -27,7 +27,7 @@
## 설계 개요
### 설계 목표
업무 지식이 없는 회의록 작성자도 누락 없이 정확한 회의록을 작성하고 공유할 수 있는 직관적이고 효율적인 사용자 경험 제공
업무 지식이 없는 회의 참석자 누구라도 누락 없이 정확한 회의록을 작성하고 공유할 수 있는 직관적이고 효율적인 사용자 경험 제공
### 설계 원칙
@@ -57,7 +57,7 @@
- UFR-AI-030 (프롬프팅 기반 회의록 개선)
- **UFR-AI-040 (관련 회의록 자동 연결)** ← 신규 반영
- **RAG 서비스**: UFR-RAG-010, UFR-RAG-020 (맥락 기반 용어 설명)
- **Collaboration 서비스**: UFR-COLLAB-010 ~ UFR-COLLAB-030 (실시간 협업)
- **Collaboration 서비스**: UFR-COLLAB-010 ~ UFR-COLLAB-020 (실시간 협업)
- **Todo 서비스**: UFR-TODO-010, UFR-TODO-030 (Todo 관리)
### 주요 추가 기능 (v1.1)
@@ -80,10 +80,9 @@
|------|--------|----------------|-------------------|-----------|------------------------|-------|
| 01 | 로그인 | UFR-USER-010 | 필수 | 사용자 인증 | X | X | |
| 02 | 대시보드 | - | 필수 | 메인 랜딩 페이지 | 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, UFR-COLLAB-010 | 높음 | 실시간 회의 진행 및 회의록 작성 | X | X | |
| 06 | 검증완료 | UFR-COLLAB-030 | 중간 | 섹션별 검증 | X | X | |
| 03 | 회의예약 | UFR-MEET-010 | 높음 | 회의 생성 | X | O | |
| 04 | 템플릿선택 | UFR-MEET-020 | 중간 | 회의록 템플릿 선택 | X | O | |
| 05 | 회의진행 | UFR-MEET-030, UFR-STT-010/020, UFR-AI-010, UFR-COLLAB-010 | 높음 | 실시간 회의 진행 및 회의록 작성 | X | X | |
| 07 | 회의종료 | UFR-MEET-040, UFR-MEET-050 | 높음 | 회의 통계 및 최종 확정 | X | X | |
| 09 | Todo관리 | UFR-TODO-010, UFR-TODO-030 | 높음 | Todo 목록 및 진행 관리 | O | X | |
| 10 | 회의록상세조회 | UFR-MEET-047 | 중간 | 회의록 상세 보기 | X | O | |
@@ -477,6 +476,7 @@ graph TD
- **관련 유저스토리**: UFR-MEET-010
- **비즈니스 중요도**: 높음
- **접근 경로**: 대시보드 → "회의 예약" 버튼
- **권한**: 모든 사용자 (예약 생성 시 자동으로 회의 생성자가 됨)
#### 주요 기능
1. 회의 기본 정보 입력 (제목, 날짜/시간, 장소)
@@ -565,6 +565,7 @@ graph TD
- **관련 유저스토리**: UFR-MEET-020
- **비즈니스 중요도**: 중간
- **접근 경로**: 대시보드 → "새 회의 시작" 또는 회의예약 → "회의 시작"
- **권한**: 회의 생성자 전용
#### 주요 기능
1. 사전 정의된 템플릿 선택 (일반, 스크럼, 킥오프, 주간)
@@ -630,6 +631,9 @@ graph TD
- **관련 유저스토리**: UFR-MEET-030, UFR-STT-010/020, UFR-AI-010, UFR-AI-040, UFR-COLLAB-010, UFR-RAG-010/020
- **비즈니스 중요도**: 높음 (핵심 화면)
- **접근 경로**: 템플릿선택 → "이 템플릿으로 시작"
- **권한**:
- 회의 시작/종료: 회의 생성자 전용
- 회의록 편집: 모든 참석자
#### 주요 기능
1. 음성 녹음 및 실시간 텍스트 변환 (STT)
@@ -935,80 +939,6 @@ graph TD
---
### 06-검증완료
#### 개요
- **목적**: 회의록 섹션별 내용 검증 및 완료 표시
- **관련 유저스토리**: UFR-COLLAB-030
- **비즈니스 중요도**: 중간
- **접근 경로**: 회의진행 화면 내 또는 회의종료 전
#### 주요 기능
1. 섹션별 검증 상태 표시
2. 검증 완료 체크 (참석자별)
3. 미검증 섹션 안내
4. 섹션 잠금 (회의 생성자만)
#### UI 구성요소
**Mobile (320px~768px)**
- **헤더**
- "검증 완료" 타이틀
- 진행률 바 (전체 섹션 대비 검증 완료 비율)
- **섹션 리스트**
- 각 섹션 카드:
- 섹션 이름
- 검증 상태 아이콘 (✓ 완료 / ○ 미완료)
- 검증자 아바타 (여러 명 가능)
- "검증 완료" 버튼
- 잠금 아이콘 (회의 생성자가 잠근 경우)
- **하단 액션**
- "모두 검증 완료" 버튼 (모든 섹션 검증 시 활성화)
- "나중에 하기" 버튼
**Tablet/Desktop (768px+)**
#### 인터랙션
1. **섹션 검증**
- "검증 완료" 버튼 클릭 → 확인 다이얼로그
- 검증 완료 시: 체크 아이콘 표시, 검증자 아바타 추가
- 실시간 동기화: 다른 참석자에게 즉시 반영
2. **섹션 잠금**
- 검증 완료된 섹션에 잠금 아이콘 표시
- 잠긴 섹션은 수정 불가
- 잠금 해제 가능(회의생성자만)
3. **진행률 표시**
- 상단 진행률 바: 실시간 업데이트
- 100% 완료 시: "모두 검증 완료" 버튼 활성화
4. **내용 수정**
- 회의 개요 : 보기 레이어 내에서 편집 가능(회의생성자만)
- 개요 외 항목: 편집시도시 회의록수정화면으로 이동
5. **나중에 하기**
- "나중에 하기" 버튼 클릭 → 확인 다이얼로그
- 확인 시:
- 회의록 상태를 '작성중'으로 임시 저장
- "회의록이 임시 저장되었습니다" 토스트 메시지 표시
- 1초 후 02-대시보드 화면으로 이동
- 이후 12-회의록목록조회에서 '작성중' 상태로 조회 가능
- 언제든지 회의록 수정 화면에서 검증 재개 가능
#### 데이터 요구사항
- **입력**: 회의 ID, 섹션 목록
- **출력**: 섹션별 검증 상태, 검증자 정보
- **연동**: Collaboration 서비스
#### 에러 처리
- **검증 실패**: "검증 처리에 실패했습니다. 다시 시도해주세요"
- **동기화 실패**: "다른 참석자의 검증 상태를 불러올 수 없습니다"
---
### 07-회의종료
#### 개요
@@ -1016,6 +946,7 @@ graph TD
- **관련 유저스토리**: UFR-MEET-040, UFR-MEET-050, UFR-AI-020
- **비즈니스 중요도**: 높음
- **접근 경로**: 회의진행 → "회의 종료" 버튼
- **권한**: 회의 생성자 전용
#### 주요 기능
1. 회의 통계 표시 (시간, 참석자, 발언 횟수 등)
@@ -1103,6 +1034,7 @@ graph TD
- **관련 유저스토리**: UFR-TODO-040 (Todo 관리)
- **비즈니스 중요도**: 높음
- **접근 경로**: 대시보드 → 하단 네비게이션 "Todo" 또는 대시보드 "내 Todo" 카드 → "전체 보기"
- **권한**: 모든 회의 참석자 (본인이 담당자인 Todo만 조회/수정 가능)
- **대전제**:
- Todo의 상태는 완료/미완료만 존재
- 09-Todo관리 화면에서는 나의 Todo(내가 담당자인 Todo)만 표시
@@ -1260,6 +1192,7 @@ graph TD
- **관련 유저스토리**: UFR-MEET-047, UFR-AI-040
- **비즈니스 중요도**: 중간
- **접근 경로**: 대시보드 → "내 회의록" 항목 클릭 또는 Todo관리 → 회의록 링크
- **권한**: 모든 회의 참석자 (조회 전용)
#### 주요 기능
1. 회의 기본 정보 표시
@@ -1614,6 +1547,7 @@ graph TD
- **접근 경로**:
- 대시보드 → "내 회의록" 전체 보기
- 하단 네비게이션 → "회의록" 메뉴
- **권한**: 모든 회의 참석자 (본인이 참석한 회의록만 조회)
#### 데이터 아키텍처
- **데이터 레이어**: common.js의 SAMPLE_MINUTES 배열
@@ -2104,6 +2038,8 @@ graph TD
| 1.4.12 | 2025-10-23 | 강지수 | 05-회의진행 화면 Todo 카드 스타일 10-회의록상세조회와 완전 통일<br>- **Todo 카드 HTML 구조 통일**:<br> - 기존: inline-flex 기반 간소화 구조<br> - 변경: `.todo-card` > `.todo-top` > (`.todo-checkbox-wrapper` + `.todo-content-wrapper` + `.todo-actions`) 구조<br> - 10-회의록상세조회.html과 100% 동일한 HTML 구조 적용<br>- **CSS 스타일 추가**: 페이지 하단 `<style>` 블록에 완전한 Todo 카드 스타일 추가<br> - `.todo-card`: 카드 기본 스타일 (padding, border, shadow, hover 효과)<br> - `.todo-checkbox`: 24px 체크박스 (border-radius 6px, checked 시 success 색상)<br> - `.todo-badges`: D-day 배지 + 우선순위 배지 컨테이너<br> - `.todo-title`: font-body, regular 스타일 제목<br> - `.todo-meta-row`: 담당자 + 마감일 메타 정보<br> - `.todo-actions`: 절대 위치 (top-right) 편집 버튼<br> - `.icon-btn`: 32px 아이콘 버튼, 호버 시 scale(1.1) 효과<br> - `.completed` 상태: opacity 0.5, 취소선, gray 배경<br>- **JavaScript 함수 추가**: `toggleTodoComplete(todoId, isChecked)` 구현<br> - 완료 처리: 확인 다이얼로그 → .completed 클래스 추가 → 성공 토스트<br> - 미완료 처리: 확인 다이얼로그 → .completed 클래스 제거 → 정보 토스트<br> - 사용자 취소 시: 체크박스 상태 원복<br>- **샘플 데이터 업데이트**: 3개 Todo 카드에 D-day 배지 추가<br> - Todo 1: D-2 (badge-warning) + 높음<br> - Todo 2: D-7 (badge-primary) + 보통<br> - Todo 3: D-day (badge-error) + 높음<br>- **프로토타입**: design/uiux/prototype/05-회의진행.html 수정 (~120줄 추가)<br>- **스타일 가이드**: design/uiux/style-guide.md v1.2.2 (변경 이력 추가)<br>- **완전한 일관성**: 05-회의진행 ≡ 10-회의록상세조회 ≡ 09-Todo관리 (3개 화면 Todo 카드 100% 통일) |
| 1.4.13 | 2025-10-23 | 강지수 | 05-회의진행 화면 D-day 배지 제거 (회의 중 Todo는 마감일 미확정)<br>- **정책 변경**: 회의 진행 중 Todo는 마감일이 확정되지 않았으므로 D-day 배지 숨김<br> - 회의 중 작성되는 Todo의 마감일은 임시 값<br> - 회의 종료 후 회의록 확정 시 마감일도 함께 확정<br>- **Todo 카드 배지 수정**: 우선순위 배지만 표시<br> - Todo 1: 높음 (D-day 배지 제거)<br> - Todo 2: 보통 (D-day 배지 제거)<br> - Todo 3: 높음 (D-day 배지 제거)<br>- **마감일 표시 간소화**: "2025-10-23 마감" → "마감: 10/23"<br> - 연도 제거로 가독성 향상<br> - 짧은 형식으로 카드 공간 효율 개선<br>- **다른 화면 비교**:<br> - 09-Todo관리: D-day 배지 표시 (확정된 회의록의 Todo)<br> - 10-회의록상세조회: D-day 배지 표시 (확정 완료된 회의록)<br> - 05-회의진행: D-day 배지 숨김 (진행 중, 마감일 미확정)<br>- **프로토타입**: design/uiux/prototype/05-회의진행.html 수정<br>- **스타일 가이드**: design/uiux/style-guide.md v1.2.3 (변경 이력 추가) |
| 1.4.14 | 2025-10-24 | 이미준 | 12-회의록목록조회 화면 데이터 아키텍처 문서화<br>- **데이터 아키텍처 섹션 추가**: 데이터/뷰 레이어 분리 구조 설명<br> - 데이터 레이어: common.js → SAMPLE_MINUTES 배열 (30개 샘플)<br> - 뷰 레이어: 12-회의록목록조회.html → renderMeetings(), createMeetingCard() 함수<br> - 렌더링 방식: 동적 렌더링, 초기 10개 표시, "10개 더보기" 버튼으로 추가 로딩<br>- **정렬 옵션 레이블 변경**: "최신순" → "최근수정순", "회의일시순" → "최근회의순"<br>- **페이지네이션 기능 문서화**: 초기 10개 표시, "10개 더보기" 버튼 기능 설명<br>- **샘플 데이터 분포 명시**: 총 30개 (작성중 13개, 확정완료 17개)<br>- **프로토타입 파일 경로 추가**: design/uiux/prototype/12-회의록목록조회.html<br>- **스타일 가이드 버전 동기화**: v1.2.4 |
| 1.4.15 | 2025-10-24 | 이미준 | 06-검증완료 화면 삭제 (유저스토리 v2.1.2 변경사항 반영)<br>- **화면 삭제**: 06-검증완료 화면 전체 삭제<br> - 안건별 검증 기능이 11-회의록수정 화면으로 통합됨<br> - 섹션별 검증 방식에서 안건별 검증 방식으로 변경 (유저스토리 UFR-COLLAB-030 → 안건 기반 구조로 전환)<br>- **유저스토리 매핑 업데이트**:<br> - Collaboration 서비스: UFR-COLLAB-010 ~ UFR-COLLAB-030 → UFR-COLLAB-010 ~ UFR-COLLAB-020로 변경<br> - 프로토타입 화면 목록 테이블에서 06-검증완료 행 제거<br>- **화면 번호 유지**: 다른 화면 번호는 변경하지 않음 (프로토타입 파일명 유지)<br> - 07-회의종료, 09-Todo관리, 10-회의록상세조회, 11-회의록수정, 12-회의록목록조회 번호 유지<br>- **변경 이력**: 과거 버전의 UFR-COLLAB-030 언급은 역사적 맥락으로 유지 |
| 1.4.16 | 2025-10-24 | 이미준 | 사용자 역할 용어 통일 (유저스토리 v2.1.2 반영)<br>- **용어 정의 명확화**: "회의 생성자"와 "회의 참석자" 용어로 통일<br> - 설계 목표: "회의록 작성자" → "회의 참석자"로 수정<br>- **화면별 권한 정보 추가**:<br> - 03-회의예약: 모든 사용자 (예약 생성 시 자동으로 회의 생성자가 됨)<br> - 04-템플릿선택: 회의 생성자 전용<br> - 05-회의진행: 회의 시작/종료는 회의 생성자 전용, 회의록 편집은 모든 참석자<br> - 07-회의종료: 회의 생성자 전용<br> - 09-Todo관리: 모든 회의 참석자 (본인이 담당자인 Todo만 조회/수정 가능)<br> - 10-회의록상세조회: 모든 회의 참석자 (조회 전용)<br> - 11-회의록수정: 검증완료 전(모든 참석자), 검증완료 후(회의 생성자만) - 기존 권한 제어 유지<br> - 12-회의록목록조회: 모든 회의 참석자 (본인이 참석한 회의록만 조회)<br>- **스타일 가이드 동기화**: design/uiux/style-guide.md v1.2.5 (용어 정의 섹션 추가)<br>- **통일성 달성**: 유저스토리, 화면설계서, 스타일 가이드 간 용어 완전 통일 |
---