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

yabo0812 01bb4198d9 UI/UX 문서 정리: 불필요한 백업 파일 및 참조 이미지 삭제

주요 변경사항:
- 프로토타입 백업 파일 삭제 (대시보드, 회의진행)
- 참조 이미지 파일 정리 (KakaoTalk 스크린샷 4건)
- UI/UX 설계서 및 유저스토리 업데이트

프로젝트 정리 및 문서 구조 개선

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

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

2025-10-29 13:51:38 +09:00

31 KiB

Raw Permalink Blame History

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

문서 정보

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

설계 개요
프로토타입 화면 목록
화면 간 사용자 플로우
화면 설계 표준
화면별 상세 설계
공통 UI 컴포넌트
인터랙션 패턴 라이브러리
공통 에러 메시지 표준
화면 간 전환 및 네비게이션
반응형 설계 전략
접근성 보장 방안
성능 최적화 방안
변경 이력

설계 개요

설계 목표

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

설계 원칙

1. Mobile First 철학

우선순위 중심: 작은 화면에서 가장 중요한 콘텐츠와 기능에 집중
점진적 향상: 모바일 기본 경험 우선 구축 후, 화면 크기에 따라 기능 확장
성능 최적화: 모바일 환경의 제약사항(네트워크, 처리 능력) 우선 고려

2. 사용자 중심 설계

직관적 인터페이스: 최소한의 학습으로 사용 가능한 UI
명확한 피드백: 모든 사용자 액션에 대한 즉각적이고 명확한 피드백
오류 방지: 실수를 사전에 방지하는 안전장치 제공

3. 일관성과 예측 가능성

일관된 UI 패턴: 동일한 기능은 항상 동일한 방식으로 표현
예측 가능한 동작: 사용자가 기대하는 대로 동작
표준 준수: 플랫폼별 디자인 가이드라인 준수

유저스토리 매핑

User 서비스: UFR-USER-010, UFR-USER-020
Meeting 서비스: UFR-MEET-010 ~ UFR-MEET-060
STT 서비스: UFR-STT-010, UFR-STT-020
AI 서비스: UFR-AI-010, UFR-AI-020, UFR-AI-030, UFR-AI-040
RAG 서비스: UFR-RAG-010, UFR-RAG-020
Collaboration 서비스: UFR-COLLAB-030

↑ 목차로 돌아가기

프로토타입 화면 목록

번호	화면명	관련 유저스토리	중요도	사이드바	뒤로가기
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
10	회의록상세조회	UFR-MEET-047	중간	X	O
11	회의록수정	UFR-MEET-055	중간	X	O
12	회의록목록조회	UFR-MEET-046	높음	O	X

↑ 목차로 돌아가기

화면 간 사용자 플로우

주요 시나리오

시나리오 1: 새 회의 진행

로그인 → 대시보드 → 회의예약 → 템플릿선택 → 회의진행 → 회의종료 → 회의록수정(선택) → 대시보드

시나리오 2: 회의록 조회/수정

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

시나리오 3: 빠른 회의 시작

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

↑ 목차로 돌아가기

화면 설계 표준

공통 화면 구조 템플릿

Mobile 기본 구조 (320px~768px)

┌─────────────────────────┐
│ 헤더 (Fixed)            │ ← 뒤로가기, 타이틀, 액션버튼
├─────────────────────────┤
│                         │
│ 메인 콘텐츠 영역         │
│ (스크롤 가능)            │
│                         │
├─────────────────────────┤
│ 하단 네비게이션 (Fixed)  │ ← 홈, 회의록 (2개)
└─────────────────────────┘

Desktop 기본 구조 (768px+)

┌──────┬──────────────────┐
│      │ 헤더 (Fixed)     │
│ 사이 ├──────────────────┤
│ 드바 │                  │
│ (固) │ 메인 콘텐츠 영역  │
│      │ (최대 너비 제한)  │
│      │                  │
└──────┴──────────────────┘

공통 레이아웃 패턴

폼 레이아웃

Mobile: 단일 컬럼, 전체 너비
Desktop: 2컬럼 + 미리보기 패널(선택)

카드 리스트

Mobile: 단일 컬럼, 스택 레이아웃
Tablet: 2컬럼 그리드
Desktop: 2-3컬럼 그리드

통계 카드

Mobile: 2열 그리드 (~80px 높이)
Desktop: 가로 배치, 간격 증가

공통 데이터 타입

회의 기본 정보

회의 ID, 제목, 일시, 장소
참여자 목록, 참여자 수
생성자 ID, 상태(진행중/예정/완료)
생성일시, 수정일시

회의록 정보

회의록 ID, 회의 ID 참조
상태(작성중/확정완료)
안건 구조, Todo 목록
검증완료율(작성중만)

상태 배지

진행중: 빨강 배지, "진행중"
예정: 파랑 배지, "예정"
작성중: 주황 배지, "작성중"
확정완료: 초록 배지, "확정완료"

↑ 목차로 돌아가기

화면별 상세 설계

01-로그인

개요

목적: LDAP 인증 및 시스템 접근
관련 유저스토리: UFR-USER-010
접근 경로: 앱 최초 진입

고유 기능

사번/비밀번호 LDAP 인증
로그인 상태 유지 옵션
비밀번호 찾기/재설정

UI 구성

Mobile: 중앙 정렬 로그인 폼 (폼 레이아웃 참조)
Desktop: 좌측 서비스 소개 + 우측 로그인 폼

인터랙션

폼 검증 패턴 참조
Enter 키 → 다음 필드 이동/로그인 실행
성공 시 대시보드로 페이드 전환

데이터

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

에러

인증 실패: "사번 또는 비밀번호가 올바르지 않습니다"
계정 잠금: "계정이 일시적으로 잠겼습니다"
네트워크 오류, 서버 오류 참조

02-대시보드

개요

목적: 주요 기능 허브, 최근 활동 요약
관련 유저스토리: UFR-USER-020
접근 경로: 로그인 후 메인 화면

고유 기능

통계 카드 (2개): 예정된 회의, 작성중 회의록
최근 회의 (최대 3개): 진행중 우선 → 예정 → 완료
- 정렬: 회의록 미생성 우선, 빠른 일시 순
- 생성자 표시(👑), 상태 배지
내 회의록 (최대 4개, 2x2 그리드)
- 최근 생성 순, 상태 배지
- "전체 보기" → 12-회의록목록조회

UI 구성

헤더: "안녕하세요 👋" + "오늘 N건의 회의가 예정되어 있어요"
통계 카드: 통계 카드 레이아웃 참조 (2개)
네비게이션: 하단 네비게이션 / 사이드바 참조

인터랙션

진행중 회의: "참여하기" → 회의진행 화면
예정 회의 - 생성자: 카드 클릭 → 회의예약(수정 모드)
예정 회의 - 참여자: 카드 클릭 → "아직 참여할 수 없습니다" 알럿
완료 회의: 카드 클릭 → 회의록상세조회
카드 호버 참조

데이터

입력: 사용자 ID, 현재 날짜/시간
출력:
- 통계: 예정/진행중 회의 수, 작성중 회의록 수
- 최근 회의: 회의 기본 정보 + 생성자 ID + 현재 사용자 역할
- 내 회의록: 회의록 정보 (공통 데이터 타입 참조)
연동: Meeting 서비스

에러

데이터 로딩 실패: 해당 카드에 "다시 시도" 버튼
부분 실패: 실패 섹션만 에러 표시
진행중 회의 참여 실패: "회의에 참여할 수 없습니다" + 원인별 안내

03-회의예약

개요

목적: 회의 일정 등록 및 참여자 초대
관련 유저스토리: UFR-MEET-010
접근 경로: 대시보드 → "회의 예약" 또는 예정 회의 카드 클릭(생성자)

고유 기능

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

UI 구성

헤더: 뒤로가기, "회의 예약", "저장"
폼: 폼 레이아웃 참조
- 제목(필수, 100자), 날짜/시간(필수), 장소(선택)
- 참여자(필수, 최소 1명, 칩 UI)
- 안건(선택, 다중 라인)

인터랙션

날짜/시간: 달력 UI, 과거 비활성화, 충돌 감지
참여자 추가: 참여자 관리 패턴 참조
저장: 폼 검증 → 성공 토스트 → 대시보드

데이터

입력: 제목, 날짜, 시간, 장소, 참여자 이메일, 안건
출력: 회의 ID, 초대 발송 결과
연동: Meeting 서비스, Notification 서비스

에러

필수 필드 누락: 빨간 테두리 + 오류 메시지
참여자 0명: "최소 1명의 참여자를 추가해주세요"
과거 날짜: "과거 날짜는 선택할 수 없습니다"

04-템플릿선택

개요

목적: 회의록 템플릿 선택 및 커스터마이징
관련 유저스토리: UFR-MEET-020
접근 경로: 회의예약 → "회의 시작" 또는 대시보드 → "새 회의 시작"
권한: 회의 생성자 전용

고유 기능

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

UI 구성

헤더: 뒤로가기, "템플릿 선택", "건너뛰기"
템플릿 카드: 이름, 아이콘, 설명, "선택"/"미리보기" 버튼
커스터마이징: 섹션 목록(드래그 가능), "섹션 추가", "이 템플릿으로 시작"

인터랙션

템플릿 카드 클릭 → 상세 보기
섹션 드래그 → 순서 변경
"선택" → 회의진행 화면
드래그 앤 드롭 패턴 참조

데이터

입력: 회의 ID(선택)
출력: 선택된 템플릿 구조
연동: Meeting 서비스

에러

템플릿 로딩 실패: "다시 시도" 버튼
빈 템플릿: "최소 1개의 섹션 필요"

05-회의진행

개요

목적: 실시간 회의 진행 및 AI 회의록 자동 작성
관련 유저스토리: UFR-MEET-030, UFR-STT-010/020, UFR-AI-010, UFR-AI-040, UFR-PART-020
접근 경로: 대시보드 → "참여하기" 버튼
권한:
- 생성자: 회의 종료, 녹음 제어
- 참여자: 참여, AI 메모 작성, 용어 확인, 중도 퇴장

고유 기능

음성 STT 및 AI 자동 회의록 작성
AI 기반 메모 (UFR-PART-020): AI가 감지한 주요 내용을 선택하여 개인 메모 저장
전문용어 자동 감지 및 맥락 기반 설명
참고자료 자동 연결 (관련 회의록 32건)
참여자 관리 및 초대

UI 구성

헤더: "회의 진행 중" + 경과시간 배지 + "회의 종료"
탭 네비게이션 (4개)
- 참여자 (인원수), AI 기반 메모, 용어 사전, 관련 자료(32건)

탭 콘텐츠

참여자 탭:

참여자 추가 폼 (이메일 + "초대")
참여자 목록 (아바타 + 이름)

AI 기반 메모 탭:

메모 입력창 + "저장"
AI가 감지한 주요 내용 리스트 ("[HH:MM] 내용")
클릭 시 메모 입력창에 자동 추가
정책: 개인별 저장, 회의 종료 전까지만 표시

용어 사전 탭:

검색 입력창
용어 카드 (용어명 + 배지 + 정의 + 컨텍스트)
언급된 용어는 민트 그린 배경 + 💬 아이콘

관련 자료 탭:

관련 회의록 카드 (제목 + 날짜 + 관련도 + 요약)
카드 클릭 → 새 탭 열기

인터랙션

탭 전환: 클릭으로 콘텐츠 교체
참여자 초대: 참여자 관리 패턴 참조
AI 메모 저장: "저장" 클릭 → "N개 메모 저장됨" 토스트
용어 검색: 실시간 필터링
회의 종료: 확인 다이얼로그 → 07-회의종료

데이터

입력: 회의 ID, 오디오 스트림, 참여자 이메일
출력: STT 텍스트, AI 주요 내용, 개인 메모, 용어 사전, 관련 회의록
연동: STT, AI, RAG, PARTICIPANT 서비스

에러

마이크 권한 거부: "마이크 권한 필요" + 설정 안내
STT 실패: "음성 인식 실패" + 재시도
메모 저장 실패: "메모 저장 실패" + 재시도
용어/자료 로드 실패: 빈 상태 메시지

07-회의종료

개요

목적: AI 요약 확인 및 다음 단계 선택
관련 유저스토리: UFR-MEET-040, UFR-MEET-050, UFR-AI-010, UFR-AI-020, UFR-AI-036
접근 경로: 회의진행 → "회의 종료"
권한: 회의 생성자 전용
정책: 확인 전용 화면 (편집 불가)

고유 기능

회의 통계 (시간, 참여자, 키워드)
안건별 AI 요약 전체 표시
- AI 한줄 요약 (30자, 읽기 전용, 🔒)
- 상세 요약 정리
- Todo 자동 추출 결과
3가지 선택 옵션
- 회의록 수정 (11번 화면)
- 바로 최종 확정 (모든 안건 자동 검증완료)
- 대시보드로 이동 (작성중 상태 유지)

UI 구성

헤더: "회의가 종료되었습니다" + 회의 제목
통계 카드: 회의 시간, 참여자, 키워드 클라우드
안건 카드: 제목 + AI 한줄 요약(회색 배경, 민트 그린 액센트) + 상세 요약 + Todo
액션 바: "회의록 수정"(Secondary), "바로 최종 확정"(Primary), "대시보드로 이동"(Ghost)

인터랙션

안건 카드 확장/축소
AI 한줄 요약 호버 → "편집 불가" 툴팁
옵션 1: 11-회의록수정 이동 (작성중 상태)
옵션 2: 확인 다이얼로그 → 모든 안건 검증완료 처리 → 확정완료 → 10-회의록상세조회
옵션 3: 대시보드 이동 (작성중 상태)

데이터

입력: 회의 ID
출력: 통계, 안건별 AI 요약(한줄 + 상세), Todo 목록, 회의록 상태
연동: Meeting, AI 서비스

에러

통계 생성 실패: "건너뛰기" 옵션
AI 요약 실패: "회의록 수정 화면에서 직접 작성해주세요"
바로 확정 실패: "다시 시도" 버튼
네트워크 오류 참조 (자동 재시도 3회)

10-회의록상세조회

개요

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

고유 기능

회의 기본 정보 + 상태 배지
2개 탭 구조: 대시보드 / 회의록
대시보드 탭: 핵심내용, 결정사항, Todo, 참고자료 요약
회의록 탭: 안건별 구조 (AI 요약 + 내용 + 참고자료)

UI 구성

헤더: 뒤로가기, 회의 제목, "수정"(우측), 메뉴
기본 정보 카드: 일시, 참여자, 장소, 상태, 작성자
탭 네비게이션: 대시보드 (기본) / 회의록

대시보드 탭:

핵심내용 (4-5개 포인트, 키워드 클라우드, 통계)
결정사항 (카드 리스트)
Todo 진행상황 (제목 + 담당자 + 마감일만, D-day/우선순위 제거)
참고자료 (관련 회의록/문서, 관련도 배지)

회의록 탭:

각 안건: 제목 + 검증 배지 + AI 요약(강조 박스) + 내용 + 참고자료(링크 리스트)

인터랙션

탭 전환: 클라이언트 사이드 렌더링
안건 네비게이션: 제목 클릭 → 스크롤
AI 요약 편집: "수정" → 인라인 편집 (권한 있는 경우)
참고자료 링크: 새 탭 열기, 관련도 색상 코딩
"수정" 버튼: 11-회의록수정
"공유" 버튼: 회의록공유 화면

데이터

입력: 회의록 ID, 활성 탭
출력:
- 회의 기본 정보, 안건별 AI 요약, 안건별 내용
- 참고자료 (회의록/문서, 관련도)
- 대시보드 데이터 (핵심내용, 결정사항, Todo, 통계)
연동: Meeting, AI 서비스

에러

회의록 로딩 실패: "다시 시도"
AI 요약 로딩 실패: 안건 내용은 정상 표시
참고자료 로딩 실패: 빈 상태
대시보드 로딩 실패: "다시 시도"
권한 없음: "수정" 비활성화

11-회의록수정

개요

목적: 회의록 조회 및 수정
관련 유저스토리: UFR-MEET-055, UFR-AI-040, UFR-COLLAB-030
접근 경로: 10-회의록상세조회 → "수정" 버튼
권한 제어:
- 검증완료 전: 모든 참여자 수정 가능
- 검증완료 후: 회의 생성자만 수정 가능

고유 기능

회의 기본 정보 수정
- 제목: 수정 가능
- 일시/장소: 읽기 전용
- 참여자: 생성자만 추가/삭제
안건별 편집
- AI 요약 (한줄, 30자, 읽기 전용)
- 텍스트 편집 영역 (안건 내용 자유 작성)
- "AI 재생성" 버튼 (한줄 요약 재생성, 2-5초)
- 참고자료 추가/제거
Todo 단순 조회 (제목 + 담당자 + 마감일만)
안건별 검증 완료 체크박스
- 생성자: 체크박스 활성, 잠금 해제 가능
- 참여자: 검증완료 안건 읽기 전용
자동 저장 (30초 간격)
상태 변경 (확정완료 → 작성중)

UI 구성

헤더: 뒤로가기, "회의록 수정", "저장", 자동 저장 인디케이터
기본 정보: 제목(편집), 일시(읽기), 장소(읽기), 참여자(생성자만 편집)
안건 편집:
- 헤더 (제목 + 검증 배지)
- AI 요약 (읽기 전용, 회색 배경, 민트 액센트)
- 텍스트 편집 (textarea) + "AI 재생성"
- 참고자료 편집 ("참고자료 추가")
- Todo 섹션 (읽기 전용)
- 검증 영역 (체크박스 + "잠금 해제")

인터랙션

화면 진입: 권한 확인 (검증완료 후 생성자만)
내용 수정: 자동 저장 30초, "저장" 수동
AI 한줄 요약: 읽기 전용, 호버 → "편집 불가" 툴팁
AI 재생성: 텍스트 편집 내용 기반으로 한줄 요약 재생성
안건별 검증:
- 생성자: 체크박스 클릭 → 검증완료/미검증 토글
- 생성자: "잠금 해제" → 확인 다이얼로그 → 편집 가능
- 참여자: 검증완료 안건 모든 필드 disabled
참고자료 편집: 참고자료 관리 패턴 참조
저장 로직: 검증완료 안건 스킵, "N개 안건 저장, M개 스킵" 알림
충돌 방지: Last Write Wins (안건별 독립)

데이터

입력: 회의록 ID, 수정 내용, AI 요약 수정, 참고자료 변경, 안건별 검증 상태
출력: 수정 결과, AI 한줄 요약(읽기), AI 상세 요약 재생성 결과, 수정 이력
연동: Meeting, AI(UFR-AI-036, UFR-AI-040), COLLAB 서비스

에러

권한 없음: "본인이 작성한 회의록만 수정 가능"
자동 저장 실패: "네트워크 확인, 로컬 임시 저장"
AI 재생성 실패: "수동 작성해주세요"
참고자료 검색 실패: "회의록 검색 불가"
검증완료 저장 시도: 스킵 알림 + 목록 표시

12-회의록목록조회

개요

목적: 회의록 목록 조회 및 필터링/정렬/검색
관련 유저스토리: UFR-MEET-046
접근 경로: 대시보드 → "전체 보기" 또는 하단 네비게이션 → "회의록"
권한: 모든 참여자 (본인 참여 회의록만)

고유 기능

필터링: 참여 유형 (전체/참여/생성), 상태 (전체/작성중/확정완료)
정렬: 최근수정순 (기본), 최근회의순, 제목순
검색: 제목, 참여자, 키워드 통합 검색 (실시간)
페이지네이션: 초기 10개, "10개 더보기"

UI 구성

헤더: 뒤로가기, "내 회의록", 검색 아이콘
필터/정렬:
- 필터 행 (2컬럼): 상태 Select + 정렬 Select
- 참여 유형 탭 (선택): 전체/참여/생성
검색: "회의 제목, 참여자, 키워드 검색" placeholder
통계 카드 (3컬럼): 전체, 작성중, 확정완료 개수
회의록 목록:
- 각 항목: 제목 + 생성자(👑) + 일시/참여자 + 검증완료율(작성중만) + 수정시간 + 상태 배지
- 빈 상태: "검색 결과 없음" / "회의록 없음"
네비게이션: 하단 네비게이션 / 사이드바 참조

인터랙션

필터/정렬 변경 → 즉시 재렌더링
검색 입력 → 실시간 (debounce 300ms)
회의록 클릭 → 10-회의록상세조회
통계 자동 갱신 (필터/검색 적용 시)

데이터

입력: 사용자 ID, 필터(참여 유형, 상태), 정렬, 검색어
출력: 회의록 목록 (회의 기본 정보 + 생성자 ID + 조회 권한), 통계 (전체/작성중/확정완료 개수)
연동: Meeting 서비스

에러

데이터 로딩 실패: "다시 시도" 버튼
검색 실패: 토스트, 기존 목록 유지
네트워크 오류 참조 (자동 재시도 3회)
권한 없음: 클릭 시 "접근 권한 없음" 토스트
빈 상태: "검색 결과 없음" / "조건에 맞는 회의록 없음" / "회의록 없음 + 회의 시작 버튼"

↑ 목차로 돌아가기

공통 UI 컴포넌트

네비게이션

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

위치: Fixed, 하단 (64px)
구성: 2개 항목 균등 분할
- 홈 (🏠, "홈", 대시보드)
- 회의록 (📋, "회의록", 회의록 목록)
활성 상태: 민트 그린 (#4DD5A7)
비활성: 회색 (#6B7280)

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

위치: Fixed, 좌측 (240px)
구성:
- 상단: 로고 + 서비스명
- 메인 메뉴: 대시보드, 내 회의록
- 하단: 사용자 정보 + 로그아웃

상단 헤더 (공통)

위치: Sticky, 상단
구성: 뒤로가기(조건부), 타이틀, 액션 버튼
Mobile 전용: 우측 프로필 아이콘(👤) → 드롭다운 (이름 + 로그아웃)
Desktop: 프로필 숨김 (사이드바 사용)

↑ 목차로 돌아가기

인터랙션 패턴 라이브러리

폼 검증

실시간 검증: 입력 시 형식 오류 즉시 표시
제출 검증: 빈 필드 → 해당 필드로 포커스
오류 표시: 필드 하단 빨간 텍스트 (14px)

카드 인터랙션

기본: 배경 흰색, 테두리 회색, 둥글기 8px
호버: 그림자 증가, 약간 상승 (translateY(-2px))
클릭: 해당 상세 화면으로 이동

참여자 관리

추가 폼: 이메일 입력 + "초대" 버튼
유효성 검증: 이메일 정규식 체크
성공: "{email}에게 초대 링크 전송" 토스트
참여자 목록: 아바타 + 이름, 삭제(×) 버튼

참고자료 관리

추가: "참고자료 추가" → 회의록 검색 모달 → 선택 추가
제거: X 버튼 클릭
순서 변경: 드래그 앤 드롭 (선택)

드래그 앤 드롭

터치: 길게 누르기 → 드래그 시작
마우스: 클릭 드래그
피드백: 드래그 중 반투명, 드롭 위치 표시

모달 표시

Mobile: 바텀시트 (하단 슬라이드 업)
Desktop: 중앙 모달
닫기: Esc 키, 배경 클릭, X 버튼

로딩 상태

스켈레톤 UI: 리스트 로딩 중 표시
로딩 인디케이터: 버튼 클릭 시 스피너
프로그레스 바: 파일 업로드/다운로드

↑ 목차로 돌아가기

공통 에러 메시지 표준

네트워크 오류

메시지: "네트워크 연결을 확인해주세요"
재시도: 자동 3회 (1s, 2s, 4s exponential backoff)
UI: 빨강 토스트 + "다시 시도" 버튼

데이터 로딩 실패

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

권한 오류

메시지: "접근 권한이 없습니다"
액션: 3초 후 이전 화면 또는 대시보드 복귀
UI: 주황 토스트

인증 오류

메시지: "로그인이 필요합니다"
액션: 로그인 화면 리다이렉트
UI: 파랑 토스트

입력 검증 오류

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

서버 오류

메시지: "서버에 일시적인 문제가 발생했습니다"
UI: 빨강 토스트 + "다시 시도" 버튼
로깅: Sentry로 오류 전송

↑ 목차로 돌아가기

화면 간 전환 및 네비게이션

네비게이션 구조

Mobile: 하단 네비게이션 + 상단 헤더
Desktop: 좌측 사이드바 + Breadcrumbs(선택)

전환 애니메이션

화면 전환: 페이드/슬라이드 (200-300ms)
모달: 페이드 인 + 스케일 (150ms)
탭 전환: 페이드 (100ms)
리스트 로딩: 스켈레톤 UI → 페이드 인

딥 링크

회의록: /minutes/{minuteId}
Todo: /todo/{todoId}
공유: /share/{shareToken}

↑ 목차로 돌아가기

반응형 설계 전략

브레이크포인트

Mobile: 320px ~ 767px
Tablet: 768px ~ 1023px
Desktop: 1024px+

레이아웃 전략

320px 기준: 단일 컬럼, 필수 기능만, 하단 네비게이션
768px 확장: 2컬럼, 추가 정보, 사이드바 도입
1024px 최적화: 3컬럼, 좌측 사이드바, 마우스/키보드 강화

컴포넌트별 반응형

폼: Mobile 단일 → Desktop 2컬럼 + 미리보기
리스트: Mobile 스택 → Tablet 2컬럼 → Desktop 3컬럼 그리드
테이블: Mobile 카드 변환 → Desktop 고정 헤더 테이블

이미지 및 미디어

Responsive Images: srcset
Lazy Loading: Intersection Observer
최적화: 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: header, nav, main, aside, footer
ARIA: role, aria-label, aria-describedby, aria-live
호환성: 최신 브라우저 + 보조 기술

테스트

자동: Lighthouse, axe DevTools
수동: 키보드, 스크린 리더 (NVDA, JAWS, VoiceOver)

↑ 목차로 돌아가기

성능 최적화 방안

1. 로딩 성능

Code Splitting: 라우트별 청크
Lazy Loading: 이미지(Intersection Observer), 컴포넌트(React.lazy)
Pre-fetching: 다음 화면 리소스
CDN: 정적 리소스 배포

2. 렌더링 성능

Virtual Scrolling: 긴 리스트
Debounce/Throttle: 검색(300ms), 스크롤(100ms)
Memoization: React.memo, useMemo, useCallback
CSS 애니메이션: JavaScript 대신

3. 네트워크 최적화

API: 필요 데이터만, 배치 요청
캐싱: Cache-Control, Service Worker, React Query
압축: Gzip, Brotli

4. 실시간 동기화

WebSocket: Delta 전송, 배치 업데이트, 지수 백오프
Conflict Resolution: OT 또는 CRDT

5. 성능 모니터링

Core Web Vitals: LCP <2.5s, FID <100ms, CLS <0.1
모니터링: Sentry, Google Analytics

목표

FCP: <1.5s, TTI: <3.5s
Page Load (3G): <5s
STT: <1s, 실시간 동기화: <500ms

↑ 목차로 돌아가기

변경 이력

버전	날짜	작성자	변경 내용 요약
1.0	2025-10-21	이미준	최초 작성 - 11개 화면 설계
1.1.x	2025-10-21	이미준	AI 요약/참고자료 기능 추가, 대시보드 개선, 회의록 목록 추가
1.2.x	2025-10-21	이미준, 최유진	역할 기반 접근 제어, 회의진행 개선, 스타일 가이드 작성
1.3.x	2025-10-21	이미준, 도그냥	반응형 네비게이션, 회의진행 2열 구조, 공통 컴포넌트 표준화
1.4.x	2025-10-22~25	이미준, 강지수, 도그냥	Todo 강화, 화면 재정렬, 검증완료 정책, 용어 통일(생성자/참여자), STT 화자 식별 불가 반영
1.5.1~1.5.9	2025-10-27~28	강지수, 도그냥	MVP v2.4.0~2.4.5 반영: Todo 단순화, AI 메모 기능, 검증완료 강화, 네비게이션 간소화, 용어 통일(참여자/참여)
1.6.0	2025-10-29	강지수	문서 구조 최적화 및 중복 제거 (토큰 효율성 개선): 화면 설계 표준 섹션 신규 추가, 인터랙션 패턴 라이브러리 신규 추가, 각 화면 설계 참조 링크 기반으로 간소화, 변경 이력 요약 테이블 형식, 약 35-40% 토큰 절감

주요 버전 세부 변경 사항:

v1.1: UFR-AI-040 관련 회의록 자동 연결, AI 요약 기능 추가
v1.2: 진행중 회의 표시, 예정 회의 권한 차별화
v1.3: Mobile 하단 네비게이션 3개 → 2개, Desktop 사이드바, AI 제안 탭 상세화
v1.4: Todo 관리 확장, 검증완료 잠금, 참석자 → 참여자 용어 통일
v1.5: MVP 스코프 축소 (Todo 단순 조회, AI 메모 기능, 실시간 협업 제거, Last Write Wins 적용)
v1.6: 문서 구조 최적화 (토큰 35-40% 절감)

↑ 목차로 돌아가기

문서 끝

31 KiB Raw Permalink Blame History Unescape Escape

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

문서 정보

목차

설계 개요

설계 목표

설계 원칙

1. Mobile First 철학

2. 사용자 중심 설계

3. 일관성과 예측 가능성

유저스토리 매핑

프로토타입 화면 목록

화면 간 사용자 플로우

주요 시나리오

화면 설계 표준

공통 화면 구조 템플릿

Mobile 기본 구조 (320px~768px)

Desktop 기본 구조 (768px+)

공통 레이아웃 패턴

폼 레이아웃

카드 리스트

통계 카드

공통 데이터 타입

회의 기본 정보

회의록 정보

상태 배지

화면별 상세 설계

01-로그인

개요

고유 기능

UI 구성

인터랙션

데이터

에러

02-대시보드

개요

고유 기능

UI 구성

인터랙션

데이터

에러

03-회의예약

개요

고유 기능

UI 구성

인터랙션

데이터

에러

04-템플릿선택

개요

고유 기능

UI 구성

인터랙션

데이터

에러

05-회의진행

개요

고유 기능

UI 구성

탭 콘텐츠

인터랙션

데이터

에러

07-회의종료

개요

고유 기능

UI 구성

인터랙션

데이터

에러

10-회의록상세조회

개요

고유 기능

UI 구성

인터랙션

데이터

에러

11-회의록수정

개요

고유 기능

31 KiB

Raw Permalink Blame History