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

djeon 3156b4cfa0 UI/UX 설계서 추가 및 .gitignore 업데이트

- design-last 팀의 UI/UX 설계서 추가
- .gitignore에 .DS_Store 파일 제외 규칙 추가
- 회의록 서비스의 화면별 상세 설계 포함
  * 로그인, 대시보드, 회의예약, 템플릿선택
  * 회의진행, 검증완료, 회의종료
  * 회의록공유, Todo관리
- 반응형 설계 및 접근성 보장 방안 포함

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

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

2025-10-20 15:23:11 +09:00

58 KiB

Raw Blame History

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

개요

설계 목적

회의록 작성 및 공유 개선 서비스의 사용자 인터페이스를 Mobile First 디자인 철학에 따라 설계하여, 모든 사용자가 직관적이고 효율적으로 회의록을 작성하고 관리할 수 있도록 한다.

설계 원칙

Mobile First: 모바일 환경을 우선 설계하고 점진적으로 확장
유저스토리 기반: 모든 화면은 유저스토리와 1:1 매칭
우선순위 중심: 핵심 기능에 집중, 부가 기능은 분리
접근성 우선: WCAG 2.1 Level AA 준수
성능 최적화: 모바일 제약 고려한 최적화

차별화 포인트 UI 반영

맥락 기반 용어 설명: 전문용어 하이라이트 및 툴팁
강화된 Todo 연결: 회의록 내 Todo 뱃지, 실시간 상태 반영
프롬프팅 기반 회의록 개선: 다양한 형식 변환 UI
관련 회의록 자동 연결: 관련 회의록 카드 섹션

프로토타입 화면 목록

화면 ID	화면명	관련 유저스토리	비즈니스 중요도
01	로그인	AFR-USER-010	높음
02	대시보드	전체 진입점	높음
03	회의예약	UFR-MEET-010	높음
04	템플릿선택	UFR-MEET-020	중간
05	회의진행	UFR-MEET-030, UFR-STT-010/020, UFR-AI-010, UFR-RAG-010/020	매우 높음
06	검증완료	UFR-COLLAB-030	중간
07	회의종료	UFR-MEET-040	중간
08	회의록공유	UFR-MEET-060	높음
09	Todo관리	UFR-TODO-010, UFR-TODO-030	높음

총 9개 화면 설계

화면 간 사용자 플로우

주요 플로우 1: 회의 예약 → 진행 → 공유

로그인 (01)
  → 대시보드 (02)
  → 회의예약 (03)
  → 대시보드 (02, 예약 확인)
  → 회의 시작
  → 템플릿선택 (04)
  → 회의진행 (05)
  → 검증완료 (06)
  → 회의종료 (07)
  → 회의록공유 (08)

주요 플로우 2: 즉시 회의 시작

로그인 (01)
  → 대시보드 (02)
  → 빠른 회의 시작 (FAB 버튼)
  → 템플릿선택 (04)
  → 회의진행 (05)
  → 검증완료 (06)
  → 회의종료 (07)
  → 회의록공유 (08)

주요 플로우 3: Todo 관리

대시보드 (02)
  → Todo관리 (09)
  → Todo 상세 모달
  → 회의록 연결 (클릭)
  → 회의진행 (05, 해당 섹션으로 이동)

주요 플로우 4: 과거 회의록 검토

대시보드 (02)
  → 회의록 목록
  → 회의록 상세 (읽기 전용)
  → 관련 회의록 (클릭)
  → 다른 회의록 상세

화면별 상세 설계

01-로그인

개요

목적: 사용자 인증을 통해 서비스 접근 권한 부여
관련 유저스토리: AFR-USER-010
비즈니스 중요도: 높음 (보안 게이트)

주요 기능

LDAP 인증 (사번, 비밀번호)
세션 관리
자동 로그인 (선택)

UI 구성요소

Mobile (320-767px)

┌─────────────────────────┐
│     서비스 로고         │
│   (회의록 작성 도구)    │
├─────────────────────────┤
│                         │
│  [ 사번 입력 ]         │
│                         │
│  [ 비밀번호 입력 ]     │
│                         │
│  ☐ 자동 로그인         │
│                         │
│  [    로그인 버튼    ]  │
│                         │
│  비밀번호 찾기 | 도움말 │
│                         │
└─────────────────────────┘

구성 요소:

서비스 로고 (상단 중앙)
사번 입력 필드 (placeholder: "사번을 입력하세요")
비밀번호 입력 필드 (placeholder: "비밀번호를 입력하세요", 보기/숨기기 토글)
자동 로그인 체크박스
로그인 버튼 (Primary CTA, 전체 너비)
보조 링크 (비밀번호 찾기, 도움말)

인터랙션

입력 검증
- 사번: 숫자만 입력 가능
- 비밀번호: 필수 입력
- 실시간 유효성 검사 (포커스 아웃 시)
로그인 처리
- 로딩 인디케이터 표시
- 성공 시: 대시보드로 전환 (페이드 인 애니메이션)
- 실패 시: 에러 메시지 표시 (인라인, 빨간색)
접근성
- Tab 키로 포커스 이동
- Enter 키로 로그인 실행
- 에러 메시지 스크린 리더 읽기

데이터 요구사항

입력: 사번 (String), 비밀번호 (String), 자동 로그인 (Boolean)
출력: 인증 토큰, 세션 정보
API: POST /api/auth/login

에러 처리

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

02-대시보드

개요

목적: 서비스의 메인 허브, 예정 회의 및 최근 활동 확인
관련 유저스토리: 전체 서비스 진입점
비즈니스 중요도: 매우 높음 (메인 화면)

주요 기능

예정된 회의 목록 표시
최근 회의록 목록 표시
Todo 현황 요약
빠른 회의 시작 (FAB)
하단 탭 네비게이션

UI 구성요소

Mobile (320-767px)

┌─────────────────────────┐
│ ≡ 회의록 도구      🔔 👤│ ← 상단 앱바
├─────────────────────────┤
│ 📅 오늘의 회의 (2)     │
│                         │
│ ┌─────────────────────┐│
│ │ 14:00 프로젝트 회의││
│ │ 참석자: 5명         ││
│ │ [시작하기]          ││
│ └─────────────────────┘│
│                         │
│ ┌─────────────────────┐│
│ │ 16:00 주간 회의     ││
│ │ 참석자: 3명         ││
│ │ [시작하기]          ││
│ └─────────────────────┘│
│                         │
│ 📝 최근 회의록         │
│ - 2025-01-15 기획회의  │
│ - 2025-01-14 스크럼    │
│                         │
│ ✅ Todo 현황 (5/12)    │
│                         │
│           [+]           │ ← FAB (빠른 시작)
│                         │
├─────────────────────────┤
│ 🏠 홈 📝 회의록 ✅ Todo│ ← 하단 탭
└─────────────────────────┘

구성 요소:

상단 앱바
- 햄버거 메뉴 (왼쪽)
- 서비스 타이틀
- 알림 아이콘 (빨간 뱃지)
- 프로필 아이콘 (오른쪽)
오늘의 회의 섹션
- 섹션 헤더 (제목 + 개수)
- 회의 카드 (최대 3개 표시, 스크롤)
  - 시간, 제목
  - 참석자 수
  - [시작하기] 버튼
최근 회의록 섹션
- 섹션 헤더
- 회의록 목록 (날짜 + 제목, 최대 5개)
- "전체 보기" 링크
Todo 현황 섹션
- 진행 상황 바 (5/12)
- "Todo 관리" 링크
FAB (Floating Action Button)
- 위치: 우측 하단
- 아이콘: + (플러스)
- 색상: Primary color
- 액션: 빠른 회의 시작
하단 탭 네비게이션
- 홈 (선택됨)
- 회의록
- Todo
- 설정

인터랙션

스와이프 제스처
- 회의 카드: 좌우 스와이프로 다음/이전
- 풀 투 리프레시: 아래로 당겨서 새로고침
카드 클릭
- 회의 카드: 회의 상세 또는 시작
- 회의록 카드: 회의록 상세 보기
FAB 클릭
- 템플릿 선택 화면으로 전환
- 확장 애니메이션
탭 전환
- 페이드 인/아웃 애니메이션
- 선택된 탭 강조 (색상, 아이콘)

데이터 요구사항

입력: 사용자 ID, 날짜 범위
출력:
- 예정 회의 목록 (시간, 제목, 참석자)
- 최근 회의록 목록 (날짜, 제목, 상태)
- Todo 통계 (완료/전체)
API:
- GET /api/meetings/upcoming
- GET /api/minutes/recent
- GET /api/todos/summary

에러 처리

데이터 로딩 실패: 스켈레톤 화면 → "데이터를 불러올 수 없습니다" 메시지 + 재시도 버튼
빈 데이터:
- 예정 회의 없음: "예정된 회의가 없습니다" + 회의 예약 버튼
- 최근 회의록 없음: "작성된 회의록이 없습니다"
- Todo 없음: "할당된 Todo가 없습니다"

03-회의예약

개요

목적: 회의를 사전에 예약하고 참석자를 초대
관련 유저스토리: UFR-MEET-010
비즈니스 중요도: 높음

주요 기능

회의 정보 입력 (제목, 날짜/시간, 장소, 참석자)
참석자 초대 이메일 자동 발송
캘린더 연동
리마인더 자동 설정

UI 구성요소

Mobile (320-767px)

┌─────────────────────────┐
│ ← 회의 예약         ✓   │
├─────────────────────────┤
│                         │
│ 회의 제목 *             │
│ [________________]      │
│                         │
│ 날짜 *                  │
│ [2025-01-20    📅]      │
│                         │
│ 시간 *                  │
│ [14:00    🕐]          │
│                         │
│ 장소 (선택)             │
│ [________________]      │
│                         │
│ 참석자 * (최소 1명)     │
│ [이름/이메일 검색]      │
│                         │
│ ┌─────────────────────┐│
│ │ 김민준 ×            ││
│ │ 박서연 ×            ││
│ └─────────────────────┘│
│                         │
│ ☑ 30분 전 리마인더     │
│                         │
│ [      예약하기      ]  │
│                         │
└─────────────────────────┘

구성 요소:

상단 앱바
- 뒤로가기 버튼 (왼쪽)
- 화면 제목 "회의 예약"
- 저장 버튼 (오른쪽, 체크 아이콘)
입력 필드
- 회의 제목 (필수, 최대 100자)
- 날짜 선택 (날짜 피커)
- 시간 선택 (시간 피커)
- 장소 (선택, 최대 200자)
- 참석자 (자동완성 검색)
참석자 목록
- 선택된 참석자 칩 (이름 + 삭제 버튼)
- 최소 1명 필수
옵션
- 리마인더 설정 체크박스
CTA 버튼
- [예약하기] 버튼 (하단 고정)

인터랙션

날짜/시간 선택
- 날짜 필드 클릭: 날짜 피커 모달
- 시간 필드 클릭: 시간 피커 모달
- 과거 날짜 선택 불가
참석자 추가
- 검색 필드: 실시간 자동완성
- 선택: 칩 형태로 추가
- 삭제: × 버튼 클릭
유효성 검사
- 필수 필드 미입력 시: 에러 메시지 (빨간색)
- 참석자 0명 시: "최소 1명의 참석자가 필요합니다"
예약 처리
- 로딩 인디케이터
- 성공 시: 성공 메시지 → 대시보드로 이동
- 실패 시: 에러 메시지 표시

데이터 요구사항

입력:
- 제목 (String, 최대 100자)
- 날짜 (Date)
- 시간 (Time)
- 장소 (String, 최대 200자, 선택)
- 참석자 목록 (Array of Email)
- 리마인더 (Boolean)
출력:
- 회의 ID
- 예약 상태
- 초대 발송 결과
API: POST /api/meetings

에러 처리

필수 필드 누락: "필수 항목을 입력해주세요"
과거 날짜 선택: "과거 날짜는 선택할 수 없습니다"
참석자 검색 실패: "사용자를 찾을 수 없습니다"
예약 실패: "회의 예약에 실패했습니다. 다시 시도해주세요"
이메일 발송 실패: "초대 이메일 발송에 실패했습니다" (경고, 예약은 완료)

04-템플릿선택

개요

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

주요 기능

템플릿 선택 (일반, 스크럼, 킥오프, 주간)
템플릿 미리보기
섹션 추가/삭제
섹션 순서 변경

UI 구성요소

Mobile (320-767px)

┌─────────────────────────┐
│ ← 템플릿 선택           │
├─────────────────────────┤
│                         │
│ 회의록 템플릿을         │
│ 선택하세요              │
│                         │
│ ┌─────────────────────┐│
│ │ 📝 일반 회의        ││
│ │ 기본 구조           ││
│ │ (추천)              ││
│ └─────────────────────┘│
│                         │
│ ┌─────────────────────┐│
│ │ 🏃 스크럼 회의      ││
│ │ 어제/오늘/이슈      ││
│ └─────────────────────┘│
│                         │
│ ┌─────────────────────┐│
│ │ 🚀 프로젝트 킥오프  ││
│ │ 목표/일정/역할      ││
│ └─────────────────────┘│
│                         │
│ ┌─────────────────────┐│
│ │ 📊 주간 회의        ││
│ │ 실적/이슈/계획      ││
│ └─────────────────────┘│
│                         │
└─────────────────────────┘

구성 요소:

상단 앱바
- 뒤로가기 버튼
- 화면 제목 "템플릿 선택"
안내 문구
- "회의록 템플릿을 선택하세요"
템플릿 카드 (4개)
- 아이콘
- 템플릿 이름
- 간단한 설명
- (추천) 배지 (일반 회의)
선택 시 확장
- 템플릿 미리보기
- 섹션 목록
- 커스터마이징 버튼
- [이 템플릿 사용] 버튼

인터랙션

템플릿 선택
- 카드 클릭: 확장 (아코디언)
- 미리보기 표시
커스터마이징 (선택)
- "커스터마이징" 버튼 클릭
- 모달 또는 새 화면으로 전환
- 섹션 드래그 앤 드롭으로 순서 변경
- 섹션 추가/삭제
템플릿 적용
- [이 템플릿 사용] 버튼 클릭
- 회의 진행 화면으로 전환
- 슬라이드 애니메이션

데이터 요구사항

입력: 없음 (템플릿 목록은 하드코딩 또는 서버에서 로드)
출력:
- 선택된 템플릿 ID
- 섹션 구조 (JSON)
API:
- GET /api/templates (템플릿 목록)
- POST /api/meetings/{id}/template (템플릿 적용)

에러 처리

템플릿 로드 실패: "템플릿을 불러올 수 없습니다" + 재시도 버튼
템플릿 적용 실패: "템플릿 적용에 실패했습니다. 다시 시도해주세요"

05-회의진행

개요

목적: 회의 중 실시간 녹음, 텍스트 변환, AI 회의록 자동 작성
관련 유저스토리: UFR-MEET-030, UFR-STT-010/020, UFR-AI-010, UFR-RAG-010/020, UFR-COLLAB-010
비즈니스 중요도: 매우 높음 (핵심 화면)

주요 기능

음성 녹음 시작/일시정지/종료
실시간 텍스트 변환
AI 회의록 자동 작성
전문용어 하이라이트 및 툴팁 (차별화 포인트)
실시간 동기화 (다른 참석자와)
수동 편집

UI 구성요소

Mobile (320-767px)

┌─────────────────────────┐
│ ← 회의 진행    00:15:32 │ ← 타이머
├─────────────────────────┤
│ 🎙️ 녹음 중...          │ ← 상태
│ ⏸️ ⏹️                   │ ← 컨트롤
├─────────────────────────┤
│ 📝 회의록               │
│                         │
│ ## 참석자               │
│ - 김민준, 박서연, ...   │
│                         │
│ ## 논의 내용            │
│                         │
│ [14:05] 김민준:         │
│ 프로젝트 일정을 검토... │
│                         │
│ [14:07] 박서연:         │
│ RAG 시스템 구현...      │
│ (RAG는 밑줄, 클릭 가능) │
│                         │
│ ## 결정 사항            │
│ - 다음 주까지 완료      │
│                         │
│ ## Todo                 │
│ 🔵 (2) 할당됨           │
│                         │
│         [종료]          │
│                         │
└─────────────────────────┘

구성 요소:

상단 앱바
- 뒤로가기 버튼
- 화면 제목 "회의 진행"
- 경과 시간 타이머 (HH:MM:SS)
녹음 상태 영역
- 녹음 상태 아이콘 (🎙️)
- 상태 텍스트 ("녹음 중", "일시정지", "중지됨")
- 컨트롤 버튼 (일시정지, 종료)
회의록 영역 (스크롤 가능)
- 섹션별 구조 (템플릿 기반)
- 실시간 텍스트 추가 (발언 시)
- 타임스탬프 + 화자 + 내용
- 전문용어 하이라이트 (점선 밑줄, 차별화 포인트)
전문용어 툴팁 (차별화 포인트)
- 터치 시 표시
- 간단한 정의
- "더보기" 버튼 → 상세 패널
Todo 뱃지 (차별화 포인트)
- 섹션별 Todo 개수 표시
- 클릭 시 Todo 목록 모달
하단 버튼
- [회의 종료] 버튼 (Primary)

인터랙션

녹음 컨트롤
- ⏸️ (일시정지): 녹음 일시정지, 재개 버튼 표시
- ⏹️ (종료): 확인 다이얼로그 → 회의 종료
실시간 업데이트
- 발언 인식: 자동으로 텍스트 추가
- 스크롤 자동 이동 (최신 발언으로)
- 다른 참석자 수정: 하이라이트 (3초간)
전문용어 인터랙션 (차별화 포인트)
- 터치: 툴팁 표시 (간단한 정의)
- 툴팁 내 "더보기": 상세 패널 슬라이드 인
- 상세 패널: 맥락 설명, 관련 회의록 링크
수동 편집
- 텍스트 영역 더블 탭: 편집 모드
- 키보드 표시, 편집 완료 버튼
- 수정 사항 실시간 동기화
Todo 뱃지 클릭
- Todo 목록 모달 표시
- Todo 상세 정보, 완료 처리 가능

데이터 요구사항

입력:
- 회의 ID
- 음성 스트림
- 사용자 수정 사항
출력:
- 실시간 텍스트
- AI 회의록 초안
- 전문용어 목록
- Todo 목록
API:
- WebSocket /ws/meetings/{id} (실시간 동기화)
- POST /api/stt/convert (음성-텍스트 변환)
- GET /api/rag/terms (전문용어 설명)

에러 처리

녹음 실패: "마이크 권한을 확인해주세요"
텍스트 변환 실패: "음성 인식에 실패했습니다. 수동으로 입력해주세요"
전문용어 설명 실패: "용어 설명을 불러올 수 없습니다" (툴팁 표시 안 함)
동기화 실패: "연결이 끊겼습니다. 재연결 중..." (재연결 시도)

06-검증완료

개요

목적: 참석자가 회의록 섹션을 검증하고 완료 표시
관련 유저스토리: UFR-COLLAB-030
비즈니스 중요도: 중간

주요 기능

섹션별 검증 상태 표시
검증 완료 표시
검증자 정보 표시
검증 완료 알림 발송

UI 구성요소

Mobile (320-767px)

┌─────────────────────────┐
│ ← 회의록 검증           │
├─────────────────────────┤
│                         │
│ 📝 프로젝트 회의        │
│ 2025-01-20 14:00        │
│                         │
│ 검증 진행률: 60% (3/5)  │
│ [███████░░░░]           │
│                         │
│ ┌─────────────────────┐│
│ │ ✅ 참석자           ││
│ │ 검증: 김민준        ││
│ │ 14:35               ││
│ └─────────────────────┘│
│                         │
│ ┌─────────────────────┐│
│ │ ✅ 논의 내용        ││
│ │ 검증: 박서연        ││
│ │ 14:40               ││
│ └─────────────────────┘│
│                         │
│ ┌─────────────────────┐│
│ │ ✅ 결정 사항        ││
│ │ 검증: 김민준        ││
│ │ 14:42               ││
│ └─────────────────────┘│
│                         │
│ ┌─────────────────────┐│
│ │ ⏳ Todo             ││
│ │ [검증 완료]         ││
│ └─────────────────────┘│
│                         │
│ ┌─────────────────────┐│
│ │ ⏳ 다음 액션        ││
│ │ [검증 완료]         ││
│ └─────────────────────┘│
│                         │
└─────────────────────────┘

구성 요소:

상단 앱바
- 뒤로가기 버튼
- 화면 제목 "회의록 검증"
회의 정보
- 회의 제목
- 날짜/시간
검증 진행률
- 퍼센트 표시
- 프로그레스 바
섹션 카드 (템플릿 구조에 따라)
- 상태 아이콘 (✅ 완료, ⏳ 대기)
- 섹션 이름
- 검증자 정보 (완료 시)
- 검증 시간 (완료 시)
- [검증 완료] 버튼 (대기 시)
섹션 잠금 표시 (선택)
- 잠금 아이콘 (🔒)
- "잠김 - 수정 불가" 텍스트

인터랙션

섹션 클릭
- 섹션 내용 확장/축소 (아코디언)
- 내용 미리보기
검증 완료 처리
- [검증 완료] 버튼 클릭
- 확인 다이얼로그: "이 섹션을 검증 완료하시겠습니까?"
- 완료 시:
  - 상태 아이콘 변경 (⏳ → ✅)
  - 검증자 정보 표시
  - 진행률 업데이트
  - 다른 참석자에게 실시간 동기화
전체 완료
- 모든 섹션 검증 완료 시: 성공 메시지
- "회의록 공유" 버튼 표시
섹션 잠금 (회의 생성자만)
- 롱프레스: 잠금 옵션 표시
- 잠금 시: 다른 참석자 수정 불가

데이터 요구사항

입력:
- 회의 ID
- 섹션 ID
- 검증자 ID
출력:
- 검증 상태
- 검증자 정보
- 검증 시간
API:
- GET /api/meetings/{id}/verification (검증 상태 조회)
- POST /api/meetings/{id}/sections/{sectionId}/verify (검증 완료)
- POST /api/meetings/{id}/sections/{sectionId}/lock (섹션 잠금)

에러 처리

검증 권한 없음: "검증 권한이 없습니다"
검증 실패: "검증 처리에 실패했습니다. 다시 시도해주세요"
동기화 실패: "검증 상태 동기화에 실패했습니다"

07-회의종료

개요

목적: 회의 종료 및 회의 통계 확인
관련 유저스토리: UFR-MEET-040
비즈니스 중요도: 중간

주요 기능

회의 통계 표시 (총 시간, 참석자 수, 발언 횟수)
주요 키워드 표시
최종 회의록 확정 전 검토

UI 구성요소

Mobile (320-767px)

┌─────────────────────────┐
│ ✓ 회의 종료             │
├─────────────────────────┤
│                         │
│ 🎉 회의가 종료되었습니다│
│                         │
│ ┌─────────────────────┐│
│ │ 📊 회의 통계        ││
│ │                     ││
│ │ ⏱️ 총 시간: 45분    ││
│ │ 👥 참석자: 5명      ││
│ │ 💬 발언 횟수: 28회  ││
│ │                     ││
│ └─────────────────────┘│
│                         │
│ ┌─────────────────────┐│
│ │ 🔑 주요 키워드      ││
│ │                     ││
│ │ #프로젝트일정       ││
│ │ #RAG시스템          ││
│ │ #성능최적화         ││
│ │                     ││
│ └─────────────────────┘│
│                         │
│ ┌─────────────────────┐│
│ │ 📝 발언자별 기여도  ││
│ │                     ││
│ │ 김민준: ████░ 40%   ││
│ │ 박서연: ███░░ 30%   ││
│ │ 이준호: ██░░░ 20%   ││
│ │ 기타:   █░░░░ 10%   ││
│ │                     ││
│ └─────────────────────┘│
│                         │
│ [   회의록 최종 확정   ]│
│                         │
└─────────────────────────┘

구성 요소:

상단 앱바
- 체크 아이콘 (완료)
- 화면 제목 "회의 종료"
완료 메시지
- "🎉 회의가 종료되었습니다"
회의 통계 카드
- 총 시간 (HH:MM 형식)
- 참석자 수
- 발언 횟수
주요 키워드 카드
- 키워드 태그 (최대 5개)
- 해시태그 형식
발언자별 기여도 카드
- 발언자 이름
- 발언 비율 (프로그레스 바)
- 퍼센트 표시
CTA 버튼
- [회의록 최종 확정] 버튼 (Primary)

인터랙션

통계 확인
- 자동 계산 및 표시
- 애니메이션 (숫자 카운트업)
키워드 클릭
- 회의록에서 해당 키워드 위치로 이동
최종 확정
- [회의록 최종 확정] 버튼 클릭
- 필수 항목 검사 (UFR-MEET-050)
- 성공 시: 회의록 공유 화면으로 전환
- 실패 시: 누락 항목 안내

데이터 요구사항

입력: 회의 ID
출력:
- 회의 통계 (총 시간, 참석자 수, 발언 횟수)
- 주요 키워드 (상위 5개)
- 발언자별 기여도 (비율)
API:
- GET /api/meetings/{id}/statistics
- POST /api/meetings/{id}/finalize (최종 확정)

에러 처리

통계 로드 실패: "통계를 불러올 수 없습니다" (통계 섹션 숨김)
필수 항목 누락: "필수 항목이 누락되었습니다" + 누락 항목 목록 + 해당 섹션으로 이동 버튼
최종 확정 실패: "회의록 확정에 실패했습니다. 다시 시도해주세요"

08-회의록공유

개요

목적: 최종 회의록을 참석자 및 관련자와 공유
관련 유저스토리: UFR-MEET-060
비즈니스 중요도: 높음

주요 기능

공유 대상 설정 (참석자 전체/특정 참석자)
공유 권한 설정 (읽기 전용/댓글/편집)
공유 링크 생성
이메일 알림 발송
다음 회의 일정 자동 등록 (언급 시)

UI 구성요소

Mobile (320-767px)

┌─────────────────────────┐
│ ← 회의록 공유           │
├─────────────────────────┤
│                         │
│ 📝 프로젝트 회의        │
│ 2025-01-20 14:00        │
│                         │
│ 공유 대상               │
│ ⦿ 참석자 전체 (5명)    │
│ ○ 특정 참석자 선택      │
│                         │
│ 공유 권한               │
│ [읽기 전용  ▼]         │
│                         │
│ 공유 방식               │
│ ☑ 이메일 발송          │
│ ☑ 링크 복사            │
│                         │
│ 고급 옵션 ▼             │
│ ☐ 링크 유효기간 설정    │
│ ☐ 비밀번호 설정        │
│                         │
│ ┌─────────────────────┐│
│ │ 📅 다음 회의 감지   ││
│ │                     ││
│ │ "다음 주 월요일     ││
│ │  후속 회의" 언급됨  ││
│ │                     ││
│ │ [캘린더에 등록]     ││
│ └─────────────────────┘│
│                         │
│ [      공유하기      ]  │
│                         │
└─────────────────────────┘

구성 요소:

상단 앱바
- 뒤로가기 버튼
- 화면 제목 "회의록 공유"
회의 정보
- 회의 제목
- 날짜/시간
공유 대상 선택
- 라디오 버튼
  - 참석자 전체 (기본)
  - 특정 참석자 선택
공유 권한 선택
- 드롭다운
  - 읽기 전용 (기본)
  - 댓글 가능
  - 편집 가능
공유 방식 선택
- 체크박스
  - 이메일 발송 (기본 체크)
  - 링크 복사
고급 옵션 (확장 가능)
- 링크 유효기간 설정
- 비밀번호 설정
다음 회의 감지 (UFR-MEET-060)
- 회의록에서 다음 회의 언급 감지
- 자동 제안
- [캘린더에 등록] 버튼
CTA 버튼
- [공유하기] 버튼 (Primary)

인터랙션

공유 대상 선택
- "특정 참석자 선택" 선택 시: 참석자 목록 표시
- 체크박스로 선택
공유 권한 선택
- 드롭다운 클릭: 옵션 목록 표시
고급 옵션 확장
- "고급 옵션 ▼" 클릭: 추가 옵션 표시
- 유효기간: 날짜 피커
- 비밀번호: 입력 필드
다음 회의 등록
- [캘린더에 등록] 클릭
- 회의 정보 미리 입력된 회의 예약 화면으로 이동
공유 처리
- [공유하기] 버튼 클릭
- 로딩 인디케이터
- 성공 시:
  - 공유 링크 생성
  - 이메일 발송 (선택 시)
  - 링크 클립보드 복사 (선택 시)
  - 성공 메시지 + 링크 표시
- 실패 시: 에러 메시지

데이터 요구사항

입력:
- 회의 ID
- 공유 대상 (Array of User ID)
- 공유 권한 (Enum: READ, COMMENT, EDIT)
- 공유 방식 (Boolean: email, link)
- 유효기간 (Date, 선택)
- 비밀번호 (String, 선택)
출력:
- 공유 링크 URL
- 이메일 발송 결과
- 다음 회의 정보 (감지 시)
API:
- POST /api/meetings/{id}/share
- GET /api/meetings/{id}/next-meeting-suggestion

에러 처리

공유 링크 생성 실패: "공유 링크 생성에 실패했습니다"
이메일 발송 실패: "일부 이메일 발송에 실패했습니다" (경고, 링크는 생성됨)
다음 회의 감지 실패: (무시, 섹션 표시 안 함)

09-Todo관리

개요

목적: AI가 추출한 Todo 관리 및 회의록 연결 확인
관련 유저스토리: UFR-TODO-010, UFR-TODO-030
비즈니스 중요도: 높음

주요 기능

Todo 목록 표시 (진행 중/완료)
Todo 상세 정보 확인
Todo 완료 처리
회의록 연결 확인 (차별화 포인트)

UI 구성요소

Mobile (320-767px)

┌─────────────────────────┐
│ ← Todo 관리        + │
├─────────────────────────┤
│ 진행 중 (5) | 완료 (12) │ ← 탭
├─────────────────────────┤
│                         │
│ ┌─────────────────────┐│
│ │ ☐ RAG 시스템 구현   ││
│ │ 담당: 박서연        ││
│ │ 마감: 2025-01-27    ││
│ │ 📝 프로젝트 회의    ││
│ │ [완료]              ││
│ └─────────────────────┘│
│                         │
│ ┌─────────────────────┐│
│ │ ☐ 성능 테스트       ││
│ │ 담당: 이준호        ││
│ │ 마감: 2025-01-25 ⚠️ ││
│ │ 📝 주간 회의        ││
│ │ [완료]              ││
│ └─────────────────────┘│
│                         │
│ ┌─────────────────────┐│
│ │ ☐ 문서 작성         ││
│ │ 담당: 김민준        ││
│ │ 마감: 2025-01-30    ││
│ │ 📝 기획 회의        ││
│ │ [완료]              ││
│ └─────────────────────┘│
│                         │
└─────────────────────────┘

구성 요소:

상단 앱바
- 뒤로가기 버튼
- 화면 제목 "Todo 관리"
- 추가 버튼 (+)
탭
- 진행 중 (개수)
- 완료 (개수)
Todo 카드
- 체크박스 (완료 처리)
- Todo 내용
- 담당자
- 마감일 (마감 임박 시 ⚠️ 아이콘)
- 관련 회의록 링크 (아이콘 + 제목)
- [완료] 버튼
빈 상태
- "할당된 Todo가 없습니다" 메시지

인터랙션

탭 전환
- "진행 중" / "완료" 탭 클릭
- 스와이프로 전환 가능
Todo 카드 클릭
- Todo 상세 모달 표시
- 상세 정보:
  - 전체 내용
  - 담당자, 마감일, 우선순위
  - 관련 회의록 원문 위치 (하이라이트)
  - 완료 시간 (완료 시)
회의록 연결 클릭 (차별화 포인트)
- 회의록 상세 화면으로 이동
- 해당 섹션으로 스크롤
- Todo 관련 부분 하이라이트 (3초간)
완료 처리
- [완료] 버튼 클릭
- 확인 다이얼로그: "완료 처리하시겠습니까?"
- 완료 시:
  - 체크 아이콘 애니메이션
  - 완료 탭으로 이동 (슬라이드 애니메이션)
  - 회의록에 완료 상태 실시간 반영 (UFR-TODO-030)
  - 완료 알림 발송
Todo 추가 (+버튼)
- Todo 추가 화면으로 이동
- 내용, 담당자, 마감일 입력
- 수동 추가

데이터 요구사항

입력:
- 사용자 ID
- 상태 필터 (진행 중/완료)
출력:
- Todo 목록
- 각 Todo별 정보 (ID, 내용, 담당자, 마감일, 우선순위, 관련 회의록 링크)
API:
- GET /api/todos?status={status}
- PUT /api/todos/{id}/complete (완료 처리)
- POST /api/todos (Todo 추가)

에러 처리

Todo 로드 실패: "Todo 목록을 불러올 수 없습니다" + 재시도 버튼
완료 처리 실패: "완료 처리에 실패했습니다. 다시 시도해주세요"
회의록 연결 실패: "회의록을 불러올 수 없습니다"

화면 간 전환 및 네비게이션

네비게이션 구조

하단 탭 네비게이션 (Mobile First)

┌─────────────────────────────────┐
│  🏠 홈  |  📝 회의록  |  ✅ Todo  │
│  (선택)      (미선택)    (미선택) │
└─────────────────────────────────┘

탭 구성:

홈 (대시보드): 메인 화면, 예정 회의, 최근 활동
회의록: 과거 회의록 목록 및 검색
Todo: Todo 관리 화면

탭 전환 애니메이션:

페이드 인/아웃 (300ms)
선택된 탭: Primary color, 아이콘 + 텍스트
미선택 탭: Gray color, 아이콘만

화면 전환 패턴

1. Push (앞으로 이동)

애니메이션: 슬라이드 인 (우측에서 좌측)
예시: 대시보드 → 회의 예약

2. Pop (뒤로 이동)

애니메이션: 슬라이드 아웃 (좌측에서 우측)
예시: 회의 예약 → 대시보드 (뒤로가기)

3. Modal (모달 표시)

애니메이션: 바텀 시트 슬라이드 업
예시: Todo 상세, 전문용어 설명 상세

4. Replace (화면 교체)

애니메이션: 페이드 인/아웃
예시: 로그인 → 대시보드

상황별 네비게이션 흐름

회의 진행 플로우

대시보드 (02)
  → [회의 시작] 버튼
  → 템플릿 선택 (04) [Push]
  → [템플릿 사용] 버튼
  → 회의 진행 (05) [Push]
  → [종료] 버튼
  → 회의 종료 (07) [Push]
  → [최종 확정] 버튼
  → 회의록 공유 (08) [Push]
  → [공유하기] 버튼
  → 대시보드 (02) [Replace]

검증 플로우

회의 진행 (05)
  → [검증] 버튼 (상단 메뉴)
  → 검증 완료 (06) [Modal]
  → [섹션 검증] 버튼
  → 검증 상태 업데이트
  → [닫기]
  → 회의 진행 (05) [Modal 닫기]

Todo 관리 플로우

대시보드 (02)
  → Todo 탭 (하단 네비게이션)
  → Todo 관리 (09) [Tab 전환]
  → [Todo 카드] 클릭
  → Todo 상세 (Modal)
  → [회의록 연결] 클릭
  → 회의 진행 (05, 해당 섹션) [Push]

네비게이션 백스택 관리

백스택 규칙:

탭 전환: 백스택에 추가하지 않음
Push: 백스택에 추가
Modal: 별도 스택 관리
Replace: 이전 화면 백스택에서 제거

뒤로가기 동작:

하드웨어 뒤로가기 (Android): 백스택 Pop
상단 뒤로가기 버튼: 백스택 Pop
Modal 열림 상태: Modal 닫기
백스택 비어 있음: 앱 종료 확인 다이얼로그

반응형 설계 전략

브레이크포인트 정의

Mobile:  320px - 767px   (우선 설계)
Tablet:  768px - 1023px  (점진적 향상)
Desktop: 1024px+         (점진적 향상)

Mobile First 설계 원칙

1. 우선순위 중심 설계

핵심 기능만 표시: 각 화면당 1-2개 주요 기능
부가 기능 분리: 메뉴, 탭, 모달로 분리
세로 스크롤 최적화: 무한 스크롤, 풀 투 리프레시

2. 터치 최적화

최소 터치 영역: 44x44px (Apple HIG)
여백 충분히: 버튼 간 최소 8px
제스처 지원: 스와이프, 롱프레스, 풀 투 리프레시

3. 성능 최적화

이미지 최적화: WebP, 압축, Lazy Loading
코드 스플리팅: 화면별 번들 분리
캐싱: Service Worker, IndexedDB

화면별 반응형 전략

대시보드 (02)

Mobile (320-767px)

세로 스크롤
카드 1열 배치
하단 탭 네비게이션

Tablet (768-1023px)

카드 2열 배치
사이드 패널 추가 (Todo 요약)
하단 탭 유지

Desktop (1024px+)

3단 레이아웃
- 좌측: 네비게이션 사이드바
- 중앙: 메인 콘텐츠 (카드 2-3열)
- 우측: Todo + 알림
하단 탭 → 좌측 사이드바로 변경

회의 진행 (05)

Mobile (320-767px)

전체 화면
녹음 컨트롤 상단 고정
회의록 스크롤
전문용어 툴팁 (터치)

Tablet (768-1023px)

2단 레이아웃
- 좌측: 회의록 (60%)
- 우측: 참석자 목록, Todo, 메모
전문용어 툴팁 → 사이드 패널

Desktop (1024px+)

3단 레이아웃
- 좌측: 회의록 (50%)
- 중앙: 실시간 텍스트 (30%)
- 우측: 참석자, Todo, 메모 (20%)
전문용어 툴팁 → 인라인 패널

Todo 관리 (09)

Mobile (320-767px)

전체 화면
카드 1열 배치
탭으로 진행 중/완료 구분

Tablet (768-1023px)

카드 2열 배치
탭 유지

Desktop (1024px+)

테이블 뷰
필터, 정렬 옵션 추가
진행 중/완료 분할 화면 (50:50)

반응형 컴포넌트

버튼

/* Mobile */
button {
  width: 100%;
  min-height: 44px;
}

/* Tablet+ */
@media (min-width: 768px) {
  button {
    width: auto;
    min-width: 120px;
  }
}

카드

/* Mobile */
.card {
  width: 100%;
  margin-bottom: 12px;
}

/* Tablet */
@media (min-width: 768px) {
  .card {
    width: calc(50% - 8px);
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .card {
    width: calc(33.33% - 12px);
  }
}

접근성 보장 방안

WCAG 2.1 Level AA 준수

1. 인식 가능 (Perceivable)

1.1 시각적 접근성

색상 대비
- 텍스트: 최소 4.5:1 (일반), 3:1 (대형 텍스트)
- UI 컴포넌트: 최소 3:1
- 검증 도구: Axe, WAVE
대체 텍스트
- 모든 이미지, 아이콘에 alt 속성
- 장식 이미지: alt="" (빈 문자열)
- 의미 있는 이미지: 구체적 설명
색상 외 구분
- 에러: 빨간색 + 아이콘 (⚠️)
- 성공: 녹색 + 체크 아이콘 (✓)
- 필수 필드: * (별표) + 레이블

1.2 청각적 접근성

자막 제공
- 음성 녹음: 실시간 텍스트 변환 (STT)
- 회의록: 타임스탬프 + 화자 + 내용
시각적 피드백 병행
- 알림: 소리 + 화면 알림
- 에러: 소리 + 에러 메시지

2. 운용 가능 (Operable)

2.1 키보드 접근성

모든 기능 키보드 조작 가능
- Tab: 포커스 이동
- Enter/Space: 버튼 클릭
- Esc: 모달 닫기
- Arrow keys: 목록 탐색
포커스 순서
- 논리적 순서: 좌→우, 상→하
- Tab Index 사용 최소화 (DOM 순서 활용)
포커스 표시
- 명확한 아웃라인 (2px solid, Primary color)
- :focus-visible 활용 (키보드만 표시)

2.2 충분한 시간

자동 로그아웃
- 경고: 5분 전 알림
- 연장 옵션: [세션 연장] 버튼
회의 시작 시간
- 유연한 시작: 예정 시간 전후 30분

2.3 발작 예방

깜박임 제한
- 초당 3회 미만
- 애니메이션 감소 모드 지원

3. 이해 가능 (Understandable)

3.1 명확한 레이블

모든 입력 필드
- <label> 요소 사용
- placeholder는 보조 정보만
에러 메시지
- 구체적 안내: "비밀번호는 8자 이상이어야 합니다"
- 해결 방법 제시: "다시 입력해주세요"

3.2 일관된 네비게이션

위치 표시
- Breadcrumb (Desktop)
- 화면 제목 (Mobile)
예측 가능한 동작
- 링크: 페이지 이동
- 버튼: 액션 실행
- 일관된 아이콘 사용

4. 견고성 (Robust)

4.1 시맨틱 HTML

<!-- 올바른 예시 -->
<nav>
  <ul>
    <li><a href="/">홈</a></li>
  </ul>
</nav>

<main>
  <article>
    <h1>회의록</h1>
  </article>
</main>

4.2 ARIA 속성

<!-- 버튼 -->
<button aria-label="회의 시작">
  <icon name="play" />
</button>

<!-- 상태 -->
<div role="alert" aria-live="polite">
  회의가 종료되었습니다
</div>

<!-- 탭 -->
<div role="tablist">
  <button role="tab" aria-selected="true">진행 중</button>
  <button role="tab" aria-selected="false">완료</button>
</div>

4.3 스크린 리더 테스트

NVDA (Windows): 정기 테스트
VoiceOver (iOS/Mac): 정기 테스트
TalkBack (Android): 정기 테스트

추가 접근성 기능

다크 모드

색상 반전: 배경 어둡게, 텍스트 밝게
대비 유지: 4.5:1 이상
자동 전환: 시스템 설정 따름

폰트 크기 조절

단계별 조절: 작게, 보통, 크게, 매우 크게
설정 저장: 사용자 설정 유지
레이아웃 유지: 폰트 크기 변경 시 레이아웃 깨지지 않음

음성 명령 (선택)

지원 명령: "회의 시작", "회의 종료", "Todo 열기"
Web Speech API 활용

성능 최적화 방안

Mobile 제약 고려

1. 네트워크 최적화

느린 네트워크 (3G/4G)
- 데이터 압축: Gzip, Brotli
- 이미지 최적화: WebP, AVIF
- API 페이로드 최소화: GraphQL 또는 필드 선택

2. 처리 능력 제한

저사양 기기 고려
- 무거운 계산 최소화
- Web Worker 활용 (백그라운드 처리)
- Virtual Scrolling (대량 목록)

3. 배터리 소모

최적화
- 불필요한 렌더링 방지 (React.memo, useMemo)
- 애니메이션 최소화
- WebSocket 연결 최적화 (Heartbeat 간격 조정)

구체적 최적화 전략

코드 스플리팅

// 화면별 Lazy Loading
const Dashboard = lazy(() => import('./screens/Dashboard'));
const MeetingProgress = lazy(() => import('./screens/MeetingProgress'));
const TodoManagement = lazy(() => import('./screens/TodoManagement'));

이미지 최적화

포맷
- WebP (우선)
- JPEG (폴백)
- 반응형 이미지: <picture>, srcset
크기
- Mobile: 최대 800px 너비
- Tablet: 최대 1200px 너비
- Desktop: 최대 1920px 너비

Lazy Loading

<img src="placeholder.jpg"
     data-src="image.webp"
     loading="lazy"
     alt="회의록" />

캐싱 전략

1. Service Worker

// 정적 리소스 캐싱
workbox.precaching.precacheAndRoute([
  { url: '/index.html', revision: 'v1' },
  { url: '/app.js', revision: 'v1' },
  { url: '/styles.css', revision: 'v1' }
]);

// API 캐싱 (Stale-While-Revalidate)
workbox.routing.registerRoute(
  /^https:\/\/api\.example\.com\/meetings/,
  new workbox.strategies.StaleWhileRevalidate({
    cacheName: 'api-cache',
    plugins: [
      new workbox.expiration.ExpirationPlugin({
        maxEntries: 50,
        maxAgeSeconds: 5 * 60 // 5분
      })
    ]
  })
);

2. IndexedDB

용도: 회의록 초안 저장, 오프라인 지원
라이브러리: Dexie.js
전략
- 회의록: 로컬 저장 → 서버 동기화
- Todo: 낙관적 업데이트 (Optimistic Update)

WebSocket 최적화

1. 델타 전송 (차이만 전송)

// 전체 내용 전송 (X)
{
  type: 'UPDATE',
  content: '전체 회의록 내용...'
}

// 변경 부분만 전송 (O)
{
  type: 'UPDATE',
  delta: {
    position: 150,
    delete: 5,
    insert: '수정된 텍스트'
  }
}

2. 연결 관리

재연결 전략: Exponential Backoff (1s, 2s, 4s, 8s, ...)
Heartbeat: 30초 간격
연결 품질 모니터링: Ping/Pong

Virtual Scrolling

대량 목록 최적화 (회의록 목록, Todo 목록)
라이브러리: react-window, react-virtualized
효과: 1000개 항목 → 10개만 렌더링

성능 모니터링

1. Core Web Vitals

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

2. 모니터링 도구

Lighthouse: 정기 감사
Chrome DevTools: 개발 중 모니터링
Web Vitals 라이브러리: 실사용자 데이터 수집

3. 성능 예산

JavaScript: 최대 300KB (Gzip)
CSS: 최대 50KB (Gzip)
이미지: 화면당 최대 1MB
초기 로딩: 3G에서 5초 이내

변경 이력

버전	날짜	변경 내용	작성자
1.0	2025-01-20	초기 UI/UX 설계서 작성	이미준

부록

디자인 시스템

색상 팔레트

Light Mode (기본)

Primary:   #1976D2 (파란색)
Secondary: #FFC107 (노란색)
Success:   #4CAF50 (녹색)
Warning:   #FF9800 (주황색)
Error:     #F44336 (빨간색)
Gray:      #757575 (중간 회색)

Background: #FFFFFF (흰색)
Surface:    #F5F5F5 (연한 회색)
Text:       #212121 (검은색)

Dark Mode

Primary:   #64B5F6 (밝은 파란색)
Secondary: #FFD54F (밝은 노란색)
Success:   #81C784 (밝은 녹색)
Warning:   #FFB74D (밝은 주황색)
Error:     #E57373 (밝은 빨간색)
Gray:      #BDBDBD (밝은 회색)

Background: #121212 (어두운 검은색)
Surface:    #1E1E1E (어두운 회색)
Text:       #FFFFFF (흰색)

타이포그래피

Heading 1: 24px, Bold, Line Height 32px
Heading 2: 20px, Bold, Line Height 28px
Heading 3: 18px, Bold, Line Height 24px
Body:      16px, Regular, Line Height 24px
Caption:   14px, Regular, Line Height 20px
Label:     12px, Regular, Line Height 16px

간격

xs: 4px
sm: 8px
md: 16px
lg: 24px
xl: 32px
xxl: 48px

애니메이션 스펙

Duration (지속 시간)

instant: 100ms   - 즉각적 피드백
fast:    200ms   - 빠른 전환
normal:  300ms   - 기본 전환
slow:    500ms   - 강조 전환

Easing (이징 함수)

standard:     cubic-bezier(0.4, 0.0, 0.2, 1)  - 기본
decelerate:   cubic-bezier(0.0, 0.0, 0.2, 1)  - 감속
accelerate:   cubic-bezier(0.4, 0.0, 1, 1)    - 가속
sharp:        cubic-bezier(0.4, 0.0, 0.6, 1)  - 날카로운

애니메이션 적용 예시

/* 화면 전환 (Push) */
.screen-push-enter {
  transform: translateX(100%);
  transition: transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
.screen-push-enter-active {
  transform: translateX(0);
}

/* 모달 (Bottom Sheet) */
.modal-enter {
  transform: translateY(100%);
  transition: transform 300ms cubic-bezier(0.0, 0.0, 0.2, 1);
}
.modal-enter-active {
  transform: translateY(0);
}

/* 페이드 인/아웃 */
.fade-enter {
  opacity: 0;
  transition: opacity 200ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
.fade-enter-active {
  opacity: 1;
}

공통 컴포넌트

1. Button

종류

Primary: 주요 액션 (배경 Primary color)
Secondary: 보조 액션 (테두리만)
Text: 텍스트만 (배경 없음)

크기

Small: 32px 높이, 12px 폰트
Medium: 44px 높이, 16px 폰트 (기본)
Large: 56px 높이, 18px 폰트

상태

Default: 기본
Hover: 배경 10% 밝게
Pressed: 배경 10% 어둡게
Disabled: 투명도 50%
Loading: 스피너 표시

2. Card

구조

┌────────────────────┐
│ Header (선택)      │
├────────────────────┤
│ Content            │
│                    │
├────────────────────┤
│ Actions (선택)     │
└────────────────────┘

스타일

배경: Surface color
테두리: 1px solid #E0E0E0
모서리: 8px 둥글게
그림자: 0 2px 4px rgba(0,0,0,0.1)
패딩: 16px

3. Input Field

종류

Text: 일반 텍스트
Email: 이메일
Password: 비밀번호 (보기/숨기기 토글)
Number: 숫자
Date: 날짜 피커
Time: 시간 피커

상태

Default: 테두리 Gray
Focus: 테두리 Primary
Error: 테두리 Error, 에러 메시지
Disabled: 배경 Gray, 투명도 50%

구조

[Label]
[Input Field     ]
[Helper/Error Text]

종류

Dialog: 중앙 팝업
Bottom Sheet: 하단 슬라이드 업 (Mobile)
Side Panel: 우측 슬라이드 인 (Desktop)

구조

[Backdrop (반투명 검은색)]
┌─────────────────────┐
│ [X] Title           │
├─────────────────────┤
│ Content             │
│                     │
├─────────────────────┤
│ [Cancel] [Confirm]  │
└─────────────────────┘

5. Tab

구조

[ Tab 1 ] | [ Tab 2 ] | [ Tab 3 ]
━━━━━━━━
[Content]

스타일

선택: Primary color, 하단 선 (2px)
미선택: Gray color
인디케이터: 슬라이드 애니메이션 (300ms)

6. Progress Bar

종류

Linear: 가로 바
Circular: 원형 스피너
Determinate: 진행률 표시 (0-100%)
Indeterminate: 무한 로딩

스타일

배경: Gray 200
진행: Primary color
높이: 4px (Linear)

로딩 상태 (Skeleton UI)

스켈레톤 UI 디자인

대시보드 스켈레톤

┌─────────────────────┐
│ ≡  [████████]  🔔 👤│
├─────────────────────┤
│ [████████████]      │
│                     │
│ ┌─────────────────┐ │
│ │ [████████]      │ │
│ │ [██████]        │ │
│ │ [███]           │ │
│ └─────────────────┘ │
│                     │
│ ┌─────────────────┐ │
│ │ [████████]      │ │
│ │ [██████]        │ │
│ │ [███]           │ │
│ └─────────────────┘ │
└─────────────────────┘

스켈레톤 애니메이션

@keyframes skeleton-loading {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}

.skeleton {
  background: linear-gradient(
    90deg,
    #f0f0f0 0px,
    #e0e0e0 40px,
    #f0f0f0 80px
  );
  background-size: 200px 100%;
  animation: skeleton-loading 1.5s infinite;
}

AI 처리 로딩 인디케이터

AI 회의록 생성 로딩

┌─────────────────────┐
│ 🤖 AI 회의록 생성 중 │
│                     │
│ [████████░░░░] 60%  │
│                     │
│ "논의 내용 분석 중..."│
└─────────────────────┘

단계별 메시지

0-20%: "음성 데이터 분석 중..."
20-40%: "발언 내용 분류 중..."
40-60%: "논의 내용 정리 중..."
60-80%: "결정 사항 추출 중..."
80-100%: "회의록 생성 중..."

AI Todo 추출 로딩

┌─────────────────────┐
│ 🤖 Todo 자동 추출 중 │
│                     │
│ [○○○○○] (펄스)     │
│                     │
│ "액션 아이템 분석 중..."│
└─────────────────────┘

AI 회의록 개선 로딩

┌─────────────────────┐
│ 🤖 회의록 개선 중    │
│                     │
│ [스피너]            │
│                     │
│ "1Page 요약 생성 중..."│
│ 예상 시간: 약 10초  │
└─────────────────────┘

STT 정확도 표시

[14:05] 김민준:
프로젝트 일정을 검토...
[정확도: 95% ✓]

[14:07] 박서연:
알지 시스템 구현...
[정확도: 45% ⚠️ 수동 확인 필요]

정확도별 색상

90-100%: 녹색 (Success)
70-89%: 노란색 (Warning)
0-69%: 빨간색 (Error) + "수동 확인 필요" 메시지

프롬프팅 가이드 UI

회의록 개선 프롬프트 예시

┌─────────────────────────┐
│ 🤖 회의록 개선          │
├─────────────────────────┤
│                         │
│ 사전 정의 프롬프트:     │
│                         │
│ ○ 1Page 요약            │
│   "A4 1장 분량으로..."  │
│                         │
│ ○ 핵심 요약             │
│   "3-5개 핵심 포인트..."│
│                         │
│ ○ 상세 보고서           │
│   "시간순 상세 기록..." │
│                         │
│ ○ 경영진 보고용         │
│   "임원진 보고 형식..." │
│                         │
│ ○ 커스텀 프롬프트       │
│   [직접 입력]           │
│                         │
│ 💡 팁:                  │
│ "간결하게 요약해줘"     │
│ "전문용어 설명 포함"    │
│                         │
│ [      생성하기      ]  │
│                         │
└─────────────────────────┘

변경 이력

버전	날짜	변경 내용	작성자
1.0	2025-01-20	초기 UI/UX 설계서 작성	이미준
1.1	2025-01-20	팀 리뷰 반영: 공통 컴포넌트, 애니메이션 스펙, 로딩 상태, AI 처리 인디케이터 추가	이미준

문서 끝

58 KiB Raw Blame History Unescape Escape

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

목차

개요

설계 목적

설계 원칙

차별화 포인트 UI 반영

프로토타입 화면 목록

화면 간 사용자 플로우

주요 플로우 1: 회의 예약 → 진행 → 공유

주요 플로우 2: 즉시 회의 시작

주요 플로우 3: Todo 관리

주요 플로우 4: 과거 회의록 검토

화면별 상세 설계

01-로그인

개요

주요 기능

UI 구성요소

인터랙션

데이터 요구사항

에러 처리

02-대시보드

개요

주요 기능

UI 구성요소

인터랙션

데이터 요구사항

에러 처리

03-회의예약

개요

주요 기능

UI 구성요소

인터랙션

데이터 요구사항

에러 처리

04-템플릿선택

개요

주요 기능

UI 구성요소

인터랙션

데이터 요구사항

에러 처리

05-회의진행

개요

주요 기능

UI 구성요소

인터랙션

데이터 요구사항

에러 처리

06-검증완료

개요

주요 기능

UI 구성요소

인터랙션

데이터 요구사항

에러 처리

07-회의종료

개요

주요 기능

UI 구성요소

인터랙션

데이터 요구사항

에러 처리

08-회의록공유

개요

주요 기능

UI 구성요소

인터랙션

데이터 요구사항

에러 처리

09-Todo관리

개요

주요 기능

UI 구성요소

인터랙션

데이터 요구사항

에러 처리

화면 간 전환 및 네비게이션

네비게이션 구조

하단 탭 네비게이션 (Mobile First)

58 KiB

Raw Blame History