프로토타입 UI 개선 및 문서 업데이트

회의록 수정 화면 UI/UX 개선 (유저스토리 v2.4.0 반영)
- AI 재생성 버튼 스타일 통일 (btn-secondary → btn-primary)
- 안건별 검증완료 UI 단순화
  - 참석자: 체크박스만 표시
  - 생성자: 검증완료 시 잠금해제 버튼 표시
- .creator-only CSS 클래스 추가 (역할 기반 UI 제어)

관련 파일:
- design/uiux/prototype/11-회의록수정.html
- design/uiux/uiux.md (v1.5.2 변경 이력 업데이트)
- design/userstory.md (v2.4.0 문서 이력 업데이트)

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

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
yabo0812
2025-10-27 15:31:18 +09:00
parent 0e700d5b88
commit 5c9a4c9fbd
3 changed files with 121 additions and 149 deletions
+49 -71
View File
@@ -7,12 +7,14 @@
<link rel="stylesheet" href="common.css">
<style>
/*
MVP 스코프 축소 v1.5.1 적용됨:
MVP 스코프 축소 v1.5.2 적용됨:
- ❌ 실시간 협업 표시 ("편집 중" 표시 제거)
- ❌ Todo 편집 기능 제거 (단순 조회만 가능)
- ❌ 검증률 표시 및 최종 확정 버튼 제거
- ✅ 안건별 검증 완료 체크박스 사용
- ✅ Last Write Wins (LWW) 정책 적용
- ✅ AI 요약 기능 통합: "AI 상세 요약" → "AI 요약"으로 명칭 변경
- ✅ AI 재생성 버튼: 텍스트 편집 영역 내용 기반으로 한줄 요약 재생성
*/
/* 페이지별 커스텀 스타일만 유지 */
@@ -110,32 +112,8 @@
gap: var(--space-xs);
}
/* AI 한줄 요약 (읽기 전용, UFR-AI-036) */
.ai-summary-oneline {
background: var(--gray-50);
border-left: 4px solid var(--primary);
border-radius: var(--radius-md);
padding: var(--space-sm) var(--space-md);
margin-bottom: var(--space-md);
display: flex;
align-items: center;
gap: var(--space-sm);
}
.ai-summary-oneline .lock-icon {
font-size: 18px;
color: var(--gray-500);
flex-shrink: 0;
}
.ai-summary-oneline .summary-text {
font-size: var(--font-small);
color: var(--gray-700);
font-weight: var(--font-weight-medium);
flex: 1;
min-width: 0;
}
/* AI 요약 편집 영역 (UFR-AI-036) */
/* 헤더, textarea, footer 스타일은 common.css 사용 */
/* AI 요약 편집 Footer (common.css에 없는 부분) */
.ai-summary-footer {
display: flex;
@@ -254,6 +232,19 @@
gap: var(--space-sm);
}
/* 회의 생성자 전용 UI 표시 제어 */
.creator-only {
display: flex; /* 기본: 회의 생성자 환경 */
}
.agenda-verification:not([data-is-creator="true"]) .creator-only {
display: none; /* 참석자 환경에서는 숨김 */
}
.agenda-verification:not(.verified) .creator-only {
display: none; /* 검증 안 된 경우 버튼 숨김 */
}
/* 읽기 전용 표시 */
.readonly-badge {
display: inline-flex;
@@ -404,23 +395,17 @@
</div>
</div>
<!-- AI 한줄 요약 (읽기 전용, UFR-AI-036) -->
<div class="ai-summary-oneline">
<span class="lock-icon">🔒</span>
<span class="summary-text">타겟 고객을 20-30대로 설정, UI/UX 개선 집중</span>
</div>
<!-- AI 상세 요약 편집 -->
<!-- AI 요약 편집 (UFR-AI-036) -->
<div class="ai-summary-edit">
<div class="ai-summary-header">
<span class="ai-summary-label">💡 AI 상세 요약</span>
<button class="btn-secondary btn-sm" onclick="regenerateSummary(1)">AI 재생성</button>
<span class="ai-summary-label">💡 AI 요약</span>
<button class="btn-primary btn-sm" onclick="regenerateSummary(1)">AI 재생성</button>
</div>
<textarea
class="ai-summary-textarea"
placeholder="AI 요약을 입력하거나 수정하세요"
readonly
>신제품은 AI 기반 회의록 자동화 서비스로 결정. 타겟은 중소기업 및 스타트업이며, 주요 기능은 음성인식, AI 요약, Todo 추출입니다. 경쟁사 대비 차별점은 실시간 검증 및 협업 기능입니다.</textarea>
>타겟 고객을 20-30대로 설정, UI/UX 개선 집중</textarea>
<div class="ai-summary-footer">
<span class="ai-summary-time">마지막 수정: 1시간 전</span>
</div>
@@ -475,16 +460,18 @@
</div>
</div>
<!-- 안건별 검증 (회의 생성자 권한) -->
<div class="agenda-verification verified" id="verify-agenda-1">
<!-- 안건별 검증 (UFR-COLLAB-030) -->
<!-- 참석자: 체크박스만 표시 (검증완료 시 읽기 전용) -->
<!-- 생성자: 검증완료 시 "잠금 해제" 버튼 표시 -->
<div class="agenda-verification verified" id="verify-agenda-1" data-is-creator="true">
<input type="checkbox" class="checkbox" id="verify-1" checked disabled>
<div class="verification-label">
<label for="verify-1">
<span class="font-medium">검증 완료</span>
<span class="text-caption text-muted"> (잠금됨 · 회의 생성자만 수정 가능)</span>
</label>
</div>
<div class="verification-actions">
<!-- 회의 생성자만 보이는 잠금 해제 버튼 (검증완료 시에만 표시) -->
<div class="verification-actions creator-only">
<button class="btn btn-secondary btn-sm" onclick="unlockAgendaVerification(1)">🔓 잠금 해제</button>
</div>
</div>
@@ -501,23 +488,17 @@
</div>
</div>
<!-- AI 한줄 요약 (읽기 전용, UFR-AI-036) -->
<div class="ai-summary-oneline">
<span class="lock-icon">🔒</span>
<span class="summary-text">개발 기간 3개월, 백엔드 2명/프론트 2명/AI 1명 투입</span>
</div>
<!-- AI 상세 요약 편집 -->
<!-- AI 요약 편집 (UFR-AI-036) -->
<div class="ai-summary-edit">
<div class="ai-summary-header">
<span class="ai-summary-label">💡 AI 상세 요약</span>
<button class="btn-secondary btn-sm" onclick="regenerateSummary(2)">AI 재생성</button>
<span class="ai-summary-label">💡 AI 요약</span>
<button class="btn-primary btn-sm" onclick="regenerateSummary(2)">AI 재생성</button>
</div>
<textarea
class="ai-summary-textarea"
placeholder="AI 요약을 입력하거나 수정하세요"
readonly
>개발 기간 3개월로 설정. 백엔드 2명, 프론트 2명, AI 엔지니어 1명 투입. 주간 스프린트로 진행하며, 2주마다 베타 테스트 실시.</textarea>
>개발 기간 3개월, 백엔드 2명/프론트 2명/AI 1명 투입</textarea>
<div class="ai-summary-footer">
<span class="ai-summary-time">생성: 2025-10-25 16:32</span>
</div>
@@ -556,16 +537,18 @@
</div>
</div>
<!-- 안건별 검증 (회의 생성자 권한) -->
<div class="agenda-verification verified" id="verify-agenda-2">
<!-- 안건별 검증 (UFR-COLLAB-030) -->
<!-- 참석자: 체크박스만 표시 (검증완료 시 읽기 전용) -->
<!-- 생성자: 검증완료 시 "잠금 해제" 버튼 표시 -->
<div class="agenda-verification verified" id="verify-agenda-2" data-is-creator="true">
<input type="checkbox" class="checkbox" id="verify-2" checked disabled>
<div class="verification-label">
<label for="verify-2">
<span class="font-medium">검증 완료</span>
<span class="text-caption text-muted"> (잠금됨 · 회의 생성자만 수정 가능)</span>
</label>
</div>
<div class="verification-actions">
<!-- 회의 생성자만 보이는 잠금 해제 버튼 (검증완료 시에만 표시) -->
<div class="verification-actions creator-only">
<button class="btn btn-secondary btn-sm" onclick="unlockAgendaVerification(2)">🔓 잠금 해제</button>
</div>
</div>
@@ -582,23 +565,17 @@
</div>
</div>
<!-- AI 한줄 요약 (읽기 전용, UFR-AI-036) -->
<div class="ai-summary-oneline">
<span class="lock-icon">🔒</span>
<span class="summary-text">프리 런칭 캠페인, LinkedIn 및 스타트업 커뮤니티 집중</span>
</div>
<!-- AI 상세 요약 편집 -->
<!-- AI 요약 편집 (UFR-AI-036) -->
<div class="ai-summary-edit">
<div class="ai-summary-header">
<span class="ai-summary-label">💡 AI 상세 요약</span>
<button class="btn-secondary btn-sm" onclick="regenerateSummary(3)">AI 재생성</button>
<span class="ai-summary-label">💡 AI 요약</span>
<button class="btn-primary btn-sm" onclick="regenerateSummary(3)">AI 재생성</button>
</div>
<textarea
class="ai-summary-textarea"
placeholder="AI 요약을 입력하거나 수정하세요"
readonly
>베타 출시 전 프리 런칭 캠페인 진행. 주요 채널은 LinkedIn 및 스타트업 커뮤니티. 초기 100팀 무료 제공 후 유료 전환 유도.</textarea>
>프리 런칭 캠페인, LinkedIn 및 스타트업 커뮤니티 집중</textarea>
<div class="ai-summary-footer">
<span class="ai-summary-time">생성: 2025-10-25 16:35</span>
</div>
@@ -633,15 +610,15 @@
</div>
<!-- 안건별 검증 (회의 생성자 권한) -->
<div class="agenda-verification verified" id="verify-agenda-3">
<div class="agenda-verification verified" id="verify-agenda-3" data-is-creator="true">
<input type="checkbox" class="checkbox" id="verify-3" checked disabled>
<div class="verification-label">
<label for="verify-3">
<span class="font-medium">검증 완료</span>
<span class="text-caption text-muted"> (잠금됨 · 회의 생성자만 수정 가능)</span>
</label>
</div>
<div class="verification-actions">
<!-- 회의 생성자만 보이는 잠금 해제 버튼 (검증완료 시에만 표시) -->
<div class="verification-actions creator-only">
<button class="btn btn-secondary btn-sm" onclick="unlockAgendaVerification(3)">🔓 잠금 해제</button>
</div>
</div>
@@ -752,12 +729,13 @@
}, 1000);
}
// AI 요약 재생성
// AI 한줄 요약 재생성 (텍스트 편집 영역 내용 기반, UFR-AI-036)
function regenerateSummary(agendaId) {
showToast('AI 요약을 생성 중입니다...', 'info');
showToast('AI 요약을 생성 중입니다...', 'info');
setTimeout(() => {
showToast('AI 요약이 생성되었습니다', 'success');
showToast('생성되었습니다', 'success');
// 재생성된 한줄 요약은 회의록 상세조회 화면의 대시보드 및 회의록 탭에 즉시 반영됨
markAsUnsaved();
}, 2000);
}
+26 -31
View File
@@ -4,7 +4,7 @@
- **작성일**: 2025-10-21
- **최종 수정일**: 2025-10-27
- **작성자**: 이미준 (서비스 기획자)
- **버전**: 1.5.1
- **버전**: 1.5.2
- **설계 철학**: Mobile First Design
---
@@ -1407,34 +1407,33 @@ graph TD
- **검증완료 전**: 모든 참석자가 수정 가능
- **검증완료 후**: 회의 생성자만 수정 가능 (참석자는 "수정" 버튼 비활성화)
#### 주요 기능 (MVP 스코프 축소 v1.5.0)
#### 주요 기능 (MVP 스코프 축소 v1.5.2)
1. 회의 기본 정보 표시 및 수정
- 회의 제목: 수정 가능
- 회의 일시/장소: 읽기 전용 (회의 예약 화면에서만 변경 가능)
- 참석자 관리: 회의 생성자만 추가/삭제 가능
2. **회의록 내용 수정 (안건별)** - 용어 변경: 섹션 → 안건
3. **AI 한줄 요약 표시 (안건별, UFR-AI-036)**
- 편집 불가능한 AI 한줄 요약 (30자 이내)
- 각 안건 최상단에 표시
- **재생성 제한**: AI 한줄 요약만 재생성 불가 (회의 종료 시 1회만 생성)
4. **AI 상세 요약 수정 (안건별)**
- 직접 수정 가능
- "AI 재생성" 버튼으로 재생성 가능 (한줄 요약은 재생성 안 됨)
5. **참고자료 편집** (추가/제거)
6. **Todo 단순 조회** (제목 + 담당자 + 마감일만 표시)
7. **안건별 검증 완료 체크박스 (UFR-COLLAB-020)**
3. **AI 요약 표시 및 재생성 (안건별, UFR-AI-036)**
- AI 한줄 요약 표시 (30자 이내, 읽기 전용)
- 텍스트 편집 영역에서 안건 내용 수정 가능
- "AI 재생성" 버튼: 텍스트 편집 영역 내용 기반으로 한줄 요약만 재생성 (2-5초 처리)
- 재생성된 한줄 요약은 회의록 상세조회 화면의 대시보드 및 회의록 탭에 즉시 반영
4. **참고자료 편집** (추가/제거)
5. **Todo 단순 조회** (제목 + 담당자 + 마감일만 표시)
6. **안건별 검증 완료 체크박스 (UFR-COLLAB-020)**
- 회의 생성자: 검증 완료 체크박스 활성화, 잠금 해제 후 수정 가능
- 참석자: 검증완료 안건은 읽기 전용
8. 자동 저장 (30초 간격)
9. 수정 이력 관리
10. 상태 변경 (검증완료 → 작성중으로 자동 변경)
7. 자동 저장 (30초 간격)
8. 수정 이력 관리
9. 상태 변경 (검증완료 → 작성중으로 자동 변경)
**변경사항 (v1.5.0)**:
**변경사항 (v1.5.2)**:
- ✅ 명칭 변경: "AI 상세 요약" → "AI 요약"
- ✅ 기능 통합: AI 재생성 버튼 클릭 시 텍스트 편집 영역 내용 기반으로 한줄 요약 생성 (UFR-AI-036)
- ❌ 제거: AI 상세 요약 및 한줄 요약 분리 표시 (한줄 요약만 표시)
- ❌ 제거: 실시간 협업 표시 ("편집 중" 표시 제거)
- ❌ 제거: Todo 편집 기능 (체크박스, 담당자/마감일/우선순위 변경, 추가/삭제)
- ❌ 제거: 검증률 표시 및 최종 확정 버튼
- ✅ 변경: 안건별 검증 완료 체크박스로 충돌 방지
- ✅ 변경: AI 한줄 요약 재생성 불가 (회의 종료 시 1회만 생성)
- ✅ 정책: Last Write Wins (마지막 저장 우선) 적용
#### UI 구성요소
@@ -1464,21 +1463,16 @@ graph TD
- 안건 제목 (H4, Bold)
- 검증 상태 배지 (검증완료/미검증)
- ❌ 제거: "편집 중" 표시 (실시간 협업 기능 제거)
- **AI 한줄 요약** (편집 불가, UFR-AI-036)
- 🔒 아이콘 + 30자 이내 한줄 요약
- 읽기 전용 (회색 배경, 민트 그린 좌측 액센트 라인)
- **AI 요약** (읽기 전용, UFR-AI-036)
- 💡 "AI 요약" 레이블
- AI 한줄 요약 표시 (30자 이내)
- 읽기 전용 영역 (회색 배경, 민트 그린 좌측 액센트 라인)
- 호버 시: "이 내용은 편집할 수 없습니다" 툴팁
- ❌ 제거: "AI 재생성" 버튼 (한줄 요약은 회의 종료 시 1회만 생성)
- **AI 상세 요약 편집 영역**
- 💡 "AI 상세 요약" 레이블
- 요약 텍스트 편집 필드 (textarea)
- "AI 재생성" 버튼 (상세 요약만 재생성 가능)
- **텍스트 편집 영역**
- 안건 내용 편집 필드 (textarea)
- 논의 주제, 발언자별 의견, 결정 사항, 보류 사항 등 자유 작성
- "AI 재생성" 버튼: 텍스트 편집 영역 내용 기반으로 AI 요약의 한줄 요약 재생성
- 마지막 수정 시간 표시
- 편집 가능한 텍스트 영역
- 논의 주제
- 발언자별 의견
- 결정 사항
- 보류 사항
- **참고자료 편집 영역**
- 기존 참고자료 목록 (제거 버튼 포함)
- "참고자료 추가" 버튼
@@ -2137,6 +2131,7 @@ graph TD
| 1.4.18 | 2025-10-24 | 강지수 | 05-회의진행 실시간 주요 메모 추천 기능 명확화 (유저스토리 v2.1.1)<br>- **AI 제안 탭 기능 상세화**: 실시간 주요 메모 추천 기능 명시 추가<br> - UFR-MEET-030: 실시간 AI 주요 메모 추천<br> - 음성→텍스트 변환 후 AI가 실시간 분석<br> - **중요한 내용으로 판단된 경우에만** 주요 메모 항목 추천<br> - 추천 빈도는 중요 내용 발생에 따라 가변적 (3-5초 고정 간격 아님)<br> - 각 추천 항목에 "주요 메모에 추가" 버튼 제공<br> - 실시간 업데이트: 새로운 추천은 상단에 표시<br>- **프로토타입 확인**: 05-회의진행.html의 AI 제안 탭이 실시간 주요 메모 추천 기능을 포함하고 있음을 확인<br>- **참조**: design/uiux/요구사항설계검토-report-V1.2.md (실시간 주요 메모 추천 명시 부족 개선) |
| 1.4.19 | 2025-10-24 | 강지수 | 05-회의진행 화면 설계서 프로토타입 기준 전면 수정<br>- **레이아웃 구조 변경**: "2열 구조" 표현 제거, "메인 콘텐츠 영역: 정보 패널 (탭 구조)"로 단순화<br> - 텍스트 편집 영역 관련 내용 모두 제거 (왼쪽 영역, 에디터 툴바, contentEditable 등)<br> - 현재 프로토타입은 헤더 + 탭 콘텐츠 구조만 보유<br>- **반응형 디자인 명확화**: Mobile/Desktop 모두 동일한 구조에 너비만 반응형<br> - "2열 구조를 1열로 전환", "바텀시트" 표현 제거<br> - Mobile: 전체 너비 사용, Desktop: 최대 너비 제한 없이 반응형<br>- **AI 제안 탭 기능 명확화**: 논의항목/결정사항 구분 제거<br> - "논의항목/결정사항 등의 구분 없이 중요 내용을 주요 메모로 제안" 명시<br> - AI는 단순히 중요한 내용을 주요 메모 항목으로 제안하는 역할만 수행<br>- **용어 사전 검색 기능 추가**: 검색 입력창 + 검색 버튼<br> - Enter 키 지원, 용어명과 정의 모두 검색<br> - 검색 동작 상세 설명: 일치하는 용어만 표시, 하이라이트 효과, 결과 없으면 전체 목록 표시<br>- **인터랙션 섹션 정리**: 텍스트 편집, 툴바 사용, 충돌 감지 등 편집 관련 내용 모두 제거<br> - 탭 전환, 회의 종료, 실시간 업데이트만 유지<br> - 실시간 업데이트 항목을 현재 화면에 맞게 수정 (AI 제안, 용어 사전, 관련 회의록)<br>- **데이터 요구사항 업데이트**: 사용자 편집 내용 제거, 참석자 초대 이메일 추가<br> - AI 제안을 "주요 메모 항목 제안"으로 명확히 표현<br>- **에러 처리 업데이트**: 편집 충돌 에러 제거, 용어 사전 로드 실패/참석자 초대 실패 추가<br>- **주요 기능 목록 정리**: 실시간 협업/수동 편집 제거, AI 주요 메모 제안/참석자 관리 추가<br>- **권한 항목 수정**: "회의록 편집: 모든 참석자" → "참석자 초대: 모든 참석자"<br>- **프로토타입 기준 반영**: 05-회의진행.html 실제 구현 상태 100% 반영 |
| 1.4.20 | 2025-10-25 | 이미준, 강지수 | 유저스토리 v2.3.0 반영<br>- 회의 종료 화면 정책 명확화 (확인 전용, 바로 최종 확정 옵션 상세화)<br>- UFR-MEET-050: 최종 확정 2가지 시나리오 설명 추가<br>- UFR-COLLAB-020: 안건 기반 충돌 해결 메커니즘 상세 추가<br>- 실시간 협업 충돌 방지 정책 강화 |
| 1.5.2 | 2025-10-27 | 강지수 | AI 요약 기능 통합 및 단순화 (유저스토리 v2.4.1 반영)<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.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로 인해) |
---