mirror of https://github.com/hwanny1128/HGZero.git synced 2025-12-06 21:56:24 +00:00

yabo0812 b73beccb69 UI/UX 설계서 대시보드 진행중 회의 표시 기능 추가 (v1.3.1)

**진행중 회의 표시 기능 추가**
- 예정된 회의 카드명 변경: "예정된/진행중 회의"
- 진행중 회의 정의
  - 회의 시작 시간 <= 현재 시간 AND 회의 종료 안 됨
  - 사용자가 참석자 또는 생성자
- 우선순위 정렬
  1. 진행중 회의 (최상단 우선 표시)
  2. 예정된 회의 (회의 일시 순)

**UI 구성요소 개선**
- 상태 배지 추가
  - "진행중" (빨강/주황, 깜빡임 애니메이션, 1초 간격)
  - "D-1", "D-day", "3시간 후" (예정된 회의)
- 빠른 참여 버튼 (진행중 회의만)
  - "참여하기" 버튼 (Primary, 작은 크기)
  - 클릭 시 회의 진행 화면으로 즉시 이동

**인터랙션 개선**
- 진행중 회의
  - "참여하기" 버튼 → 회의 진행 화면 즉시 이동
  - 회의 항목 클릭 → 회의 상세 정보 표시
  - 배지 애니메이션: 깜빡임 효과
- 예정된 회의
  - 회의 항목 클릭 → 회의 상세 정보 표시
  - 호버 효과: 카드 그림자 증가

**데이터 요구사항 개선**
- 필터 조건 추가
  - 진행중 회의: 시작 시간 <= 현재 AND 종료 안 됨
  - 예정된 회의: 회의 일시 >= 현재 시간
- 정렬 우선순위 명확화
  1. 진행중 회의 우선 (상태 = ongoing)
  2. 예정된 회의 (일시 순, 가까운 순)
- 출력 데이터: 상태 (예정/진행중) 추가

**통계 데이터 개선 (Desktop)**
- 예정된/진행중 회의 수 표시
- 진행중 회의 수 별도 배지 표시 (빨강)

**에러 처리 추가**
- 진행중 회의 참여 실패 시나리오
  - 회의 종료됨: "이미 종료된 회의입니다"
  - 권한 없음: "참여 권한이 없습니다"
  - 네트워크 오류: "네트워크 연결을 확인해주세요"

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

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

2025-10-21 14:57:47 +09:00

63 KiB

Raw Blame History

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

문서 정보

작성일: 2025-10-21
최종 수정일: 2025-10-21
작성자: 이미준 (서비스 기획자)
버전: 1.3.1
설계 철학: Mobile First Design

설계 개요

설계 목표

업무 지식이 없는 회의록 작성자도 누락 없이 정확한 회의록을 작성하고 공유할 수 있는 직관적이고 효율적인 사용자 경험 제공

설계 원칙

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 (AI 회의록 자동 작성)
- UFR-AI-020 (Todo 자동 추출)
- UFR-AI-030 (프롬프팅 기반 회의록 개선)
- UFR-AI-040 (관련 회의록 자동 연결) ← 신규 반영
RAG 서비스: UFR-RAG-010, UFR-RAG-020 (맥락 기반 용어 설명)
Collaboration 서비스: UFR-COLLAB-010 ~ UFR-COLLAB-030 (실시간 협업)
Todo 서비스: UFR-TODO-010, UFR-TODO-030 (Todo 관리)

주요 추가 기능 (v1.1)

AI 기반 회의 내용 요약 자동 생성
- 각 섹션 최상단에 AI가 자동으로 생성한 2-3문장 요약 표시
- 참석자가 요약 내용 확인 후 수정 가능
- 실시간 동기화 및 자동 저장
참고자료 자동 연결 (UFR-AI-040)
- 각 섹션 하단에 관련 회의록 자동 연결
- 이전 회의록 및 맥락상 관련 회의록 링크 제공
- 관련도 표시 (퍼센트 또는 별점)
- 최대 3개 자동 표시, 더보기로 전체 목록 확인 가능

프로토타입 화면 목록

번호	화면명	관련 유저스토리	비즈니스 중요도	비고
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	중간	지난 회의록 수정
12	회의록목록조회	UFR-MEET-030, UFR-MEET-045	높음	회의록 목록 필터링/정렬/검색

화면 간 사용자 플로우

주요 사용자 시나리오별 플로우

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

로그인 → 대시보드 → 회의예약 → 템플릿선택 → 회의진행
→ 검증완료 → 회의종료 → 회의록공유 → 대시보드

시나리오 2: 지난 회의록 조회 및 수정

로그인 → 대시보드 → 회의록상세조회 → 회의록수정 → 대시보드

시나리오 3: Todo 관리

로그인 → 대시보드 → Todo관리 → 회의록상세조회 (Todo 출처 확인) → 대시보드

시나리오 4: 빠른 회의 시작 (템플릿 스킵)

로그인 → 대시보드 → 회의진행 (기본 템플릿) → 회의종료 → 대시보드

플로우 다이어그램

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
비즈니스 중요도: 필수
접근 경로: 애플리케이션 최초 진입

주요 기능

사번과 비밀번호를 이용한 LDAP 인증
로그인 상태 유지 옵션
비밀번호 찾기/재설정
오류 처리 및 피드백

UI 구성요소

Mobile (320px~768px)

상단: 서비스 로고 및 타이틀
중앙: 로그인 폼
- 사번 입력 필드 (필수)
- 비밀번호 입력 필드 (필수, 마스킹)
- "로그인 상태 유지" 체크박스
- 로그인 버튼 (Primary CTA)
하단: "비밀번호 찾기" 링크
오류 메시지 영역

Tablet/Desktop (768px+)

좌측: 서비스 소개 및 주요 기능 설명 (선택)
우측: 로그인 폼 (모바일과 동일 구조)

인터랙션

입력 검증
- 실시간 필드 유효성 검사 (형식 오류 즉시 표시)
- 빈 필드 제출 시 해당 필드로 포커스 이동
로그인 처리
- 로그인 버튼 클릭 → 로딩 인디케이터 표시
- 성공: 대시보드로 자동 이동 (페이드 전환)
- 실패: 오류 메시지 표시 (사번/비밀번호 불일치, 계정 잠금 등)
키보드 인터랙션
- Enter 키로 다음 필드 이동 또는 로그인 실행
- Tab 키로 포커스 이동

데이터 요구사항

입력: 사번(문자열), 비밀번호(문자열, 최소 8자)
출력: 인증 토큰, 사용자 정보(이름, 권한)
연동: User 서비스 - LDAP 인증 API

에러 처리

인증 실패: "사번 또는 비밀번호가 올바르지 않습니다." (보안상 구체적 정보 제공 X)
계정 잠금: "보안을 위해 계정이 일시적으로 잠겼습니다. 관리자에게 문의하세요."
네트워크 오류: "네트워크 연결을 확인해주세요."
서버 오류: "일시적인 오류가 발생했습니다. 잠시 후 다시 시도해주세요."

02-대시보드

개요

목적: 주요 기능 접근 허브, 최근 활동 및 Todo 요약 제공
관련 유저스토리: 여러 유저스토리의 진입점, UFR-MEET-030 (회의록 조회), UFR-TODO-010 (Todo 조회)
비즈니스 중요도: 필수
접근 경로: 로그인 후 메인 화면

주요 기능

빠른 회의 시작 및 예약
예정된/진행중 회의 목록 (upcoming & ongoing meetings)
- 예정된 회의 (아직 시작 전)
- 진행중 회의 (참여 가능한 회의)
내 Todo 우선순위별 표시 (지연중 → 진행중 → 미진행 → 완료, 최대 5개)
내 회의록 (참여자/생성자로 등록된 최근 3개, 상태 포함)
공유받은 회의록 (최근 공유받은 순 3개)
전역 검색

UI 구성요소

Mobile (320px~768px)

헤더 (Fixed, 상단)
- 서비스 로고 및 타이틀 ("회의록 서비스")
- 검색 아이콘
- 프로필 아이콘 (메뉴)
메인 콘텐츠 (스크롤, padding-bottom: 80px)
- 환영 메시지
  - "안녕하세요, {사용자명}님!" (H3)
  - 부제: "오늘도 효율적인 회의록 작성을 시작하세요" (Body-sm, 회색)
- 빠른 액션 (가로 배치)
  - "새 회의 시작" 버튼 (Primary, 아이콘: play_circle, flex: 1)
  - "회의 예약" 버튼 (Secondary, 아이콘: calendar_today)
- 예정된/진행중 회의 카드 (신규)
  - 헤더: "예정된 회의" (H4) + "전체 보기 →" 링크
  - 회의 리스트 (최대 3개, 우선순위 순)
    1. 진행중 회의 (우선 표시)
      - 상태: 회의 시작됨, 아직 종료 안 됨, 참여 가능
      - 긴급 표시: "진행중" 배지 (빨강/주황색, 애니메이션)
    2. 예정된 회의 (시작 전)
      - 상태: 회의 일시 >= 현재 시간
      - D-day 표시 (긴급도에 따라 색상 구분)
  - 각 항목:
    - 상태 배지 (최우선 표시):
      - "진행중" (빨강/주황, 깜빡임 애니메이션) - 진행중 회의
      - "D-1", "D-day", "3시간 후" 등 - 예정된 회의
    - 회의 제목 (H5)
    - 회의 일시 (아이콘: calendar_today)
    - 참석자 수 (아이콘: people)
    - 빠른 참여 버튼 (진행중 회의만):
      - "참여하기" 버튼 (Primary, 작은 크기)
      - 클릭 시 바로 회의 진행 화면으로 이동
  - 빈 상태: "예정된 회의가 없습니다"
- 내 Todo 카드 (개선)
  - 헤더: "내 Todo" (H4) + "전체 보기 →" 링크 (Todo 관리 화면으로 이동)
  - 통계 요약 영역:
    - 진행 중 개수 배지
    - 마감 임박 개수 (아이콘: schedule, 경고색)
  - Todo 리스트 (우선순위 순, 최대 5개):
    1. 지연 중 (기한 지남, 빨간색)
    2. 진행 중 (상태: in_progress)
    3. 기한이 남은 미진행 (상태: not_started)
    4. 완료 (상태: done, 회색 처리)
  - 각 Todo 항목:
    - 제목 (Medium weight)
    - 메타정보: 담당자, 마감일
    - D-day (색상: 지남-빨강, 오늘-경고, 여유-회색)
    - 우선순위 배지 (high-빨강, medium-노랑, low-회색)
  - 빈 상태: "할당된 Todo가 없습니다"
- 내 회의록 카드 (개선)
  - 헤더: "내 회의록" (H4) + "전체 보기 →" 링크 (회의록 목록 화면으로 이동)
  - 최근 회의록 리스트 (최대 3개):
    - 필터: 내가 참여자 또는 생성자로 등록된 회의록
    - 정렬: 최근 생성 순 (createdAt 기준)
  - 각 항목:
    - 회의 제목 (H5)
    - 회의 일시 (날짜 + 시간)
    - 참석자 수
    - 상태 배지:
      - "작성중" (draft, 노란색 배지)
      - "확정완료" (confirmed, 초록색 배지)
    - 최종 수정 시간 (상대 시간: "1시간 전", "어제" 등)
  - 클릭 시: 회의록 상세 화면으로 이동
  - 빈 상태: "작성한 회의록이 없습니다. 첫 회의를 시작해보세요!"
- 공유받은 회의록 카드 (개선)
  - 헤더: "공유받은 회의록" (H4) + "전체 보기 →" 링크 (회의록 목록 화면으로 이동)
  - 최근 공유받은 회의록 리스트 (최대 3개):
    - 정렬: 최근 공유받은 순
  - 각 항목:
    - 회의 제목 (H5)
    - 공유자 정보 (아바타 + 이름)
    - 공유 일시 (상대 시간)
    - 상태 배지
  - 클릭 시: 회의록 상세 화면으로 이동 (읽기 전용)
  - 빈 상태: "공유받은 회의록이 없습니다"
하단 네비게이션 (Fixed, 하단)
- 홈 (active), 회의록, Todo, 프로필
- 각 항목: Material Icon + 레이블

Tablet/Desktop (768px+)

사이드바 (좌측, Fixed, 240px)
- 서비스 로고
- 메인 메뉴 (세로 배치)
  - 대시보드 (active, 강조 표시)
  - 회의 목록
  - Todo 관리
  - 설정
- 하단: 프로필 요약
메인 콘텐츠 (Grid Layout)
- 상단 영역:
  - 환영 메시지
  - 빠른 액션 (가로 배치)
- 통계 그리드 (3컬럼, auto-fit):
  - 예정된/진행중 회의 (아이콘: 📅, Primary 색상)
    - 진행중 회의 수 별도 표시 (빨강 배지)
  - 진행 중 Todo (아이콘: ✅, Warning 색상)
  - Todo 완료율 (아이콘: 📈, Success 색상)
- 2컬럼 그리드:
  - 좌측 컬럼 (2/3 너비)
    - 예정된/진행중 회의 섹션
      - 진행중 회의 우선 표시 (상단)
      - 예정된 회의 (하단)
    - 내 회의록 섹션
  - 우측 컬럼 (1/3 너비)
    - 내 Todo 위젯
    - 공유받은 회의록 위젯

인터랙션

빠른 액션
- "새 회의 시작" 클릭 → 템플릿선택 화면으로 이동 (페이드 전환)
- "회의 예약" 클릭 → 회의예약 화면으로 이동
예정된/진행중 회의 인터랙션
- 진행중 회의:
  - "참여하기" 버튼 클릭 → 회의 진행 화면으로 즉시 이동
  - 회의 항목 클릭 → 회의 상세 정보 표시 (모달 또는 화면 이동)
  - 애니메이션: "진행중" 배지 깜빡임 효과 (1초 간격)
- 예정된 회의:
  - 회의 항목 클릭 → 회의 상세 정보 표시
  - 호버 효과: 카드 그림자 증가
- "전체 보기" 링크 클릭 → 회의 목록 화면으로 이동
카드 인터랙션
- 회의록 항목 클릭 → 회의록 상세 화면으로 이동
- Todo 항목 클릭 → Todo 관리 화면으로 이동
- "전체 보기" 링크 클릭 → 해당 목록 화면으로 이동
- 호버 효과: 카드 그림자 증가, 약간 상승 (transform: translateY(-2px))
검색
- 검색 아이콘 클릭: 전체 화면 검색 인터페이스 표시
- 실시간 자동완성 및 최근 검색어 제공

데이터 요구사항

입력:
- 사용자 ID (현재 로그인 사용자)
- 현재 날짜/시간 (예정된 회의 필터링용)
출력:
- 예정된/진행중 회의:
  - 회의 ID, 제목, 일시, 참석자 목록, 상태 (예정/진행중), D-day
  - 필터 조건:
    - 진행중 회의: 회의 시작 시간 <= 현재 시간 AND 회의 종료 안 됨, 사용자가 참석자 또는 생성자
    - 예정된 회의: 회의 일시 >= 현재 시간, 사용자가 참석자 또는 생성자
  - 정렬 우선순위:
    1. 진행중 회의 우선 (상태 = ongoing)
    2. 예정된 회의 (회의 일시 순, 가까운 순)
  - 최대 3개 (진행중 회의 우선)
- 내 Todo:
  - Todo ID, 제목, 담당자, 마감일, 상태, 우선순위
  - 필터: 담당자 = 현재 사용자
  - 정렬:
    1. 지연중 (마감일 < 현재 날짜, 상태 != done)
    2. 진행중 (상태 = in_progress)
    3. 미진행 (상태 = not_started, 마감일 >= 현재 날짜)
    4. 완료 (상태 = done)
  - 최대 5개
- 내 회의록:
  - 회의 ID, 제목, 일시, 참석자 수, 상태, 생성일시, 수정일시
  - 필터: 사용자가 참여자 또는 생성자
  - 정렬: 생성일시 (최근 순)
  - 최대 3개
- 공유받은 회의록:
  - 회의 ID, 제목, 공유자 정보, 공유 일시, 상태
  - 필터: 공유 대상 = 현재 사용자
  - 정렬: 공유 일시 (최근 순)
  - 최대 3개
- 통계 데이터 (Desktop):
  - 예정된/진행중 회의 수 (진행중 회의 수 별도 배지)
  - 진행 중 Todo 수
  - Todo 완료율 (완료 / 전체 × 100)
연동:
- Meeting 서비스 (회의 정보, 회의록 정보)
- Todo 서비스 (Todo 목록)
- Share 서비스 (공유 정보)

에러 처리

데이터 로딩 실패:
- 해당 카드에 "일시적으로 데이터를 불러올 수 없습니다." 표시
- "다시 시도" 버튼 제공 (새로고침 아이콘)
- 로그 기록 및 에러 추적
부분 데이터 로딩 실패:
- 실패한 섹션만 에러 표시, 나머지 섹션은 정상 표시
- 사용자 경험 최소 방해
빈 상태 (각 섹션별):
- 예정된/진행중 회의: "예정된 회의가 없습니다"
- Todo: "할당된 Todo가 없습니다"
- 내 회의록: "작성한 회의록이 없습니다. 첫 회의를 시작해보세요!"
- 공유받은 회의록: "공유받은 회의록이 없습니다"
진행중 회의 참여 실패:
- "회의에 참여할 수 없습니다." 토스트 메시지
- 원인별 안내:
  - 회의 종료됨: "이미 종료된 회의입니다"
  - 권한 없음: "참여 권한이 없습니다"
  - 네트워크 오류: "네트워크 연결을 확인해주세요"
네트워크 오류:
- "네트워크 연결을 확인해주세요." 토스트 메시지
- 자동 재시도 (최대 3회, exponential backoff)

03-회의예약

개요

목적: 예정된 회의 일정 등록 및 참석자 초대
관련 유저스토리: UFR-MEET-010
비즈니스 중요도: 높음
접근 경로: 대시보드 → "회의 예약" 버튼

주요 기능

회의 기본 정보 입력 (제목, 날짜/시간, 장소)
참석자 추가 (이메일 또는 조직도 검색)
회의 안건 사전 입력 (선택)
참석자 초대 이메일 자동 발송
캘린더 연동

UI 구성요소

Mobile (320px~768px)

헤더
- 뒤로가기 버튼
- "회의 예약" 타이틀
- "저장" 버튼 (Primary)
폼 섹션 (스크롤)
- 회의 제목 (필수)
  - 텍스트 입력 필드
  - 최대 100자 카운터
- 날짜 및 시간 (필수)
  - 날짜 선택기 (달력 UI)
  - 시작 시간 선택기
  - 종료 시간 선택기
  - 종일 토글 (선택)
- 장소 (선택)
  - 텍스트 입력 필드
  - 온라인/오프라인 토글
  - 온라인 선택 시: 회의 링크 자동 생성 옵션
- 참석자 (필수, 최소 1명)
  - 참석자 칩 (제거 가능)
  - "참석자 추가" 버튼
  - 참석자 검색 (이메일 또는 이름)
- 안건 (선택)
  - 다중 라인 텍스트 입력
  - AI 안건 추천 버튼 (과거 회의 패턴 기반)

Tablet/Desktop (768px+)

좌측: 폼 (모바일과 동일)
우측: 미리보기 패널 (입력 내용 실시간 프리뷰)

인터랙션

날짜/시간 선택
- 달력 UI: 과거 날짜 비활성화
- 시간 선택: 30분 단위 드롭다운
- 충돌 감지: 동일 시간대 다른 회의 있을 경우 경고
참석자 추가
- "참석자 추가" 클릭 → 검색 모달 표시
- 실시간 검색 (이름, 이메일, 부서)
- 선택된 참석자는 칩 형태로 표시
- 칩의 X 버튼으로 제거 가능
저장 처리
- 필수 필드 검증
- 저장 성공: "회의가 예약되었습니다" 토스트 메시지, 대시보드로 이동
- 초대 이메일 발송 확인 다이얼로그

데이터 요구사항

입력:
- 제목(문자열, 최대 100자)
- 날짜(Date)
- 시작 시간(Time)
- 종료 시간(Time)
- 장소(문자열, 최대 200자, 선택)
- 참석자 목록(이메일 배열)
- 안건(문자열, 선택)
출력: 회의 ID, 초대 이메일 발송 결과
연동: Meeting 서비스, Notification 서비스

에러 처리

필수 필드 누락: 해당 필드에 빨간색 테두리 및 오류 메시지
참석자 0명: "최소 1명의 참석자를 추가해주세요"
과거 날짜 선택: "과거 날짜는 선택할 수 없습니다"
저장 실패: "회의 예약에 실패했습니다. 다시 시도해주세요"

04-템플릿선택

개요

목적: 회의 유형에 맞는 회의록 템플릿 선택 및 커스터마이징
관련 유저스토리: UFR-MEET-020
비즈니스 중요도: 중간
접근 경로: 대시보드 → "새 회의 시작" 또는 회의예약 → "회의 시작"

주요 기능

사전 정의된 템플릿 선택 (일반, 스크럼, 킥오프, 주간)
템플릿 미리보기
섹션 추가/삭제/순서 변경
커스텀 템플릿 저장

UI 구성요소

Mobile (320px~768px)

헤더
- 뒤로가기 버튼
- "템플릿 선택" 타이틀
- "건너뛰기" 텍스트 버튼 (기본 템플릿 사용)
템플릿 카드 리스트
- 각 템플릿 카드:
  - 템플릿 이름 및 아이콘
  - 간단한 설명
  - "선택" 버튼
  - "미리보기" 버튼
선택된 템플릿 상세 (모달 또는 전체 화면)
- 섹션 목록 (드래그하여 순서 변경 가능)
- 각 섹션: 이름, 삭제 버튼
- "섹션 추가" 버튼
- "이 템플릿으로 시작" 버튼 (Primary)

Tablet/Desktop (768px+)

좌측: 템플릿 목록
중앙: 선택된 템플릿 미리보기
우측: 커스터마이징 패널

인터랙션

템플릿 선택
- 템플릿 카드 클릭: 해당 템플릿 상세 보기
- "선택" 버튼: 즉시 회의진행 화면으로 이동
커스터마이징
- 섹션 드래그: 순서 변경 (터치/마우스)
- 섹션 삭제: 스와이프 또는 삭제 아이콘
- 섹션 추가: "섹션 추가" → 섹션 이름 입력 모달
저장 및 시작
- "이 템플릿으로 시작": 회의진행 화면으로 전환
- 커스텀 템플릿 저장 옵션 (선택)

데이터 요구사항

입력: 없음 (또는 회의 ID - 예약된 회의인 경우)
출력: 선택된 템플릿 구조 (섹션 배열)
연동: Meeting 서비스

에러 처리

템플릿 로딩 실패: "템플릿을 불러올 수 없습니다" + 재시도 버튼
빈 템플릿: "최소 1개의 섹션이 필요합니다"

05-회의진행

개요

목적: 실시간 회의 진행 및 AI 기반 회의록 자동 작성
관련 유저스토리: UFR-MEET-030, UFR-STT-010/020, UFR-AI-010, UFR-AI-040, UFR-COLLAB-010, UFR-RAG-010/020
비즈니스 중요도: 높음 (핵심 화면)
접근 경로: 템플릿선택 → "이 템플릿으로 시작"

주요 기능

음성 녹음 및 실시간 텍스트 변환 (STT)
AI 자동 회의록 작성 (구조화)
AI 기반 회의 내용 요약 자동 생성 (섹션별)
실시간 협업 (여러 참석자 동시 편집)
전문용어 자동 감지 및 맥락 기반 설명
참고자료 자동 연결 (이전 회의록, 관련 회의록)
수동 편집 및 섹션별 작성
회의 진행 시간 표시

UI 구성요소

Mobile (320px~768px)

헤더 (Fixed, 최소화 가능)
- 회의 제목
- 경과 시간 (00:00:00)
- 녹음 상태 인디케이터 (빨간 점 + 파형)
- 메뉴 버튼 (설정, 참석자 목록)
메인 콘텐츠 (스크롤)
- 실시간 발언 영역 (상단, 고정)
  - 현재 발언자 이름
  - 실시간 텍스트 변환 내용 (3-5초 지연)
  - 화자 자동 식별 배지
- 회의록 섹션들 (탭 또는 아코디언)
  - 각 섹션:
    - 섹션 제목
    - AI 회의 내용 요약 영역 (섹션 최상단)
      - AI 자동 생성 요약 (2-3문장)
      - 편집 버튼 (참석자가 수정 가능)
      - 요약 생성 시간 표시
    - AI 자동 작성 내용 (실시간 업데이트)
    - 수동 편집 버튼
    - 검증 완료 체크박스
    - 참고자료 영역 (섹션 하단)
      - 관련 이전 회의록 링크 (최대 3개)
      - 맥락상 관련 회의록 링크
      - 각 링크: 회의 제목, 날짜, 관련도 표시
  - 섹션 간 탭 또는 아코디언 전환
- 전문용어 하이라이트
  - 감지된 용어에 밑줄 또는 배경색
  - 터치/클릭 시 맥락 기반 설명 툴팁
하단 액션 바 (Fixed)
- 녹음 일시정지/재개 버튼
- 수동 메모 추가 버튼
- 회의 종료 버튼

Tablet/Desktop (768px+)

좌측 패널 (30%)
- 참석자 목록
- 발언 통계
- 주요 키워드
중앙 패널 (50%)
- 회의록 섹션 (모바일과 동일)
우측 패널 (20%)
- 실시간 발언
- AI 제안 (Todo, 결정사항 후보)

인터랙션

실시간 업데이트
- 발언 → STT → AI 분석 → 섹션별 자동 배치 (3-5초 주기)
- WebSocket 통해 모든 참석자에게 동기화
- 수정 사항 실시간 하이라이트 (3초간)
수동 편집
- 섹션 내 텍스트 클릭 → 편집 모드
- 편집 중 자동 저장 (30초 간격)
- 동시 편집 충돌 감지 및 해결
AI 요약 편집
- 요약 영역의 "편집" 버튼 클릭 → 텍스트 편집 모드
- 수정 내용 자동 저장 (30초 간격)
- 수정 시간 및 수정자 기록
- 실시간 동기화: 다른 참석자에게 즉시 반영
참고자료 링크
- 참고자료 영역의 회의록 링크 클릭 → 새 탭에서 해당 회의록 열기
- 관련도 표시: 퍼센트 또는 별점으로 시각화
- AI가 자동으로 관련 회의록 검색 및 연결 (UFR-AI-040)
전문용어 설명
- 하이라이트된 용어 클릭 → 바텀시트(모바일) 또는 사이드 패널(데스크톱)
- 설명 내용:
  - 간단한 정의
  - 이 회의에서의 의미
  - 관련 과거 회의록 링크
  - 참조 문서 링크
녹음 제어
- 일시정지: 회의록 작성 중단, 재개 가능
- 종료: 확인 다이얼로그 → 회의종료 화면으로 이동

데이터 요구사항

입력: 회의 ID, 오디오 스트림
출력:
- 실시간 텍스트 변환 결과
- 구조화된 회의록 데이터
- 섹션별 AI 요약 (자동 생성)
- 전문용어 및 설명
- 참고자료 목록 (관련 회의록 링크)
연동: STT 서비스, AI 서비스 (UFR-AI-010, UFR-AI-040), RAG 서비스, Collaboration 서비스

에러 처리

녹음 권한 거부: "마이크 권한이 필요합니다" + 설정 안내
STT 실패: "음성 인식에 실패했습니다. 수동으로 입력해주세요"
AI 요약 생성 실패: "요약 생성에 실패했습니다. 수동으로 작성해주세요"
참고자료 검색 실패: "관련 회의록을 찾을 수 없습니다"
동기화 실패: "네트워크 연결을 확인해주세요. 내용은 로컬에 저장됩니다"
충돌 발생: "다른 참석자가 동일한 부분을 수정 중입니다" + 병합 옵션

06-검증완료

개요

목적: 회의록 섹션별 내용 검증 및 완료 표시
관련 유저스토리: UFR-COLLAB-030
비즈니스 중요도: 중간
접근 경로: 회의진행 화면 내 또는 회의종료 전

주요 기능

섹션별 검증 상태 표시
검증 완료 체크 (참석자별)
미검증 섹션 안내
섹션 잠금 (회의 생성자만)

UI 구성요소

Mobile (320px~768px)

헤더
- "검증 완료" 타이틀
- 진행률 바 (전체 섹션 대비 검증 완료 비율)
섹션 리스트
- 각 섹션 카드:
  - 섹션 이름
  - 검증 상태 아이콘 (✓ 완료 / ○ 미완료)
  - 검증자 아바타 (여러 명 가능)
  - "검증 완료" 버튼
  - 잠금 아이콘 (회의 생성자가 잠근 경우)
하단 액션
- "모두 검증 완료" 버튼 (모든 섹션 검증 시 활성화)
- "나중에 하기" 버튼

Tablet/Desktop (768px+)

좌측: 섹션 리스트 (모바일과 동일)
우측: 선택된 섹션 내용 프리뷰

인터랙션

섹션 검증
- "검증 완료" 버튼 클릭 → 확인 다이얼로그
- 검증 완료 시: 체크 아이콘 표시, 검증자 아바타 추가
- 실시간 동기화: 다른 참석자에게 즉시 반영
섹션 잠금 (회의 생성자만)
- 검증 완료된 섹션에 잠금 아이콘 표시
- 잠긴 섹션은 수정 불가
- 잠금 해제 가능
진행률 표시
- 상단 진행률 바: 실시간 업데이트
- 100% 완료 시: "모두 검증 완료" 버튼 활성화

데이터 요구사항

입력: 회의 ID, 섹션 목록
출력: 섹션별 검증 상태, 검증자 정보
연동: Collaboration 서비스

에러 처리

검증 실패: "검증 처리에 실패했습니다. 다시 시도해주세요"
동기화 실패: "다른 참석자의 검증 상태를 불러올 수 없습니다"

07-회의종료

개요

목적: 회의 통계 표시 및 최종 회의록 확정
관련 유저스토리: UFR-MEET-040, UFR-MEET-050, UFR-AI-020
비즈니스 중요도: 높음
접근 경로: 회의진행 → "회의 종료" 버튼

주요 기능

회의 통계 표시 (시간, 참석자, 발언 횟수 등)
주요 키워드 클라우드
AI 자동 추출된 Todo 항목 확인
최종 회의록 확정
다음 액션 선택 (공유, 수정, 대시보드 복귀)

UI 구성요소

Mobile (320px~768px)

헤더
- "회의가 종료되었습니다" 메시지
- 회의 제목
통계 카드
- 회의 총 시간
- 참석자 수
- 주요 키워드 (태그 클라우드)
- 발언 통계 (화자별 발언 횟수 및 시간 - 바 차트)
AI Todo 추출 결과
- "AI가 추출한 Todo" 섹션
- Todo 항목 리스트:
  - Todo 내용
  - 담당자 (자동 식별 또는 수동 지정)
  - 마감일 (있는 경우)
- "Todo 수정" 버튼
최종 확정 섹션
- "최종 회의록 확정" 버튼 (Primary)
- 필수 항목 체크리스트:
  - ✓ 회의 제목 작성
  - ✓ 참석자 목록 작성
  - ✓ 주요 논의 내용 작성
  - ✓ 결정 사항 작성
하단 액션
- "회의록 공유하기" 버튼
- "회의록 수정하기" 버튼
- "대시보드로 돌아가기" 버튼

Tablet/Desktop (768px+)

상단: 통계 카드 (Grid Layout)
중앙: AI Todo 추출 결과
하단: 최종 확정 및 액션 버튼

인터랙션

통계 표시
- 애니메이션 효과로 숫자 카운트업
- 차트는 페이드인 효과
Todo 확인 및 수정
- Todo 항목 클릭: 상세 편집 모달
- 담당자 변경, 마감일 설정 가능
- "Todo 추가" 버튼으로 수동 추가
최종 확정
- "최종 회의록 확정" 클릭:
  - 필수 항목 검사
  - 누락 시: 해당 섹션으로 이동 안내
  - 완료 시: 확정 확인 다이얼로그
- 확정 후: Todo 자동 할당, 캘린더 연동

데이터 요구사항

입력: 회의 ID
출력:
- 회의 통계 (시간, 참석자 수, 발언 통계, 키워드)
- AI 추출 Todo 목록
- 확정 회의록 버전 ID
연동: Meeting 서비스, AI 서비스, Todo 서비스

에러 처리

통계 생성 실패: "통계를 생성할 수 없습니다" + 건너뛰기 옵션
Todo 추출 실패: "AI Todo 추출에 실패했습니다. 수동으로 추가해주세요"
필수 항목 누락: "필수 항목을 작성해주세요" + 해당 섹션으로 이동
확정 실패: "회의록 확정에 실패했습니다. 다시 시도해주세요"

08-회의록공유

개요

목적: 회의록 공유 설정 및 참석자에게 전송
관련 유저스토리: UFR-MEET-060
비즈니스 중요도: 높음
접근 경로: 회의종료 → "회의록 공유하기" 또는 대시보드 → 회의록 상세 → "공유"

주요 기능

공유 대상 선택 (전체/특정 참석자)
공유 권한 설정 (읽기 전용/댓글/편집)
공유 방식 선택 (이메일/링크)
링크 보안 설정 (유효기간, 비밀번호)
공유 이력 확인

UI 구성요소

Mobile (320px~768px)

헤더
- 뒤로가기 버튼
- "회의록 공유" 타이틀
- "공유하기" 버튼 (Primary)
공유 설정 폼
- 공유 대상
  - "참석자 전체" 라디오 버튼 (기본 선택)
  - "특정 참석자 선택" 라디오 버튼
  - 참석자 목록 (체크박스)
- 공유 권한
  - 드롭다운 또는 라디오 버튼
    - 읽기 전용 (기본)
    - 댓글 가능
    - 편집 가능
- 공유 방식
  - "이메일 발송" 체크박스 (기본 선택)
  - "링크 복사" 버튼
- 링크 보안 설정 (선택)
  - "유효기간 설정" 토글
    - 기간 선택 (7일, 30일, 90일, 무제한)
  - "비밀번호 설정" 토글
    - 비밀번호 입력 필드
공유 이력 (하단)
- 이전 공유 기록 리스트
- 각 항목: 공유 날짜, 대상, 권한

Tablet/Desktop (768px+)

좌측: 공유 설정 폼 (모바일과 동일)
우측: 회의록 미리보기

인터랙션

공유 대상 선택
- "참석자 전체" 선택: 모든 참석자에게 발송
- "특정 참석자 선택": 체크박스로 개별 선택
링크 생성 및 복사
- "링크 복사" 클릭: 고유 URL 생성 → 클립보드 복사
- 토스트 메시지: "링크가 복사되었습니다"
공유 실행
- "공유하기" 버튼 클릭:
  - 이메일 발송 진행 (로딩 인디케이터)
  - 성공: "회의록이 공유되었습니다" 토스트
  - 다음 회의 일정 언급 확인: 자동 캘린더 등록 제안

데이터 요구사항

입력:
- 회의 ID
- 공유 대상 (사용자 ID 배열)
- 공유 권한 (읽기/댓글/편집)
- 공유 방식 (이메일/링크)
- 링크 설정 (유효기간, 비밀번호)
출력:
- 공유 링크 URL
- 이메일 발송 결과
연동: Meeting 서비스, Notification 서비스

에러 처리

공유 대상 미선택: "공유할 대상을 선택해주세요"
이메일 발송 실패: "일부 참석자에게 이메일 발송에 실패했습니다" + 재시도 옵션
링크 생성 실패: "링크 생성에 실패했습니다. 다시 시도해주세요"

09-Todo관리

개요

목적: 할당된 Todo 목록 조회 및 진행 상황 관리
관련 유저스토리: UFR-TODO-010, UFR-TODO-030
비즈니스 중요도: 높음
접근 경로: 대시보드 → 하단 네비게이션 "Todo" 또는 대시보드 "내 Todo" 카드 → "전체 보기"

주요 기능

Todo 목록 표시 (상태별 필터링)
Todo 완료 처리
회의록 원문으로 이동 (양방향 연결)
Todo 진행 상황 통계
마감 임박 Todo 알림

UI 구성요소

Mobile (320px~768px)

헤더
- "내 Todo" 타이틀
- 필터 버튼 (상태별)
통계 카드
- 전체 Todo 개수
- 완료율 (원형 진행 바)
- 마감 임박 Todo 개수 (배지)
필터 탭
- 전체, 진행 중, 완료, 마감 임박
Todo 리스트
- 각 Todo 카드:
  - 체크박스 (완료 처리)
  - Todo 내용
  - 마감일 (색상 코딩: 초록-여유, 노랑-임박, 빨강-지연)
  - 우선순위 배지 (높음/보통/낮음)
  - 관련 회의록 링크 아이콘
  - 스와이프 액션: 수정, 삭제
FAB (Floating Action Button)
- "Todo 추가" (수동 추가)

Tablet/Desktop (768px+)

좌측: Todo 리스트
우측: 선택된 Todo 상세 정보
- Todo 내용
- 담당자
- 마감일
- 우선순위
- 관련 회의록 섹션 (임베디드 뷰)
- 진행 메모 (추가 가능)

인터랙션

Todo 완료 처리
- 체크박스 클릭:
  - 확인 다이얼로그 ("완료 처리하시겠습니까?")
  - 완료 시: 체크 애니메이션, 회의록에 실시간 반영
  - 완료 Todo는 리스트 하단으로 이동 (취소선)
회의록 연결
- 회의록 링크 아이콘 클릭:
  - 회의록상세조회 화면으로 이동
  - 해당 Todo가 언급된 섹션으로 자동 스크롤
  - 하이라이트 효과
필터링
- 필터 탭 클릭: 해당 상태의 Todo만 표시
- 마감 임박: 3일 이내 마감 Todo
수동 추가
- FAB 클릭: Todo 추가 모달
- 내용, 마감일, 우선순위 입력

데이터 요구사항

입력: 사용자 ID
출력:
- Todo 목록 (상태, 내용, 담당자, 마감일, 우선순위, 회의록 링크)
- Todo 통계 (전체, 완료, 진행 중)
연동: Todo 서비스, Meeting 서비스

에러 처리

Todo 로딩 실패: "Todo 목록을 불러올 수 없습니다" + 재시도 버튼
완료 처리 실패: "완료 처리에 실패했습니다. 다시 시도해주세요"
빈 상태: "할당된 Todo가 없습니다. 새 회의를 시작해보세요!"

10-회의록상세조회

개요

목적: 지난 회의록의 전체 내용 및 상세 정보 확인
관련 유저스토리: UFR-MEET-045, UFR-AI-040
비즈니스 중요도: 중간
접근 경로: 대시보드 → "내 회의록" 항목 클릭 또는 Todo관리 → 회의록 링크

주요 기능

회의 기본 정보 표시
섹션별 AI 요약 표시 (섹션 최상단)
섹션별 상세 내용 표시
참고자료 표시 (섹션 하단)
Todo 항목 및 진행 상황 표시
첨부파일 다운로드
회의록 수정/공유 액션

UI 구성요소

Mobile (320px~768px)

헤더
- 뒤로가기 버튼
- 회의 제목
- 메뉴 버튼 (수정, 공유, 삭제)
기본 정보 카드
- 회의 일시
- 참석자 아바타 및 이름 (역할 구분)
- 회의 장소
- 회의록 상태 배지 (작성중/확정완료)
- 작성자 및 최종 수정 시간
탭 네비게이션 (상단, Fixed)
- "회의록" 탭 (기본 활성)
- "대시보드" 탭
- "타임라인" 탭 (선택)
회의록 탭 콘텐츠 (섹션별 구조)
- 각 섹션:
  - 섹션 제목
  - 검증 완료 배지 (검증된 경우)
  - AI 회의 내용 요약 영역 (섹션 최상단, 강조 박스)
    - 요약 아이콘 (💡)
    - AI 자동 생성 요약 (2-3문장)
    - 요약 생성/수정 시간
    - "수정" 버튼 (권한 있는 경우)
  - 섹션 내용 (마크다운 렌더링)
  - 참고자료 영역 (섹션 하단, 별도 영역)
    - "참고자료" 라벨
    - 관련 회의록 링크 리스트 (최대 3개):
      - 링크 아이콘 (📄)
      - 회의 제목 (클릭 가능)
      - 회의 날짜
      - 관련도 표시 (퍼센트, 색상 코딩)
      - 1-2줄 요약
    - "더보기" 버튼 (3개 초과 시)
  - 접기/펼치기 버튼 (선택)
대시보드 탭 콘텐츠 (11-회의록대시보드.html 구조 참조)
- 핵심내용 섹션 (💡)
  - 번호 매김된 핵심 포인트 (4-5개)
  - 주요 키워드 태그 클라우드
  - 회의 통계 (참석자 수, 시간, 발언 횟수, 주요 의제 수)
- 결정사항 섹션 (✅)
  - 결정사항 카드 리스트
  - 각 카드: 결정 내용 + 결정자 + 시간 + 배경 설명
- Todo 진행상황 섹션 (📋)
  - 상태별 필터 탭 (전체/시작 전/진행 중/완료)
  - 담당자별 그룹화
  - 각 Todo: 제목 + 진행률 바 + 마감일 + 우선순위 배지
- 참고자료 섹션 (📚)
  - 참고자료 탭 (관련 회의록/프로젝트 문서/이슈 트래커/위키 페이지)
  - 각 참고자료 카드:
    - 아이콘 + 제목 + 메타정보 (날짜, 작성자)
    - 관련도 점수 배지 (92%, 88% 등)
    - 2-3줄 요약
- Todo 섹션 (강조)
  - Todo 항목 리스트:
    - 체크박스 (완료/미완료)
    - Todo 내용
    - 담당자 이름
    - 마감일
    - 우선순위 배지
- 첨부파일 섹션
  - 파일 아이콘 + 파일명
  - 다운로드 버튼
하단 액션 바 (Fixed)
- "수정" 버튼 (권한 있는 경우만)
- "공유" 버튼

Tablet/Desktop (768px+)

상단: 탭 네비게이션
- 회의록 (기본)
- 대시보드
- 타임라인
메인 영역:
- 회의록 탭: 전체 회의록 내용 (섹션별 구조)
- 대시보드 탭: 핵심내용, 결정사항, Todo 진행상황, 참고자료 (11-회의록대시보드.html 구조 참조)

인터랙션

탭 전환
- "회의록" 탭: 전체 회의록 내용 표시 (섹션별 구조)
- "대시보드" 탭: 핵심내용, 결정사항, Todo, 참고자료 요약 표시
- "타임라인" 탭: 시간 순서대로 회의 진행 과정 표시 (선택)
- 탭 전환 시 URL 변경 없이 클라이언트 사이드 렌더링
회의록 탭 인터랙션
- 섹션 네비게이션: 섹션 제목 클릭 → 해당 섹션으로 스크롤
- 접기/펼치기: 긴 내용은 초기 접힌 상태, 클릭으로 펼침
- AI 요약 편집:
  - "수정" 버튼 클릭 (권한 있는 경우) → 인라인 편집 모드
  - 수정 내용 자동 저장 (30초 간격)
  - 실시간 동기화
- 참고자료 링크:
  - 회의록 링크 클릭 → 새 탭에서 해당 회의록 열기
  - 관련도 색상 코딩: 90%+ (초록), 70-89% (노랑), 70% 미만 (회색)
  - "더보기" 클릭 → 전체 참고자료 목록 모달
대시보드 탭 인터랙션
- 핵심내용 섹션:
  - 키워드 태그 클릭 → 해당 키워드 관련 섹션으로 스크롤
  - 통계 항목 클릭 → 상세 정보 툴팁 표시
- 결정사항 섹션:
  - 결정사항 카드 클릭 → 회의록 탭의 해당 섹션으로 이동
  - 배경 설명 접기/펼치기
- Todo 진행상황:
  - 필터 탭 클릭 → 해당 상태의 Todo만 표시
  - Todo 카드 클릭 → Todo관리 화면으로 이동
  - 진행률 바: 실시간 업데이트
- 참고자료 섹션:
  - 탭 전환 (관련 회의록/프로젝트 문서/이슈 트래커/위키 페이지)
  - 참고자료 카드 클릭 → 해당 문서로 이동
  - 관련도 점수: 배지로 표시 (92%, 88% 등)
Todo 인터랙션
- Todo 체크박스: 완료 처리 (권한 있는 경우)
- Todo 클릭: Todo관리 화면으로 이동
첨부파일 다운로드
- 파일명 클릭: 다운로드 시작
- 진행 상황 표시
수정 및 공유
- "수정" 버튼: 회의록수정 화면으로 이동
- "공유" 버튼: 회의록공유 화면으로 이동

데이터 요구사항

입력: 회의록 ID, 활성 탭 (회의록/대시보드/타임라인)
출력:
- 회의 기본 정보: 제목, 일시, 참석자, 장소, 상태, 작성자, 수정 시간
- 섹션별 AI 요약: 자동 생성 요약, 수정 이력
- 섹션별 내용: 마크다운 형식
- 참고자료 목록:
  - 관련 회의록 (제목, 날짜, 관련도, 요약)
  - 프로젝트 문서 (제목, 작성자, 관련도)
  - 이슈 트래커 링크
  - 위키 페이지 링크
- 대시보드 데이터 (대시보드 탭 선택 시):
  - 핵심내용 (4-5개 포인트)
  - 주요 키워드
  - 회의 통계 (참석자 수, 시간, 발언 횟수, 의제 수)
  - 결정사항 리스트 (결정 내용, 결정자, 시간, 배경)
  - Todo 진행상황 (담당자별 그룹, 진행률)
- Todo 목록 및 진행 상황
- 첨부파일 목록
연동: Meeting 서비스, AI 서비스 (UFR-AI-040), Todo 서비스

에러 처리

회의록 로딩 실패: "회의록을 불러올 수 없습니다" + 재시도 버튼
AI 요약 로딩 실패: "요약을 불러올 수 없습니다" (섹션 내용은 정상 표시)
참고자료 로딩 실패: "참고자료를 불러올 수 없습니다" (빈 상태 표시)
대시보드 데이터 로딩 실패: "대시보드를 불러올 수 없습니다" + 재시도 버튼
권한 없음: "수정" 버튼 비활성화, "조회 권한만 있습니다" 메시지
첨부파일 다운로드 실패: "파일 다운로드에 실패했습니다"

11-회의록수정

개요

목적: 지난 회의록 조회 및 수정
관련 유저스토리: UFR-MEET-055, UFR-AI-040
비즈니스 중요도: 중간
접근 경로: 대시보드 → "내 회의록" → 회의록상세조회 → "수정"

주요 기능

회의록 목록 조회 (필터링, 정렬, 검색)
회의록 내용 수정 (섹션별)
AI 요약 수정 (섹션별)
참고자료 편집 (추가/제거)
자동 저장 (30초 간격)
수정 이력 관리
상태 변경 (확정완료 → 작성중)

UI 구성요소

Mobile (320px~768px)

헤더
- 뒤로가기 버튼
- "회의록 수정" 타이틀
- "저장" 버튼 (Primary)
- 자동 저장 인디케이터
필터 및 검색 (상단)
- 상태 필터: 전체 / 작성중 / 확정완료
- 정렬: 최신순 / 회의일시순 / 제목순
- 검색창: 제목, 참석자, 키워드
회의록 리스트 (목록 모드)
- 각 회의록 카드:
  - 회의 제목
  - 회의 일시
  - 상태 배지
  - 마지막 수정 시간
  - 검증 완료율 (작성중인 경우)
  - 스와이프 액션: 수정, 삭제
수정 모드 (편집 화면)
- 섹션별 편집 영역
- 각 섹션:
  - 섹션 제목
  - AI 요약 편집 영역
    - 요약 텍스트 편집 필드
    - "AI 재생성" 버튼 (요약 다시 생성)
    - 마지막 수정 시간 표시
  - 편집 가능한 텍스트 영역
  - 참고자료 편집 영역
    - 기존 참고자료 목록 (제거 버튼 포함)
    - "참고자료 추가" 버튼
    - 회의록 검색 및 선택 UI
  - 검증 완료 체크박스 (잠금 해제 필요)
- 자동 저장 상태 표시 ("저장됨", "저장 중...")

Tablet/Desktop (768px+)

좌측: 회의록 리스트
중앙: 선택된 회의록 편집 영역
우측: 수정 이력 패널

인터랙션

회의록 선택
- 리스트에서 회의록 클릭: 편집 모드로 전환
- 편집 모드에서 다른 회의록 선택: 저장 확인 다이얼로그
내용 수정
- 텍스트 영역 클릭: 포커스 및 편집 가능
- 자동 저장: 30초 간격, 인디케이터 표시
- 수동 저장: "저장" 버튼 클릭
섹션 잠금 해제
- 잠긴 섹션: 회의 생성자에게 승인 요청
- 승인 대기 중: "승인 대기 중" 배지 표시
- 승인 완료: 편집 가능
AI 요약 편집
- 요약 텍스트 필드 클릭: 직접 수정 가능
- "AI 재생성" 버튼 클릭:
  - 현재 섹션 내용 기반으로 요약 재생성
  - 로딩 인디케이터 표시
  - 생성 완료 시 자동 업데이트
- 자동 저장 (30초 간격)
참고자료 편집
- "참고자료 추가" 버튼 클릭:
  - 회의록 검색 모달 표시
  - 제목, 날짜, 키워드로 검색
  - 선택된 회의록 추가
- 제거 버튼 (X): 참고자료 목록에서 제거
- 순서 변경: 드래그하여 순서 조정 (선택)
상태 변경
- 확정완료 회의록 수정 시: 자동으로 "작성중" 상태로 변경
- 모든 섹션 검증 완료 시: "확정완료"로 변경 제안

데이터 요구사항

입력:
- 회의록 ID (조회)
- 수정 내용 (섹션 ID, 내용)
- AI 요약 수정 (섹션 ID, 요약 내용)
- 참고자료 변경 (추가/제거할 회의록 ID)
출력:
- 회의록 목록 (필터/정렬/검색 결과)
- 수정 결과 (성공/실패)
- AI 요약 재생성 결과
- 수정 이력 (누가, 언제, 무엇을)
연동: Meeting 서비스, AI 서비스 (UFR-AI-040), Collaboration 서비스

에러 처리

권한 없음: "본인이 작성한 회의록만 수정할 수 있습니다"
자동 저장 실패: "네트워크 연결을 확인해주세요. 로컬에 임시 저장됩니다"
AI 요약 재생성 실패: "요약 생성에 실패했습니다. 수동으로 작성해주세요"
참고자료 검색 실패: "회의록을 검색할 수 없습니다"
충돌 발생: "다른 참석자가 동일한 부분을 수정했습니다" + 병합 옵션
삭제 실패: "회의록 삭제에 실패했습니다"

12-회의록목록조회

개요

목적: 회의록 목록 조회 및 필터링/정렬/검색 기능 제공
관련 유저스토리: UFR-MEET-030 (회의록 조회), UFR-MEET-045 (회의록 상세 조회)
비즈니스 중요도: 높음
접근 경로:
- 대시보드 → "내 회의록" 전체 보기
- 대시보드 → "공유받은 회의록" 전체 보기
- 하단 네비게이션 → "회의록" 메뉴

주요 기능

회의록 목록 조회 (참여/생성/공유받은 회의록)
필터링 기능:
- 참여 유형: 공유받은 회의, 참석한 회의, 생성한 회의
- 상태: 전체, 작성중, 확정완료
정렬 기능:
- 최신 회의순 (회의 일시 기준, 최근 순)
- 최신 업데이트순 (수정 일시 기준, 최근 순)
- 제목 가나다순 (오름차순)
검색 기능:
- 제목, 참석자, 키워드로 통합 검색
- 실시간 검색 결과 업데이트
회의록 상세 조회 (항목 클릭 시)

UI 구성요소

Mobile (320px~768px)

헤더 (Fixed, 상단)
- 뒤로가기 버튼
- "내 회의록" 타이틀 (또는 "공유받은 회의록")
- 검색 아이콘 (검색창 포커스)
필터 및 정렬 (상단, 스크롤 가능)
- 필터 행 1 (2컬럼 그리드):
  - 상태 필터 (Select)
    - 옵션: 전체, 작성중, 확정완료
    - 기본값: 전체
  - 정렬 (Select)
    - 옵션: 최신순, 회의일시순, 제목순
    - 기본값: 최신순
- 참여 유형 필터 (탭 형식, 선택):
  - 전체 (기본 선택)
  - 공유받은 회의
  - 참석한 회의
  - 생성한 회의
검색 영역
- 검색 입력 필드
- Placeholder: "회의 제목, 참석자, 키워드 검색"
- 실시간 검색 (입력 시 즉시 필터링)
통계 정보 (카드, 선택)
- 3컬럼 그리드:
  - 전체: {count}개
  - 작성중: {count}개
  - 확정완료: {count}개
- 구분선으로 시각적 분리
회의록 목록 (스크롤 가능)
- 각 회의록 항목 (meeting-item):
  - 좌측 영역:
    - 회의 제목 (H5, 볼드)
    - 메타정보 (Caption, 회색):
      - 회의 일시 (날짜 + 시간) · 참석자 수
    - 최종 수정 시간 (Caption, 회색):
      - 상대 시간 표시 ("1시간 전", "어제", "3일 전")
  - 우측 영역:
    - 상태 배지:
      - "확정완료" (초록색 배지)
      - "작성중" (노란색 배지)
    - 조회 권한 표시 (조회 전용인 경우):
      - "조회 전용" (Caption, 회색)
- 빈 상태:
  - 검색 결과 없음: "검색 결과가 없습니다"
  - 회의록 없음: "회의록이 없습니다"
하단 네비게이션 (Fixed, 하단)
- 홈, 회의록 (active), Todo, 프로필

Tablet/Desktop (768px+)

사이드바 (좌측, Fixed, 240px)
- 메인 메뉴
- 회의록 목록 (active)
메인 콘텐츠 (중앙)
- 필터 및 정렬 (상단, 가로 배치)
- 참여 유형 필터 (탭 또는 버튼 그룹)
- 검색 영역
- 통계 정보 (3컬럼 카드)
- 회의록 목록 (Grid 또는 List Layout)
  - 각 카드: 호버 시 그림자 증가, 약간 상승

인터랙션

필터링
- 상태 필터 변경 → 즉시 목록 재렌더링
- 참여 유형 탭 선택 → 해당 유형 회의록만 표시
- 필터 조합 가능 (상태 + 참여 유형)
정렬
- 정렬 옵션 선택 → 즉시 목록 재정렬
- 정렬 기준:
  - 최신순: updatedAt DESC
  - 회의일시순: meetingDate DESC
  - 제목순: title ASC (한글 가나다순)
검색
- 검색 아이콘 클릭 → 검색 입력 필드에 포커스
- 텍스트 입력 → 실시간 검색 (debounce 300ms)
- 검색 범위:
  - 회의 제목 (부분 일치)
  - 참석자 이름 (부분 일치)
  - 키워드 (태그, 내용에서 추출된 키워드)
- 검색어 지우기: X 버튼 (검색어 입력 시 표시)
회의록 조회
- 회의록 항목 클릭 → 회의록 상세 화면으로 이동
- 전달 데이터: 회의록 ID
- 조회 전용 회의록: 읽기 모드로 표시
통계 업데이트
- 필터/검색 적용 시 → 통계 자동 갱신
- 전체, 작성중, 확정완료 개수 실시간 반영
빈 상태 처리
- 검색 결과 없음: "검색 결과가 없습니다" 메시지
- 필터링 결과 없음: 필터 조건에 맞는 회의록 없음 안내
- 회의록 없음: "회의록이 없습니다" + 회의 시작 유도 메시지

데이터 요구사항

입력:
- 사용자 ID (현재 로그인 사용자)
- 필터 조건:
  - 참여 유형: all | shared | attended | created
  - 상태: all | draft | confirmed
- 정렬 기준: recent | date | title
- 검색어 (선택)
출력:
- 회의록 목록:
  - 회의 ID
  - 제목
  - 회의 일시
  - 참석자 목록 (또는 참석자 수)
  - 상태 (draft | confirmed)
  - 생성자 ID
  - 생성일시 (createdAt)
  - 수정일시 (updatedAt)
  - 조회 권한 (편집 가능 여부)
- 통계:
  - 전체 개수
  - 작성중 개수
  - 확정완료 개수
연동:
- Meeting 서비스 (회의록 목록 조회 API)
- Share 서비스 (공유 정보 조회)

에러 처리

데이터 로딩 실패:
- "회의록을 불러오는 중 오류가 발생했습니다." 메시지
- "다시 시도" 버튼 제공
검색 실패:
- "검색 중 오류가 발생했습니다." 토스트 메시지
- 기존 목록 유지
네트워크 오류:
- "네트워크 연결을 확인해주세요." 토스트 메시지
- 자동 재시도 (최대 3회, exponential backoff)
권한 없음:
- 접근 권한 없는 회의록 클릭 시:
  - "접근 권한이 없습니다" 토스트 메시지
  - 목록으로 복귀
빈 상태:
- 검색 결과 없음: "검색 결과가 없습니다"
- 필터링 결과 없음: "조건에 맞는 회의록이 없습니다"
- 전체 회의록 없음: "회의록이 없습니다. 첫 회의를 시작해보세요!" + 회의 시작 버튼

화면 간 전환 및 네비게이션

네비게이션 구조

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 접근

320px (Small Mobile) 기준 설계
- 단일 컬럼 레이아웃
- 필수 기능만 표시
- 터치 친화적 UI (최소 44px 터치 영역)
- 하단 네비게이션
768px (Tablet) 확장
- 2컬럼 레이아웃 (일부 화면)
- 추가 정보 표시 (통계, 위젯)
- 사이드바 도입 (선택)
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개 화면 설계 완료
1.1	2025-10-21	이미준	AI 요약 및 참고자료 기능 추가 - 05-회의진행: AI 회의 내용 요약 자동 생성 및 참고자료 자동 연결 추가 - 10-회의록상세조회: 섹션별 AI 요약 표시 및 참고자료 영역 추가 - 11-회의록수정: AI 요약 수정 및 참고자료 편집 기능 추가 - 관련 유저스토리: UFR-AI-040 (관련 회의록 자동 연결)
1.2	2025-10-21	이미준	회의록 상세 화면 구조 개선 (프로토타입 기반) - 10-회의록상세조회: 탭 기반 네비게이션 추가 (회의록/대시보드/타임라인) - 대시보드 탭 추가: 핵심내용, 결정사항, Todo 진행상황, 참고자료 섹션 - 참고자료 관련도 점수 표시 (백분율 + 색상 코딩) - 참고자료 카테고리 탭 (관련 회의록/프로젝트 문서/이슈 트래커/위키 페이지) - 참조: design-gappa/uiux/prototype 파일 (11-회의록대시보드.html, 05-회의진행.html)
1.3	2025-10-21	이미준	대시보드 및 회의록 목록 화면 개선 (사용자 피드백 반영) - 02-대시보드: 예정된 회의 카드 추가, Todo 우선순위 정렬 개선 (지연→진행→미진행→완료, 최대 5개), 내 회의록 상태 배지 추가, 공유받은 회의록 섹션 개선 - 12-회의록목록조회: 신규 화면 추가 (필터링/정렬/검색 기능) - 필터: 참여 유형(공유받은/참석한/생성한), 상태(전체/작성중/확정완료) - 정렬: 최신 회의순/최신 업데이트순/제목 가나다순 - 검색: 제목/참석자/키워드 통합 검색 - 통계 정보 표시 (전체/작성중/확정완료 개수) - 참조: design/uiux/prototype_fix 및 design-gappa/uiux/prototype 파일
1.3.1	2025-10-21	이미준	대시보드 진행중 회의 표시 기능 추가 - 02-대시보드: 예정된 회의 카드에 진행중 회의 포함 - 진행중 회의 우선 표시 (최상단) - "진행중" 배지 (빨강/주황, 깜빡임 애니메이션) - "참여하기" 버튼으로 즉시 회의 참여 가능 - 정렬: 진행중 회의 → 예정된 회의 (일시 순) - 데이터 요구사항: 회의 상태 (ongoing) 추가, 진행중 회의 필터 조건 정의 - 에러 처리: 진행중 회의 참여 실패 시나리오 추가 (종료됨/권한없음/네트워크오류)

63 KiB Raw Blame History Unescape Escape

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

문서 정보

목차

설계 개요

설계 목표

설계 원칙

1. Mobile First 철학

2. 사용자 중심 설계

3. 일관성과 예측 가능성

유저스토리 매핑

주요 추가 기능 (v1.1)

프로토타입 화면 목록

화면 간 사용자 플로우

주요 사용자 시나리오별 플로우

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

시나리오 2: 지난 회의록 조회 및 수정

시나리오 3: Todo 관리

시나리오 4: 빠른 회의 시작 (템플릿 스킵)

플로우 다이어그램

화면별 상세 설계

01-로그인

개요

주요 기능

UI 구성요소

인터랙션

데이터 요구사항

에러 처리

02-대시보드

개요

주요 기능

UI 구성요소

인터랙션

데이터 요구사항

에러 처리

03-회의예약

개요

주요 기능

UI 구성요소

인터랙션

데이터 요구사항

에러 처리

04-템플릿선택

개요

주요 기능

UI 구성요소

인터랙션

데이터 요구사항

에러 처리

05-회의진행

개요

주요 기능

UI 구성요소

인터랙션

데이터 요구사항

에러 처리

06-검증완료

개요

주요 기능

UI 구성요소

인터랙션

데이터 요구사항

에러 처리

07-회의종료

개요

주요 기능

UI 구성요소

인터랙션

데이터 요구사항

에러 처리

08-회의록공유

개요

주요 기능

UI 구성요소

인터랙션

데이터 요구사항

에러 처리

09-Todo관리

개요

주요 기능

63 KiB

Raw Blame History