mirror of https://github.com/hwanny1128/HGZero.git synced 2025-12-06 18:26:23 +00:00

- 회의록 작성 및 공유 개선 서비스 UI/UX 설계서 작성
- 주요 화면 구성 및 사용자 플로우 정의
- 디자인 원칙 및 스타일 가이드 포함

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

Co-Authored-By: Claude <noreply@anthropic.com>

2025-10-15 20:48:42 +09:00

46 KiB

Raw Blame History

회의록 작성 및 공유 개선 서비스 - UI/UX 설계서

버전: 1.0 작성일: 2025-10-15 작성자: 유진 (Frontend Developer)

1. 프로토타입 화면 목록

1.1 회의 전 (Pre-Meeting)

화면명	서비스	목적	관련 유저스토리	중요도
01-로그인	User	사용자 인증 및 시스템 접근	UFR-USER-010	필수
02-대시보드	Meeting	전체 현황 파악 및 빠른 액션	-	필수
03-회의예약	Meeting	회의 정보 입력 및 참석자 초대	UFR-MEET-010	필수
04-템플릿선택	Meeting	회의 유형에 맞는 템플릿 선택	UFR-MEET-020	필수

1.2 회의 중 (During-Meeting)

화면명	서비스	목적	관련 유저스토리	중요도
05-회의진행	Meeting + STT + AI + Collaboration + RAG	실시간 회의록 작성 및 협업	UFR-MEET-030, UFR-STT-010, UFR-STT-020, UFR-AI-010, UFR-COLLAB-010, UFR-RAG-010, UFR-RAG-020	핵심
06-검증완료	Collaboration	참석자별 회의록 섹션 검증	UFR-COLLAB-030	필수

1.3 회의 후 (Post-Meeting)

화면명	서비스	목적	관련 유저스토리	중요도
07-회의종료	Meeting + AI	회의 통계 및 최종 확정	UFR-MEET-040, UFR-MEET-050, UFR-AI-020	필수
08-회의록공유	Meeting + Notification	회의록 공유 및 배포	UFR-MEET-060, UFR-NOTI-010	필수
09-Todo관리	Todo + Calendar	Todo 할당 및 진행 상황 추적	UFR-TODO-010, UFR-TODO-020, UFR-TODO-030, UFR-CAL-010	필수

2. 화면 간 사용자 플로우

2.1 메인 플로우 다이어그램

[회의 전]
01-로그인 → 02-대시보드 → 03-회의예약 → 04-템플릿선택

[회의 중]
02-대시보드 → 05-회의진행 (실시간 작성/동기화/용어 설명) → 06-검증완료

[회의 후]
06-검증완료 → 07-회의종료 (통계 확인) → 08-회의록공유 → 09-Todo관리

2.2 주요 사용자 시나리오

시나리오 1: 신규 회의 진행 (Full Flow)

01-로그인
  ↓ (인증 성공)
02-대시보드
  ↓ (새 회의 예약 버튼 클릭)
03-회의예약
  ↓ (회의 정보 입력 완료)
04-템플릿선택
  ↓ (템플릿 선택 완료, 회의 시작 시간 도래)
05-회의진행
  ↓ (AI 자동 작성, 참석자 실시간 편집)
06-검증완료
  ↓ (모든 섹션 검증 완료)
07-회의종료
  ↓ (최종 확정 버튼 클릭)
08-회의록공유
  ↓ (공유 대상 설정 및 배포)
09-Todo관리
  ↓ (Todo 확인 및 상태 업데이트)
02-대시보드 (완료)

시나리오 2: 과거 회의록 조회 및 수정

02-대시보드
  ↓ (최근 회의록 카드 클릭)
05-회의진행 (읽기/편집 모드)
  ↓ (수정 사항 저장)
02-대시보드 (돌아가기)

시나리오 3: Todo 관리

02-대시보드
  ↓ (대기 중인 Todo 위젯 클릭)
09-Todo관리
  ↓ (진행률 업데이트, 완료 처리)
02-대시보드 (돌아가기)

시나리오 4: 알림을 통한 회의록 접근

알림 수신 (이메일/슬랙/인앱)
  ↓ (회의록 링크 클릭)
01-로그인 (미로그인 시)
  ↓
05-회의진행 (검토 모드)
  ↓ (댓글 작성, 수정 제안)
06-검증완료 (검증 버튼 클릭)

2.3 서브 플로우

빠른 회의 시작: 02-대시보드 → 05-회의진행 (예약 없이 즉시 시작)
템플릿 재선택: 05-회의진행 → 04-템플릿선택 → 05-회의진행
Todo 즉시 생성: 05-회의진행 → 09-Todo관리 (수동 Todo 추가)
알림 설정: 02-대시보드 → 설정 → 알림 설정

3. 화면별 상세 설계

3.1 01-로그인 화면

개요

목적: 사용자 인증 및 시스템 접근 권한 부여
관련 유저스토리: UFR-USER-010
비즈니스 중요도: 필수 (보안 및 권한 관리)

주요 기능

이메일/비밀번호 로그인
JWT 토큰 기반 인증
소셜 로그인 (Google, Microsoft)
비밀번호 찾기
Remember Me (자동 로그인)

UI 구성요소

레이아웃

중앙 정렬 카드 형식 (최대 너비 400px)
좌측/상단: 서비스 로고 및 캐치프레이즈
배경: 그라디언트 또는 일러스트레이션

컴포넌트

로고 및 서비스명
이메일 입력 필드 (type="email", required)
비밀번호 입력 필드 (type="password", required, 토글 표시/숨김 아이콘)
로그인 버튼 (Primary CTA)
소셜 로그인 버튼 (Google, Microsoft 아이콘 버튼)
Remember Me 체크박스
비밀번호 찾기 링크
회원가입 링크 (시스템 관리자만 가능한 경우 숨김)

인터랙션

사용자 액션	시스템 반응
이메일 입력	실시간 이메일 형식 검증 (유효하지 않으면 에러 메시지)
비밀번호 입력	입력 시 마스킹, 토글 아이콘으로 표시/숨김 가능
로그인 버튼 클릭	로딩 스피너 표시 → JWT 토큰 발급 → 02-대시보드로 이동
소셜 로그인 버튼 클릭	OAuth 팝업 또는 리다이렉트 → 인증 성공 시 02-대시보드로 이동
인증 실패	에러 메시지 표시 ("이메일 또는 비밀번호가 일치하지 않습니다")
비밀번호 찾기 클릭	비밀번호 재설정 이메일 발송 화면으로 이동

데이터 요구사항

입력

이메일 주소 (필수, 최대 100자)
비밀번호 (필수, 최소 8자)

출력

JWT 액세스 토큰
JWT 리프레시 토큰
사용자 정보 (ID, 이름, 이메일, 권한)

에러 처리

네트워크 오류: "서버에 연결할 수 없습니다. 잠시 후 다시 시도해주세요."
인증 실패: "이메일 또는 비밀번호가 일치하지 않습니다."
계정 잠김: "계정이 잠겼습니다. 관리자에게 문의하세요."

3.2 02-대시보드 화면

개요

목적: 전체 현황 파악 및 빠른 액션 제공
관련 유저스토리: 전체 서비스의 진입점
비즈니스 중요도: 필수 (사용자 경험의 출발점)

주요 기능

예정된 회의 목록 표시
최근 회의록 목록 표시
대기 중인 Todo 목록 표시
통계 위젯 (이번 주 회의 수, 완료된 Todo 수)
빠른 액션 버튼 (새 회의 예약, 회의 시작)
검색 및 필터 기능

UI 구성요소

레이아웃

전역 헤더 (로고, 검색, 알림, 프로필)
좌측 사이드바 (네비게이션 메뉴)
메인 영역: 그리드 레이아웃 (2x2 또는 3x2)

위젯 구성

예정된 회의 위젯
- 타이틀: "예정된 회의"
- 리스트: 회의 제목, 날짜/시간, 참석자 수 (최대 5개)
- 빠른 액션: "회의 시작" 버튼 (회의 시간 도래 시 활성화)
- 더보기: "모든 예정된 회의 보기"
최근 회의록 위젯
- 타이틀: "최근 회의록"
- 카드 그리드: 썸네일, 제목, 날짜, 참석자 아바타 (최대 6개)
- 상태 배지: "작성 중", "검증 중", "확정됨"
- 클릭 시: 05-회의진행 화면으로 이동
대기 중인 Todo 위젯
- 타이틀: "내가 할 일"
- 리스트: Todo 내용, 마감일, 우선순위 (최대 5개)
- 빠른 액션: 체크박스로 완료 처리
- 더보기: "모든 Todo 보기"
통계 위젯
- 이번 주 회의 수
- 완료된 Todo 비율
- 평균 회의 시간
- 차트: 주간 회의 트렌드

빠른 액션 버튼 (FAB)

우측 하단 고정 위치
주 버튼: "+" 아이콘 (클릭 시 확장)
확장 메뉴: "새 회의 예약", "즉시 회의 시작", "새 Todo 추가"

인터랙션

사용자 액션	시스템 반응
검색 바에 키워드 입력	실시간 자동완성 (회의록 제목, 참석자, 키워드)
예정된 회의 "회의 시작" 클릭	05-회의진행 화면으로 이동 (회의 ID 전달)
최근 회의록 카드 클릭	05-회의진행 화면으로 이동 (읽기/편집 모드)
Todo 체크박스 클릭	즉시 완료 처리 (확인 토스트 메시지)
빠른 액션 "새 회의 예약" 클릭	03-회의예약 화면으로 이동
빠른 액션 "즉시 회의 시작" 클릭	04-템플릿선택 화면으로 이동
알림 아이콘 클릭	알림 드롭다운 표시 (최근 알림 5개)
프로필 아이콘 클릭	프로필 메뉴 표시 (설정, 로그아웃)

데이터 표시 요구사항

예정된 회의

회의 제목, 날짜/시간, 장소, 참석자 수
회의 시작 시간까지 남은 시간 표시 (예: "30분 후")

최근 회의록

회의 제목, 작성일, 참석자 아바타 (최대 3명, 초과 시 "+N")
상태 배지 (색상: 작성 중=노란색, 검증 중=파란색, 확정됨=초록색)

대기 중인 Todo

Todo 내용 (최대 50자, 초과 시 "...")
마감일 (예: "D-3", "오늘", "지남" - 색상 구분)
우선순위 아이콘 (높음=빨간색 느낌표, 보통=회색, 낮음=숨김)

3.3 03-회의예약 화면

개요

목적: 회의 정보 입력 및 참석자 초대
관련 유저스토리: UFR-MEET-010
비즈니스 중요도: 필수 (회의 프로세스의 시작)

주요 기능

회의 기본 정보 입력 (제목, 날짜/시간, 장소)
참석자 초대 (이메일 자동완성)
회의 설명 입력 (선택)
알림 설정 (30분 전, 1시간 전)
외부 캘린더 연동 (Google Calendar, Outlook)
반복 회의 설정 (선택)

UI 구성요소

레이아웃

중앙 정렬 폼 (최대 너비 800px)
좌측: 입력 폼
우측: 미리보기 카드 (입력 내용 실시간 반영)

폼 컴포넌트

회의 제목
- 텍스트 입력 (최대 100자, 필수)
- 플레이스홀더: "예: 2025년 1분기 전략 회의"
날짜 및 시간
- 날짜 피커 (캘린더 UI)
- 시작 시간/종료 시간 (드롭다운, 15분 단위)
- 종료 시간 자동 계산 (시작 시간 + 1시간)
장소
- 텍스트 입력 (최대 200자, 선택)
- 또는 "온라인 회의" 체크박스 (Zoom, Teams 링크 입력)
참석자
- 이메일 입력 필드 (자동완성)
- 태그 형태로 추가된 참석자 표시
- 삭제 아이콘 (X)
- 최소 1명 필수
회의 설명
- 텍스트 에리어 (최대 1000자, 선택)
- 플레이스홀더: "회의 목적 및 안건을 입력하세요"
알림 설정
- 체크박스: "회의 30분 전 알림", "회의 1시간 전 알림"
반복 설정
- 드롭다운: "반복 안 함", "매일", "매주", "매월"
- 반복 종료 날짜 선택 (반복 설정 시 표시)
캘린더 연동
- 체크박스: "Google Calendar에 추가", "Outlook에 추가"

액션 버튼

취소 (Secondary)
저장 후 나중에 계속 (Secondary)
다음: 템플릿 선택 (Primary CTA)

인터랙션

사용자 액션	시스템 반응
회의 제목 입력	우측 미리보기 카드에 실시간 반영
날짜/시간 선택	종료 시간 자동 계산 (시작 + 1시간)
참석자 이메일 입력	조직 내 사용자 자동완성 제안
참석자 선택	태그로 추가, 아바타 및 이름 표시
온라인 회의 체크	장소 입력 비활성화, 링크 입력 필드 표시
반복 설정 선택	반복 종료 날짜 선택 필드 표시
다음 버튼 클릭	필수 항목 검증 → 04-템플릿선택 화면으로 이동
필수 항목 미입력 시	해당 필드에 에러 메시지 및 포커스 이동
저장 버튼 클릭	회의 정보 저장 → 02-대시보드로 이동 (토스트 메시지)

데이터 요구사항

입력

회의 제목 (필수, 최대 100자)
날짜 (필수, YYYY-MM-DD)
시작 시간 (필수, HH:MM)
종료 시간 (필수, HH:MM)
장소 (선택, 최대 200자)
참석자 이메일 (필수, 최소 1명, 배열)
회의 설명 (선택, 최대 1000자)
알림 설정 (불리언 배열)
반복 설정 (선택, 열거형)
캘린더 연동 (불리언 배열)

출력

회의 ID (생성된 UUID)
초대 이메일 발송 상태

에러 처리

과거 날짜 선택: "과거 날짜는 선택할 수 없습니다."
종료 시간 < 시작 시간: "종료 시간은 시작 시간보다 늦어야 합니다."
잘못된 이메일 형식: "올바른 이메일 주소를 입력하세요."
참석자 미입력: "최소 1명의 참석자를 추가하세요."

3.4 04-템플릿선택 화면

개요

목적: 회의 유형에 맞는 템플릿 선택 및 커스터마이징
관련 유저스토리: UFR-MEET-020
비즈니스 중요도: 필수 (회의록 구조 표준화)

주요 기능

회의 유형별 템플릿 표시 (일반, 스크럼, 킥오프, 주간)
템플릿 미리보기
템플릿 커스터마이징 (섹션 추가/삭제/순서 변경)
커스텀 템플릿 저장 (나만의 템플릿)
커뮤니티 템플릿 다운로드 (옵션)

UI 구성요소

레이아웃

상단: 진행 표시 바 (회의 예약 → 템플릿 선택 → 회의 진행)
좌측: 템플릿 카테고리 필터
중앙: 템플릿 그리드 (카드 레이아웃)
우측: 선택된 템플릿 미리보기 및 커스터마이징 패널

템플릿 카드

템플릿 이름
간단한 설명
사용 횟수 또는 인기도 표시
"선택" 버튼
"미리보기" 버튼

기본 제공 템플릿

일반 회의
- 참석자, 회의 목적, 안건, 논의 내용, 결정 사항, Todo
스크럼 회의
- 참석자, 어제 한 일, 오늘 할 일, 이슈/블로커
프로젝트 킥오프
- 참석자, 프로젝트 개요, 목표, 일정, 역할 분담, 리스크
주간 회의
- 참석자, 주간 실적, 주요 이슈, 다음 주 계획, 지원 필요 사항

커스터마이징 패널

섹션 리스트 (드래그 앤 드롭으로 순서 변경)
각 섹션:
- 섹션명 편집
- 삭제 아이콘
- 드래그 핸들
"섹션 추가" 버튼
"템플릿 저장" 버튼 (나만의 템플릿으로 저장)

액션 버튼

뒤로 (03-회의예약으로 이동)
템플릿 없이 시작 (빈 회의록)
선택 완료 (Primary CTA)

인터랙션

사용자 액션	시스템 반응
템플릿 카드 클릭	우측 미리보기 패널에 템플릿 구조 표시
미리보기 버튼 클릭	모달로 전체 템플릿 내용 표시
섹션 드래그 앤 드롭	순서 변경 (시각적 피드백)
섹션 삭제 아이콘 클릭	확인 다이얼로그 → 섹션 삭제
섹션 추가 버튼 클릭	섹션명 입력 다이얼로그 → 리스트 하단에 추가
템플릿 저장 버튼 클릭	템플릿명 입력 다이얼로그 → "나만의 템플릿"에 저장
선택 완료 버튼 클릭	템플릿 정보 저장 → 05-회의진행 화면으로 이동
템플릿 없이 시작 클릭	빈 회의록으로 05-회의진행 화면으로 이동

데이터 요구사항

템플릿 데이터 구조

{
  "id": "template_uuid",
  "name": "일반 회의",
  "description": "기본 회의 구조",
  "sections": [
    {
      "id": "section_uuid",
      "name": "참석자",
      "order": 1,
      "required": true
    },
    {
      "id": "section_uuid",
      "name": "논의 내용",
      "order": 2,
      "required": false
    }
  ],
  "usage_count": 123,
  "created_by": "system" // or user_id
}

출력

선택된 템플릿 ID
커스터마이징된 섹션 리스트

3.5 05-회의진행 화면 (핵심)

개요

목적: 실시간 회의록 작성 및 협업의 중심 화면
관련 유저스토리: UFR-MEET-030, UFR-STT-010, UFR-STT-020, UFR-AI-010, UFR-COLLAB-010, UFR-RAG-010, UFR-RAG-020
비즈니스 중요도: 핵심 (서비스의 가장 중요한 화면)

주요 기능

실시간 음성 인식 및 텍스트 변환
AI 회의록 자동 작성 및 실시간 업데이트
실시간 협업 편집 (Google Docs 스타일)
전문용어 자동 감지 및 설명 제공
리치 텍스트 편집 (서식, 목록, 링크 등)
버전 관리 및 변경 이력 추적
댓글 및 제안 기능
섹션별 검증 완료 표시

UI 구성요소

레이아웃 (3단 구조)

좌측 패널 (250px)

회의 정보
- 회의 제목
- 날짜/시간
- 경과 시간 (실시간 타이머)
- 녹음 상태 (녹음 중/일시정지/중지)
참석자 목록
- 아바타 및 이름
- 온라인 상태 (활성/비활성)
- 현재 편집 중인 위치 표시 (색상 코딩)
- 발언 횟수 표시 (옵션)
타임라인
- 시간별 주요 이벤트 표시
- 클릭 시 해당 위치로 스크롤

중앙 패널 (가변, 최소 600px)

툴바
- 서식: 볼드, 이탤릭, 밑줄, 취소선
- 목록: 번호 매기기, 글머리 기호
- 삽입: 링크, 이미지, 표
- 기타: 실행 취소, 다시 실행
리치 텍스트 에디터
- 템플릿 섹션 구조 표시
- 실시간 커서 및 선택 영역 표시 (다른 사용자)
- 전문용어 하이라이트 (파란색 점선 밑줄)
- AI 자동 작성 내용 표시 (연한 회색 배경)
- 변경 사항 하이라이트 (3초간 노란색 배경)
섹션 헤더
- 섹션명 (템플릿에서 정의)
- 검증 완료 체크박스
- 접기/펼치기 아이콘

우측 패널 (350px, 토글 가능)

탭 전환
- AI 제안
- 용어 설명
- 댓글
- 버전 이력
AI 제안 탭
- AI가 자동 생성한 회의록 초안
- "적용" 버튼 (클릭 시 에디터에 삽입)
- "무시" 버튼
- 실시간 업데이트 (3-5초 간격)
용어 설명 탭
- 감지된 전문용어 리스트
- 각 용어 클릭 시 설명 표시
- 설명 출처 (과거 회의록, 사내 문서)
- 피드백 버튼 (도움됨/도움안됨)
댓글 탭
- 댓글 리스트 (시간순)
- 댓글 작성 입력 필드
- 멘션 기능 (@참석자명)
버전 이력 탭
- 버전 리스트 (시간, 작성자)
- 비교 보기
- 특정 버전으로 복원

하단 바 (고정)

좌측: 저장 상태 ("저장됨", "저장 중...", "오류")
중앙: 음성 인식 상태 ("음성 인식 중...", "일시정지")
우측: 액션 버튼
- 녹음 시작/일시정지/중지
- 회의 종료 (Primary CTA)

인터랙션

사용자 액션	시스템 반응
회의 시작 버튼 클릭	녹음 시작 → 음성 인식 활성화 → 타이머 시작
텍스트 입력	실시간 저장 (Debounce 500ms) → WebSocket으로 다른 사용자에게 델타 전송
전문용어 하이라이트 호버	툴팁으로 간단한 설명 표시
전문용어 클릭	우측 패널 "용어 설명" 탭으로 전환 및 상세 설명 표시
AI 제안 "적용" 클릭	AI 제안 내용을 현재 커서 위치에 삽입 (Undo 가능)
섹션 검증 완료 체크	섹션 배경 연한 초록색으로 변경 → 다른 사용자에게 동기화
댓글 작성	댓글 저장 → 관련 참석자에게 알림 발송
음성 인식 일시정지	녹음 중지 → 음성 인식 중지
회의 종료 버튼 클릭	확인 다이얼로그 → 07-회의종료 화면으로 이동
다른 사용자 편집	해당 사용자의 커서 및 선택 영역 표시 (색상으로 구분) → 변경 영역 하이라이트 (3초)
충돌 감지 (동시 수정)	충돌 알림 다이얼로그 → Last Write Wins 또는 수동 병합 선택

데이터 표시 및 입력 요구사항

실시간 동기화 데이터

{
  "type": "edit",
  "user_id": "user_uuid",
  "user_name": "홍길동",
  "user_avatar": "url",
  "timestamp": "2025-10-15T14:32:15Z",
  "delta": {
    "ops": [
      {"retain": 10},
      {"insert": "새로운 내용"}
    ]
  }
}

음성 인식 데이터

{
  "speaker": "홍길동",
  "text": "다음 주까지 보고서를 작성하겠습니다.",
  "timestamp": "2025-10-15T14:32:15Z",
  "confidence": 0.95
}

전문용어 데이터

{
  "term": "ROI",
  "definition": "투자 대비 수익률",
  "detailed_explanation": "투자한 비용 대비 얼마나 많은 수익을 얻었는지...",
  "source": "과거 회의록: 2025년 1분기 전략 회의",
  "confidence": 0.88
}

성능 요구사항

음성 인식 지연 시간: 1초 이내
동기화 지연 시간: 500ms 이내
AI 제안 업데이트 주기: 3-5초
에디터 입력 반응 시간: 16ms (60fps)

에러 처리

음성 인식 오류: "음성 인식 중 오류가 발생했습니다. 다시 시도해주세요."
동기화 실패: "일시적으로 동기화가 중단되었습니다. 재연결 중..."
충돌 감지: "다른 사용자가 동일한 위치를 수정했습니다. 어떻게 하시겠습니까?"

3.6 06-검증완료 화면

개요

목적: 참석자별 회의록 섹션 검증 및 완료 표시
관련 유저스토리: UFR-COLLAB-030
비즈니스 중요도: 필수 (회의록 품질 보장)

주요 기능

섹션별 검증 상태 표시
참석자별 검증 진행률 표시
검증 완료 표시 및 섹션 잠금
미검증 섹션 하이라이트
검증자 정보 표시

UI 구성요소

레이아웃

05-회의진행 화면 내부 모달 또는 사이드 패널

컴포넌트

검증 진행 상황
- 전체 진행률 바 (예: "3/5 섹션 검증 완료")
- 참석자별 검증 진행률
섹션별 검증 리스트
- 섹션명
- 검증 상태: 미검증 / 검증 중 / 검증 완료
- 검증자 아바타 (검증 완료 시)
- 검증 시간
- 잠금 상태 아이콘 (잠김 시)
액션 버튼
- 섹션별 "검증 완료" 버튼
- 섹션 잠금 토글 (검증 완료 시 활성화)
- 모든 섹션 검증 완료 후: "회의 종료" 버튼 (Primary CTA)

인터랙션

사용자 액션	시스템 반응
섹션 "검증 완료" 클릭	검증 상태 업데이트 → 검증자 아바타 표시 → 다른 사용자에게 동기화
섹션 잠금 토글 클릭	해당 섹션 편집 불가 → 배경색 변경 (연한 회색) → 잠금 아이콘 표시
잠긴 섹션 편집 시도	에러 메시지: "검증 완료된 섹션은 편집할 수 없습니다. 잠금을 해제하세요."
모든 섹션 검증 완료	"회의 종료" 버튼 활성화 → 토스트 메시지: "모든 섹션이 검증되었습니다."
회의 종료 버튼 클릭	07-회의종료 화면으로 이동

데이터 요구사항

검증 상태 데이터

{
  "section_id": "section_uuid",
  "status": "completed", // pending, in_progress, completed
  "verified_by": "user_uuid",
  "verified_at": "2025-10-15T14:50:00Z",
  "locked": true
}

3.7 07-회의종료 화면

개요

목적: 회의 통계 확인 및 최종 회의록 확정
관련 유저스토리: UFR-MEET-040, UFR-MEET-050, UFR-AI-020
비즈니스 중요도: 필수 (회의록 완성)

주요 기능

회의 통계 표시 (시간, 참석자 수, 발언 횟수, 키워드)
필수 항목 자동 검사
AI Todo 추출 결과 미리보기
최종 회의록 확정 및 버전 생성
다음 회의 일정 자동 감지 및 캘린더 등록

UI 구성요소

레이아웃

중앙 정렬 대시보드 (최대 너비 1200px)

섹션 구성

회의 통계 대시보드
- 회의 총 시간: 1시간 30분
- 참석자 수: 5명
- 발언 횟수 (화자별):
  - 홍길동: 25회
  - 김철수: 18회
  - ...
- 주요 키워드: 워드 클라우드 또는 태그 클라우드
- 참여도 차트: 발언 시간 비율 (파이 차트)
필수 항목 검사 결과
- 체크리스트 (자동 검사)
  - ✅ 회의 제목 작성됨
  - ✅ 참석자 목록 작성됨
  - ✅ 주요 논의 내용 작성됨
  - ❌ 결정 사항 미작성 (경고 아이콘)
- 누락된 항목 클릭 시: 해당 섹션으로 이동 (05-회의진행 화면)
AI Todo 추출 미리보기
- Todo 리스트 (최대 10개)
- 각 Todo:
  - 내용
  - 담당자 (AI 자동 식별)
  - 마감일 (언급된 경우)
- 수정 버튼 (Todo 수동 편집 모달)
다음 회의 일정 감지
- AI가 감지한 다음 회의 일정 표시
- 예: "다음 회의: 2025년 10월 22일 14:00"
- "캘린더에 추가" 버튼

액션 버튼

뒤로 (05-회의진행 화면으로 이동)
나중에 확정 (저장 후 02-대시보드로 이동)
최종 확정 (Primary CTA)

인터랙션

사용자 액션	시스템 반응
화면 로드	회의 통계 자동 생성 → 필수 항목 자동 검사 → AI Todo 자동 추출
누락된 필수 항목 클릭	05-회의진행 화면으로 이동 (해당 섹션 포커스)
Todo 수정 버튼 클릭	Todo 편집 모달 표시 (내용, 담당자, 마감일 수정 가능)
"캘린더에 추가" 클릭	다음 회의 일정을 캘린더에 자동 등록 (UFR-CAL-010)
최종 확정 버튼 클릭	필수 항목 재검사 → 확정 버전 생성 → 08-회의록공유 화면으로 이동
필수 항목 미작성 시	에러 다이얼로그: "필수 항목이 누락되었습니다. [섹션명]을 작성해주세요."

데이터 요구사항

회의 통계 데이터

{
  "meeting_id": "meeting_uuid",
  "duration": 5400, // 초 (1.5시간)
  "participants": 5,
  "speaker_stats": [
    {"name": "홍길동", "count": 25, "duration": 1200},
    {"name": "김철수", "count": 18, "duration": 900}
  ],
  "keywords": ["ROI", "마케팅", "예산", "분기 목표"]
}

Todo 추출 데이터

[
  {
    "content": "마케팅 예산안 작성",
    "assignee": "홍길동",
    "due_date": "2025-10-20",
    "priority": "high",
    "related_section": "결정 사항"
  }
]

3.8 08-회의록공유 화면

개요

목적: 회의록 공유 설정 및 참석자 배포
관련 유저스토리: UFR-MEET-060, UFR-NOTI-010
비즈니스 중요도: 필수 (회의록 전달)

주요 기능

공유 대상 선택 (참석자 전체/특정 참석자)
공유 권한 설정 (읽기 전용/댓글 가능/편집 가능)
공유 방식 선택 (이메일/슬랙/링크 복사)
공유 링크 생성 및 보안 설정
공유 이력 표시

UI 구성요소

레이아웃

중앙 정렬 폼 (최대 너비 800px)

컴포넌트

공유 대상 선택
- 라디오 버튼:
  - 참석자 전체 (기본 선택)
  - 특정 참석자 선택 (멀티 셀렉트 드롭다운)
- 외부 공유: 이메일 입력 (선택)
공유 권한 설정
- 드롭다운:
  - 읽기 전용 (기본)
  - 댓글 가능
  - 편집 가능
공유 방식 선택
- 체크박스:
  - 이메일 (기본 선택)
  - 슬랙 (연동된 경우 표시)
  - 링크 복사
공유 링크 설정
- 링크 URL 표시 (읽기 전용)
- "링크 복사" 버튼
- 고급 설정 (접기/펼치기):
  - 링크 유효 기간 (무제한/7일/30일/커스텀)
  - 비밀번호 설정 (선택)
공유 이력
- 리스트:
  - 공유 시간
  - 공유 방식 (이메일/슬랙/링크)
  - 수신자
  - 상태 (발송 완료/읽음/미읽음)

액션 버튼

취소 (02-대시보드로 이동)
공유 (Primary CTA)

인터랙션

사용자 액션	시스템 반응
특정 참석자 선택	멀티 셀렉트 드롭다운 표시 (참석자 목록)
외부 이메일 입력	이메일 형식 검증
링크 복사 버튼 클릭	클립보드에 복사 → 토스트 메시지: "링크가 복사되었습니다."
공유 버튼 클릭	공유 대상 검증 → 알림 발송 → 09-Todo관리 화면으로 이동 (또는 02-대시보드)
이메일 발송 완료	토스트 메시지: "5명에게 이메일이 발송되었습니다."
슬랙 발송 완료	토스트 메시지: "슬랙으로 알림이 발송되었습니다."

데이터 요구사항

공유 설정 데이터

{
  "meeting_id": "meeting_uuid",
  "recipients": ["user1@example.com", "user2@example.com"],
  "permission": "read_only", // read_only, comment, edit
  "methods": ["email", "slack"],
  "link": {
    "url": "https://meeting.example.com/share/abc123",
    "expiration": "2025-11-15",
    "password": "hashed_password"
  }
}

알림 데이터

{
  "type": "meeting_shared",
  "meeting_id": "meeting_uuid",
  "meeting_title": "2025년 1분기 전략 회의",
  "sender": "홍길동",
  "link": "https://meeting.example.com/share/abc123",
  "sent_at": "2025-10-15T15:00:00Z"
}

3.9 09-Todo관리 화면

개요

목적: Todo 할당, 진행 상황 추적 및 완료 처리
관련 유저스토리: UFR-TODO-010, UFR-TODO-020, UFR-TODO-030, UFR-CAL-010
비즈니스 중요도: 필수 (회의 후속 조치 실행)

주요 기능

Todo 리스트 표시 (칸반 보드 또는 리스트 뷰)
Todo 필터 및 정렬 (담당자, 마감일, 우선순위)
진행률 업데이트 (0-100%)
상태 변경 (시작 전/진행 중/완료)
Todo 완료 처리 및 회의록 자동 반영
캘린더 연동 (마감일 자동 등록)

UI 구성요소

레이아웃

전체 화면 레이아웃
상단: 필터 및 정렬 툴바
메인: 칸반 보드 또는 리스트 뷰 (토글 가능)

칸반 보드 뷰

3개 컬럼:
- 시작 전
- 진행 중
- 완료
Todo 카드:
- Todo 내용 (최대 2줄)
- 담당자 아바타
- 마감일 (D-3, 오늘, 지남 - 색상 구분)
- 우선순위 아이콘 (높음=빨간색, 보통=회색, 낮음=숨김)
- 진행률 바 (0-100%)
- 관련 회의록 링크 아이콘
드래그 앤 드롭으로 상태 변경 가능

리스트 뷰

테이블 형식:
- 체크박스 (다중 선택)
- 상태
- Todo 내용
- 담당자
- 마감일
- 우선순위
- 진행률
- 액션 (수정/삭제)

필터 및 정렬 툴바

필터:
- 담당자 (멀티 셀렉트)
- 상태 (전체/시작 전/진행 중/완료)
- 마감일 (오늘/이번 주/이번 달/전체)
- 우선순위 (높음/보통/낮음)
정렬:
- 마감일 순
- 우선순위 순
- 생성일 순
뷰 전환: 칸반 보드 / 리스트

Todo 상세 모달

Todo 내용 (텍스트 에리어)
담당자 선택
마감일 선택 (날짜 피커)
우선순위 선택 (드롭다운)
진행률 슬라이더 (0-100%)
메모 (선택)
관련 회의록 링크
액션 버튼: 저장, 완료, 삭제

인터랙션

사용자 액션	시스템 반응
Todo 카드 드래그 앤 드롭	상태 자동 변경 → 회의록에 반영 → 담당자에게 알림
진행률 슬라이더 조정	실시간 저장 → 50%, 100% 도달 시 자동 알림
완료 체크박스 클릭	확인 다이얼로그 → 완료 상태로 변경 → 회의록에 완료 표시 → 주최자에게 알림
필터 선택	즉시 Todo 리스트 필터링
정렬 선택	즉시 Todo 리스트 재정렬
Todo 카드 클릭	Todo 상세 모달 표시
관련 회의록 링크 클릭	05-회의진행 화면으로 이동 (해당 섹션 포커스)
마감일 도래 (3일 전)	자동 리마인더 알림 발송 (이메일/슬랙/인앱)
마감일 경과 (미완료 시)	긴급 알림 발송 → Todo 카드 빨간색 테두리

데이터 요구사항

Todo 데이터

{
  "id": "todo_uuid",
  "content": "마케팅 예산안 작성",
  "meeting_id": "meeting_uuid",
  "meeting_title": "2025년 1분기 전략 회의",
  "assignee": "user_uuid",
  "due_date": "2025-10-20",
  "priority": "high", // high, normal, low
  "status": "in_progress", // pending, in_progress, completed
  "progress": 50, // 0-100
  "memo": "CFO 검토 필요",
  "created_at": "2025-10-15T15:00:00Z",
  "updated_at": "2025-10-16T10:30:00Z",
  "completed_at": null
}

캘린더 연동 데이터

{
  "todo_id": "todo_uuid",
  "calendar_type": "google", // google, outlook, apple
  "event_id": "calendar_event_uuid",
  "reminder": [
    {"time": "3_days_before"},
    {"time": "day_of"}
  ]
}

4. 화면간 전환 및 네비게이션

4.1 전역 네비게이션 구조

헤더 (모든 화면 공통)

좌측
- 서비스 로고 (클릭 시 02-대시보드로 이동)
- 햄버거 메뉴 (모바일에서 사이드바 토글)
중앙
- 전역 검색 바
  - 회의록 제목, 참석자, 키워드 검색
  - 자동완성 제안
  - 최근 검색어 표시
우측
- 알림 아이콘 (Badge로 읽지 않은 알림 수 표시)
  - 드롭다운: 최근 알림 5개
  - "모두 보기" 링크
- 사용자 프로필 아이콘
  - 드롭다운: 내 프로필, 설정, 로그아웃

사이드바 (로그인 후 모든 화면, 01-로그인 제외)

메뉴 항목
1. 대시보드 (아이콘: 홈)
2. 내 회의록 (아이콘: 문서)
3. 예정된 회의 (아이콘: 캘린더)
4. Todo 목록 (아이콘: 체크리스트, Badge로 대기 중인 Todo 수)
5. 템플릿 (아이콘: 레이아웃)
6. 설정 (아이콘: 톱니바퀴)
하단
- 사이드바 접기/펼치기 버튼
- 도움말 아이콘 (툴팁 또는 가이드 투어)

푸터 (옵션)

저작권 정보
이용약관, 개인정보처리방침 링크

4.2 화면 전환 패턴

선형 플로우 (Linear Flow)

03-회의예약 → 04-템플릿선택 → 05-회의진행
진행 표시 바로 현재 단계 표시
"뒤로" 버튼으로 이전 단계 이동 가능

허브 앤 스포크 (Hub and Spoke)

02-대시보드가 중심 허브
모든 주요 화면으로 이동 가능
각 화면에서 02-대시보드로 돌아오기 가능

모달 및 오버레이

빠른 액션 (Todo 추가, 댓글 작성) → 모달
상세 정보 (알림, 프로필) → 드롭다운

4.3 브레드크럼과 컨텍스트 유지

브레드크럼

복잡한 계층 구조에서 사용
예: 대시보드 > 내 회의록 > [회의 제목]
각 단계 클릭 가능

컨텍스트 유지 전략

Session Storage: 임시 데이터 (폼 입력 중인 내용)
Local Storage: 사용자 설정 (뷰 모드, 필터 설정)
URL 파라미터: 공유 가능한 상태 (회의 ID, Todo 필터)
History API: 뒤로/앞으로 버튼 지원

5. 반응형 설계 전략

5.1 브레이크포인트 정의

디바이스	브레이크포인트	레이아웃	주요 조정
Mobile	320px ~ 767px	단일 컬럼	햄버거 메뉴, 하단 탭 네비게이션, 스택 레이아웃
Tablet	768px ~ 1023px	2단 레이아웃	사이드바 토글, 터치 최적화
Desktop	1024px ~ 1439px	3단 레이아웃	전체 사이드바, 키보드 단축키
Large Desktop	1440px 이상	확장 레이아웃	더 넓은 중앙 패널, 4단 레이아웃 가능

5.2 디바이스별 UI 조정

Mobile (320px ~ 767px)

네비게이션
- 햄버거 메뉴로 사이드바 숨김
- 하단 탭 네비게이션 (대시보드, 회의, Todo, 더보기)
05-회의진행 화면
- 탭으로 패널 전환 (회의록 / 참석자 / AI 제안 / 용어 설명)
- 툴바를 하단 고정 (터치 용이성)
02-대시보드 화면
- 위젯을 세로로 스택 (1단 레이아웃)
- 스와이프로 위젯 전환 (옵션)
09-Todo관리 화면
- 칸반 보드 대신 리스트 뷰 권장
- 상태 변경은 드롭다운으로

Tablet (768px ~ 1023px)

네비게이션
- 사이드바를 토글 가능 (기본 숨김)
- 상단 헤더에 메뉴 아이콘
05-회의진행 화면
- 2단 레이아웃 (에디터 + AI 제안 패널)
- 참석자 목록은 드로어로 표시
02-대시보드 화면
- 2단 그리드 레이아웃 (2x2 또는 2x3)
터치 최적화
- 버튼 크기: 최소 44x44px
- 간격: 최소 8px

Desktop (1024px 이상)

네비게이션
- 전체 사이드바 항상 표시
- 호버 효과 및 툴팁
05-회의진행 화면
- 3단 레이아웃 (참석자 + 에디터 + AI 제안)
- 모든 패널 동시 표시
02-대시보드 화면
- 3단 그리드 레이아웃 (3x2)
- 더 많은 위젯 표시 가능
키보드 단축키
- Ctrl+N: 새 회의
- Ctrl+S: 저장
- Ctrl+F: 검색
- Ctrl+/: 단축키 가이드

5.3 반응형 이미지 및 아이콘

아이콘: SVG 사용 (확대/축소 시 품질 유지)
아바타: srcset으로 디바이스별 해상도 제공
로고: 모바일에서는 심볼만, 데스크탑에서는 전체 로고

5.4 터치 및 제스처 지원

스와이프: 화면 전환, 사이드바 열기/닫기
롱 프레스: 컨텍스트 메뉴 표시
핀치 줌: 이미지 확대/축소 (회의록 내 이미지)

6. 접근성 보장 방안

6.1 WCAG 2.1 Level AA 준수

인식 가능성 (Perceivable)

대체 텍스트 제공
- 모든 이미지에 alt 속성
- 아이콘 버튼에 aria-label
- 로고에 적절한 대체 텍스트
색상 대비
- 텍스트와 배경 대비율 최소 4.5:1
- 큰 텍스트(18pt 이상)는 3:1
- 중요 정보는 색상만으로 구분하지 않음 (아이콘, 텍스트 함께 사용)
다크모드 지원
- 시스템 설정 자동 감지
- 수동 전환 가능
- 다크모드에서도 동일한 대비율 유지

운용 가능성 (Operable)

키보드 네비게이션
- Tab 키로 모든 인터랙티브 요소 접근
- Shift+Tab으로 역순 이동
- Enter/Space로 버튼 활성화
- Esc로 모달/드롭다운 닫기
포커스 표시
- 포커스된 요소에 명확한 아웃라인 (최소 2px)
- 포커스 순서는 시각적 순서와 일치
단축키
- Ctrl+N: 새 회의 예약
- Ctrl+S: 회의록 저장
- Ctrl+F: 검색
- Ctrl+/: 단축키 가이드 표시
Skip to Content 링크
- 페이지 최상단에 "본문으로 건너뛰기" 링크
- 시각적으로 숨김, 포커스 시 표시

이해 가능성 (Understandable)

명확한 레이블
- 모든 폼 필드에 label 요소 연결
- 플레이스홀더는 보조 정보로만 사용
에러 메시지
- 에러 위치 명확히 표시
- 해결 방법 제시
- 에러 필드에 포커스 자동 이동
일관성
- 동일한 기능은 동일한 아이콘/레이블 사용
- 네비게이션 구조 일관성 유지

견고성 (Robust)

ARIA 레이블 및 역할
- 시맨틱 HTML 우선 사용
- 커스텀 컴포넌트에 적절한 role 속성
- aria-label, aria-describedby 활용
실시간 업데이트 알림
- aria-live="polite" 또는 "assertive"
- 회의록 실시간 편집 시 스크린 리더에 알림
- 알림 빈도 제어 (과도한 알림 방지)

6.2 스크린 리더 대응

구조화된 마크업

적절한 heading 레벨 사용 (h1, h2, h3)
랜드마크 역할 (header, nav, main, aside, footer)
리스트는 ul/ol 사용

동적 콘텐츠 알림

회의록 자동 작성: "AI가 회의록을 업데이트했습니다."
다른 사용자 편집: "[사용자명]이(가) 섹션을 수정했습니다."
Todo 완료: "Todo가 완료되었습니다."

폼 접근성

label과 input 명확한 연결
필수 항목에 aria-required="true"
에러 발생 시 aria-invalid="true" 및 aria-describedby로 에러 메시지 연결

6.3 접근성 테스트 도구

자동 테스트: axe-core, Lighthouse
수동 테스트: 키보드 네비게이션, 스크린 리더 (NVDA, JAWS, VoiceOver)
색상 대비 검사: WebAIM Contrast Checker

7. 성능 최적화 방안

7.1 초기 로딩 최적화

Code Splitting

라우트 레벨 분리

const Dashboard = lazy(() => import('./pages/Dashboard'));
const MeetingEditor = lazy(() => import('./pages/MeetingEditor'));

컴포넌트 레벨 분리
- 모달, 드로어 등 조건부 렌더링 컴포넌트
- 큰 라이브러리 (차트, 에디터) 동적 로드

Critical CSS 인라인

First Paint에 필요한 CSS만 <head>에 인라인
나머지 CSS는 비동기 로드

Skeleton UI

로딩 중 레이아웃 미리 표시
콘텐츠 영역에 Skeleton 컴포넌트
사용자가 기다리는 느낌 최소화

Progressive Web App (PWA)

Service Worker로 오프라인 지원
자주 사용하는 에셋 캐싱
모바일에서 앱처럼 설치 가능

7.2 이미지 및 에셋 최적화

이미지 포맷

WebP 사용 (fallback: JPEG/PNG)

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="설명">
</picture>

Lazy Loading

Intersection Observer API 활용

뷰포트에 진입할 때 이미지 로드

<img src="placeholder.jpg" data-src="real-image.jpg" loading="lazy" alt="설명">

아이콘 최적화

SVG 스프라이트: 여러 아이콘을 하나의 파일로
Icon Font: 대안으로 사용 가능
인라인 SVG: 중요한 아이콘은 HTML에 직접 삽입

이미지 CDN

Cloudflare Images, AWS CloudFront 활용
자동 리사이징 및 포맷 변환
전 세계 엣지 서버에서 빠른 전송

7.3 코드 스플리팅 전략

라우트 레벨

각 화면별로 청크 분리
초기 로드 시 01-로그인, 02-대시보드만 로드
다른 화면은 필요 시 동적 로드

컴포넌트 레벨

모달/드로어: 열릴 때 로드

const TodoModal = lazy(() => import('./components/TodoModal'));

차트 라이브러리: 통계 화면에서만 로드
리치 텍스트 에디터: 회의진행 화면에서만 로드

라이브러리 레벨

Lodash: 필요한 함수만 import

import debounce from 'lodash/debounce'; // ✅
// import _ from 'lodash'; // ❌

Moment.js 대신 Day.js: 더 가벼운 라이브러리 선택

7.4 캐싱 전략

HTTP 캐싱

정적 에셋: Cache-Control: max-age=31536000 (1년)
API 응답: Cache-Control: max-age=300 (5분)
HTML: Cache-Control: no-cache (항상 검증)

메모리 캐싱 (Client-Side)

React Query 또는 SWR 사용
- API 응답 자동 캐싱
- Stale-While-Revalidate 전략
- 중복 요청 제거

예시:

const { data, error } = useQuery('meetings', fetchMeetings, {
  staleTime: 5 * 60 * 1000, // 5분
  cacheTime: 10 * 60 * 1000, // 10분
});

Local Storage

사용자 설정: 뷰 모드, 필터 설정
최근 검색어: 자동완성 제안
임시 저장: 작성 중인 회의록 (Auto-save)

Service Worker 캐싱

오프라인 페이지: 네트워크 오류 시 표시
에셋 캐싱: JS, CSS, 폰트, 아이콘
API 캐싱: 읽기 전용 데이터 (회의록 목록 등)

7.5 실시간 성능 최적화

WebSocket 최적화

연결 풀링: 하나의 WebSocket 연결 재사용
압축: WebSocket 메시지 압축 (gzip)
Heartbeat: 주기적 ping/pong으로 연결 유지

변경 델타만 전송

전체 문서가 아닌 변경된 부분만 전송
Operational Transformation 또는 CRDT 알고리즘
네트워크 대역폭 절약

Debouncing/Throttling

타이핑 이벤트: Debounce 500ms

const debouncedSave = debounce(saveContent, 500);

스크롤 이벤트: Throttle 100ms

const throttledScroll = throttle(onScroll, 100);

Virtual Scrolling

긴 리스트 (Todo, 회의록 목록) 렌더링 최적화
뷰포트에 보이는 항목만 DOM에 렌더링
라이브러리: react-window, react-virtualized

7.6 성능 모니터링

Core Web Vitals 목표

LCP (Largest Contentful Paint): < 2.5초
FID (First Input Delay): < 100ms
CLS (Cumulative Layout Shift): < 0.1

성능 측정 도구

Lighthouse: 자동화된 성능 감사
WebPageTest: 실제 네트워크 환경 테스트
Chrome DevTools: Performance 탭, Network 탭

실시간 모니터링

Sentry: 에러 추적 및 성능 모니터링
Google Analytics: 사용자 행동 분석
Custom Metrics: 회의록 로드 시간, 동기화 지연 시간 측정

8. 변경 이력

버전	날짜	작성자	변경 내용
1.0	2025-10-15	유진	초안 작성 - 9개 화면 설계 완료

부록

A. 디자인 시스템 참조

컬러 팔레트: Primary, Secondary, Success, Warning, Error, Neutral
타이포그래피: 폰트 패밀리, 크기, 행간, 자간
스페이싱: 4px 기반 (4, 8, 12, 16, 24, 32, 48, 64px)
컴포넌트 라이브러리: Material-UI, Ant Design, 또는 커스텀

B. 기술 스택 권장사항

Frontend Framework: React 18+ 또는 Vue 3+
State Management: React Query + Zustand 또는 Pinia
UI Library: Material-UI, Ant Design, Chakra UI
Rich Text Editor: Quill, Slate, ProseMirror
Real-time: Socket.io, WebSocket
Build Tool: Vite (빠른 빌드) 또는 Webpack

C. 프로토타입 도구

Figma: 고해상도 프로토타입 및 디자인 시스템
Adobe XD: 인터랙션 프로토타입
Storybook: 컴포넌트 카탈로그 및 테스트

D. 참고 자료

WCAG 2.1 가이드라인: https://www.w3.org/WAI/WCAG21/quickref/
Material Design: https://material.io/design
Web.dev Performance: https://web.dev/performance/

문서 끝

46 KiB Raw Blame History

회의록 작성 및 공유 개선 서비스 - UI/UX 설계서

목차

1. 프로토타입 화면 목록

1.1 회의 전 (Pre-Meeting)

1.2 회의 중 (During-Meeting)

1.3 회의 후 (Post-Meeting)

2. 화면 간 사용자 플로우

2.1 메인 플로우 다이어그램

2.2 주요 사용자 시나리오

시나리오 1: 신규 회의 진행 (Full Flow)

시나리오 2: 과거 회의록 조회 및 수정

시나리오 3: Todo 관리

시나리오 4: 알림을 통한 회의록 접근

2.3 서브 플로우

3. 화면별 상세 설계

3.1 01-로그인 화면

개요

주요 기능

UI 구성요소

인터랙션

데이터 요구사항

에러 처리

3.2 02-대시보드 화면

개요

주요 기능

UI 구성요소

인터랙션

데이터 표시 요구사항

3.3 03-회의예약 화면

개요

주요 기능

UI 구성요소

인터랙션

데이터 요구사항

에러 처리

3.4 04-템플릿선택 화면

개요

주요 기능

UI 구성요소

인터랙션

데이터 요구사항

3.5 05-회의진행 화면 (핵심)

개요

주요 기능

UI 구성요소

인터랙션

데이터 표시 및 입력 요구사항

성능 요구사항

에러 처리

3.6 06-검증완료 화면

개요

주요 기능

UI 구성요소

인터랙션

데이터 요구사항

3.7 07-회의종료 화면

개요

주요 기능

UI 구성요소

인터랙션

데이터 요구사항

3.8 08-회의록공유 화면

개요

주요 기능

UI 구성요소

인터랙션

데이터 요구사항

3.9 09-Todo관리 화면

개요

주요 기능

UI 구성요소

인터랙션

데이터 요구사항

4. 화면간 전환 및 네비게이션

4.1 전역 네비게이션 구조

헤더 (모든 화면 공통)

사이드바 (로그인 후 모든 화면, 01-로그인 제외)

푸터 (옵션)

4.2 화면 전환 패턴

46 KiB

Raw Blame History