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

djeon 739607db01 UI/UX 설계 및 프로토타입 업데이트

- 9개 프로토타입 화면 수정 (로그인~Todo관리)
- 공통 스타일시트 및 스크립트 개선
- 스타일 가이드 업데이트
- UI/UX 설계서 수정
- 테스트 결과 문서 업데이트

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

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

2025-10-21 08:38:22 +09:00

56 KiB

Raw Blame History

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

문서 정보

작성일: 2025-10-20
작성자: 이미준 (서비스 기획자)
버전: 1.0
설계 원칙: Mobile First 디자인 철학
접근성 기준: WCAG 2.1 Level AA

1. 프로토타입 화면 목록

본 서비스는 Mobile First 설계 원칙에 따라 총 9개의 핵심 화면으로 구성됩니다.

번호	화면명	관련 유저스토리	비즈니스 중요도	비고
01	로그인	UFR-USER-010	필수	인증 진입점
02	대시보드	UFR-MEET-045, UFR-MEET-055	높음	메인 화면
03	회의예약	UFR-MEET-010	높음	회의 준비
04	템플릿선택	UFR-MEET-020	중간	회의록 템플릿
05	회의진행	UFR-MEET-030, UFR-AI-010, UFR-RAG-010/020, UFR-COLLAB-010/020	매우 높음	핵심 차별화 기능
06	검증완료	UFR-COLLAB-030	중간	품질 보장
07	회의종료	UFR-MEET-040, UFR-MEET-050, UFR-AI-020	높음	회의록 확정
08	회의록공유	UFR-MEET-060	높음	공유 및 협업
09	Todo관리	UFR-TODO-010, UFR-TODO-030	높음	차별화 기능

2. 화면 간 사용자 플로우

2.1 주요 사용자 여정

[인증 플로우]
01-로그인 → 02-대시보드

[회의 예약 플로우]
02-대시보드 → 03-회의예약 → 02-대시보드

[회의 진행 플로우]
02-대시보드 → 04-템플릿선택 → 05-회의진행 → 06-검증완료 → 07-회의종료 → 08-회의록공유

[회의록 관리 플로우]
02-대시보드 → 회의록 상세 조회 → 수정/공유/다운로드

[Todo 관리 플로우]
09-Todo관리 → Todo 완료/수정 → 회의록 자동 반영

2.2 플로우 다이어그램

┌─────────┐
│01-로그인│
└────┬────┘
     │
     ▼
┌──────────┐     ┌──────────┐
│02-대시보드│────▶│03-회의예약│
└────┬─────┘     └──────────┘
     │
     ├─────────▶┌──────────────┐
     │          │04-템플릿선택 │
     │          └──────┬───────┘
     │                 │
     │                 ▼
     │          ┌──────────┐
     │          │05-회의진행│
     │          └────┬─────┘
     │               │
     │               ▼
     │          ┌──────────┐
     │          │06-검증완료│
     │          └────┬─────┘
     │               │
     │               ▼
     │          ┌──────────┐
     │          │07-회의종료│
     │          └────┬─────┘
     │               │
     │               ▼
     │          ┌────────────┐
     │          │08-회의록공유│
     │          └────────────┘
     │
     └─────────▶┌──────────┐
                │09-Todo관리│
                └──────────┘

3. 화면별 상세 설계

3.1 01-로그인

개요

목적: 사용자 인증 및 서비스 진입
관련 유저스토리: UFR-USER-010
비즈니스 중요도: 필수
화면 타입: 단일 목적 페이지

주요 기능

사번과 비밀번호를 통한 LDAP 인증
세션 관리 및 보안 유지
인증 실패 시 오류 메시지 표시

UI 구성요소

Mobile (320px ~ 767px)

┌─────────────────────────┐
│      [로고 이미지]      │
│                         │
│   회의록 작성 서비스    │
│                         │
│  ┌───────────────────┐  │
│  │ 사번              │  │
│  │ [입력 필드]       │  │
│  └───────────────────┘  │
│                         │
│  ┌───────────────────┐  │
│  │ 비밀번호          │  │
│  │ [입력 필드]       │  │
│  └───────────────────┘  │
│                         │
│  ┌───────────────────┐  │
│  │    로그인 버튼    │  │
│  └───────────────────┘  │
│                         │
│  LDAP 연동 인증 시스템  │
└─────────────────────────┘

주요 컴포넌트:

로고 이미지 (SVG, 반응형)
사번 입력 필드 (type="text", autocomplete="username")
비밀번호 입력 필드 (type="password", autocomplete="current-password")
로그인 버튼 (primary action, 44x44px 이상)
인증 안내 텍스트

인터랙션

입력 검증:
- 실시간 입력 검증 (사번 형식, 비밀번호 입력 여부)
- 포커스 이동: Tab 키로 필드 간 이동
- Enter 키로 로그인 실행
로그인 처리:
- 버튼 클릭 → 로딩 인디케이터 표시
- LDAP 인증 진행
- 성공 시: 대시보드로 자동 이동
- 실패 시: 오류 메시지 표시 (3초 후 자동 사라짐)
오류 처리:
- 인증 실패: "사번 또는 비밀번호가 올바르지 않습니다"
- 네트워크 오류: "연결에 실패했습니다. 다시 시도해주세요"
- 서버 오류: "일시적인 오류가 발생했습니다"

데이터 요구사항

입력: 사번 (문자열), 비밀번호 (문자열)
출력: 인증 토큰, 사용자 정보 (이름, 권한)
저장: 세션 토큰 (로컬 스토리지/세션 스토리지)

에러 처리

에러 유형	메시지	액션
인증 실패	사번 또는 비밀번호가 올바르지 않습니다	재입력 유도
네트워크 오류	연결에 실패했습니다	재시도 버튼 표시
서버 오류	일시적인 오류가 발생했습니다	관리자 문의 안내

3.2 02-대시보드

개요

목적: 회의록 목록 조회, 빠른 액세스, 상태 확인
관련 유저스토리: UFR-MEET-045 (상세조회), UFR-MEET-055 (수정)
비즈니스 중요도: 높음
화면 타입: 목록 및 액션 페이지

주요 기능

회의록 목록 조회 (필터링, 정렬, 검색)
빠른 액션 (새 회의 예약, 진행 중인 회의)
회의록 상세 조회 및 수정
알림 확인

UI 구성요소

Mobile (320px ~ 767px)

┌─────────────────────────────┐
│ [프로필] 대시보드  [알림🔔] │
├─────────────────────────────┤
│                             │
│  ┌─────────────────────┐   │
│  │  ➕ 새 회의 예약    │   │
│  └─────────────────────┘   │
│                             │
│  🔴 진행 중인 회의 (1건)   │
│  [회의 제목 - 지금 참여]   │
│                             │
├─────────────────────────────┤
│  내 회의록                  │
│                             │
│  [전체 ▼] [최신순 ▼] [🔍] │
│                             │
│  ┌───────────────────────┐ │
│  │ 📝 프로젝트 킥오프    │ │
│  │ 2025-10-20 14:00      │ │
│  │ ✅ 확정완료           │ │
│  │ 3명 참석              │ │
│  └───────────────────────┘ │
│                             │
│  ┌───────────────────────┐ │
│  │ 📝 주간 회의          │ │
│  │ 2025-10-19 10:00      │ │
│  │ ⚠️ 작성중 (60%)       │ │
│  │ 5명 참석              │ │
│  └───────────────────────┘ │
│                             │
│  [더보기...]               │
│                             │
├─────────────────────────────┤
│  [대시보드]  [Todo]  [더보기]│
└─────────────────────────────┘

주요 컴포넌트:

상단 헤더: 프로필 아이콘, 타이틀, 알림 아이콘
빠른 액션 버튼: 새 회의 예약 (primary), 진행 중인 회의 (secondary)
필터 영역: 상태 필터 (전체/작성중/확정완료), 정렬 (최신순/회의일시순/제목순)
검색 바: 회의 제목, 참석자, 키워드 검색
회의록 카드: 제목, 날짜, 상태, 참석자 수, 진행률 (작성중인 경우)
하단 네비게이션: 대시보드, Todo, 더보기

인터랙션

회의록 목록:
- 무한 스크롤 또는 페이지네이션
- 카드 탭: 상세 화면으로 이동
- 스와이프: 빠른 액션 (공유, 삭제)
필터링 및 검색:
- 필터 선택: 즉시 목록 갱신
- 검색: 300ms 디바운싱 후 API 요청
- 결과 없을 시: "검색 결과가 없습니다" 메시지
빠른 액션:
- 새 회의 예약: 03-회의예약 화면으로 이동
- 진행 중인 회의: 05-회의진행 화면으로 복귀
회의록 상세 조회 (UFR-MEET-045):
- 카드 클릭 → 상세 화면 모달 또는 새 페이지
- 표시 정보:
  - 회의 기본 정보: 제목, 일시, 장소, 참석자, 템플릿, 상태, 작성자
  - 섹션별 내용: 논의사항, 결정사항, Todo, 기타
  - 검증 상태: 섹션별 체크 표시
  - Todo 항목: 담당자, 마감일, 상태, 우선순위
  - 첨부파일: 다운로드 링크
- 부가 기능:
  - 수정 버튼 (권한 있는 경우)
  - 공유 버튼
  - PDF 다운로드
  - 이전/다음 회의록 네비게이션
  - 뒤로가기
회의록 수정 (UFR-MEET-055):
- 수정 버튼 클릭 → 편집 모드 전환
- 상태별 수정 범위:
  - 작성중: 모든 섹션 수정 가능
  - 확정완료: 승인 요청 후 수정 가능
- 자동 저장: 30초 간격
- 수정 이력: 누가, 언제, 무엇을 수정했는지
- 저장 버튼 클릭 → 상태 업데이트 → 목록 갱신

데이터 요구사항

입력: 필터 조건, 검색 키워드, 정렬 옵션
출력: 회의록 목록 (제목, 날짜, 상태, 참석자, 진행률)
캐싱: 최근 조회한 목록 (5분)

에러 처리

에러 유형	메시지	액션
조회 실패	목록을 불러올 수 없습니다	새로고침 버튼
검색 실패	검색 중 오류가 발생했습니다	재시도 유도
수정 권한 없음	수정 권한이 없습니다	확인 버튼

3.3 03-회의예약

개요

목적: 회의 예약 및 참석자 초대
관련 유저스토리: UFR-MEET-010
비즈니스 중요도: 높음
화면 타입: 폼 입력 페이지

주요 기능

회의 정보 입력 (제목, 날짜/시간, 장소, 참석자)
입력 검증 및 예약 생성
초대 이메일 자동 발송
캘린더 자동 등록

UI 구성요소

Mobile (320px ~ 767px)

┌─────────────────────────────┐
│ [←] 회의 예약         [저장]│
├─────────────────────────────┤
│                             │
│  회의 제목 *                │
│  ┌─────────────────────┐   │
│  │ [입력 필드]         │   │
│  └─────────────────────┘   │
│                             │
│  날짜 및 시간 *             │
│  ┌──────────┬──────────┐   │
│  │ 2025-10-20│ 14:00   │   │
│  └──────────┴──────────┘   │
│                             │
│  장소 (선택)                │
│  ┌─────────────────────┐   │
│  │ [입력 필드]         │   │
│  └─────────────────────┘   │
│                             │
│  참석자 *                   │
│  ┌─────────────────────┐   │
│  │ user1@company.com   │   │
│  │ user2@company.com   │   │
│  │ + 참석자 추가       │   │
│  └─────────────────────┘   │
│                             │
│  ☑️ 회의 시작 30분 전      │
│     리마인더 발송           │
│                             │
│  ┌─────────────────────┐   │
│  │    회의 예약하기    │   │
│  └─────────────────────┘   │
│                             │
└─────────────────────────────┘

주요 컴포넌트:

상단 헤더: 뒤로가기, 타이틀, 저장 버튼
회의 제목 입력 필드 (최대 100자, 필수)
날짜 선택기 (달력 UI, 필수)
시간 선택기 (시간 목록, 필수)
장소 입력 필드 (최대 200자, 선택)
참석자 입력 영역 (이메일 칩, 최소 1명 필수)
리마인더 설정 체크박스
예약하기 버튼 (primary action)

인터랙션

폼 입력:
- 실시간 검증: 제목 길이, 이메일 형식, 날짜/시간 유효성
- 참석자 추가: 이메일 입력 후 Enter 또는 버튼 클릭
- 참석자 제거: 칩 클릭 또는 스와이프
날짜/시간 선택:
- 날짜 선택기: 달력 모달 표시
- 시간 선택기: 드롭다운 또는 스크롤 선택
- 과거 날짜 선택 불가
예약 처리:
- 버튼 클릭 → 필수 항목 검증
- 성공 시:
  - 회의 ID 생성
  - 캘린더 자동 등록
  - 참석자에게 이메일 발송
  - 성공 메시지 표시 (토스트)
  - 대시보드로 이동
- 실패 시: 오류 메시지 표시
자동 저장:
- 입력 중 임시 저장 (30초 간격)
- 뒤로가기 시 저장 확인 다이얼로그

데이터 요구사항

입력: 제목, 날짜, 시간, 장소, 참석자 목록
출력: 회의 ID, 예약 확인
저장: 임시 저장 데이터 (로컬 스토리지)

에러 처리

에러 유형	메시지	액션
필수 항목 누락	[항목명]을 입력해주세요	해당 필드로 포커스
이메일 형식 오류	올바른 이메일을 입력해주세요	재입력 유도
예약 실패	예약에 실패했습니다	재시도 버튼
날짜 과거 선택	과거 날짜는 선택할 수 없습니다	오늘 날짜로 초기화

3.4 04-템플릿선택

개요

목적: 회의 유형에 맞는 템플릿 선택 및 커스터마이징
관련 유저스토리: UFR-MEET-020
비즈니스 중요도: 중간
화면 타입: 선택 및 설정 페이지

주요 기능

템플릿 목록 표시 (일반, 스크럼, 킥오프, 주간)
템플릿 미리보기
섹션 커스터마이징 (추가/삭제/순서 변경)
회의록 도구 준비

UI 구성요소

Mobile (320px ~ 767px)

┌─────────────────────────────┐
│ [←] 템플릿 선택       [다음]│
├─────────────────────────────┤
│                             │
│  회의 유형에 맞는 템플릿을  │
│  선택해주세요               │
│                             │
│  ┌───────────────────────┐ │
│  │ 📋 일반 회의          │ │
│  │ 기본 구조: 참석자,    │ │
│  │ 안건, 논의, 결정, Todo│ │
│  │ [미리보기]  [✓ 선택]  │ │
│  └───────────────────────┘ │
│                             │
│  ┌───────────────────────┐ │
│  │ 🏃 스크럼 회의        │ │
│  │ 어제 한 일, 오늘 할 일│ │
│  │ 이슈                  │ │
│  │ [미리보기]  [ 선택]   │ │
│  └───────────────────────┘ │
│                             │
│  ┌───────────────────────┐ │
│  │ 🚀 프로젝트 킥오프    │ │
│  │ 개요, 목표, 일정,     │ │
│  │ 역할, 리스크          │ │
│  │ [미리보기]  [ 선택]   │ │
│  └───────────────────────┘ │
│                             │
│  ┌───────────────────────┐ │
│  │ 📊 주간 회의          │ │
│  │ 실적, 이슈, 다음 계획 │ │
│  │ [미리보기]  [ 선택]   │ │
│  └───────────────────────┘ │
│                             │
│  [커스터마이징]             │
│                             │
└─────────────────────────────┘

주요 컴포넌트:

상단 헤더: 뒤로가기, 타이틀, 다음 버튼
템플릿 카드: 아이콘, 제목, 설명, 미리보기 버튼, 선택 버튼
커스터마이징 버튼 (선택한 템플릿이 있을 때 활성화)

커스터마이징 모달:

┌─────────────────────────────┐
│ 템플릿 커스터마이징   [완료]│
├─────────────────────────────┤
│                             │
│  섹션 관리                  │
│                             │
│  ☰ 참석자                   │
│  ☰ 안건                     │
│  ☰ 논의 내용                │
│  ☰ 결정 사항                │
│  ☰ Todo                     │
│                             │
│  ┌─────────────────────┐   │
│  │ + 섹션 추가         │   │
│  └─────────────────────┘   │
│                             │
│  섹션을 길게 눌러 순서를    │
│  변경하거나 삭제할 수 있습니다│
│                             │
└─────────────────────────────┘

인터랙션

템플릿 선택:
- 카드 탭: 선택 상태 토글
- 미리보기 버튼: 템플릿 구조 모달 표시
- 하나만 선택 가능 (라디오 버튼 방식)
미리보기:
- 템플릿 구조 전체 표시
- 샘플 데이터로 예시 제공
- 닫기 버튼으로 모달 종료
커스터마이징:
- 커스터마이징 버튼 클릭 → 모달 표시
- 섹션 순서 변경: 드래그 앤 드롭 또는 위/아래 버튼
- 섹션 삭제: 스와이프 또는 삭제 아이콘
- 섹션 추가: 입력 필드에 섹션명 입력 후 추가
- 완료 버튼: 변경 사항 저장
다음 단계:
- 다음 버튼 클릭 → 05-회의진행 화면으로 이동
- 템플릿 정보 전달 (선택한 템플릿, 커스터마이징 내용)

데이터 요구사항

입력: 템플릿 선택, 커스터마이징 정보
출력: 준비된 회의록 구조
캐싱: 템플릿 목록 (앱 시작 시 로드)

에러 처리

에러 유형	메시지	액션
템플릿 미선택	템플릿을 선택해주세요	선택 유도
섹션명 중복	이미 존재하는 섹션명입니다	재입력 유도
섹션 로드 실패	템플릿을 불러올 수 없습니다	새로고침 버튼

3.5 05-회의진행

개요

목적: 회의 진행, 실시간 회의록 작성, 차별화 기능 제공
관련 유저스토리: UFR-MEET-030 (회의시작), UFR-AI-010 (자동작성), UFR-RAG-010/020 (용어설명), UFR-COLLAB-010/020 (협업)
비즈니스 중요도: 매우 높음 (핵심 차별화 기능)
화면 타입: 실시간 협업 페이지

주요 기능

음성 녹음 및 실시간 STT 변환
AI 자동 회의록 작성 및 구조화
맥락 기반 용어 설명 (차별화)
실시간 협업 및 동기화
충돌 해결
회의 종료

UI 구성요소

Mobile (320px ~ 767px)

┌─────────────────────────────┐
│ [←] 프로젝트 킥오프   [종료]│
├─────────────────────────────┤
│                             │
│  🔴 녹음 중  [23:45]       │
│  ┌─────────────────────┐   │
│  │ 🎵 파형 애니메이션  │   │
│  └─────────────────────┘   │
│                             │
│  👥 참석자 (3/5명)         │
│  [김민준] [박서연] [이준호] │
│                             │
├─────────────────────────────┤
│  📝 실시간 회의록           │
│                             │
│  ▼ 참석자                   │
│    - 김민준 (주관자)        │
│    - 박서연                 │
│    - 이준호                 │
│                             │
│  ▼ 안건                     │
│    - 프로젝트 목표 정의     │
│    - 일정 및 마일스톤       │
│                             │
│  ▼ 논의 내용                │
│    "우리는 Q1까지 MVP를     │
│     완성해야 합니다..."     │
│                             │
│    💡 [RAG] 용어 설명       │
│    "MVP는 최소 기능 제품으로│
│     이전 프로젝트에서는..." │
│                             │
│  ▼ 결정 사항                │
│    - 개발 프레임워크: React │
│    - 배포 환경: AWS         │
│                             │
│  ▼ Todo                     │
│    ☐ 요구사항 정의 @김민준  │
│      (~ 10/25)              │
│                             │
│  [📝 수정] [💬 댓글]        │
│                             │
└─────────────────────────────┘

주요 컴포넌트:

상단 헤더: 뒤로가기, 회의 제목, 종료 버튼
녹음 상태 영역: 녹음 표시, 진행 시간, 파형 애니메이션
참석자 목록: 아바타, 이름, 참석 상태
회의록 섹션: 아코디언 방식, 접기/펼치기
실시간 텍스트 영역: STT 변환 결과 표시
AI 자동 정리 영역: 구조화된 회의록
용어 하이라이트: 밑줄 또는 배경색, 툴팁
액션 버튼: 수정, 댓글, 첨부

맥락 기반 용어 설명 툴팁 (차별화 기능):

┌─────────────────────────────┐
│ MVP (Minimum Viable Product)│
├─────────────────────────────┤
│ 📘 정의:                    │
│ 최소 기능 제품, 핵심 기능만 │
│ 구현하여 시장 검증          │
│                             │
│ 🏢 이 회의에서의 의미:      │
│ "Q1까지 사용자 인증, 대시보드│
│  핵심 기능만 구현"          │
│                             │
│ 📂 관련 프로젝트:           │
│ - 2024 고객 포털 프로젝트   │
│ - 2023 모바일 앱 리뉴얼     │
│                             │
│ 📄 과거 회의록:             │
│ - 2024-09-15 기획 회의      │
│ - 2024-08-20 킥오프 회의    │
│                             │
│ [자세히 보기]               │
└─────────────────────────────┘

인터랙션

회의 시작:
- 회의 시작 버튼 클릭 → 권한 확인 (마이크)
- 녹음 시작 → 파형 애니메이션 표시
- 참석자 목록 표시 → 실시간 참석 상태 업데이트
실시간 STT 및 AI 작성:
- 음성 인식 → 텍스트 변환 (1초 이내)
- AI 자동 정리 → 3-5초 간격으로 회의록 업데이트
- 화자 식별 → 발언자 표시
- 구조화 → 템플릿 섹션에 맞춰 자동 분류
맥락 기반 용어 설명 (차별화):
- 전문용어 자동 감지 → 하이라이트 표시
- 용어 클릭/탭 → 툴팁 표시
- RAG 검색 → 과거 회의록, 사내 문서에서 맥락 추출
- 설명 표시:
  - 간단한 정의
  - 이 회의에서의 의미
  - 관련 프로젝트/이슈
  - 과거 회의록 링크
  - 사내 문서 링크
- 툴팁 외부 클릭 → 닫기
- "자세히 보기" → 전체 화면 모달
실시간 협업 (UFR-COLLAB-010):
- 회의록 수정 → WebSocket으로 즉시 동기화
- 수정 영역 하이라이트 (3초간)
- 수정자 이름 표시
- 버전 관리 → 수정 이력 저장
충돌 해결 (UFR-COLLAB-020):
- 동일 위치 동시 수정 감지
- 충돌 알림 표시
- 해결 방식 선택:
  - Last Write Wins (기본)
  - 수동 병합 (비교 UI 표시)
회의 종료:
- 종료 버튼 클릭 → 확인 다이얼로그
- 확인 → 녹음 중지 → 06-검증완료 화면으로 이동

데이터 요구사항

입력: 음성 스트림, 회의 ID, 참석자 정보
출력: 텍스트 변환 결과, 구조화된 회의록, 용어 설명
실시간 동기화: WebSocket 연결
로컬 저장: 임시 회의록 (30초 간격)

에러 처리

에러 유형	메시지	액션
마이크 권한 없음	마이크 권한이 필요합니다	설정 안내
STT 실패	음성 인식에 실패했습니다	수동 입력 모드
AI 처리 실패	자동 정리 중 오류 발생	재시도 버튼
동기화 실패	연결이 끊어졌습니다	재연결 시도
용어 설명 없음	관련 정보를 찾을 수 없습니다	전문가 요청 버튼

3.6 06-검증완료

개요

목적: 회의록 섹션별 검증 및 완료 표시
관련 유저스토리: UFR-COLLAB-030
비즈니스 중요도: 중간
화면 타입: 검증 및 확인 페이지

주요 기능

섹션별 검증 상태 확인
검증 완료 체크
섹션 잠금 (회의 생성자만)
다음 단계 (회의 종료)

UI 구성요소

Mobile (320px ~ 767px)

┌─────────────────────────────┐
│ [←] 회의록 검증       [다음]│
├─────────────────────────────┤
│                             │
│  회의록 섹션별로 검증해주세요│
│                             │
│  ✅ 참석자 (검증완료)       │
│  ┌───────────────────────┐ │
│  │ - 김민준 (주관자)     │ │
│  │ - 박서연              │ │
│  │ - 이준호              │ │
│  │                       │ │
│  │ 검증자: 김민준        │ │
│  │ 시간: 14:35           │ │
│  │ [수정] [🔒 잠금]      │ │
│  └───────────────────────┘ │
│                             │
│  ⚠️ 안건 (검증 필요)        │
│  ┌───────────────────────┐ │
│  │ - 프로젝트 목표 정의  │ │
│  │ - 일정 및 마일스톤    │ │
│  │                       │ │
│  │ [수정] [✓ 검증완료]   │ │
│  └───────────────────────┘ │
│                             │
│  ⚠️ 논의 내용 (검증 필요)   │
│  ┌───────────────────────┐ │
│  │ "우리는 Q1까지..."    │ │
│  │                       │ │
│  │ [수정] [✓ 검증완료]   │ │
│  └───────────────────────┘ │
│                             │
│  ✅ 결정 사항 (검증완료)    │
│  ✅ Todo (검증완료)         │
│                             │
│  전체 진행률: 60% (3/5)    │
│                             │
└─────────────────────────────┘

주요 컴포넌트:

상단 헤더: 뒤로가기, 타이틀, 다음 버튼
섹션 카드: 제목, 내용 미리보기, 검증 상태, 검증자 정보
액션 버튼: 수정, 검증완료, 잠금 (회의 생성자만)
진행률 표시: 퍼센트, 완료 수/전체 수

인터랙션

섹션 검증:
- 섹션 카드 탭 → 전체 내용 표시
- 검증완료 버튼 클릭 → 상태 업데이트
- 검증 시간 및 검증자 기록
- 실시간 동기화 → 다른 참석자에게 알림
섹션 잠금 (회의 생성자만):
- 잠금 버튼 클릭 → 확인 다이얼로그
- 확인 → 섹션 잠금 (추가 수정 불가)
- 잠금 아이콘 표시
섹션 수정:
- 수정 버튼 클릭 → 편집 모드
- 인라인 편집 또는 모달
- 저장 → 상태 "검증 필요"로 변경
다음 단계:
- 다음 버튼 클릭 → 07-회의종료 화면으로 이동
- 검증 미완료 섹션이 있어도 진행 가능 (나중에 수정 가능)

데이터 요구사항

입력: 섹션별 검증 상태
출력: 검증 완료 정보 (검증자, 시간)
실시간 동기화: WebSocket

에러 처리

에러 유형	메시지	액션
검증 권한 없음	검증 권한이 없습니다	확인 버튼
잠금 권한 없음	회의 생성자만 잠금할 수 있습니다	확인 버튼
동기화 실패	검증 상태 동기화 실패	재시도 버튼

3.7 07-회의종료

개요

목적: 회의 종료, 통계 확인, Todo 자동 추출, 최종 확정
관련 유저스토리: UFR-MEET-040 (회의종료), UFR-MEET-050 (최종확정), UFR-AI-020 (Todo자동추출)
비즈니스 중요도: 높음
화면 타입: 요약 및 확정 페이지

주요 기능

회의 통계 표시
AI Todo 자동 추출 결과
최종 회의록 확정
회의록 공유 이동

UI 구성요소

Mobile (320px ~ 767px)

┌─────────────────────────────┐
│ [←] 회의 종료         [확정]│
├─────────────────────────────┤
│                             │
│  🎉 회의가 종료되었습니다   │
│                             │
│  📊 회의 통계               │
│  ┌───────────────────────┐ │
│  │ ⏱️ 총 시간: 45분      │ │
│  │ 👥 참석자: 3명        │ │
│  │ 💬 발언 횟수:         │ │
│  │    김민준 12회        │ │
│  │    박서연 8회         │ │
│  │    이준호 5회         │ │
│  │ 🔑 주요 키워드:       │ │
│  │    #MVP #React #AWS   │ │
│  └───────────────────────┘ │
│                             │
│  ✅ AI Todo 자동 추출       │
│  ┌───────────────────────┐ │
│  │ ☐ 요구사항 정의       │ │
│  │   @김민준 ~ 10/25     │ │
│  │                       │ │
│  │ ☐ 기술 스택 검토      │ │
│  │   @박서연 ~ 10/27     │ │
│  │                       │ │
│  │ ☐ 인프라 설계         │ │
│  │   @이준호 ~ 10/30     │ │
│  └───────────────────────┘ │
│                             │
│  필수 항목 확인:            │
│  ✅ 회의 제목               │
│  ✅ 참석자 목록             │
│  ✅ 주요 논의 내용          │
│  ✅ 결정 사항               │
│                             │
│  ┌─────────────────────┐   │
│  │  최종 회의록 확정   │   │
│  └─────────────────────┘   │
│                             │
│  [나중에 확정]              │
│                             │
└─────────────────────────────┘

주요 컴포넌트:

상단 헤더: 뒤로가기, 타이틀, 확정 버튼
완료 메시지: 아이콘, 텍스트
통계 카드: 시간, 참석자, 발언 횟수, 키워드
Todo 자동 추출 영역: Todo 목록, 담당자, 마감일
필수 항목 체크리스트: 체크 아이콘
확정 버튼 (primary)
나중에 확정 버튼 (secondary)

인터랙션

회의 통계:
- 자동 생성 및 표시
- 그래프 또는 차트 (선택)
- 키워드 탭 → 관련 섹션으로 이동
AI Todo 자동 추출 (UFR-AI-020):
- AI가 회의록 분석 → 액션 아이템 식별
- 담당자 자동 지정 (발언 기반)
- 마감일 자동 추출 (언급된 경우)
- Todo 편집 가능 (담당자, 마감일 수정)
- 추가/삭제 가능
최종 확정 (UFR-MEET-050):
- 확정 버튼 클릭 → 필수 항목 검사
- 필수 항목 누락 시:
  - 누락 항목 표시
  - 해당 섹션으로 이동 유도
- 필수 항목 완료 시:
  - 최종 버전 생성
  - 확정 시간 기록
  - Todo 서비스로 Todo 전달 (UFR-TODO-010)
  - 08-회의록공유 화면으로 이동
나중에 확정:
- 버튼 클릭 → 대시보드로 이동
- 회의록 상태: "작성중"
- 나중에 수정 및 확정 가능

데이터 요구사항

입력: 회의 데이터 (시간, 참석자, 발언 내용)
출력: 통계, Todo 목록, 확정 정보
저장: 최종 회의록, Todo 데이터

에러 처리

에러 유형	메시지	액션
필수 항목 누락	[항목명]이 작성되지 않았습니다	해당 섹션으로 이동
Todo 추출 실패	Todo 자동 추출 실패	수동 작성 유도
확정 실패	회의록 확정에 실패했습니다	재시도 버튼

3.8 08-회의록공유

개요

목적: 회의록 공유 설정 및 알림 발송
관련 유저스토리: UFR-MEET-060
비즈니스 중요도: 높음
화면 타입: 설정 및 액션 페이지

주요 기능

공유 대상 선택
권한 설정
공유 방식 선택
링크 보안 옵션
공유 실행 및 알림 발송

UI 구성요소

Mobile (320px ~ 767px)

┌─────────────────────────────┐
│ [←] 회의록 공유       [공유]│
├─────────────────────────────┤
│                             │
│  공유 대상                  │
│  ┌───────────────────────┐ │
│  │ ● 참석자 전체 (기본)  │ │
│  │ ○ 특정 참석자 선택    │ │
│  └───────────────────────┘ │
│                             │
│  공유 권한                  │
│  ┌───────────────────────┐ │
│  │ ● 읽기 전용           │ │
│  │ ○ 댓글 가능           │ │
│  │ ○ 편집 가능           │ │
│  └───────────────────────┘ │
│                             │
│  공유 방식                  │
│  ┌───────────────────────┐ │
│  │ ☑️ 이메일 발송        │ │
│  │ ☑️ 링크 복사          │ │
│  └───────────────────────┘ │
│                             │
│  링크 보안 (선택)           │
│  ┌───────────────────────┐ │
│  │ ☐ 유효 기간 설정      │ │
│  │   [30일 ▼]            │ │
│  │                       │ │
│  │ ☐ 비밀번호 설정       │ │
│  │   [입력 필드]         │ │
│  └───────────────────────┘ │
│                             │
│  🔔 다음 회의 일정          │
│  ┌───────────────────────┐ │
│  │ ☑️ 캘린더 자동 등록   │ │
│  │ 날짜: [선택]          │ │
│  └───────────────────────┘ │
│                             │
│  ┌─────────────────────┐   │
│  │    회의록 공유      │   │
│  └─────────────────────┘   │
│                             │
└─────────────────────────────┘

주요 컴포넌트:

상단 헤더: 뒤로가기, 타이틀, 공유 버튼
공유 대상 라디오 버튼
권한 설정 라디오 버튼
공유 방식 체크박스
링크 보안 옵션: 유효 기간, 비밀번호
다음 회의 일정: 캘린더 자동 등록 옵션
공유 버튼 (primary)

인터랙션

공유 대상 선택:
- 참석자 전체 (기본 선택)
- 특정 참석자 선택 → 체크박스 목록 표시
권한 설정:
- 읽기 전용 (기본)
- 댓글 가능
- 편집 가능
공유 방식:
- 이메일 발송: 참석자 이메일로 알림
- 링크 복사: 클립보드에 복사 → 토스트 메시지
링크 보안:
- 유효 기간: 드롭다운 (7일, 30일, 90일, 무제한)
- 비밀번호: 입력 필드, 자동 생성 버튼
다음 회의 일정:
- 회의록에서 다음 회의 언급 자동 감지
- 캘린더 자동 등록 체크박스
- 날짜 선택기
공유 실행:
- 공유 버튼 클릭 → 처리
- 성공 시:
  - 공유 링크 생성
  - 이메일 발송 (선택 시)
  - 링크 복사 (선택 시)
  - 캘린더 등록 (선택 시)
  - 공유 시간 기록
  - 성공 메시지 표시
  - 대시보드로 이동
- 실패 시: 오류 메시지

데이터 요구사항

입력: 공유 대상, 권한, 방식, 보안 옵션
출력: 공유 링크, 발송 결과
저장: 공유 이력

에러 처리

에러 유형	메시지	액션
공유 실패	공유에 실패했습니다	재시도 버튼
이메일 발송 실패	이메일 발송 실패	링크 복사 유도
링크 생성 실패	링크 생성 실패	재시도 버튼

3.9 09-Todo관리

개요

목적: Todo 할당, 진행 관리, 회의록 실시간 연동 (차별화)
관련 유저스토리: UFR-TODO-010 (Todo할당), UFR-TODO-030 (Todo완료처리)
비즈니스 중요도: 높음 (차별화 기능)
화면 타입: 목록 및 관리 페이지

주요 기능

Todo 목록 조회 (진행중/완료)
Todo 완료 처리
회의록 실시간 연동 (차별화)
필터링 및 정렬
알림 발송

UI 구성요소

Mobile (320px ~ 767px)

┌─────────────────────────────┐
│ [프로필] Todo       [알림🔔]│
├─────────────────────────────┤
│                             │
│  [진행중 ▼] [마감일순 ▼]   │
│                             │
│  📌 진행 중 (3건)           │
│                             │
│  ┌───────────────────────┐ │
│  │ ☐ 요구사항 정의       │ │
│  │ @김민준               │ │
│  │ 📅 ~ 10/25 (D-5)      │ │
│  │ ⭐ 높음              │ │
│  │ 📝 프로젝트 킥오프    │ │
│  │    (10/20)            │ │
│  └───────────────────────┘ │
│                             │
│  ┌───────────────────────┐ │
│  │ ☐ 기술 스택 검토      │ │
│  │ @박서연               │ │
│  │ 📅 ~ 10/27 (D-7)      │ │
│  │ ⭐ 보통              │ │
│  │ 📝 주간 회의 (10/19)  │ │
│  └───────────────────────┘ │
│                             │
│  ✅ 완료됨 (2건)            │
│                             │
│  ┌───────────────────────┐ │
│  │ ☑️ 회의 일정 조율     │ │
│  │ @이준호               │ │
│  │ ✓ 10/18 완료          │ │
│  │ 📝 킥오프 준비 회의   │ │
│  └───────────────────────┘ │
│                             │
├─────────────────────────────┤
│  [대시보드]  [Todo]  [더보기]│
└─────────────────────────────┘

주요 컴포넌트:

상단 헤더: 프로필, 타이틀, 알림
필터 영역: 상태 (진행중/완료), 정렬 (마감일/우선순위/최신순)
Todo 카드:
- 체크박스 (완료 처리)
- Todo 내용
- 담당자
- 마감일 (D-day 표시)
- 우선순위 (아이콘)
- 회의록 링크 (제목, 날짜)
하단 네비게이션

Todo 상세 모달:

┌─────────────────────────────┐
│ Todo 상세               [✕] │
├─────────────────────────────┤
│                             │
│  ☐ 요구사항 정의            │
│                             │
│  담당자: 김민준             │
│  마감일: 2025-10-25         │
│  우선순위: 높음             │
│                             │
│  📝 관련 회의록:            │
│  프로젝트 킥오프 (10/20)    │
│  [회의록 보기]              │
│                             │
│  💬 댓글 (2)                │
│  - 김민준: 진행 중입니다    │
│  - 박서연: 도움 필요하시면  │
│    연락주세요               │
│                             │
│  ┌─────────────────────┐   │
│  │  완료 처리          │   │
│  └─────────────────────┘   │
│                             │
└─────────────────────────────┘

인터랙션

Todo 목록:
- 무한 스크롤 또는 페이지네이션
- 카드 탭: 상세 모달 표시
- 스와이프: 빠른 액션 (완료, 수정, 삭제)
Todo 완료 처리 (UFR-TODO-030):
- 체크박스 클릭 → 확인 다이얼로그
- 확인 → 완료 상태 변경
- 완료 시간 기록
- 회의록 실시간 반영 (차별화):
  - 관련 회의록의 Todo 섹션 자동 업데이트
  - 완료 표시 (체크 아이콘)
  - 완료 시간 및 완료자 표시
- 알림 발송:
  - 회의 참석자에게 완료 알림
  - 모든 Todo 완료 시 전체 완료 알림
회의록 연결 (차별화):
- 회의록 보기 버튼 → 해당 회의록 상세 화면
- 원문 맥락 추적 가능
- 양방향 연결 (Todo ↔ 회의록)
필터링 및 정렬:
- 상태 필터: 진행중, 완료
- 정렬: 마감일순, 우선순위, 최신순
댓글 및 협업:
- 댓글 작성 → 실시간 동기화
- 담당자에게 알림

데이터 요구사항

입력: 필터, 정렬, 완료 처리
출력: Todo 목록, 회의록 연결 정보
실시간 동기화: WebSocket (회의록 반영)

에러 처리

에러 유형	메시지	액션
조회 실패	Todo 목록을 불러올 수 없습니다	새로고침 버튼
완료 처리 실패	완료 처리에 실패했습니다	재시도 버튼
회의록 연결 실패	회의록을 찾을 수 없습니다	확인 버튼

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

4.1 네비게이션 전략

Mobile (320px ~ 767px)

하단 네비게이션 바: 대시보드, Todo, 더보기
상단 헤더: 뒤로가기, 타이틀, 액션 버튼
햄버거 메뉴: 설정, 프로필, 로그아웃
플로팅 액션 버튼 (FAB): 빠른 액세스 (새 회의 예약)

Tablet (768px ~ 1023px)

사이드 네비게이션: 고정된 좌측 메뉴
상단 네비게이션: 로고, 검색, 알림, 프로필
플로팅 액션 버튼 (FAB): 빠른 액세스

Desktop (1024px 이상)

좌측 사이드바: 고정된 네비게이션 메뉴
상단 헤더: 로고, 검색, 알림, 프로필
키보드 단축키: 빠른 네비게이션

4.2 화면 전환 패턴

전환	애니메이션	방향
로그인 → 대시보드	페이드인	-
대시보드 → 상세	슬라이드 좌	우 → 좌
상세 → 대시보드	슬라이드 우	좌 → 우
모달 표시	슬라이드 상	하 → 상
모달 닫기	슬라이드 하	상 → 하

4.3 제스처 지원 (Mobile)

스와이프 우: 뒤로가기 (iOS 스타일)
스와이프 좌: 빠른 액션 (삭제, 공유)
길게 누르기: 컨텍스트 메뉴
핀치 줌: 이미지 확대/축소
풀 투 리프레시: 목록 새로고침

5. 반응형 설계 전략

5.1 브레이크포인트

/* Mobile First (기본) */
@media (min-width: 320px) { /* Mobile */ }
@media (min-width: 768px) { /* Tablet */ }
@media (min-width: 1024px) { /* Desktop */ }
@media (min-width: 1440px) { /* Large Desktop */ }

5.2 레이아웃 전략

Mobile (320px ~ 767px)

단일 컬럼 레이아웃
풀 스크린 모달
하단 네비게이션
스택 방식 (세로 배치)

Tablet (768px ~ 1023px)

2단 컬럼 (메인 + 사이드)
사이드 패널 (용어 설명, 참석자 목록)
플로팅 모달
그리드 레이아웃 (회의록 목록 2열)

Desktop (1024px 이상)

3단 컬럼 (네비게이션 + 메인 + 사이드)
인라인 모달
상단 네비게이션
그리드 레이아웃 (회의록 목록 3-4열)

5.3 점진적 향상

Mobile (기본 기능)

핵심 회의록 작성 기능
필수 검증 및 공유
기본 Todo 관리

Tablet (추가 기능)

빠른 액세스 패널
회의록 미리보기
멀티 선택 및 일괄 작업

Desktop (고급 기능)

다중 회의록 비교
고급 검색 및 필터
키보드 단축키
드래그 앤 드롭

5.4 타이포그래피 반응형

/* 제목 */
h1 {
  font-size: 24px; /* Mobile */
}
@media (min-width: 768px) {
  h1 { font-size: 32px; } /* Tablet */
}
@media (min-width: 1024px) {
  h1 { font-size: 40px; } /* Desktop */
}

/* 본문 */
body {
  font-size: 14px; /* Mobile */
  line-height: 1.5;
}
@media (min-width: 768px) {
  body { font-size: 16px; } /* Tablet */
}

5.5 이미지 및 미디어 반응형

반응형 이미지: srcset, sizes 속성 활용
WebP 포맷: 최신 브라우저 지원
레이지 로딩: loading="lazy" 속성
비디오: 자동 재생 비활성화 (모바일)

6. 접근성 보장 방안

6.1 WCAG 2.1 Level AA 준수

인식 가능성 (Perceivable)

텍스트 대체:
- 모든 이미지에 alt 텍스트 제공
- 아이콘에 aria-label 추가
- 정보 전달 이미지: 상세한 설명
- 장식 이미지: alt="" (빈 문자열)
색상 대비:
- 일반 텍스트: 최소 4.5:1
- 큰 텍스트 (18pt 이상): 최소 3:1
- UI 컴포넌트: 최소 3:1
- 색상만으로 정보 전달 금지 (아이콘, 텍스트 병행)
리사이징:
- 200%까지 확대 가능
- 콘텐츠 손실 없음
- 가로 스크롤 최소화
콘텐츠 구조:
- 의미론적 HTML 사용 (<header>, <nav>, <main>, <article>, <section>, <footer>)
- 제목 태그 계층 구조 (<h1> ~ <h6>)
- 목록 태그 활용 (<ul>, <ol>, <li>)

운용 가능성 (Operable)

키보드 접근:
- 모든 기능 키보드로 조작 가능
- Tab 키로 순차 이동
- Shift + Tab으로 역순 이동
- Enter/Space 키로 버튼 실행
- Esc 키로 모달 닫기
충분한 시간:
- 자동 로그아웃: 15분 전 경고
- 세션 연장 옵션 제공
- 타임아웃 없는 작업: 회의록 작성
포커스 표시:
- 명확한 포커스 인디케이터 (2px 테두리)
- 색상 대비 충족
- 포커스 순서: 논리적 흐름
제목 및 레이블:
- 모든 폼 필드에 <label> 연결
- 버튼: 명확한 텍스트
- 링크: 목적지 설명

이해 가능성 (Understandable)

읽기 수준:
- 간결하고 명확한 언어
- 전문용어 설명 제공
- 짧은 문장 (20단어 이하)
예측 가능성:
- 일관된 네비게이션
- 일관된 버튼 배치
- 상태 변경 시 사용자에게 알림
입력 지원:
- 실시간 오류 검증
- 명확한 오류 메시지
- 수정 제안 제공
- 폼 레이블 명확화

견고성 (Robust)

마크업 유효성:
- 유효한 HTML5
- 중첩 태그 올바르게 닫기
- 고유한 id 속성
스크린 리더 지원:
- ARIA 레이블 (aria-label, aria-labelledby)
- ARIA 역할 (role="button", role="navigation")
- ARIA 상태 (aria-expanded, aria-selected)
- Live Regions (aria-live="polite")
호환성:
- 최신 브라우저 지원
- 보조 기술 테스트 (NVDA, JAWS, VoiceOver)

6.2 모바일 접근성

터치 타겟:
- 최소 크기: 44x44px
- 충분한 간격: 8px 이상
- 제스처 대안: 버튼 제공
화면 회전:
- 세로/가로 모드 모두 지원
- 콘텐츠 자동 조정
확대/축소:
- 핀치 줌 지원
- 최대 200% 확대

7. 성능 최적화 방안

7.1 초기 로딩 최적화

코드 스플리팅:
- 화면별 번들 분리
- 동적 import 활용
- React.lazy, Suspense 사용

const Dashboard = React.lazy(() => import('./Dashboard'));
const MeetingProgress = React.lazy(() => import('./MeetingProgress'));

레이지 로딩:
- 이미지: loading="lazy"
- 컴포넌트: Intersection Observer
- 스크립트: async, defer
프리로딩:
- 핵심 리소스 우선 로드
- <link rel="preload">
- 폰트, CSS 프리로드
압축:
- Gzip/Brotli 압축
- 이미지 최적화 (WebP, AVIF)
- CSS/JS 미니파이
캐싱:
- 서비스 워커 활용 (PWA)
- HTTP 캐시 헤더
- 로컬 스토리지/세션 스토리지

7.2 런타임 성능

가상 스크롤:
- 긴 목록 최적화 (react-window, react-virtualized)
- 뷰포트 내 항목만 렌더링
디바운싱/쓰로틀링:
- 검색 입력: 300ms 디바운싱
- 스크롤 이벤트: 100ms 쓰로틀링
- 리사이즈 이벤트: 200ms 쓰로틀링
메모이제이션:
- React.memo로 컴포넌트 재렌더링 방지
- useMemo, useCallback 훅 활용
- 불필요한 상태 업데이트 최소화
이미지 최적화:
- WebP 포맷 사용
- 반응형 이미지 (srcset, sizes)
- 이미지 CDN 활용
- 썸네일 생성

7.3 네트워크 최적화

API 요청 최소화:
- 배치 요청 (GraphQL)
- 캐싱 전략 (React Query, SWR)
- 중복 요청 방지
웹소켓 최적화:
- 연결 풀 관리
- 델타 동기화 (변경 부분만 전송)
- 재연결 로직 (exponential backoff)
오프라인 지원:
- PWA (Service Worker)
- 로컬 스토리지 활용
- 오프라인 큐 (동기화 대기)
CDN:
- 정적 리소스 CDN 배포
- 이미지, 폰트, JS/CSS

7.4 실시간 협업 최적화

WebSocket 연결:
- 연결 풀 관리
- 재연결 로직
- Heartbeat (연결 유지)
델타 동기화:
- 전체 문서가 아닌 변경 부분만 전송
- Operational Transformation (OT)
- Conflict-free Replicated Data Type (CRDT)
낙관적 UI 업데이트:
- 즉시 UI 업데이트
- 서버 응답 후 조정
- 롤백 로직
충돌 해결 큐:
- 충돌 감지 및 큐잉
- 순차 처리
- 우선순위 관리

7.5 AI 처리 최적화

스트리밍 응답:
- Server-Sent Events (SSE)
- 점진적 표시
- 사용자 피드백 즉시 제공
백그라운드 처리:
- Web Worker 활용
- 메인 스레드 차단 방지
캐싱:
- 이전 요청 결과 캐싱
- 유사한 요청 재활용
타임아웃:
- AI 요청 타임아웃 설정 (30초)
- 실패 시 재시도 또는 수동 모드

7.6 성능 목표

메트릭	목표	측정 도구
FCP (First Contentful Paint)	< 1.5s	Lighthouse
LCP (Largest Contentful Paint)	< 2.5s	Lighthouse
TTI (Time to Interactive)	< 3.5s	Lighthouse
CLS (Cumulative Layout Shift)	< 0.1	Lighthouse
FID (First Input Delay)	< 100ms	Lighthouse

7.7 모니터링 및 측정

Google Lighthouse: 성능 점수 측정
Web Vitals: 핵심 지표 모니터링
Real User Monitoring (RUM): 실제 사용자 데이터 수집
Performance API: 브라우저 성능 데이터

8. 변경 이력

버전	날짜	작성자	변경 내용
1.0	2025-10-20	이미준	초안 작성

부록

A. 용어 정의

Mobile First: 모바일 환경을 우선으로 설계하고, 점진적으로 데스크톱 환경을 확장하는 설계 철학
PWA (Progressive Web App): 웹과 네이티브 앱의 장점을 결합한 웹 애플리케이션
WebSocket: 실시간 양방향 통신을 위한 프로토콜
RAG (Retrieval-Augmented Generation): 검색 기반 생성 AI 기술
WCAG: 웹 콘텐츠 접근성 가이드라인
ARIA: Accessible Rich Internet Applications, 접근성 향상을 위한 HTML 속성

B. 참고 자료

문서 끝

56 KiB Raw Blame History Unescape Escape

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

문서 정보

목차

1. 프로토타입 화면 목록

2. 화면 간 사용자 플로우

2.1 주요 사용자 여정

2.2 플로우 다이어그램

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 네비게이션 전략

4.2 화면 전환 패턴

4.3 제스처 지원 (Mobile)

5. 반응형 설계 전략

5.1 브레이크포인트

5.2 레이아웃 전략

5.3 점진적 향상

56 KiB

Raw Blame History