shared-dg05-coffeeQuokka/hgzero
1
0
Fork 0
mirror of https://github.com/hwanny1128/HGZero.git synced 2025-12-06 17:16:25 +00:00
Code Issues Packages Projects Releases Wiki Activity
hgzero/design/uiux/uiux.md
yabo0812 bac1bcb4c4 UFR-TODO 및 UFR-TERM 잔여 참조 정리 
유저스토리:
- UFR-TODO 참조 제거 (742, 1136-1137 라인)
- UFR-TERM-010/020/030 전체 삭제 (RAG와 기능 중복)
- 버전 업데이트: v2.4.3 → v2.4.4
- 목차에서 UFR-TERM 항목 제거
- 변경 이력 추가

UI/UX 설계서:
- Todo 서비스 매핑 제거 (96 라인)
- 09-Todo관리 화면 취소선 처리 및 제거 표시
- 09-Todo관리 섹션에 제거 안내 추가
- Todo 편집 섹션 제거 표시
- 버전 업데이트: v1.5.6 → v1.5.7
- 변경 이력 추가
- 목차 2-depth로 간소화

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-28 19:08:36 +09:00

90 KiB
Raw Blame History

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

문서 정보

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

목차

  1. 설계 개요
  2. 프로토타입 화면 목록
  3. 화면 간 사용자 플로우
  4. 화면별 상세 설계
  5. 공통 UI 컴포넌트
  6. 공통 에러 메시지 표준
  7. 화면 간 전환 및 네비게이션
  8. 반응형 설계 전략
  9. 접근성 보장 방안
  10. 성능 최적화 방안
  11. 변경 이력
  12. 부록

설계 개요

설계 목표

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

설계 원칙

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-030 (안건별 검증완료 및 잠금 처리)

주요 추가 기능 (v1.1)

  1. AI 기반 회의 내용 요약 자동 생성

    • 각 섹션 최상단에 AI가 자동으로 생성한 2-3문장 요약 표시
    • 참석자가 요약 내용 확인 후 수정 가능
    • 실시간 동기화 및 자동 저장

  2. 참고자료 자동 연결 (UFR-AI-040)

    • 각 섹션 하단에 관련 회의록 자동 연결
    • 이전 회의록 및 맥락상 관련 회의록 링크 제공
    • 관련도 표시 (퍼센트 또는 별점)
    • 최대 3개 자동 표시, 더보기로 전체 목록 확인 가능

↑ 목차로 돌아가기

프로토타입 화면 목록

번호 화면명 관련 유저스토리 비즈니스 중요도 설명 사이드바 유무 이전화면 이동버튼 유무 비고
01 로그인 UFR-USER-010 필수 사용자 인증 X X
02 대시보드 UFR-USER-020 필수 메인 랜딩 페이지 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 높음 실시간 회의 진행 및 회의록 작성 X X
07 회의종료 UFR-MEET-040, UFR-MEET-050 높음 회의 통계 및 최종 확정 X X
09 Todo관리 UFR-TODO-010, UFR-TODO-030 높음 Todo 목록 및 진행 관리 O X MVP v2.4.0에서 제거됨
10 회의록상세조회 UFR-MEET-047 중간 회의록 상세 보기 X O
11 회의록수정 UFR-MEET-055 중간 지난 회의록 수정 X O
12 회의록목록조회 UFR-MEET-046 높음 회의록 목록 필터링/정렬/검색 O X

↑ 목차로 돌아가기

화면 간 사용자 플로우

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

시나리오 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 --> 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

에러 처리

02-대시보드

개요

  • 목적: 주요 기능 접근 허브, 최근 활동 요약 제공
  • 관련 유저스토리: UFR-USER-020 (대시보드 조회)
  • 비즈니스 중요도: 필수
  • 접근 경로: 로그인 후 메인 화면

주요 기능 (MVP 스코프 축소 v1.5.0)

  1. 빠른 회의 시작 및 예약
  2. 예정된/진행중 회의 목록 (upcoming & ongoing meetings)
    • 예정된 회의 (아직 시작 전)
    • 진행중 회의 (참여 가능한 회의)
  3. 통계 정보 표시 (예정된 회의, 작성중 회의록)
  4. 내 회의록 (참여자/생성자로 등록된 최근 4개, 상태 포함)
  5. 전역 검색

변경사항 (v1.5.0):

  • ❌ 제거: "내 Todo" 섹션 및 Todo 관리 메뉴
  • ✅ 추가: "작성중 회의록" 통계 카드
  • ✅ 변경: 네비게이션 간소화 (대시보드, 회의록만 유지)

UI 구성요소

Mobile (320px~768px)

  • 헤더 (상단) - 개선안 A 적용 (v1.5)

    • "안녕하세요 👋" (H3, Bold)
    • 부제: "오늘 {N}건의 회의가 예정되어 있어요" (Body, 회색)
      • N = 예정된 회의 개수 (동적 업데이트)
      • 예정된 회의가 없을 경우: "예정된 회의가 없습니다"

  • 메인 콘텐츠 (스크롤, padding-bottom: 80px, background: gray-50)

    • 통계 카드 (2열 그리드) - v1.5.0 변경

      • "📅 예정된 회의" 카드
        • 값: 전체 예정 + 진행 중 회의 개수
        • 클릭 액션: 없음 (정보 표시만)
      • "📝 작성중 회의록" 카드
        • 값: 내가 참석한 회의 중 '작성중' 상태인 회의록 개수
        • 클릭 액션: 없음 (정보 표시만)
      • 높이: ~80px
      • 반응형: 태블릿 이상에서 간격 증가

    • 최근 회의 섹션

      • 헤더: "예정된 회의" (H4) + "전체 보기 →" 링크
      • 정렬 기준 (UFR-USER-020 기준):
        1. 1순위: 회의록 미생성 회의 (진행중 + 예정) 우선 표시
        2. 2순위: 미생성이 3개 미만이면 최근 종료된 회의(회의록 있음)로 나머지 채움
        3. 각 그룹 내 정렬: 빠른 일시 순 (시작 시간 기준)
        4. 최대 표시: 3개
      • 회의 카드 (클릭 가능 블록):
        • 상태 라벨 (배지)
          • 진행중: "진행중"
          • 예정: "예정"
          • 완료: "작성중" 또는 "확정완료"
        • 회의 제목 (H5)
        • 생성자 표시 (👑 아이콘) - 내가 생성한 회의인 경우
        • 회의 일시 (아이콘: calendar_today)
        • 참석자 수 (아이콘: people)
        • 장소 정보
        • 상태 버튼 (표시용):
          • 진행중: "참여하기" 버튼
          • 예정: 버튼 없음 (카드 클릭으로 처리)
          • 완료: "보기" 버튼
      • 빈 상태: "예정된 회의가 없습니다"

    • 내 회의록 카드 - v1.5.0 변경 (Todo 섹션 제거)

      • 헤더: "내 회의록" (H4) + "전체 보기 →" 링크 (회의록 목록 화면으로 이동)
      • 최근 회의록 리스트 (최대 4개, 2x2 그리드):
        • 필터: 내가 참여자 또는 생성자로 등록된 회의록
        • 정렬: 최근 생성 순 (createdAt 기준)
      • 각 항목:
        • 회의 제목 (H5)
        • 회의 일시 (날짜 + 시간)
        • 참석자 수
        • 상태 배지:
          • "작성중" (draft, 주황색 배지)
          • "확정완료" (confirmed, 초록색 배지)
        • 검증완료율 표시 (작성중인 경우만)
      • 클릭 시: 회의록 상세 화면으로 이동
      • 빈 상태: "참여한 회의록이 없습니다"

Mobile (320px~768px) - v1.5.0 네비게이션 간소화

  • 하단 네비게이션: 2개 메뉴만 표시
    • 홈 (대시보드) - 활성 상태
    • 회의록 (회의록 목록)

Tablet/Desktop (768px+)

  • 좌측 사이드바: Desktop 좌측 사이드바 참조 (대시보드 활성)

  • 메인 콘텐츠 (왼쪽 여백 240px)

    • 헤더

      • "안녕하세요, {사용자명}님!" (H2)
      • "오늘의 일정을 확인하세요" (부제)

    • 통계 카드 그리드 (2개) - v1.5.0 변경

      • 예정된 회의 (📅)
      • 작성중 회의록 (📝)

    • 최근 회의 그리드 (2-3컬럼)

      • 회의 카드들 (진행중 우선)
      • 참여하기/수정/보기 버튼

    • 내 회의록 리스트

      • 화이트 카드 배경
      • 전체보기 → 12-회의록목록조회.html

  • 하단 네비게이션: 숨김 (데스크톱에서는 사이드바 사용)

인터랙션

  1. 빠른 액션

    • "새 회의 시작" 클릭 → 템플릿선택 화면으로 이동 (페이드 전환)
    • "회의 예약" 클릭 → 회의예약 화면으로 이동

  2. 예정된/진행중 회의 인터랙션

    • 진행중 회의 (모든 참석자):

      • "참여하기" 버튼 클릭 → 회의 진행 화면으로 즉시 이동
      • 회의 항목 클릭 → 회의 상세 정보 표시 (모달 또는 화면 이동)
      • 애니메이션: "진행중" 배지 깜빡임 효과 (1초 간격)

    • 예정된 회의 - 생성자 (내가 생성한 회의):

      • 회의 카드 클릭 → 회의예약 화면(수정 모드)으로 이동
        • 회의 제목, 일시, 참석자, 안건 등 수정 가능
        • 저장 시 참석자에게 변경 알림 발송
      • 크라운 아이콘 표시 (생성자 구분)

    • 예정된 회의 - 초대받은 참석자:

      • 회의 카드 클릭 → 시스템 알럿 표시
        • 메시지: "아직 회의 시간이 되지 않아 참여하실 수 없습니다"
        • 다음 버전에서 회의 상세 조회 기능으로 개선 예정

    • 공통:

      • 회의 항목 호버: 카드 그림자 증가
      • "전체 보기" 링크 클릭 → 회의 목록 화면으로 이동

  3. 카드 인터랙션

    • 회의록 항목 클릭 → 회의록 상세 화면으로 이동
    • Todo 항목 클릭 → 해당 Todo가 포함된 회의록 상세 화면으로 이동
      • URL 파라미터로 회의록 ID와 Todo ID 전달
      • 회의록 상세 화면에서 해당 Todo 섹션으로 자동 스크롤
    • "전체 보기" 링크 클릭 → 해당 목록 화면으로 이동
    • 호버 효과: 카드 그림자 증가, 약간 상승 (transform: translateY(-2px))

  4. 검색

    • 검색 아이콘 클릭: 전체 화면 검색 인터페이스 표시
    • 실시간 자동완성 및 최근 검색어 제공

데이터 요구사항

  • 입력:

    • 사용자 ID (현재 로그인 사용자)
    • 현재 날짜/시간 (예정된 회의 필터링용)

  • 출력:

    • 예정된/진행중 회의:

      • 회의 ID, 제목, 일시, 참석자 목록, 상태 (예정/진행중), D-day
      • 생성자 ID (권한 판별용)
      • 현재 사용자 역할 (creator | attendee)
      • 참여 가능 시간 (시작 시간 - 10분)
      • 필터 조건:
        • 진행중 회의: 회의 시작 시간 <= 현재 시간 AND 회의 종료 안 됨, 사용자가 참석자 또는 생성자
        • 예정된 회의: 회의 일시 >= 현재 시간, 사용자가 참석자 또는 생성자
      • 정렬 우선순위:
        1. 진행중 회의 우선 (상태 = ongoing)
        2. 예정된 회의 (회의 일시 순, 가까운 순)
      • 최대 3개 (진행중 회의 우선)
      • 버튼 표시 조건:
        • 진행중 회의: "참여하기" 버튼 (항상 표시)
        • 예정된 회의 (생성자): "수정" 버튼 (항상 표시)
        • 예정된 회의 (참석자):
          • 현재 시간 >= 시작 시간 - 10분: "참여하기" 버튼 활성화
          • 현재 시간 < 시작 시간 - 10분: 버튼 비활성화 또는 타이머 표시

    • 내 Todo:

      • Todo ID, 제목, 담당자, 마감일, 상태, 우선순위
      • 필터: 담당자 = 현재 사용자
      • 정렬:
        1. 지연중 (마감일 < 현재 날짜, 상태 != done)
        2. 진행중 (상태 = in_progress)
        3. 미진행 (상태 = not_started, 마감일 >= 현재 날짜)
        4. 완료 (상태 = done)
      • 최대 5개

    • 내 회의록:

      • 회의 ID, 제목, 일시, 참석자 수, 상태, 생성일시, 수정일시
      • 필터: 사용자가 참여자 또는 생성자
      • 정렬: 생성일시 (최근 순)
      • 최대 3개

    • 통계 데이터 (Desktop):

      • 예정된/진행중 회의 수 (진행중 회의 수 별도 배지)
      • 진행 중 Todo 수
      • Todo 완료율 (완료 / 전체 × 100)

  • 연동:

    • Meeting 서비스 (회의 정보, 회의록 정보)
    • Todo 서비스 (Todo 목록)

에러 처리

  • 데이터 로딩 실패:

    • 해당 카드에 "일시적으로 데이터를 불러올 수 없습니다." 표시
    • "다시 시도" 버튼 제공 (새로고침 아이콘)
    • 로그 기록 및 에러 추적

  • 부분 데이터 로딩 실패:

    • 실패한 섹션만 에러 표시, 나머지 섹션은 정상 표시
    • 사용자 경험 최소 방해

  • 빈 상태 (각 섹션별):

    • 예정된/진행중 회의: "예정된 회의가 없습니다"
    • Todo: "할당된 Todo가 없습니다"
    • 내 회의록: "작성한 회의록이 없습니다. 첫 회의를 시작해보세요!"

  • 진행중 회의 참여 실패:

  • 예정된 회의 접근 제한:

    • 시간 제한 (초대받은 참석자):
      • "아직 참여할 수 없습니다. N분 후 참여 가능합니다." 토스트 메시지
      • 10분 전부터 참여 버튼 활성화
      • 타이머 자동 갱신 (1분 간격)
    • 권한 제한 (수정 시도):

  • 회의 수정 실패 (생성자):

  • 네트워크 오류: 공통 에러 메시지 - 네트워크 오류 참조

03-회의예약

개요

  • 목적: 예정된 회의 일정 등록 및 참석자 초대
  • 관련 유저스토리: UFR-MEET-010
  • 비즈니스 중요도: 높음
  • 접근 경로: 대시보드 → "회의 예약" 버튼
  • 권한: 모든 사용자 (예약 생성 시 자동으로 회의 생성자가 됨)

주요 기능

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

UI 구성요소

Mobile (320px~768px)

  • 헤더

    • 뒤로가기 버튼
    • "회의 예약" 타이틀
    • "저장" 버튼 (Primary)

  • 폼 섹션 (스크롤)

    • 회의 제목 (필수)

      • 텍스트 입력 필드
      • 최대 100자 카운터

    • 날짜 및 시간 (필수)

      • 날짜 선택기 (달력 UI)
      • 시작 시간 선택기
      • 종료 시간 선택기
      • 종일 토글 (선택)

    • 장소 (선택)

      • 텍스트 입력 필드
      • 온라인/오프라인 토글
      • 온라인 선택 시: 회의 링크 자동 생성 옵션

    • 참석자 (필수, 최소 1명)

      • 참석자 칩 (제거 가능)
      • "참석자 추가" 버튼
      • 참석자 검색 (이메일 또는 이름)

    • 안건 (선택)

      • 다중 라인 텍스트 입력

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-AI-040, UFR-RAG-010/020, UFR-PART-020, UFR-HOST-010/020, UFR-TERM-010/020
  • 비즈니스 중요도: 높음 (핵심 화면)
  • 접근 경로: 대시보드 → "참여하기" 버튼 (페이지 전환)
  • 권한 (MVP 개선):
    • 회의 생성자 전용: 회의 종료, 녹음 제어 (일시정지/재개/종료)
    • 모든 참석자: 회의 참여, AI 기반 메모 작성, 용어 확인, 관련 회의록 확인, 중도 퇴장

주요 기능 (MVP 스코프 축소 v1.5.0)

  1. 음성 녹음 및 실시간 텍스트 변환 (STT)
  2. AI 자동 회의록 작성 (구조화)
  3. AI 기반 메모 작성 (UFR-PART-020): AI가 실시간으로 감지한 주요 내용을 참석자가 선택하여 개인 메모로 저장
  4. 전문용어 자동 감지 및 맥락 기반 설명
  5. 참고자료 자동 연결 (이전 회의록, 관련 회의록)
  6. 참석자 관리 및 초대 기능
  7. 회의 진행 시간 표시

변경사항 (v1.5.0):

  • ✅ 변경: "AI 제안" 탭 → "AI 기반 메모" 탭으로 기능 변경
  • ✅ 추가: 개인 메모 입력 및 저장 기능 (각 참석자별 개별 저장)
  • ✅ 정책: 메모는 회의 종료 전까지만 표시/편집 가능, 다른 참석자 메모는 볼 수 없음

UI 구성요소

전체 레이아웃

  • 헤더 (Fixed, 상단)

    • 좌측: "회의 진행 중" 제목 + 경과시간 배지 (빨강, 01:03)
    • 우측: "회의 종료" 버튼 (민트 그린 테두리)

  • 메인 콘텐츠 영역: 정보 패널 (탭 구조)

    • 탭 네비게이션 (4개 탭)

      • 참석자 (3명)
      • AI 기반 메모
      • 용어 사전
      • 관련 자료 (32건)

    • 참석자 탭 (4명)

      • 제목: "참석자 (4명)" (동적으로 인원수 업데이트)
      • 참석자 추가 폼:
        • 이메일 입력 필드: placeholder "이메일 주소 입력", form-control 스타일
        • "초대" 버튼: btn btn-primary btn-sm
        • 레이아웃: Flex (gap: 8px), 입력창(flex: 1) + 버튼
        • 하단 여백: 16px (margin-bottom: var(--space-md))
      • 참석자 목록 (아바타 + 이름)
        • 김민준 (초록 아바타)
        • 박서연 (파랑 아바타)
        • 이준호 (노랑 아바타)
        • 최유진 (핑크 아바타)
      • 각 참석자 아이템:
        • 컬러 아바타 (avatar-sm: 32x32)
        • 이름 (text-small font-medium, 14px)
        • flex layout, 하단 구분선 (마지막 제외)
        • 상태 표시 제거됨 (발언 중/온라인 등 표시 안 함)

    • AI 기반 메모 탭 (UFR-PART-020)

      • 제목: "AI 기반 메모"

      • 메모 입력 영역 (상단):

        • 메모 입력 텍스트박스:
          • placeholder: "메모를 입력하세요..."
          • 다중 행 입력 지원 (textarea)
          • 배경: 화이트 (#FFFFFF)
          • 테두리: 회색 실선 (1px solid #E5E7EB)
          • 테두리 둥글기: 8px
          • 내부 패딩: 12px
          • 최소 높이: 80px
        • 저장 버튼:
          • 텍스트: "저장"
          • 스타일: btn btn-primary (민트 그린)
          • 위치: 메모 입력창 하단 우측
          • 여백: 상단 8px
        • 구분선:
          • 메모 입력 영역 하단에 회색 구분선 (1px solid #E5E7EB)
          • 상하 여백: 16px

      • AI가 감지한 주요 내용 영역 (하단):

        • 섹션 헤더:

          • 텍스트: "AI가 감지한 주요 내용"
          • 폰트: 16px Bold, gray-800
          • 하단 여백: 12px

        • 주요 내용 리스트:

          • 리스트 아이템 디자인:

            • 배경: 연한 회색 (#FAFAFA)
            • 테두리: 회색 점선 (1px dashed #D0D0D0)
            • 테두리 둥글기: 8px
            • 내부 패딩: 12px
            • 아이템 간 여백: 8px
            • 호버 시: 민트 그린 배경 (#E8F9F3), 커서 포인터

          • 아이템 구조:

            • 시간 태그 (좌측):
              • 형식: "[HH:MM]"
              • 폰트: 12px Bold, 민트 그린 (#4DD5A7)
              • 배경: 민트 그린 연한 배경 (#E8F9F3)
              • 패딩: 4px 8px
              • 테두리 둥글기: 4px
            • 주요 내용 텍스트 (우측):
              • 폰트: 14px, gray-700
              • flex-grow: 1
              • 좌측 여백: 8px

          • 아이템 예시:

            • [15:32] 예산 책정 관련 결정
            • [15:35] 다음 회의 일정 합의
            • [15:38] API 설계 패턴 논의
            • [15:42] 마이크로서비스 아키텍처 채택

          • 클릭 인터랙션:

            • 아이템 클릭 시 → 메모 입력창에 "[시간] 내용" 형식으로 자동 추가
            • 기존 메모가 있으면 줄바꿈 후 추가
            • 입력된 메모는 수정 가능

      • 정책:

        • 각 참석자별로 개별 저장 (다른 참석자의 메모는 볼 수 없음)
        • 메모는 회의 종료 전까지만 표시 및 편집 가능
        • 회의 종료 시 AI가 회의록 생성할 때 모든 참석자의 메모 참조

    • 용어 사전 탭

      • 제목: "용어 사전"

      • 용어 검색 입력 필드 (placeholder: "용어 검색...")

      • 카드 디자인 (gappa 스타일):

        • 기본 상태:
          • 배경: 화이트 (#FFFFFF)
          • 테두리: 회색 실선 (1px solid #E5E7EB)
          • 테두리 둥글기: 8px
          • 내부 패딩: 16px
          • 카드 간 여백: 12px
        • 하이라이트 상태 (현재 회의에서 언급된 용어):
          • 배경: 민트 그린 연한 배경 (#E8F9F3)
          • 테두리: 민트 그린 실선 (1px solid #4DD5A7)
        • 호버 시: 회색 배경 (#F9FAFB)

      • 용어 카드 구조:

        • 용어명 (16px bold) + 카테고리 배지 (민트 그린 연한 배경) + 언급 아이콘 (💬, 언급된 경우만)
        • 정의: 14px 일반 텍스트 (gray-600)
        • 컨텍스트 (11px, gray-500, 상단 회색 구분선):
          • "회의에서 N회 언급됨" (현재 회의에서 언급)
          • "관련 회의록에서 언급됨" (관련 회의록에만 언급)
          • "회의에서 언급됨 (HH:MM)" (시간 정보 포함)
          • "{관련 회의록명} (날짜)에서 {컨텍스트 정보}" (특정 관련 회의록 정보)

      • 용어 카드 예시:

        • AI + 기술 배지 + 💬
          • 정의: Artificial Intelligence의 약자로, 인공지능을 의미합니다. 이 프로젝트에서는 회의록 자동 작성에 활용됩니다.
          • 컨텍스트: "회의에서 5회 언급됨"
        • API Gateway + 아키텍처 배지 + 💬
          • 정의: 클라이언트와 백엔드 마이크로서비스 사이의 단일 진입점 역할을 하는 서버
          • 컨텍스트: "API 설계 리뷰 회의 (2024-09-28)에서 AWS API Gateway 채택 결정"
        • 마이크로서비스 + 아키텍처 배지 (하이라이트 없음)
          • 정의: 애플리케이션을 작고 독립적인 서비스로 분할하는 소프트웨어 아키텍처 스타일
          • 컨텍스트: "관련 회의록에서 언급됨"
        • MVP + 방법론 배지 + 💬
          • 정의: Minimum Viable Product의 약자
          • 컨텍스트: "회의에서 언급됨 (14:23)"
        • RESTful API + 기술 배지 + 💬
          • 정의: REST 아키텍처 스타일로 작성한 웹 서비스 API 설계 방식
          • 컨텍스트: "회의에서 3회 언급됨"

      • 카드 클릭 시: 상세 설명 모달 표시

    • 관련 자료 탭 (32건)

      • 제목: "관련 회의록 (32건)"

      • 카드 디자인 (gappa 스타일):

        • 배경: 회색 (#F5F5F5)
        • 테두리: 회색 점선 (1px dashed #9CA3AF)
        • 테두리 둥글기: 8px
        • 내부 패딩: 16px
        • 카드 간 여백: 12px
        • 호버 시: 회색 배경 (#F3F4F6)
        • 구조: 헤더 + 메타정보 + 요약 텍스트

      • 관련 회의록 카드 구조:

        • 헤더: 회의록 제목 (16px bold)
        • 메타정보: 날짜 + 관련도 (12px, gray-500)
        • 요약: 회의록 핵심 내용 또는 관련 컨텍스트 (14px 일반, gray-600)

      • 관련 회의록 예시:

        • "2024년 4분기 제품 기획 회의"
          • 메타정보: 2024-10-15 | 관련도 92%
          • 요약: 신규 회의록 서비스의 MVP 범위와 일정을 논의. AI 기반 회의 요약 기능의 우선순위를 높게 설정.
        • "API 설계 리뷰 회의"
          • 메타정보: 2024-09-28 | 관련도 78%
          • 요약: RESTful API 설계 패턴과 API Gateway 채택. 마이크로서비스 간 통신 방식 결정.
        • "스프린트 회고 회의"
          • 메타정보: 2024-10-01 | 관련도 65%
          • 요약: 협업 도구 사용성 개선과 MVP 개발 프로세스 최적화 논의.

      • 카드 클릭 시: 새 탭으로 열기 (target="_blank")

반응형 디자인

  • Mobile (320px~768px)

    • 헤더: 고정 상단, 좁은 너비
    • 메인 콘텐츠: 전체 너비 사용
    • 탭 콘텐츠: 세로 스크롤
    • 하단 버튼 영역: 고정 하단

  • Desktop (768px+)

    • 헤더: 고정 상단, 넓은 너비
    • 메인 콘텐츠: 최대 너비 제한 없이 반응형
    • 탭 콘텐츠: 더 넓은 영역 활용
    • 하단 버튼 영역: 고정 하단

인터랙션

  1. 탭 전환

    • 참석자 탭: 현재 회의 참석자 목록 표시 (4명) 및 참석자 추가 기능

      • 참석자 추가 폼 (상단):
        • 이메일 입력 필드 (form-control 스타일, placeholder: "이메일 주소 입력")
        • "초대" 버튼 (btn btn-primary btn-sm)
        • 이메일 입력 후 "초대" 클릭 시:
          1. 이메일 유효성 검증 (정규식: /^[^\s@]+@[^\s@]+.[^\s@]+$/)
          2. 빈 값 체크: 빈 값이면 "이메일 주소를 입력해주세요" 경고 토스트
          3. 잘못된 형식: "올바른 이메일 형식이 아닙니다" 오류 토스트
          4. 유효한 이메일: "{email}에게 초대 링크가 전송되었습니다" 성공 토스트
          5. 입력창 초기화 (value = '')
          6. 실제 구현 시 서버 API 호출 (/api/meetings/invite)
      • 참석자 목록 (하단):
        • 각 참석자: 아바타 + 이름
        • 상태 표시 없음 (발언 중/온라인 등 제거)
        • 참석자 수 동적 업데이트 (초대 성공 시)

    • AI 기반 메모 탭 (UFR-PART-020): AI가 감지한 주요 내용을 참석자가 선택하여 개인 메모로 저장

      • 메모 작성 및 저장:
        • 메모 입력창에 자유롭게 메모 작성 가능
        • "저장" 버튼 클릭 시 개인 메모로 저장 (각 참석자별 개별 저장)
        • 저장 성공 시 "{n}개의 메모가 저장되었습니다" 성공 토스트
        • 저장 실패 시 "메모 저장에 실패했습니다" 오류 토스트
      • AI가 감지한 주요 내용:
        • 음성→텍스트 변환 후 AI가 실시간으로 회의 내용 분석
        • 중요한 내용으로 판단된 경우에만 주요 내용 항목 표시
        • 각 항목: "[시간] 주요 내용 텍스트" 형식 (예: "[15:32] 예산 책정 관련 결정")
        • 실시간 업데이트: 새로운 항목은 하단에 추가
        • 항목 클릭 시:
          1. 메모 입력창에 "[시간] 내용" 형식으로 자동 추가
          2. 기존 메모가 있으면 줄바꿈 후 추가
          3. 입력된 메모는 수정 가능 (자동/수동 구분 표시)
          4. 저장 버튼 활성화
      • 정책:
        • 메모는 회의 종료 전까지만 표시/편집 가능
        • 각 참석자의 메모는 다른 참석자에게 보이지 않음
        • 회의 종료 시 AI가 모든 참석자의 메모를 참조하여 회의록 생성

    • 용어 사전 탭: 회의에서 언급된 전문용어 설명

      • 용어 검색 기능:
        • 검색 입력창 (placeholder: "용어 검색...", form-control 스타일)
        • 검색 버튼 (btn btn-primary btn-sm)
        • Enter 키 지원
        • 검색 동작:
          1. 용어명과 정의 모두 검색
          2. 일치하는 용어만 표시, 나머지는 숨김
          3. 검색 결과에 하이라이트 효과 적용
          4. 검색 결과 없으면 전체 목록 다시 표시
          5. 입력창이 비어있으면 전체 목록 표시
      • 용어 카드: 용어명 + 카테고리 배지 + 간단한 정의
      • 카드 클릭 → 확장하여 상세 설명 표시
      • 상세 설명: 이 회의에서의 의미, 관련 회의록 링크

    • 관련 자료 탭: AI가 찾은 관련 회의록 (32건)

      • 회의록 링크 클릭 → 새 탭(target="_blank")에서 해당 회의록 열기
      • 녹음 중인 페이지 이탈 방지: 모든 링크는 새 탭으로 열림
      • 관련도 표시: 퍼센트 또는 별점으로 시각화

  2. 회의 종료

    • 헤더의 "회의 종료" 버튼 클릭
    • 확인 다이얼로그 표시: "회의를 종료하시겠습니까?"
    • 확인 → 회의 종료 처리 및 07-회의종료.html로 이동

  3. 실시간 업데이트

    • STT 음성 인식 결과 실시간 반영 (3-5초 주기)
    • AI 제안 실시간 업데이트
    • 용어 사전 자동 업데이트 (새로운 전문용어 감지 시)
    • 관련 회의록 목록 동적 갱신

데이터 요구사항

  • 입력:
    • 회의 ID
    • 오디오 스트림 (실시간 STT용)
    • 참석자 초대 이메일
  • 출력:
    • 실시간 텍스트 변환 결과 (STT)
    • AI가 감지한 주요 내용 목록 (시간 + 내용)
    • 개인 메모 (각 참석자별 개별 저장)
    • 전문용어 및 설명 (용어 사전)
    • 관련 회의록 목록 (32건, 관련도 포함)
    • 참석자 목록
  • 연동:
    • STT 서비스 (UFR-AI-010)
    • AI 서비스 (주요 내용 감지, UFR-AI-040)
    • RAG 서비스 (관련 회의록 검색, 전문용어 자동 감지)
    • PARTICIPANT 서비스 (메모 저장, UFR-PART-020)

에러 처리

  • 마이크 권한 거부: "마이크 권한이 필요합니다" 토스트 + 설정 안내 링크
  • STT 실패: "음성 인식에 실패했습니다" 토스트 + 재시도 안내
  • AI 주요 내용 감지 실패: "AI 주요 내용 감지에 실패했습니다" 토스트 (회의 계속 진행 가능)
  • 메모 저장 실패: "메모 저장에 실패했습니다" 토스트 + 재시도 버튼
  • 용어 사전 로드 실패: "용어 사전을 불러올 수 없습니다" 메시지 표시
  • 관련 자료 검색 실패: "관련 회의록을 찾을 수 없습니다" 메시지 표시
  • 참석자 초대 실패: "초대 링크 전송에 실패했습니다" 토스트 + 재시도 버튼
  • 회의 종료 실패: "회의 종료 중 오류가 발생했습니다" 토스트 + 재시도 버튼

07-회의종료

개요

  • 목적: 회의 종료 후 AI 요약 내용 확인 및 다음 단계 선택
  • 관련 유저스토리: UFR-MEET-040, UFR-MEET-050, UFR-AI-010, UFR-AI-020, UFR-AI-036
  • 비즈니스 중요도: 높음
  • 접근 경로: 회의진행 → "회의 종료" 버튼
  • 권한: 회의 생성자 전용
  • 화면 정책: 확인 전용 화면 (편집 불가)
    • 모든 내용은 읽기 전용
    • 안건 내용 수정 불가
    • Todo 수정 불가
    • 확인 후 다음 단계 선택만 가능

주요 기능

  1. 회의 통계 표시 (시간, 참석자, 발언 횟수 등)
  2. 주요 키워드 클라우드
  3. 안건별 AI 요약 전체 표시 (신규)
    • 안건별 AI 한줄 요약 (30자 이내, 편집 불가)
    • 안건별 상세 요약 정리
    • 안건별 Todo 자동 추출 결과
  4. 3가지 선택 옵션 제공 (신규)
    • 옵션 1: 회의록 수정 화면으로 이동
    • 옵션 2: 바로 최종 확정
    • 옵션 3: 대시보드로 이동

UI 구성요소

Mobile (320px~768px)

  • 헤더

    • "회의가 종료되었습니다" 메시지
    • 회의 제목

  • 통계 카드

    • 회의 총 시간
    • 참석자 수
    • 주요 키워드 (태그 클라우드)

  • 안건별 AI 요약 섹션 (신규)

    • 안건 카드 (안건 개수만큼 반복):
      • 안건 제목 (H4, Bold)
      • AI 한줄 요약 (읽기 전용, 회색 배경 박스)
        • 30자 이내 간결한 표현
        • 🔒 "편집 불가" 아이콘 표시
        • 민트 그린 좌측 액센트 라인
      • 상세 요약 정리 (읽기 전용)
        • 발언자별 의견
        • 결정 사항
        • 보류 사항
      • Todo 자동 추출 결과 (있는 경우)
        • Todo 항목 리스트
        • 담당자, 마감일, 우선순위 표시
        • 읽기 전용 (체크박스 비활성화)

  • 3가지 선택 옵션 (하단 액션 바)

    • 옵션 1: "회의록 수정" 버튼 (Secondary)
      • 회의록 수정 화면(11-회의록수정)으로 이동
      • 회의록 상태: 작성중
    • 옵션 2: "바로 최종 확정" 버튼 (Primary, 강조)
      • 확인 다이얼로그: "AI가 정리한 내용 그대로 최종 확정하시겠습니까?"
      • 모든 안건 자동 검증 완료 처리
      • 회의록 상태: 확정완료
      • 참석자에게 확정 알림 발송
    • 옵션 3: "대시보드로 이동" 버튼 (Ghost)
      • 회의록 상태: 작성중 (추후 편집 가능)
      • 대시보드로 이동

Tablet/Desktop (768px+)

  • 상단: 통계 카드 (Grid Layout)
  • 중앙: 안건별 AI 요약 섹션 (2열 그리드)
  • 하단: 3가지 선택 옵션 버튼 (가로 배치)

인터랙션

  1. 통계 표시

    • 애니메이션 효과로 숫자 카운트업
    • 차트는 페이드인 효과

  2. 안건별 AI 요약 확인 (읽기 전용)

    • 안건 카드 확장/축소:
      • 초기: 안건 제목 + AI 한줄 요약만 표시
      • 클릭 시: 상세 요약 + Todo 전체 펼침
    • 편집 불가 안내:
      • AI 한줄 요약 영역에 🔒 아이콘 표시
      • 호버 시: "이 내용은 편집할 수 없습니다" 툴팁
    • Todo 확인:
      • 체크박스 비활성화 (disabled)
      • 읽기 전용 표시

  3. 다음 단계 선택

    • 옵션 1: 회의록 수정
      • 11-회의록수정.html로 이동
      • URL 파라미터: meetingId
      • 회의록 상태: 작성중
    • 옵션 2: 바로 최종 확정 (UFR-MEET-050 시나리오 2)
      • 확인 다이얼로그 표시: "바로 최종 확정하시겠습니까? AI가 정리한 내용 그대로 확정됩니다."
      • 확인 시:
        • 모든 안건 검증률 100% 자동 설정
        • 안건별 검증완료 처리
        • 회의록 상태: "작성중" → "확정완료"로 변경
        • 확정 시간 기록
        • 참석자에게 확정 알림 발송
        • 성공 토스트: "회의록이 최종 확정되었습니다"
        • 10-회의록상세조회.html로 이동
      • 시나리오 2 특징 (바로 확정):
        • 회의록 수정 단계를 건너뜀
        • AI 생성 내용을 그대로 확정
        • 모든 안건이 자동으로 검증완료 처리됨
        • 확정 후에도 회의 생성자는 수정 가능 (잠금 해제 필요)
    • 옵션 3: 대시보드로 이동
      • 회의록 상태: 작성중
      • 02-대시보드.html로 이동
      • 추후 회의록 목록에서 편집 가능

데이터 요구사항

  • 입력: 회의 ID
  • 출력:
    • 회의 통계 (시간, 참석자 수, 발언 통계, 키워드)
    • 안건별 AI 요약 데이터:
      • 안건 제목
      • AI 한줄 요약 (30자 이내)
      • 상세 요약 정리 (논의 주제, 발언자별 의견, 결정 사항, 보류 사항)
      • 안건별 Todo 목록 (제목, 담당자, 마감일, 우선순위)
    • 회의록 상태 (작성중/확정완료)
  • 연동: Meeting 서비스, AI 서비스, Todo 서비스

에러 처리

  • 통계 생성 실패: "통계를 생성할 수 없습니다" + 건너뛰기 옵션
  • AI 요약 생성 실패: "AI 요약을 생성할 수 없습니다. 회의록 수정 화면에서 직접 작성해주세요"
  • 바로 확정 실패: "회의록 확정에 실패했습니다. 다시 시도해주세요"
  • 네트워크 오류: 자동 재시도 3회, 실패 시 재시도 버튼 제공

10-회의록상세조회

개요

  • 목적: 지난 회의록의 전체 내용 및 상세 정보 확인
  • 관련 유저스토리: UFR-MEET-047, UFR-AI-040, UFR-MEET-048
  • 비즈니스 중요도: 중간
  • 접근 경로: 대시보드 → "내 회의록" 항목 클릭
  • 권한: 모든 회의 참석자 (조회 전용)

주요 기능 (MVP 스코프 축소 v1.5.0)

  1. 회의 기본 정보 표시
  2. 안건별 AI 요약 표시 (안건 최상단)
  3. 안건별 상세 내용 표시
  4. 참고자료 표시 (안건 하단)
  5. Todo 단순 조회 (UFR-MEET-047): 제목, 담당자만 표시 (D-day, 우선순위 라벨 제거)
  6. 첨부파일 다운로드
  7. 회의록 수정/공유 액션

변경사항 (v1.5.0):

  • ❌ 제거: Todo 관리 화면 연동 링크 (화면 자체가 제거됨)
  • ❌ 제거: Todo D-day 라벨, 우선순위 배지 표시
  • ✅ 변경: Todo는 단순 조회만 가능 (제목 + 담당자 + 마감일만 표시)
  • ✅ 변경: "수정" 버튼을 회의 제목 우측으로 이동

UI 구성요소

Mobile (320px~768px)

  • 헤더

    • 뒤로가기 버튼
    • 회의 제목
    • "수정" 버튼 (회의 제목 우측, 아이콘 또는 텍스트 버튼)
    • 메뉴 버튼 (삭제, 공유 등)

  • 기본 정보 카드

    • 회의 일시
    • 참석자 아바타 및 이름 (역할 구분)
    • 회의 장소
    • 회의록 상태 배지 (작성중/확정완료)
    • 작성자 및 최종 수정 시간

  • 탭 네비게이션 (상단, Fixed)

    • "대시보드" 탭 (기본 활성)
    • "회의록" 탭

  • 회의록 탭 콘텐츠 (안건별 구조)

    • 각 안건:
      • 안건 제목
      • 검증 완료 배지 (검증된 경우)
      • AI 회의 내용 요약 영역 (안건 최상단, 강조 박스)
        • 요약 아이콘 (💡)
        • AI 자동 생성 요약 (2-3문장)
        • 요약 생성/수정 시간
        • "수정" 버튼 (권한 있는 경우)
      • 안건 내용 (마크다운 렌더링)
      • 참고자료 영역 (안건 하단, 별도 영역)
        • "참고자료" 라벨
        • 관련 회의록 링크 리스트 (최대 3개):
          • 링크 아이콘 (📄)
          • 회의 제목 (클릭 가능)
          • 회의 날짜
          • 관련도 표시 (퍼센트, 색상 코딩)
          • 1-2줄 요약
        • "더보기" 버튼 (3개 초과 시)
      • 접기/펼치기 버튼 (선택)

  • 대시보드 탭 콘텐츠 (11-회의록대시보드.html 구조 참조)

    • 핵심내용 섹션 (💡)

      • 번호 매김된 핵심 포인트 (4-5개)
      • 주요 키워드 태그 클라우드
      • 회의 통계 (참석자 수, 시간, 발언 횟수, 주요 의제 수)

    • 결정사항 섹션 (✅)

      • 결정사항 카드 리스트
      • 각 카드: 결정 내용 + 결정자 + 시간 + 배경 설명

    • Todo 진행상황 섹션 (📋) - MVP 스코프 축소

      • 단순 조회만 제공 (UFR-MEET-047)
      • Todo 리스트:
        • 각 Todo: 제목 + 담당자 + 마감일만 표시
        • ❌ 제거: D-day 라벨, 우선순위 배지, 진행률 바, 상태별 필터
        • ❌ 제거: Todo 관리 화면 연동 (클릭 액션 없음)

    • 참고자료 섹션 (📚)

      • 참고자료 탭 (관련 회의록/프로젝트 문서/이슈 트래커/위키 페이지)
      • 각 참고자료 카드:
        • 아이콘 + 제목 + 메타정보 (날짜, 작성자)
        • 관련도 점수 배지 (92%, 88% 등)
        • 2-3줄 요약

    • Todo 섹션 (단순 조회) - MVP 스코프 축소

      • Todo 항목 리스트:
        • Todo 내용 (제목)
        • 담당자 이름
        • 마감일
        • ❌ 제거: 체크박스, 우선순위 배지, D-day 라벨

    • 첨부파일 섹션

      • 파일 아이콘 + 파일명
      • 다운로드 버튼

  • 하단 액션 바 (Fixed) - MVP 스코프 축소

    • "공유" 버튼
    • ❌ 제거: "수정" 버튼 (헤더로 이동)

Tablet/Desktop (768px+)

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

인터랙션

  1. 탭 전환

    • "회의록" 탭: 전체 회의록 내용 표시 (안건별 구조)
    • "대시보드" 탭: 핵심내용, 결정사항, Todo, 참고자료 요약 표시
    • 탭 전환 시 URL 변경 없이 클라이언트 사이드 렌더링

  2. 회의록 탭 인터랙션

    • 안건 네비게이션: 안건 제목 클릭 → 해당 안건으로 스크롤
    • 접기/펼치기: 긴 내용은 초기 접힌 상태, 클릭으로 펼침
    • AI 요약 편집:
      • "수정" 버튼 클릭 (권한 있는 경우) → 인라인 편집 모드
      • 수정 내용 자동 저장 (30초 간격)
      • 실시간 동기화
    • 참고자료 링크:
      • 회의록 링크 클릭 → 새 탭에서 해당 회의록 열기
      • 관련도 색상 코딩: 90%+ (초록), 70-89% (노랑), 70% 미만 (회색)
      • "더보기" 클릭 → 전체 참고자료 목록 모달

  3. 대시보드 탭 인터랙션 - MVP 스코프 축소

    • 핵심내용 섹션:
      • 키워드 태그 클릭 → 해당 키워드 관련 안건으로 스크롤
      • 통계 항목 클릭 → 상세 정보 툴팁 표시
    • 결정사항 섹션:
      • 결정사항 카드 클릭 → 회의록 탭의 해당 안건으로 이동
      • 배경 설명 접기/펼치기
    • Todo 진행상황 (단순 조회만):
      • ❌ 제거: 필터 탭, 진행률 바, Todo 관리 화면 연동
      • Todo는 읽기 전용으로만 표시 (클릭 액션 없음)
    • 참고자료 섹션:
      • 탭 전환 (관련 회의록/프로젝트 문서/이슈 트래커/위키 페이지)
      • 참고자료 카드 클릭 → 해당 문서로 이동
      • 관련도 점수: 배지로 표시 (92%, 88% 등)

  4. Todo 인터랙션 - MVP 스코프 축소

    • ❌ 제거: Todo 체크박스, Todo 관리 화면 연동
    • Todo는 단순 조회만 가능 (클릭 액션 없음)

  5. 첨부파일 다운로드

    • 파일명 클릭: 다운로드 시작
    • 진행 상황 표시

  6. 수정 및 공유

    • "수정" 버튼: 회의록수정 화면으로 이동
    • "공유" 버튼: 회의록공유 화면으로 이동

데이터 요구사항

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

에러 처리

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

11-회의록수정

개요

  • 목적: 지난 회의록 조회 및 수정
  • 관련 유저스토리: UFR-MEET-055, UFR-AI-040, UFR-COLLAB-030
  • 비즈니스 중요도: 중간
  • 접근 경로: 10-회의록상세조회 → 하단 액션 바 "수정" 버튼 클릭
  • 권한 제어:
    • 검증완료 전: 모든 참석자가 수정 가능
    • 검증완료 후: 회의 생성자만 수정 가능 (참석자는 "수정" 버튼 비활성화)

주요 기능 (MVP 스코프 축소 v1.5.2)

  1. 회의 기본 정보 표시 및 수정
    • 회의 제목: 수정 가능
    • 회의 일시/장소: 읽기 전용 (회의 예약 화면에서만 변경 가능)
    • 참석자 관리: 회의 생성자만 추가/삭제 가능
  2. 회의록 내용 수정 (안건별) - 용어 변경: 섹션 → 안건
  3. AI 요약 표시 및 재생성 (안건별, UFR-AI-036)
    • AI 한줄 요약 표시 (30자 이내, 읽기 전용)
    • 텍스트 편집 영역에서 안건 내용 수정 가능
    • "AI 재생성" 버튼: 텍스트 편집 영역 내용 기반으로 한줄 요약만 재생성 (2-5초 처리)
    • 재생성된 한줄 요약은 회의록 상세조회 화면의 대시보드 및 회의록 탭에 즉시 반영
  4. 참고자료 편집 (추가/제거)
  5. Todo 단순 조회 (제목 + 담당자 + 마감일만 표시)
  6. 안건별 검증 완료 체크박스 (UFR-COLLAB-030)
    • 회의 생성자: 검증 완료 체크박스 활성화, 잠금 해제 후 수정 가능
    • 참석자: 검증완료 안건은 읽기 전용
  7. 자동 저장 (30초 간격)
  8. 수정 이력 관리
  9. 상태 변경 (검증완료 → 작성중으로 자동 변경)

변경사항 (v1.5.2):

  • ✅ 명칭 변경: "AI 상세 요약" → "AI 요약"
  • ✅ 기능 통합: AI 재생성 버튼 클릭 시 텍스트 편집 영역 내용 기반으로 한줄 요약 생성 (UFR-AI-036)
  • ❌ 제거: AI 상세 요약 및 한줄 요약 분리 표시 (한줄 요약만 표시)
  • ❌ 제거: 실시간 협업 표시 ("편집 중" 표시 제거)
  • ❌ 제거: Todo 편집 기능 (체크박스, 담당자/마감일/우선순위 변경, 추가/삭제)
  • ❌ 제거: 검증률 표시 및 최종 확정 버튼
  • ✅ 정책: Last Write Wins (마지막 저장 우선) 적용

UI 구성요소

Mobile (320px~768px)

  • 헤더

    • 뒤로가기 버튼 (10-회의록상세조회로 이동)
    • "회의록 수정" 타이틀
    • "저장" 버튼 (Primary)
    • 자동 저장 인디케이터 ("저장됨", "저장 중...")

  • 회의 기본 정보 영역

    • 회의 제목: 편집 가능 (텍스트 필드)
    • 회의 일시: 읽기 전용 (📅 아이콘 + 날짜/시간 표시)
    • 회의 장소: 읽기 전용 (📍 아이콘 + 장소명)
    • 참석자 목록:
      • 회의 생성자: 추가/삭제 가능 (05-회의진행 화면과 동일한 UI)
      • 참석자: 읽기 전용 표시
      • 각 참석자: 아바타 + 이름, 삭제(×) 버튼 (생성자는 삭제 불가)
      • "참석자 추가" 버튼 (이메일 입력 + 초대)
    • 회의록 상태 배지 (자동 관리)

  • 편집 화면 (MVP 스코프 축소)

    • 안건별 편집 영역 (용어 변경: 섹션 → 안건)
    • 각 안건:
      • 안건 헤더
        • 안건 제목 (H4, Bold)
        • 검증 상태 배지 (검증완료/미검증)
        • ❌ 제거: "편집 중" 표시 (실시간 협업 기능 제거)
      • AI 요약 (읽기 전용, UFR-AI-036)
        • 💡 "AI 요약" 레이블
        • AI 한줄 요약 표시 (30자 이내)
        • 읽기 전용 영역 (회색 배경, 민트 그린 좌측 액센트 라인)
        • 호버 시: "이 내용은 편집할 수 없습니다" 툴팁
      • 텍스트 편집 영역
        • 안건 내용 편집 필드 (textarea)
        • 논의 주제, 발언자별 의견, 결정 사항, 보류 사항 등 자유 작성
        • "AI 재생성" 버튼: 텍스트 편집 영역 내용 기반으로 AI 요약의 한줄 요약 재생성
        • 마지막 수정 시간 표시
      • 참고자료 편집 영역
        • 기존 참고자료 목록 (제거 버튼 포함)
        • "참고자료 추가" 버튼
        • 회의록 검색 및 선택 UI
      • Todo 섹션 단순 조회 (편집 불가)
        • Todo 목록 표시 (읽기 전용)
        • 각 Todo 항목:
          • Todo 제목
          • 담당자
          • 마감일
          • ❌ 제거: 체크박스, 우선순위 배지, D-day 라벨, 편집/삭제 버튼
      • 안건별 검증 영역 (UFR-COLLAB-030)
        • 회의 생성자 화면:
          • 검증 완료 체크박스 (활성화)
          • "잠금 해제" 버튼 (검증완료 안건만 표시)
        • 참석자 화면:
          • 🔒 "읽기 전용" 배지 (검증완료 안건)
          • 안내 텍스트: "(잠금됨 · 회의 생성자만 수정 가능)"
    • 자동 저장 상태 표시 ("저장됨", "저장 중...")

Tablet/Desktop (768px+)

  • 헤더: Mobile과 동일 (뒤로가기, 타이틀, 저장 버튼, 자동 저장 인디케이터)
  • 메인 영역:
    • 회의 기본 정보 영역 (Mobile과 동일)
    • 편집 화면 (안건별 편집, AI 한줄/상세 요약, 참고자료, Todo, 안건별 검증)
  • 우측 패널 (선택사항):
    • 수정 이력 (v2.0 고도화 예정)
    • 미리보기

인터랙션

  1. 화면 진입

    • 10-회의록상세조회 → "수정" 버튼 클릭
    • 권한 확인: 검증완료 후에는 회의 생성자만 접근 가능
    • 바로 편집 모드로 시작

  2. 내용 수정

    • 텍스트 영역 클릭: 포커스 및 편집 가능
    • 자동 저장: 30초 간격, 인디케이터 표시
    • 수동 저장: "저장" 버튼 클릭

  3. AI 한줄 요약 확인 (UFR-AI-036) - MVP 스코프 축소

    • 읽기 전용 표시:
      • 🔒 아이콘으로 편집 불가 명시
      • 회색 배경 + 민트 그린 좌측 액센트 라인
    • 호버 인터랙션:
      • 툴팁 표시: "이 내용은 편집할 수 없습니다. 회의 종료 시 1회만 생성됩니다."
    • 위치: 각 안건 최상단 (안건 제목 바로 아래)
    • ❌ 제거: "AI 재생성" 버튼 (한줄 요약은 회의 종료 시 1회만 생성)

  4. AI 상세 요약 편집 - MVP 스코프 축소

    • 요약 텍스트 필드 클릭: 직접 수정 가능
    • "AI 재생성" 버튼 클릭:
      • 현재 안건 내용 기반으로 상세 요약만 재생성 (한줄 요약 제외)
      • 로딩 인디케이터 표시
      • 생성 완료 시 자동 업데이트
    • 자동 저장 (30초 간격)

  5. 안건별 검증 완료 체크박스 (UFR-COLLAB-030) - MVP 스코프 축소

    • 회의 생성자 권한:
      • 검증 완료 체크박스 클릭:
        • 체크: 안건 검증 완료 처리 (배지 "검증완료"로 변경)
        • 언체크: 미검증 상태로 변경
      • "잠금 해제" 버튼 클릭 (검증완료 안건만 표시):
        • 확인 다이얼로그: "이 안건의 잠금을 해제하시겠습니까?"
        • 확인 시: 안건 검증 완료 체크 해제 → 편집 가능 상태로 변경
    • 참석자 화면:
      • 검증완료 안건: 🔒 "읽기 전용" 배지 표시
      • 안내 텍스트: "(잠금됨 · 회의 생성자만 수정 가능)"
      • 모든 입력 필드 비활성화 (disabled)
    • ❌ 제거: 검증률 계산 및 표시, "최종 확정" 버튼

  6. 참고자료 편집

    • "참고자료 추가" 버튼 클릭:
      • 회의록 검색 모달 표시
      • 제목, 날짜, 키워드로 검색
      • 선택된 회의록 추가
    • 제거 버튼 (X): 참고자료 목록에서 제거
    • 순서 변경: 드래그하여 순서 조정 (선택)

  7. Todo 섹션 단순 조회 - MVP 스코프 축소

    • ❌ 제거: Todo 편집/추가/삭제 기능 전체 제거
    • Todo는 읽기 전용으로만 표시 (제목 + 담당자 + 마감일)
    • 모든 사용자 (생성자 포함)에게 조회만 가능

  8. 상태 변경 - MVP 스코프 축소

    • 확정완료 회의록 수정 시: 자동으로 "작성중" 상태로 변경
    • ❌ 제거: "확정완료"로 변경 제안 (검증률 기능 제거로 인해)

  9. 저장 로직 - MVP 스코프 축소

    • "저장" 버튼 클릭 시:
      • 검증완료된 안건: 저장 스킵
      • 미검증 안건: 저장 진행
    • 저장 결과 알림:
      • "N개 안건이 저장되었습니다"
      • "M개 안건은 검증완료 상태로 저장되지 않았습니다"
      • 저장 불가 안건 목록 표시
    • 자동 저장 (30초 간격):
      • 미검증 안건만 자동 저장
      • 검증완료 안건은 자동 저장 스킵

  10. 안건 기반 충돌 방지 (UFR-COLLAB-030) - MVP 스코프 축소

  • 안건 기반 충돌 방지 메커니즘:

    • 다른 안건 동시 편집: 충돌 없음

      • 참석자 A가 안건 1 편집
      • 참석자 B가 안건 2 편집 가능
      • 양쪽 모두 정상 저장

    • 동일 안건 검증 완료 체크로 충돌 방지:

      • 검증완료된 안건: 편집 불가 (회의 생성자만 잠금 해제 가능)
      • 미검증 안건: Last Write Wins (마지막 저장 우선)

    • 동일 필드 동시 수정: Last Write Wins

      • 마지막에 저장된 변경 사항이 적용
      • 별도 경고 없이 덮어쓰기

  • ❌ 제거: 실시간 "편집 중" 표시

  • ❌ 제거: 충돌 경고 모달 및 선택 옵션

데이터 요구사항 (MVP 스코프 축소)

  • 입력:
    • 회의록 ID (조회)
    • 수정 내용 (안건 ID, 내용) - 용어 변경: 섹션 → 안건
    • AI 한줄 요약 (읽기 전용, 입력 불가)
    • AI 상세 요약 수정 (안건 ID, 요약 내용)
    • 참고자료 변경 (추가/제거할 회의록 ID)
    • 안건별 검증 상태 (안건 ID, 검증 여부)
  • 출력:
    • 회의록 목록 (필터/정렬/검색 결과)
    • 수정 결과 (성공/실패)
    • AI 한줄 요약 (회의 종료 시 생성, 편집 불가)
    • AI 상세 요약 재생성 결과 (한줄 요약 제외)
    • 수정 이력 (누가, 언제, 무엇을)
    • ❌ 제거: 검증률 출력
  • 연동: Meeting 서비스, AI 서비스 (UFR-AI-010, UFR-AI-036, UFR-AI-040), COLLAB 서비스 (UFR-COLLAB-030)

에러 처리 (MVP 스코프 축소)

  • 권한 없음: "본인이 작성한 회의록만 수정할 수 있습니다"
  • 자동 저장 실패: "네트워크 연결을 확인해주세요. 로컬에 임시 저장됩니다"
  • AI 요약 재생성 실패: "요약 생성에 실패했습니다. 수동으로 작성해주세요"
  • 참고자료 검색 실패: "회의록을 검색할 수 없습니다"
  • 검증완료 안건 저장 시도:
    • 저장 결과 알림: "N개 안건이 저장되었습니다. M개 안건은 검증완료 상태로 저장되지 않았습니다"
    • 저장 불가 안건 목록 표시
  • 삭제 실패: "회의록 삭제에 실패했습니다"
  • ❌ 제거: 충돌 경고 모달 (Last Write Wins 적용으로 인해)

12-회의록목록조회

개요

  • 목적: 회의록 목록 조회 및 필터링/정렬/검색 기능 제공
  • 관련 유저스토리: UFR-MEET-046 (회의록목록조회)
  • 비즈니스 중요도: 높음
  • 프로토타입: design/uiux/prototype/12-회의록목록조회.html
  • 데이터 소스: common.js → SAMPLE_MINUTES 배열 (30개 샘플 데이터)
  • 접근 경로:
    • 대시보드 → "내 회의록" 전체 보기
    • 하단 네비게이션 → "회의록" 메뉴
  • 권한: 모든 회의 참석자 (본인이 참석한 회의록만 조회)

데이터 아키텍처

  • 데이터 레이어: common.js의 SAMPLE_MINUTES 배열
    • 총 30개 샘플 데이터 (작성중 13개, 확정완료 17개)
    • 각 회의록 객체 구조: id, meetingId, title, date, time, status, participants, participantCount, lastUpdated, sections, todos, completionRate
  • 뷰 레이어: 12-회의록목록조회.html
    • JavaScript 기반 동적 렌더링
    • renderMeetings() 함수: 필터링/정렬/검색 로직 처리 후 목록 생성
    • createMeetingCard() 함수: 개별 회의록 카드 HTML 생성
  • 렌더링 방식:
    • 페이지 로드 시: DOMContentLoaded 이벤트에서 renderMeetings() 호출
    • 초기 표시: 10개 회의록 (displayedCount 변수로 관리)
    • 추가 로딩: "10개 더보기" 버튼 클릭 시 10개씩 증가
    • 필터/정렬/검색 시: 즉시 renderMeetings() 재호출하여 목록 갱신

주요 기능

  1. 회의록 목록 조회 (참여/생성한 회의록)
  2. 필터링 기능:
    • 참여 유형: 참석한 회의, 생성한 회의
    • 상태: 전체, 작성중, 확정완료
  3. 정렬 기능:
    • 최근수정순 (수정 일시 기준, 최근 순) - 기본값
    • 최근회의순 (회의 일시 기준, 최근 순)
    • 제목순 (가나다순)
  4. 검색 기능:
    • 제목, 참석자, 키워드로 통합 검색
    • 실시간 검색 결과 업데이트
  5. 페이지네이션:
    • 초기 10개 회의록 표시
    • "10개 더보기" 버튼으로 추가 로딩
  6. 회의록 상세 조회 (항목 클릭 시)

UI 구성요소

Mobile (320px~768px)

  • 헤더 (Fixed, 상단)

    • 뒤로가기 버튼
    • "내 회의록" 타이틀
    • 검색 아이콘 (검색창 포커스)

  • 필터 및 정렬 (상단, 스크롤 가능)

    • 필터 행 1 (2컬럼 그리드):

      • 상태 필터 (Select)
        • 옵션: 전체, 작성중, 확정완료
        • 기본값: 전체
      • 정렬 (Select)
        • 옵션: 최신순, 회의일시순, 제목순
        • 기본값: 최신순

    • 참여 유형 필터 (탭 형식, 선택):

      • 전체 (기본 선택)
      • 참석한 회의
      • 생성한 회의

  • 검색 영역

    • 검색 입력 필드
    • Placeholder: "회의 제목, 참석자, 키워드 검색"
    • 실시간 검색 (입력 시 즉시 필터링)

  • 통계 정보 (카드, 선택)

    • 3컬럼 그리드:
      • 전체: {count}개
      • 작성중: {count}개
      • 확정완료: {count}개
    • 구분선으로 시각적 분리

  • 회의록 목록 (스크롤 가능)

    • 각 회의록 항목 (meeting-item):
      • 좌측 영역:
        • 회의 제목 (H5, 볼드)
        • 생성자 표시: 현재 사용자가 회의 생성자인 경우 👑 아이콘 표시 (16px, title="생성자")
        • 메타정보 (Caption, 회색):
          • 회의 일시 (날짜 + 시간) · 참석자 수
          • 검증완료율 (작성중 상태일 때만): "✓ {completionRate}% 검증완료" 배지
        • 최종 수정 시간 (Caption, 회색):
          • 상대 시간 표시 ("1시간 전", "어제", "3일 전")
      • 우측 영역:
        • 상태 배지:
          • "확정완료" (초록색 배지)
          • "작성중" (노란색 배지)
        • 조회 권한 표시 (조회 전용인 경우):
          • "조회 전용" (Caption, 회색)
    • 빈 상태:
      • 검색 결과 없음: "검색 결과가 없습니다"
      • 회의록 없음: "회의록이 없습니다"

Mobile (320px~768px)

Tablet/Desktop (768px+)

  • 좌측 사이드바: Desktop 좌측 사이드바 참조 (회의록 활성)

  • 메인 콘텐츠 (중앙)

    • 필터 및 정렬 (상단, 가로 배치)
    • 참여 유형 필터 (탭 또는 버튼 그룹)
    • 검색 영역
    • 통계 정보 (3컬럼 카드)
    • 회의록 목록 (Grid 또는 List Layout)
      • 각 카드: 호버 시 그림자 증가, 약간 상승

인터랙션

  1. 필터링

    • 상태 필터 변경 → 즉시 목록 재렌더링
    • 참여 유형 탭 선택 → 해당 유형 회의록만 표시
    • 필터 조합 가능 (상태 + 참여 유형)

  2. 정렬

    • 정렬 옵션 선택 → 즉시 목록 재정렬
    • 정렬 기준:
      • 최신순: updatedAt DESC
      • 회의일시순: meetingDate DESC
      • 제목순: title ASC (한글 가나다순)

  3. 검색

    • 검색 아이콘 클릭 → 검색 입력 필드에 포커스
    • 텍스트 입력 → 실시간 검색 (debounce 300ms)
    • 검색 범위:
      • 회의 제목 (부분 일치)
      • 참석자 이름 (부분 일치)
      • 키워드 (태그, 내용에서 추출된 키워드)
    • 검색어 지우기: X 버튼 (검색어 입력 시 표시)

  4. 회의록 조회

    • 회의록 항목 클릭 → 회의록 상세 화면으로 이동
    • 전달 데이터: 회의록 ID
    • 조회 전용 회의록: 읽기 모드로 표시

  5. 통계 업데이트

    • 필터/검색 적용 시 → 통계 자동 갱신
    • 전체, 작성중, 확정완료 개수 실시간 반영

  6. 빈 상태 처리

    • 검색 결과 없음: "검색 결과가 없습니다" 메시지
    • 필터링 결과 없음: 필터 조건에 맞는 회의록 없음 안내
    • 회의록 없음: "회의록이 없습니다" + 회의 시작 유도 메시지

데이터 요구사항

  • 입력:

    • 사용자 ID (현재 로그인 사용자)
    • 필터 조건:
      • 참여 유형: all | shared | attended | created
      • 상태: all | draft | confirmed
    • 정렬 기준: recent | date | title
    • 검색어 (선택)

  • 출력:

    • 회의록 목록:
      • 회의 ID
      • 제목
      • 회의 일시
      • 참석자 목록 (또는 참석자 수)
      • 상태 (draft | confirmed)
      • 생성자 ID
      • 생성일시 (createdAt)
      • 수정일시 (updatedAt)
      • 조회 권한 (편집 가능 여부)
    • 통계:
      • 전체 개수
      • 작성중 개수
      • 확정완료 개수

  • 연동:

    • Meeting 서비스 (회의록 목록 조회 API)
    • Share 서비스 (공유 정보 조회)

에러 처리

  • 데이터 로딩 실패:

    • "회의록을 불러오는 중 오류가 발생했습니다." 메시지
    • "다시 시도" 버튼 제공

  • 검색 실패:

    • "검색 중 오류가 발생했습니다." 토스트 메시지
    • 기존 목록 유지

  • 네트워크 오류:

    • "네트워크 연결을 확인해주세요." 토스트 메시지
    • 자동 재시도 (최대 3회, exponential backoff)

  • 권한 없음:

    • 접근 권한 없는 회의록 클릭 시:
      • "접근 권한이 없습니다" 토스트 메시지
      • 목록으로 복귀

  • 빈 상태:

    • 검색 결과 없음: "검색 결과가 없습니다"
    • 필터링 결과 없음: "조건에 맞는 회의록이 없습니다"
    • 전체 회의록 없음: "회의록이 없습니다. 첫 회의를 시작해보세요!" + 회의 시작 버튼

↑ 목차로 돌아가기

공통 UI 컴포넌트

네비게이션

Mobile 하단 네비게이션 (320px~768px)

  • 위치: Fixed, 하단 (height: 64px)
  • 배경: 흰색, 상단 테두리 (1px solid #E5E7EB)
  • 그림자: 0 -2px 8px rgba(0, 0, 0, 0.08)
  • 구성: 3개 항목 (균등 분할)
    • 홈 (대시보드)
      • 아이콘: 🏠 (24px)
      • 텍스트: "홈" (12px)
      • 활성 상태: 민트 그린 (#4DD5A7)
      • 비활성 상태: 회색 (#6B7280)
    • 회의록 (회의록 목록)
      • 아이콘: 📋 (24px)
      • 텍스트: "회의록" (12px)
    • Todo (Todo 관리)
      • 아이콘: ✅ (24px)
      • 텍스트: "Todo" (12px)
  • 사용 화면: 02-대시보드, 09-Todo관리, 12-회의록목록조회
  • 참고: 프로필 메뉴는 프로토타입에서 제거됨 (Desktop 사이드바의 사용자 정보 영역으로 통합)

Desktop 좌측 사이드바 (768px+)

  • 위치: Fixed, 좌측 (width: 240px)
  • 배경: 흰색, 우측 테두리 (1px solid #E5E7EB)
  • 구성:
    • 상단 영역:
      • 서비스 로고 (32px)
      • 서비스명 (16px Bold)
    • 메인 메뉴:
      • 대시보드
      • 내 회의록
      • Todo
    • 하단 영역:
      • 사용자 정보 (아바타 + 이름)
      • 로그아웃 버튼 (btn-ghost btn-sm)
  • 사용 화면: 02-대시보드, 09-Todo관리, 12-회의록목록조회

상단 헤더 (공통)

  • 위치: Sticky, 상단
  • 배경: 흰색, 하단 테두리 (1px solid #E5E7EB)
  • 구성:
    • 좌측: 뒤로가기 버튼 (화면별 조건부)
    • 중앙: 페이지 타이틀 (18px Bold)
    • 우측: 액션 버튼 (저장, 메뉴 등)
  • Mobile 전용 (768px 미만):
    • 우측 상단에 프로필 아이콘 버튼 추가 (👤, 24px)
    • 클릭 시 드롭다운 메뉴 표시:
      • 사용자 이름 (14px Bold)
      • 로그아웃 버튼 (btn-ghost btn-sm)
    • 드롭다운 위치: 우측 상단 기준 아래로 펼침
    • 배경: 흰색, 그림자: var(--shadow-md)
  • Desktop (768px+):
    • 프로필 아이콘 숨김 (사이드바 하단 영역 사용)

↑ 목차로 돌아가기

공통 에러 메시지 표준

네트워크 오류

  • 메시지: "네트워크 연결을 확인해주세요"
  • 재시도: 자동 재시도 최대 3회 (exponential backoff: 1s, 2s, 4s)
  • UI: 오류 토스트 (빨강) + "다시 시도" 버튼
  • 적용 화면: 전체

데이터 로딩 실패

  • 메시지: "일시적으로 데이터를 불러올 수 없습니다"
  • UI: 빈 상태 화면 + "다시 시도" 버튼
  • 적용 화면: 전체

권한 오류

  • 메시지: "접근 권한이 없습니다"
  • 액션: 3초 후 자동으로 이전 화면 또는 대시보드로 복귀
  • UI: 경고 토스트 (주황)
  • 적용 화면: 회의록 상세, 회의록 수정

인증 오류

  • 메시지: "로그인이 필요합니다"
  • 액션: 로그인 화면으로 리다이렉트
  • UI: 정보 토스트 (파랑)
  • 적용 화면: 전체 (인증 필요 화면)

입력 검증 오류

  • 이메일 형식 오류: "올바른 이메일 형식이 아닙니다"
  • 필수 입력 누락: "필수 항목을 입력해주세요"
  • 날짜 형식 오류: "올바른 날짜 형식이 아닙니다 (YYYY-MM-DD)"
  • UI: 입력 필드 하단 오류 메시지 (빨강, 14px)

서버 오류

  • 메시지: "서버에 일시적인 문제가 발생했습니다"
  • UI: 오류 토스트 (빨강) + "다시 시도" 버튼
  • 로깅: 오류 상세 정보를 서버로 전송 (Sentry)
  • 적용 화면: 전체

↑ 목차로 돌아가기

화면 간 전환 및 네비게이션

네비게이션 구조

Mobile (320px~768px)

Tablet/Desktop (768px+)

  • Primary Navigation: Desktop 좌측 사이드바 참조

    • 설정
    • 프로필

  • 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개 화면 설계 완료
1.1.x 2025-10-21 이미준 주요 변경: AI 요약 및 참고자료 기능, 회의록 상세 화면 개선, 대시보드 UI 개선
- 1.1.0: AI 요약/참고자료 기능 추가 (05, 10, 11 화면), UFR-AI-040 관련 회의록 자동 연결
- 1.1.1: 회의록 상세 탭 구조 개선 (회의록/대시보드), 참고자료 관련도 점수 표시
- 1.1.2: 대시보드 예정 회의 카드/Todo 정렬 개선, 12-회의록목록조회 신규 추가 (필터/정렬/검색)
1.2.x 2025-10-21 이미준, 최유진 주요 변경: 대시보드 역할 기반 접근 제어, 회의진행 화면 개선, 스타일 가이드 신규 작성
- 1.2.0: 진행중 회의 표시 기능 (배지, 참여하기 버튼, 에러 처리)
- 1.2.1: 예정 회의 생성자/참석자 권한 차별화 (수정 버튼, 참여 시간 제한, 타이머)
- 1.2.2: 참고자료 새 탭 열기, 참석자 추가 초대, 스타일 가이드 신규 작성 (민트 그린 컬러 시스템)
- 1.2.3: 설정 메뉴 제거, Todo 클릭 시 회의록 상세로 이동 (URL 파라미터 전달)
1.3.x 2025-10-21 이미준, 도그냥 주요 변경: 반응형 네비게이션 구조, 회의진행 화면 전면 개편, 공통 UI 컴포넌트 표준화
- 1.3.0: 반응형 네비게이션 (Mobile 하단 3개, Desktop 사이드바), 05-회의진행 2열 구조 재설계, 10-회의록상세조회 타임라인 탭 제거
- 1.3.1: AI 제안 탭 3가지 유형 상세화 (논의사항/결정사항/액션아이템), 디자인 통일성 개선
- 1.3.2: 참석자 추가 폼 + 이메일 유효성 검증, 버튼/검색창 스타일 통일
- 1.3.3: 공통 UI 컴포넌트/에러 메시지 섹션 신규 작성, 중복 내용 참조 링크 교체 (파일 크기 8~10% 감소)
1.4.x 2025-10-22~25 이미준, 강지수, 도그냥 주요 변경: Todo 관리 기능 대폭 강화, 화면 번호 재정렬, 회의록 공유 기능 제거, 유저스토리 v2.3.0 반영
- 1.4.01.4.5: 네비게이션 사양 통일, 대시보드 모바일 최적화, 공유 기능 제거, 화면 번호 통일, 로그아웃 기능 추가
- 1.4.61.4.10: 검증완료 섹션 잠금 정책, Todo 관리 확장 (통계/필터/편집), 회의록 상세 탭 순서 변경, Todo 카드 디자인 전면 개선, 공통 스타일 관리
- 1.4.111.4.13: 회의진행 액션아이템 탭 개선, Todo 카드 HTML/CSS 완전 통일 (3개 화면), D-day 배지 정책 (회의 중 숨김)
- 1.4.141.4.16: 12-회의록목록조회 데이터 아키텍처 문서화, 06-검증완료 화면 삭제, 사용자 역할 용어 통일 (생성자/참석자)
- 1.4.17~1.4.20: STT 화자 식별 불가 반영, 05-회의진행 프로토타입 기준 전면 수정, 유저스토리 v2.3.0 반영 (충돌 방지 정책 강화)
1.5.1 2025-10-27 강지수 MVP 스코프 축소 v2.4.0 반영 (4개 화면 수정)
- 02-대시보드: Todo 위젯 및 통계 제거 (UFR-USER-020 반영)
- Todo 위젯 전체 제거 (나의 Todo 섹션 삭제)
- 통계 카드: "나의 Todo" 제거, "작성중 회의록" 유지 (2개 항목)
- 네비게이션: 하단 네비게이션 및 사이드바에서 Todo 관리 메뉴 제거
- Desktop 통계 그리드: 2개 항목만 표시
- 05-회의진행: "AI 제안" 탭 → "AI 기반 메모" 탭 기능 변경
- 메모 입력창 + 저장 버튼 추가
- AI가 감지한 주요 내용 리스트 표시 (시간 + 내용)
- 각 참석자별 개별 저장, 다른 참석자 메모 볼 수 없음
- 메모는 회의 종료 전까지만 표시/편집 가능
- 에러 처리: AI 주요 내용 감지 실패, 메모 저장 실패 추가
- 10-회의록상세조회: Todo 단순 조회 기능으로 변경
- Todo는 제목 + 담당자 + 마감일만 표시
- D-day 라벨, 우선순위 배지, 진행률 바, 상태별 필터 제거
- Todo 관리 화면 연동 링크 제거 (화면 자체가 제거됨)
- "수정" 버튼을 헤더로 이동
- 11-회의록수정: 실시간 협업 기능 제거, 안건 기반 충돌 방지 강화
- "편집 중" 표시 제거 (실시간 협업 기능 제거)
- Todo 편집/추가/삭제 기능 전체 제거 (단순 조회만 가능)
- AI 한줄 요약 재생성 불가 (회의 종료 시 1회만 생성)
- 검증률 표시 및 최종 확정 버튼 제거
- 저장 로직 추가: 검증완료 안건 저장 스킵, 저장 결과 알림
- 안건별 검증 완료 체크박스로 충돌 방지 (Last Write Wins 적용)
- 에러 처리: 충돌 경고 모달 제거 (LWW로 인해)
1.5.2 2025-10-27 강지수 AI 요약 기능 통합 및 단순화 (유저스토리 v2.4.0 반영)
- 11-회의록수정: AI 요약 기능 통합
- 명칭 변경: "AI 상세 요약" → "AI 요약"
- AI 요약 영역: AI 한줄 요약만 표시 (30자 이내, 읽기 전용)
- 텍스트 편집 영역: 안건 내용 자유 작성 (논의 주제, 발언자별 의견, 결정 사항 등)
- "AI 재생성" 버튼: 텍스트 편집 영역 내용 기반으로 AI 요약의 한줄 요약 재생성 (2-5초 처리)
- 재생성된 한줄 요약은 회의록 상세조회 화면의 대시보드 및 회의록 탭에 즉시 반영
- AI 상세 요약 및 한줄 요약 분리 표시 제거
- 프로토타입 UI 개선:
- AI 재생성 버튼 스타일 통일: btn-secondary → btn-primary (다른 화면과 일관성)
- 안건별 검증완료 UI 단순화: 참석자는 체크박스만, 회의 생성자는 검증완료 시 잠금해제 버튼 표시
- .creator-only CSS 클래스 추가: data-is-creator 속성 기반 표시 제어
- 관련 유저스토리: UFR-AI-036 (AI 한줄요약 확인 및 재생성), UFR-MEET-055 (안건별 검증), UFR-COLLAB-030 (충돌 방지)
1.5.3 2025-10-27 강지수 Todo 추가/편집 권한 정책 명확화 (유저스토리 v2.4.1 반영)
- 10-회의록상세조회: Todo 추가/편집 권한 정책 추가 (대시보드 탭)
- "추가" 버튼: 모든 회의 참석자에게 노출 (Todo 리스트 우측 상단)
- "편집(✏️)" 버튼: 회의 생성자에게만 노출 (각 Todo 항목 우측)
- Todo 추가 모달: 제목, 담당자, 마감일 입력 (모든 참석자)
- Todo 편집 모달: 제목, 담당자, 마감일 수정 (회의 생성자만)
- 담당자 필드: 추가 시 또는 생성자의 편집 시만 표시
- 프로토타입 UI 개선: 10-회의록상세조회.html
- Todo 추가/편집 모달 바텀시트 스타일 통일 (모바일: 하단 슬라이드 업, 데스크톱: 중앙 모달)
- .creator-only 클래스 적용하여 편집 버튼 권한별 표시/숨김 처리
- JavaScript initPage() 함수에서 회의 생성자 여부 확인 후 creator-only 요소 제어
- Todo 추가 성공: "담당자에게 알림이 전송되었습니다" → "캘린더가 업데이트되었습니다" 순차 토스트
- Todo 편집 성공: 담당자 변경 시 알림, 마감일 변경 시 캘린더 업데이트 토스트
- 관련 유저스토리: UFR-MEET-047 (회의록상세조회), Todo 권한 정책 신규 추가
1.5.4 2025-10-28 도그냥 대시보드 최근 회의 리스트 디자인 간소화 (UFR-USER-020 반영)
- 02-대시보드: 최근 회의 정렬 기준 명확화 및 디자인 간소화
- 정렬 기준:
- 1순위: 회의록 미생성 회의 (진행중 + 예정) 우선 표시
- 2순위: 미생성이 3개 미만이면 최근 종료된 회의(회의록 있음)로 나머지 채움
- 각 그룹 내 정렬: 빠른 일시 순 (시작 시간 기준)
- 최대 표시: 3개
- 회의 카드 (클릭 가능 블록):
- 상태 라벨 (배지): "진행중", "예정", "작성중", "확정완료"
- 회의 제목 + 생성자 아이콘(👑)
- 회의 일시, 참석자 수, 장소
- 상태 버튼 (표시용): "참여하기", "수정하기", "보기"
- 디자인 간소화: D-day 표시, 깜박임 애니메이션, 세부 색상 지정 등 제거
- 유저스토리: UFR-USER-020 (대시보드 조회) 동일하게 수정
1.5.5 2025-10-28 도그냥 회의예약 화면 임시저장 기능 제거
- 03-회의예약: 헤더 임시저장 버튼 제거
- 헤더에서 "임시저장" 버튼 완전 제거
- JavaScript 변수 선언 제거 (draftSaveBtn)
- 임시저장 이벤트 리스너 제거
- 사용자는 "예약 완료" 버튼으로만 회의 예약 가능
- 유저스토리: UFR-MEET-010, UFR-MEET-011 임시저장 관련 출력 항목 제거
- 프로토타입: design/uiux/prototype/03-회의예약.html 수정
1.5.6 2025-10-28 도그냥, 지수 02-대시보드 예정 회의 권한 제어 개선 (MVP 일정 최우선)
- 예정 회의 카드 클릭 동작: 생성자/참석자 역할별 차별화
- 생성자: 카드 클릭 → 회의예약 화면(수정 모드) 진입
- 참석자: 카드 클릭 → 시스템 알럿 표시 ("아직 회의 시간이 되지 않아 참여하실 수 없습니다")
- 버튼 표시 규칙 변경: 예정 회의에서 "수정하기" 버튼 제거
- 진행중: "참여하기" 버튼 표시
- 예정: 버튼 없음 (카드 클릭으로 처리)
- 완료: "보기" 버튼 표시
- 프로토타입 수정: design/uiux/prototype/02-대시보드.html
- 권한 체크 로직 추가 (isCreator 확인)
- 시스템 알럿 추가 (참석자 클릭 시)
- 유저스토리 반영: UFR-USER-020, UFR-MEET-011 예외처리 추가
- 다음 버전 개선 계획: 참석자용 회의 상세 조회 모달 기능 추가 예정 (회의 정보 제공 + 시작 시간 안내)
1.5.7 2025-10-28 도그냥, 지수 UFR-TODO 잔여 참조 제거 (문서 정리)
- 유저스토리 매핑 섹션: "Todo 서비스" 항목 제거 (96라인)
- 프로토타입 화면 목록: "09 Todo관리" 화면 취소선 처리 및 제거 표시 추가 (124라인)
- 09-Todo관리 화면: 제거 안내 추가 (개요 섹션에 경고 메시지 삽입)
- MVP v2.4.0에서 제거됨을 명확히 표시
- Todo 기능은 회의록 상세조회(10번) 화면에서만 제공됨을 안내
- Todo 편집 섹션: MVP v2.4.0 제거 표시 추가 (1163라인)
- 관련 유저스토리: UFR-TODO-010, UFR-TODO-030, UFR-TODO-040 참조 제거 또는 삭제 표시
- 참고: Todo 관리 독립 화면은 제거되었으나 회의록 내 Todo 기능(추가/편집)은 10번 화면에서 유지됨

↑ 목차로 돌아가기

부록

참고 자료

  • Mobile First 설계 원칙: Luke Wroblewski "Mobile First"
  • 접근성 가이드라인: WCAG 2.1 Level AA
  • 성능 최적화: Google Web Fundamentals

디자인 시스템 (추후 작성)

  • 색상 팔레트
  • 타이포그래피
  • 컴포넌트 라이브러리
  • 아이콘 세트