From 225729d1abcd628f107d504adf4dd8d70796bb4c Mon Sep 17 00:00:00 2001 From: yabo0812 Date: Tue, 21 Oct 2025 19:45:37 +0900 Subject: [PATCH] =?UTF-8?q?=ED=9A=8C=EC=9D=98=EB=A1=9D=20=EC=83=81?= =?UTF-8?q?=EC=84=B8=EC=A1=B0=ED=9A=8C=20=ED=99=94=EB=A9=B4=20UI=20?= =?UTF-8?q?=EA=B0=9C=EC=84=A0=20(yabo)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 논의사항/결정사항 영역 스타일 통일 - 안건별 섹션에 이모티콘과 볼드체 제목 추가 - 일관된 목록 스타일 적용 (간격, 색상) - AI 요약 영역 편집 버튼 스타일 개선 - 버튼 텍스트를 "수정"에서 "편집"으로 변경 - AI 요약 배경색과 조화로운 호버 효과 적용 - 반투명 녹색 배경으로 자연스러운 인터랙션 구현 - 대시보드 탭 관련회의록 영역 개선 - 불필요한 필터 탭 제거 (관련 회의록, 프로젝트 문서, 이슈 트래커, 위키 페이지) - 타이틀에 건수 표시 추가 ("📚 관련회의록 (3건)") - 더 간결하고 직관적인 UI로 개선 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- .../prototype_yabo/10-회의록상세조회.html | 110 +++++++----- design/uiux/uiux.md | 168 ++++++++++++------ 2 files changed, 176 insertions(+), 102 deletions(-) diff --git a/design/uiux/prototype_yabo/10-회의록상세조회.html b/design/uiux/prototype_yabo/10-회의록상세조회.html index ae48d4d..a9c4d2d 100644 --- a/design/uiux/prototype_yabo/10-회의록상세조회.html +++ b/design/uiux/prototype_yabo/10-회의록상세조회.html @@ -200,6 +200,17 @@ color: var(--gray-500); } + /* AI 요약 영역 내 버튼 스타일 개선 */ + .ai-summary .btn-ghost { + color: var(--primary); + padding: 4px 12px; + } + + .ai-summary .btn-ghost:hover { + background: rgba(77, 213, 167, 0.2); + color: var(--primary-dark); + } + /* 섹션 내용 */ .section-content { font-size: var(--font-body); @@ -617,7 +628,7 @@ 💡 AI 요약 - +

신제품은 AI 기반 회의록 자동화 서비스로 결정. 타겟은 중소기업 및 스타트업이며, 주요 기능은 음성인식, AI 요약, Todo 추출입니다. 경쟁사 대비 차별점은 실시간 검증 및 협업 기능입니다. @@ -629,19 +640,23 @@

-

논의 사항:

-
    -
  • AI 기반 회의록 자동화 서비스 출시 결정
    • -
  • 타겟 고객: 중소기업, 스타트업
    • -
  • 주요 기능: 음성인식, AI 요약, Todo 자동 추출
    • -
  • 차별화 포인트: 실시간 검증, 협업 기능
    • -
+
+
💬 논의 사항
+
    +
  • AI 기반 회의록 자동화 서비스 출시 결정
    • +
  • 타겟 고객: 중소기업, 스타트업
    • +
  • 주요 기능: 음성인식, AI 요약, Todo 자동 추출
    • +
  • 차별화 포인트: 실시간 검증, 협업 기능
    • +
+
-

결정 사항:

-
    -
  • 베타 버전 출시일: 2025년 12월 1일
    • -
  • 초기 목표 사용자: 100개 팀
    • -
+
+
✅ 결정 사항
+
    +
  • 베타 버전 출시일: 2025년 12월 1일
    • +
  • 초기 목표 사용자: 100개 팀
    • +
+
@@ -698,7 +713,7 @@
💡 AI 요약 - +

개발 기간은 3개월로 설정. 백엔드 2명, 프론트 2명, AI 엔지니어 1명 투입. 주간 스프린트로 진행하며, 2주마다 베타 테스트 실시. @@ -709,19 +724,23 @@

-

일정:

-
    -
  • Phase 1 (11월): 핵심 기능 개발 (음성인식, AI 요약)
    • -
  • Phase 2 (12월): 협업 기능 개발 (검증, 공유)
    • -
  • Phase 3 (1월): 베타 테스트 및 최적화
    • -
+
+
📅 일정
+
    +
  • Phase 1 (11월): 핵심 기능 개발 (음성인식, AI 요약)
    • +
  • Phase 2 (12월): 협업 기능 개발 (검증, 공유)
    • +
  • Phase 3 (1월): 베타 테스트 및 최적화
    • +
+
-

리소스:

-
    -
  • 백엔드 개발자 2명
    • -
  • 프론트엔드 개발자 2명
    • -
  • AI 엔지니어 1명
    • -
+
+
👥 리소스
+
    +
  • 백엔드 개발자 2명
    • +
  • 프론트엔드 개발자 2명
    • +
  • AI 엔지니어 1명
    • +
+
@@ -753,7 +772,7 @@
💡 AI 요약 - +

베타 출시 전 프리 런칭 캠페인 진행. 주요 채널은 LinkedIn 및 스타트업 커뮤니티. 초기 100팀 무료 제공 후 유료 전환 유도. @@ -764,19 +783,23 @@

-

프리 런칭 캠페인:

-
    -
  • 기간: 11월 1일 ~ 11월 30일
    • -
  • 채널: LinkedIn, Product Hunt, 스타트업 커뮤니티
    • -
  • 목표: 500명 사전 신청
    • -
+
+
🚀 프리 런칭 캠페인
+
    +
  • 기간: 11월 1일 ~ 11월 30일
    • +
  • 채널: LinkedIn, Product Hunt, 스타트업 커뮤니티
    • +
  • 목표: 500명 사전 신청
    • +
+
-

베타 운영:

-
    -
  • 초기 100팀 무료 제공
    • -
  • 피드백 수집 및 개선
    • -
  • 1월부터 유료 전환
    • -
+
+
🧪 베타 운영
+
    +
  • 초기 100팀 무료 제공
    • +
  • 피드백 수집 및 개선
    • +
  • 1월부터 유료 전환
    • +
+
@@ -1006,14 +1029,7 @@
-

📚 관련회의록

-
- -
- - - - +

📚 관련회의록 (3건)

diff --git a/design/uiux/uiux.md b/design/uiux/uiux.md index 4a75eb0..918906a 100644 --- a/design/uiux/uiux.md +++ b/design/uiux/uiux.md @@ -14,11 +14,13 @@ 2. [프로토타입 화면 목록](#프로토타입-화면-목록) 3. [화면 간 사용자 플로우](#화면-간-사용자-플로우) 4. [화면별 상세 설계](#화면별-상세-설계) -5. [화면 간 전환 및 네비게이션](#화면-간-전환-및-네비게이션) -6. [반응형 설계 전략](#반응형-설계-전략) -7. [접근성 보장 방안](#접근성-보장-방안) -8. [성능 최적화 방안](#성능-최적화-방안) -9. [변경 이력](#변경-이력) +5. [공통 UI 컴포넌트](#공통-ui-컴포넌트) +6. [공통 에러 메시지 표준](#공통-에러-메시지-표준) +7. [화면 간 전환 및 네비게이션](#화면-간-전환-및-네비게이션) +8. [반응형 설계 전략](#반응형-설계-전략) +9. [접근성 보장 방안](#접근성-보장-방안) +10. [성능 최적화 방안](#성능-최적화-방안) +11. [변경 이력](#변경-이력) --- @@ -200,8 +202,8 @@ graph TD #### 에러 처리 - **인증 실패**: "사번 또는 비밀번호가 올바르지 않습니다." (보안상 구체적 정보 제공 X) - **계정 잠금**: "보안을 위해 계정이 일시적으로 잠겼습니다. 관리자에게 문의하세요." -- **네트워크 오류**: "네트워크 연결을 확인해주세요." -- **서버 오류**: "일시적인 오류가 발생했습니다. 잠시 후 다시 시도해주세요." +- **네트워크 오류**: [공통 에러 메시지 - 네트워크 오류](#네트워크-오류) 참조 +- **서버 오류**: [공통 에러 메시지 - 서버 오류](#서버-오류) 참조 --- @@ -311,27 +313,11 @@ graph TD - 클릭 시: 회의록 상세 화면으로 이동 (읽기 전용) - 빈 상태: "공유받은 회의록이 없습니다" -- **하단 네비게이션** (Fixed, 하단, 모바일 전용) - - 홈 (active), 회의록, Todo (3개 항목) - - 각 항목: 이모지 아이콘 + 레이블 - - 프로필 탭 제거됨 +**Mobile (320px~768px)** +- **하단 네비게이션**: [Mobile 하단 네비게이션](#mobile-하단-네비게이션-320px768px) 참조 (홈 활성) **Tablet/Desktop (768px+)** -- **왼쪽 사이드바** (Fixed, 240px) - - **로고 영역** - - 민트 그린 아이콘 (M) - - "회의록 서비스" 텍스트 - - - **메인 메뉴** (세로 배치) - - 📊 대시보드 (active, 민트 그린 배경) - - 📋 회의 목록 → 12-회의록목록조회.html - - ✅ Todo 관리 → 09-Todo관리.html - - ⚙️ 설정 (준비중) - - - **하단 사용자 정보** - - 아바타 - - 사용자 이름 - - 이메일 주소 +- **좌측 사이드바**: [Desktop 좌측 사이드바](#desktop-좌측-사이드바-768px) 참조 (대시보드 활성) - **메인 콘텐츠** (왼쪽 여백 240px) - **헤더** @@ -483,8 +469,8 @@ graph TD - "회의에 참여할 수 없습니다." 토스트 메시지 - 원인별 안내: - 회의 종료됨: "이미 종료된 회의입니다" - - 권한 없음: "참여 권한이 없습니다" - - 네트워크 오류: "네트워크 연결을 확인해주세요" + - 권한 없음: [공통 에러 메시지 - 권한 오류](#권한-오류) 참조 + - 네트워크 오류: [공통 에러 메시지 - 네트워크 오류](#네트워크-오류) 참조 - **예정된 회의 접근 제한**: - **시간 제한 (초대받은 참석자)**: @@ -492,19 +478,16 @@ graph TD - 10분 전부터 참여 버튼 활성화 - 타이머 자동 갱신 (1분 간격) - **권한 제한 (수정 시도)**: - - "회의를 수정할 권한이 없습니다." 토스트 메시지 - - 생성자만 수정 가능 안내 + - [공통 에러 메시지 - 권한 오류](#권한-오류) 참조 - **회의 수정 실패** (생성자): - "회의 정보를 수정할 수 없습니다." 토스트 메시지 - 원인별 안내: - 이미 시작된 회의: "진행 중인 회의는 수정할 수 없습니다" - - 네트워크 오류: "네트워크 연결을 확인해주세요" - - 권한 변경됨: "더 이상 수정 권한이 없습니다" + - 네트워크 오류: [공통 에러 메시지 - 네트워크 오류](#네트워크-오류) 참조 + - 권한 변경됨: [공통 에러 메시지 - 권한 오류](#권한-오류) 참조 -- **네트워크 오류**: - - "네트워크 연결을 확인해주세요." 토스트 메시지 - - 자동 재시도 (최대 3회, exponential backoff) +- **네트워크 오류**: [공통 에러 메시지 - 네트워크 오류](#네트워크-오류) 참조 --- @@ -1675,13 +1658,11 @@ graph TD - 검색 결과 없음: "검색 결과가 없습니다" - 회의록 없음: "회의록이 없습니다" -- **하단 네비게이션** (Fixed, 하단) - - 홈, 회의록 (active), Todo, 프로필 +**Mobile (320px~768px)** +- **하단 네비게이션**: [Mobile 하단 네비게이션](#mobile-하단-네비게이션-320px768px) 참조 (회의록 활성) **Tablet/Desktop (768px+)** -- **사이드바** (좌측, Fixed, 240px) - - 메인 메뉴 - - 회의록 목록 (active) +- **좌측 사이드바**: [Desktop 좌측 사이드바](#desktop-좌측-사이드바-768px) 참조 (회의록 활성) - **메인 콘텐츠** (중앙) - 필터 및 정렬 (상단, 가로 배치) @@ -1784,29 +1765,105 @@ graph TD --- +## 공통 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 좌측 사이드바 (768px+) +- **위치**: Fixed, 좌측 (width: 240px) +- **배경**: 흰색, 우측 테두리 (1px solid #E5E7EB) +- **구성**: + - **상단 영역**: + - 서비스 로고 (32px) + - 서비스명 (16px Bold) + - **메인 메뉴**: + - 대시보드 + - 내 회의록 + - Todo + - 공유받은 회의록 + - **하단 영역**: + - 사용자 정보 (아바타 + 이름) + - 로그아웃 +- **사용 화면**: 02-대시보드, 09-Todo관리, 12-회의록목록조회 + +#### 상단 헤더 (공통) +- **위치**: Sticky, 상단 +- **배경**: 흰색, 하단 테두리 (1px solid #E5E7EB) +- **구성**: + - 좌측: 뒤로가기 버튼 (화면별 조건부) + - 중앙: 페이지 타이틀 (18px Bold) + - 우측: 액션 버튼 (저장, 메뉴 등) + +--- + +## 공통 에러 메시지 표준 + +### 네트워크 오류 +- **메시지**: "네트워크 연결을 확인해주세요" +- **재시도**: 자동 재시도 최대 3회 (exponential backoff: 1s, 2s, 4s) +- **UI**: 오류 토스트 (빨강) + "다시 시도" 버튼 +- **적용 화면**: 전체 + +### 데이터 로딩 실패 +- **메시지**: "일시적으로 데이터를 불러올 수 없습니다" +- **UI**: 빈 상태 화면 + "다시 시도" 버튼 +- **적용 화면**: 전체 + +### 권한 오류 +- **메시지**: "접근 권한이 없습니다" +- **액션**: 3초 후 자동으로 이전 화면 또는 대시보드로 복귀 +- **UI**: 경고 토스트 (주황) +- **적용 화면**: 회의록 상세, 회의록 수정 + +### 인증 오류 +- **메시지**: "로그인이 필요합니다" +- **액션**: 로그인 화면으로 리다이렉트 +- **UI**: 정보 토스트 (파랑) +- **적용 화면**: 전체 (인증 필요 화면) + +### 입력 검증 오류 +- **이메일 형식 오류**: "올바른 이메일 형식이 아닙니다" +- **필수 입력 누락**: "필수 항목을 입력해주세요" +- **날짜 형식 오류**: "올바른 날짜 형식이 아닙니다 (YYYY-MM-DD)" +- **UI**: 입력 필드 하단 오류 메시지 (빨강, 14px) + +### 서버 오류 +- **메시지**: "서버에 일시적인 문제가 발생했습니다" +- **UI**: 오류 토스트 (빨강) + "다시 시도" 버튼 +- **로깅**: 오류 상세 정보를 서버로 전송 (Sentry) +- **적용 화면**: 전체 + +--- + ## 화면 간 전환 및 네비게이션 ### 네비게이션 구조 #### Mobile (320px~768px) -- **Primary Navigation**: 하단 네비게이션 바 (Fixed) - - 홈 (대시보드) - - 회의록 (내 회의록 목록) - - Todo (Todo관리) - - 프로필 (설정 및 로그아웃) +- **Primary Navigation**: [Mobile 하단 네비게이션](#mobile-하단-네비게이션-320px768px) 참조 -- **Secondary Navigation**: 상단 헤더 - - 뒤로가기 버튼 (화면별) - - 페이지 타이틀 - - 액션 버튼 (저장, 메뉴 등) +- **Secondary Navigation**: [상단 헤더](#상단-헤더-공통) 참조 #### Tablet/Desktop (768px+) -- **Primary Navigation**: 좌측 사이드바 (Fixed) - - 서비스 로고 - - 대시보드 - - 내 회의록 - - Todo - - 공유받은 회의록 +- **Primary Navigation**: [Desktop 좌측 사이드바](#desktop-좌측-사이드바-768px) 참조 - 설정 - 프로필 @@ -1981,6 +2038,7 @@ graph TD | 1.3 | 2025-10-21 | 이미준 | 프로토타입 반응형 네비게이션 및 회의진행 화면 전면 개편
- **02-대시보드**: 반응형 네비게이션 구조 적용
- Mobile: 하단 네비게이션 (홈/회의록/Todo, 프로필 메뉴 제거)
- Desktop: 왼쪽 사이드바 (240px, 로고/메뉴/사용자 정보)
- 통계 카드 추가 (예정된 회의/진행 중 Todo/완료율)
- 모든 네비게이션 링크 정확한 화면으로 연결
- **05-회의진행**: 2열 구조로 전면 재설계
- 왼쪽 영역 (60-70%): 텍스트 에디터 (툴바 + contentEditable)
- 오른쪽 영역 (30-40%): 탭 패널 (참석자/AI 제안/용어 사전/관련 자료)
- AI 제안: 적용하기 버튼으로 왼쪽 영역에 자동 삽입
- 관련 자료: 새 탭으로 열기 (target="_blank"), 녹음 중 페이지 이탈 방지
- **10-회의록상세조회**: 타임라인 탭 제거
- 탭 구조 단순화: 회의록/대시보드 (2개 탭만 유지)
- 타임라인 관련 UI 및 인터랙션 모두 제거
- 참조: reference/sampleimg 샘플 이미지 기반 디자인 | | 1.3.1 | 2025-10-21 | 도그냥 | 회의진행 화면 AI 제안 탭 기능 상세화 및 디자인 통일성 개선
- **05-회의진행**: AI 제안 탭 3가지 제안 유형 추가 및 상세 인터랙션 정의
- **논의사항 제안**: "논의사항에 적용" 버튼 클릭 시 논의사항 섹션(section-1)에 내용 자동 추가, 자동 탭 전환, 성공 토스트 표시
- **결정사항 제안**: "결정사항에 적용" 버튼 클릭 시 결정사항 섹션(section-2)에 내용 자동 추가, 자동 탭 전환, 성공 토스트 표시
- **액션아이템 제안**: "3개 Todo 생성" 버튼 클릭 시 액션아이템 섹션(section-3)에 중복 체크 후 추가, 자동 탭 전환, 성공 토스트 표시
- 중복 체크 로직: Set 자료구조로 기존 Todo 제목과 비교, 중복 제외한 항목만 추가
- **AI 제안 카드 디자인 통일성 개선**:
- 배경: #FAFAFA (연한 회색) - 용어사전/관련회의록 탭과 동일
- 테두리: 1px dashed #D0D0D0 (회색 점선) - 통일된 스타일
- 헤더: 16px Bold, 민트 그린 (#4DD5A7) - 일관된 타이틀 스타일
- 본문: 14px, gray-700 - 가독성 중심
- 프로토타입 파일 수정: design/uiux/prototype/05-회의진행.html | | 1.3.2 | 2025-10-21 | 도그냥 | 회의진행 화면 참석자 탭 개선 및 UI 일관성 강화
- **05-회의진행**: 참석자 탭 참석자 추가 기능 및 UI 정리
- **참석자 추가 폼 추가**: 이메일 입력 필드(form-control) + "초대" 버튼(btn btn-primary btn-sm)
- 이메일 유효성 검증: 정규식으로 형식 체크
- 빈 값 체크: "이메일 주소를 입력해주세요" 경고 토스트
- 잘못된 형식: "올바른 이메일 형식이 아닙니다" 오류 토스트
- 성공: "{email}에게 초대 링크가 전송되었습니다" 토스트 + 입력창 초기화
- **참석자 상태 표시 제거**: 발언 중/온라인 등 상태 아이콘 및 텍스트 모두 제거
- **참석자 수 동적 업데이트**: 4명으로 업데이트 (최유진 추가)
- **참고자료 영역 제거**: 회의개요 탭의 참고자료 섹션 삭제 (우측 관련회의록 탭으로 통합)
- **버튼 스타일 통일**: 모든 버튼에 .btn 기본 클래스 추가
- 편집 버튼 (4개 섹션): btn btn-ghost btn-sm
- AI 제안 적용 버튼 (3개): btn btn-primary btn-sm
- 수정 버튼 (3개): btn btn-ghost btn-sm
- 하단 일시정지/종료 버튼: btn btn-ghost, btn btn-error
- **검색창 스타일 통일**: 용어사전 검색창을 .input → .form-control 클래스로 변경
- 프로토타입 파일 수정: design/uiux/prototype/05-회의진행.html | +| 1.3.3 | 2025-10-21 | 도그냥 | UI/UX 설계 문서 최적화 및 중복 제거
- **공통 UI 컴포넌트 섹션 신규 작성**: 반복 사용되는 UI 컴포넌트를 공통 섹션으로 분리
- **Mobile 하단 네비게이션**: 위치, 배경, 그림자, 3개 항목 (홈/회의록/Todo) 상세 스펙 정의
- **Desktop 좌측 사이드바**: 로고 영역, 메뉴 리스트, 사용자 정보 영역 상세 스펙 정의
- **상단 헤더**: Mobile/Desktop별 제목, 액션 버튼 배치 가이드
- **공통 에러 메시지 표준 섹션 신규 작성**: 반복 사용되는 에러 메시지를 표준화
- **네트워크 오류**: 자동 재시도 3회 (exponential backoff), 토스트 메시지, 재시도 버튼
- **데이터 로딩 실패**: 스켈레톤 UI 30초, 타임아웃 처리, 재시도 버튼
- **권한 오류**: 401/403 에러 처리, 명확한 안내 메시지
- **인증 오류**: 토큰 만료 자동 갱신, 로그인 리다이렉트
- **입력 검증 오류**: 실시간 인라인 검증, 포커스 이동
- **서버 오류**: 500 에러 에러 ID 제공, 고객센터 안내
- **중복 내용 참조 링크 교체**: 8개 화면에서 반복된 네비게이션/에러 메시지 설명을 공통 섹션 참조로 변경
- 01-로그인, 02-대시보드, 12-회의록목록조회 등
- 예상 파일 크기 감소: 1,500~2,200자 (약 8~10%)
- **목차 업데이트**: 공통 UI 컴포넌트, 공통 에러 메시지 표준 섹션 추가 | ---