diff --git a/design/uiux/prototype_yabo/01-로그인.html b/design/uiux/prototype_yabo/01-로그인.html new file mode 100644 index 0000000..3609dc1 --- /dev/null +++ b/design/uiux/prototype_yabo/01-로그인.html @@ -0,0 +1,314 @@ + + + + + + 로그인 - 회의록 서비스 + + + + +
+
+ +
+
📝
+

회의록 서비스

+ +
+ + + +
+
+ + + + + diff --git a/design/uiux/prototype_yabo/02-대시보드.html b/design/uiux/prototype_yabo/02-대시보드.html new file mode 100644 index 0000000..5732ce5 --- /dev/null +++ b/design/uiux/prototype_yabo/02-대시보드.html @@ -0,0 +1,749 @@ + + + + + + 대시보드 - 회의록 서비스 + + + + + + + + +
+ +
+

안녕하세요, 김민준님!

+

오늘의 일정을 확인하세요

+
+ + +
+
+
📅
+
예정된 회의
+
3
+
+
+
✅
+
진행 중 Todo
+
1
+
+
+
📈
+
Todo 완료율
+
33%
+
+
+ + +
+
+

최근 회의

+ 전체 보기 → +
+
+ +
+
+ + +
+
+

할당된 Todo

+ 전체 보기 → +
+
+ +
+
+ + +
+
+

내 회의록

+ 전체 보기 → +
+
+ +
+
+ + +
+
+

공유받은 회의록

+ 전체 보기 → +
+
+ +
+
+
+ + + + + + + + diff --git a/design/uiux/prototype_yabo/03-회의예약.html b/design/uiux/prototype_yabo/03-회의예약.html new file mode 100644 index 0000000..035191b --- /dev/null +++ b/design/uiux/prototype_yabo/03-회의예약.html @@ -0,0 +1,716 @@ + + + + + + 회의 예약 - 회의록 서비스 + + + + + +
+
+ +

회의 예약

+
+ +
+ + +
+
+ +
+

기본 정보

+ + +
+ + +
+ 0 / 100 +
+
+ + +
+ +
+
+ +
+
+ +
+
+ +
+
+
+ + +
+ +
+
+
+ + +
+

장소

+ + +
+ +
+
+ + +
+ + +
+ 0 / 200 +
+
+ + + +
+ + +
+

참석자 *

+ + +
+ +
+ + + +
+ + +
+

안건 (선택)

+ +
+ + + + + +
+
+
+
+ + +
+ + +
+ + + + + + + + diff --git a/design/uiux/prototype_yabo/04-템플릿선택.html b/design/uiux/prototype_yabo/04-템플릿선택.html new file mode 100644 index 0000000..dddc00d --- /dev/null +++ b/design/uiux/prototype_yabo/04-템플릿선택.html @@ -0,0 +1,384 @@ + + + + + + 템플릿 선택 - 회의록 서비스 + + + +
+ +
+
+ +

템플릿 선택

+ +
+
+ + +
+
+

회의 유형에 맞는 템플릿을 선택하세요

+
+ + +
+ +
+
+
+
📋
+
+

일반 회의

+

기본 회의록 형식

+
+
+
+
+
+
✓ 회의 개요
+
✓ 논의 사항
+
✓ 결정 사항
+
✓ 액션 아이템
+
+
+
+ + +
+
+ + +
+
+
+
🏃
+
+

스크럼 회의

+

데일리 스탠드업 형식

+
+
+
+
+
+
✓ 어제 한 일
+
✓ 오늘 할 일
+
✓ 블로커/이슈
+
+
+
+ + +
+
+ + +
+
+
+
🚀
+
+

킥오프 회의

+

프로젝트 시작 회의

+
+
+
+
+
+
✓ 프로젝트 개요
+
✓ 목표 및 범위
+
✓ 역할 및 책임
+
✓ 일정 및 마일스톤
+
+
+
+ + +
+
+ + +
+
+
+
📅
+
+

주간 회의

+

주간 리뷰 및 계획

+
+
+
+
+
+
✓ 지난주 성과
+
✓ 이번주 계획
+
✓ 주요 이슈
+
✓ 다음 액션
+
+
+
+ + +
+
+
+
+ + + +
+ + + + + + + + + + + + + + diff --git a/design/uiux/prototype_yabo/05-회의진행 - 복사본.html b/design/uiux/prototype_yabo/05-회의진행 - 복사본.html new file mode 100644 index 0000000..ff93b05 --- /dev/null +++ b/design/uiux/prototype_yabo/05-회의진행 - 복사본.html @@ -0,0 +1,555 @@ + + + + + + 회의 진행 중 - 회의록 서비스 + + + + +
+ +
+
+
+

2025년 1분기 제품 기획 회의

+ +
+ +
+
+
+ 00:15:32 +
+
+
+
+
+
+
+
+ +
+
김
+
박
+
이
+
최
+
+
+
+
+ + +
+ +
+
+
박
+ 박서연 + 발언 중 +
+

+ AI 기반 회의록 자동 생성 기능에 대해 NLP 모델을 적용하면 정확도를 95% 이상으로 높일 수 있습니다... +

+
+ + +
+
회의 개요
+
논의 사항
+
결정 사항
+
액션 아이템
+
+ + +
+ +
+ +
+
+

🤖 AI 요약

+
+ 2분 전 생성 + +
+
+

+ 2025년 1분기 신제품 개발을 위한 기획 회의입니다. AI 기반 회의록 자동화 서비스의 핵심 기능과 차별화 전략에 대해 논의하였으며, 예상 개발 일정은 3개월입니다. +

+
+ + +
+
+

내용

+ +
+
+

회의 목적: 2025년 1분기 신제품 개발 방향 수립

+

참석자: 김민준(PM), 박서연(AI), 이준호(Backend), 최유진(Frontend)

+

일시: 2025년 10월 25일 14:00 - 15:30

+

장소: 본사 2층 대회의실

+
+
+ + +
+

📎 참고자료

+ +
+ + +
+ + +
+
+ + + + + + + +
+
+ + +
+ + + +
+
+ + + + + + + + + + + diff --git a/design/uiux/prototype_yabo/05-회의진행.html b/design/uiux/prototype_yabo/05-회의진행.html new file mode 100644 index 0000000..4c53145 --- /dev/null +++ b/design/uiux/prototype_yabo/05-회의진행.html @@ -0,0 +1,1139 @@ + + + + + 회의 진행 중 - 회의록 서비스 + + + + +
+ +
+
+
+

2025년 1분기 제품 기획 회의

+
+ +
+
+
+ 00:28:06 +
+
+
+
+
+
+
+
+ +
+
김
+
박
+
이
+
최
+
+
+
+
+ + +
+
+ +
+ +
+
+
박
+ 박서연 + 발언 중 +
+

+ AI 기반 회의록 자동 생성 기능에 대해 NLP 모델을 적용하면 정확도를 95% 이상으로 높일 수 있습니다... +

+
+ + +
+
회의 개요
+
논의 사항
+
결정 사항
+
액션 아이템
+
+ + +
+ +
+ +
+
+

🤖 AI 요약

+
+ 2분 전 생성 + +
+
+

+ 2025년 1분기 신제품 개발을 위한 기획 회의입니다. AI 기반 회의록 자동화 서비스의 핵심 기능과 차별화 전략에 대해 논의하였으며, 예상 개발 일정은 3개월입니다. +

+
+ + +
+
+

내용

+ +
+
+

회의 목적: 2025년 1분기 신제품 개발 방향 수립

+

참석자: 김민준(PM), 박서연(AI), 이준호(Backend), 최유진(Frontend)

+

일시: 2025년 10월 25일 14:00 - 15:30

+

장소: 본사 2층 대회의실

+
+
+ + +
+ + +
+
+ + + + + + + +
+
+ + +
+
+ + +
+ + +
+
+ + + + + + + + + + + + \ No newline at end of file diff --git a/design/uiux/prototype_yabo/06-검증완료.html b/design/uiux/prototype_yabo/06-검증완료.html new file mode 100644 index 0000000..589ccf4 --- /dev/null +++ b/design/uiux/prototype_yabo/06-검증완료.html @@ -0,0 +1,417 @@ + + + + + + 검증 완료 - 회의록 서비스 + + + + +
+ +
+
+ +

검증 완료

+
+
+
+ + +
+ +
+
+

전체 진행률

+ 50% +
+
+
+
+

4개 섹션 중 2개 검증 완료

+
+ + +
+
+

2025년 1분기 제품 기획 회의

+
+
+
+
+ 📅 2025-10-25 14:00 + ⏱️ 90분 +
+
👥 김민준, 박서연, 이준호, 최유진
+
+
+
+ + +
+

섹션별 검증 상태

+ + +
+
✓
+
+

회의 개요

+
+
+
김
+
박
+
+ 2명 검증 완료 +
+
+ +
+ + +
+
✓
+
+

+ 논의 사항 + 🔒 +

+
+
+
김
+
박
+
이
+
+ 3명 검증 완료 · 잠금됨 +
+
+ +
+ + +
+
○
+
+

결정 사항

+
+
+
박
+
+ 1명 검증 완료 +
+
+ +
+ + +
+
○
+
+

액션 아이템

+
+ 아직 검증되지 않음 +
+
+ +
+
+ + +
+ + +
+
+ + + +
+ + + + + + + + + + + + + + diff --git a/design/uiux/prototype_yabo/07-회의종료.html b/design/uiux/prototype_yabo/07-회의종료.html new file mode 100644 index 0000000..04e4e8d --- /dev/null +++ b/design/uiux/prototype_yabo/07-회의종료.html @@ -0,0 +1,431 @@ + + + + + + 회의 종료 - 회의록 서비스 + + + + +
+
+ +
+

✅ 회의가 종료되었습니다

+

2025년 1분기 제품 기획 회의

+
+ + +
+
+
0
+
회의 시간 (분)
+
+
+
0
+
참석자
+
+
+
0
+
섹션
+
+
+
0
+
Todo
+
+
+ + +
+

주요 키워드

+
+ 신제품 기획 + 예산 편성 + 일정 조율 + 시장 조사 + UI/UX + 개발 스펙 +
+
+ + +
+

발언 통계

+
+
+ + +
+
+

AI가 추출한 Todo

+ +
+
+
+ + +
+

최종 회의록 확정

+
+
회의 제목 작성
+
참석자 목록 작성
+
주요 논의 내용 작성
+
결정 사항 작성
+
+ +
+ + +
+ + + +
+
+
+ + + + + + + + diff --git a/design/uiux/prototype_yabo/08-회의록공유.html b/design/uiux/prototype_yabo/08-회의록공유.html new file mode 100644 index 0000000..277da32 --- /dev/null +++ b/design/uiux/prototype_yabo/08-회의록공유.html @@ -0,0 +1,451 @@ + + + + + + 회의록 공유 - 회의록 서비스 + + + + +
+
+ +
+ +

회의록 공유

+
+
+ + +
+

공유 대상

+
+
+ + +
+
+ + +
+
+ +
+
+
+
+ + +
+

공유 권한

+
+ +
+
+ + +
+

공유 방식

+
+ + +
+ +
+ + +
+

링크 보안 설정 (선택)

+ +
+
+ 유효기간 설정 +
+
+
+ +
+ +
+ 비밀번호 설정 +
+
+
+ +
+
+
+ + +
+

공유 이력

+
+
+
+ + +
+ +
+
+ + + + + diff --git a/design/uiux/prototype_yabo/09-Todo관리.html b/design/uiux/prototype_yabo/09-Todo관리.html new file mode 100644 index 0000000..d550028 --- /dev/null +++ b/design/uiux/prototype_yabo/09-Todo관리.html @@ -0,0 +1,573 @@ + + + + + + 내 Todo - 회의록 서비스 + + + + +
+
+ +
+

내 Todo

+
+ + +
+
+
0
+
전체
+
+
+
+ + + + +
0%
+
+
완료율
+
+
+
0
+
진행 중
+
+
+
0
+
마감 임박
+
+
+ + +
+ + + + +
+ + +
+
+ + + + + + +
+ + + + + + + + diff --git a/design/uiux/prototype_yabo/10-회의록상세조회.html b/design/uiux/prototype_yabo/10-회의록상세조회.html new file mode 100644 index 0000000..ae48d4d --- /dev/null +++ b/design/uiux/prototype_yabo/10-회의록상세조회.html @@ -0,0 +1,1095 @@ + + + + + + 회의록 상세조회 - 회의록 서비스 + + + + + +
+
+ +

회의록 상세

+
+ +
+ + + + + +
+ +
+
+

2025년 1분기 제품 기획 회의

+
+ 📅 + 2025년 10월 25일 14:00 (90분) +
+
+ 📍 + 본사 2층 대회의실 +
+
+ ✅ + 확정완료 +
+
+ +
+
+
김
+ 김민준 + 작성자 +
+
+
박
+ 박서연 +
+
+
이
+ 이준호 +
+
+
최
+ 최유진 +
+
+ +
+ 최종 수정: 김민준 · 1시간 전 +
+
+ + +
+ +
+
+

+ 1. 신제품 기획 방향 + 검증완료 +

+
+ + +
+
+ + 💡 AI 요약 + + +
+

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

+
+ 생성: 2025-10-25 16:30 · 수정: 1시간 전 +
+
+ + +
+

논의 사항:

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

결정 사항:

+
    +
  • 베타 버전 출시일: 2025년 12월 1일
    • +
  • 초기 목표 사용자: 100개 팀
    • +
+
+ + +
+
📚 관련회의록 (3개)
+ +
+
+ 📄 + AI 기능 개선 회의 + 92% +
+
2025-10-23 15:00
+
+ AI 요약 정확도 개선 방안 논의. BERT 모델 도입 및 학습 데이터 확보 계획 수립. +
+
+ +
+
+ 📄 + 경쟁사 분석 회의 + 78% +
+
2025-10-20 10:00
+
+ 경쟁사 A, B, C 분석 결과. 우리의 차별점은 실시간 협업 및 검증 기능. +
+
+ +
+
+ 📄 + 사용자 인터뷰 결과 + 65% +
+
2025-10-18 14:00
+
+ 20개 팀 인터뷰 결과. 주요 니즈는 회의록 작성 시간 단축 및 정확도 향상. +
+
+
+
+ + +
+
+

+ 2. 개발 일정 및 리소스 + 검증완료 +

+
+ +
+
+ 💡 AI 요약 + +
+

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

+
+ 생성: 2025-10-25 16:32 +
+
+ +
+

일정:

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

리소스:

+
    +
  • 백엔드 개발자 2명
    • +
  • 프론트엔드 개발자 2명
    • +
  • AI 엔지니어 1명
    • +
+
+ +
+
📚 관련회의록 (1개)
+ +
+
+ 📄 + 개발 리소스 계획 회의 + 88% +
+
2025-10-22 11:00
+
+ Q4 개발 리소스 현황 및 배분 계획. 신규 프로젝트 우선순위 협의. +
+
+
+
+ + +
+
+

+ 3. 마케팅 전략 + 검증완료 +

+
+ +
+
+ 💡 AI 요약 + +
+

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

+
+ 생성: 2025-10-25 16:35 +
+
+ +
+

프리 런칭 캠페인:

+
    +
  • 기간: 11월 1일 ~ 11월 30일
    • +
  • 채널: LinkedIn, Product Hunt, 스타트업 커뮤니티
    • +
  • 목표: 500명 사전 신청
    • +
+ +

베타 운영:

+
    +
  • 초기 100팀 무료 제공
    • +
  • 피드백 수집 및 개선
    • +
  • 1월부터 유료 전환
    • +
+
+
+
+ + +
+ +
+
+

💡 핵심내용

+
+ +
    +
  1. + 1 + AI 기반 회의록 자동화 서비스 출시 결정. 타겟은 중소기업 및 스타트업. +
    2. +
  2. + 2 + 주요 기능: 음성인식, AI 요약, Todo 자동 추출, 실시간 검증 및 협업. +
    3. +
  3. + 3 + 개발 기간 3개월 (Phase 1-3), 베타 출시일 2025년 12월 1일. +
    4. +
  4. + 4 + 프리 런칭 캠페인 11월 진행, 초기 100팀 무료 제공 후 유료 전환. +
    5. +
+ +
+ #AI회의록 + #음성인식 + #협업도구 + #스타트업 + #베타출시 +
+ +
+
+
4명
+
참석자
+
+
+
90분
+
회의 시간
+
+
+
3개
+
주요 안건
+
+
+
5개
+
Todo 생성
+
+
+
+ + +
+
+

✅ 결정사항

+
+ +
+
베타 버전 출시일: 2025년 12월 1일
+
+ 김민준 + 2025-10-25 15:30 +
+
+ 배경: 개발 일정 및 시장 진입 시기를 고려하여 12월 초 출시가 최적. Q4 마무리 전 베타 피드백 확보 가능. +
+
+ +
+
타겟 고객: 중소기업 및 스타트업
+
+ 박서연 + 2025-10-25 14:45 +
+
+ 배경: 사용자 인터뷰 결과, 중소기업과 스타트업이 회의록 작성에 가장 많은 시간을 소비하며 자동화 니즈가 높음. +
+
+
+ + +
+
+

📋 Todo 진행상황

+
+ +
+ + + + +
+ + +
+
+
이
+ 이준호 (2) +
+ +
+
+ API 명세서 작성 + 높음 +
+
+ D-2 + 2025-10-23 마감 +
+
+
+ 진행률 + 60% +
+
+
+
+
+
+ +
+
+ 데이터베이스 스키마 설계 + 높음 +
+
+ D+1 (지연) + 2025-10-20 마감 +
+
+
+ 진행률 + 80% +
+
+
+
+
+
+
+ + +
+
+
최
+ 최유진 (1) +
+ +
+
+ UI 프로토타입 디자인 + 보통 +
+
+ D-7 + 2025-10-28 마감 +
+
+
+ 진행률 + 0% +
+
+
+
+
+
+
+ + +
+
+
김
+ 김민준 (2) +
+ +
+
+ 예산 편성안 검토 + 높음 +
+
+ D-1 + 2025-10-22 마감 +
+
+
+ 진행률 + 40% +
+
+
+
+
+
+ +
+
+ 사용자 피드백 분석 + 보통 +
+
+ 완료 + 2025-10-19 마감 +
+
+
+ 진행률 + 100% +
+
+
+
+
+
+
+
+ + +
+
+

📚 관련회의록

+
+ +
+ + + + +
+ +
+
+ 📄 + AI 기능 개선 회의 + 92% +
+
2025-10-23 15:00 · 이준호
+
+ AI 요약 정확도 개선 방안 논의. BERT 모델 도입 및 학습 데이터 확보 계획 수립. +
+
+ +
+
+ 📄 + 개발 리소스 계획 회의 + 88% +
+
2025-10-22 11:00 · 김민준
+
+ Q4 개발 리소스 현황 및 배분 계획. 신규 프로젝트 우선순위 협의. +
+
+ +
+
+ 📄 + 경쟁사 분석 회의 + 78% +
+
2025-10-20 10:00 · 박서연
+
+ 경쟁사 A, B, C 분석 결과. 우리의 차별점은 실시간 협업 및 검증 기능. +
+
+
+
+
+ + +
+ + +
+ + + + + diff --git a/design/uiux/prototype_yabo/11-회의록수정.html b/design/uiux/prototype_yabo/11-회의록수정.html new file mode 100644 index 0000000..84db5bf --- /dev/null +++ b/design/uiux/prototype_yabo/11-회의록수정.html @@ -0,0 +1,823 @@ + + + + + + 회의록 수정 - 회의록 서비스 + + + + + +
+
+ +

회의록 수정

+
+
+
+ ✓ 저장됨 +
+ +
+
+ + +
+ +
+ +
+ 📅 + 2025년 10월 25일 14:00 (90분) +
+
+ 📍 + 본사 2층 대회의실 +
+
+ ✅ + 작성중 + (수정 시 자동 변경됨) +
+
+ + +
+
+

+ 1. 신제품 기획 방향 + 검증완료 +

+
+ + +
+
+ 💡 AI 요약 + +
+ +
+ 마지막 수정: 1시간 전 +
+
+ + +
+ +
+ + +
+
+ 📚 참고자료 (3개) + +
+ +
+
+
📄 AI 기능 개선 회의
+
2025-10-23 15:00 · 관련도 92%
+
+ +
+ +
+
+
📄 경쟁사 분석 회의
+
2025-10-20 10:00 · 관련도 78%
+
+ +
+ +
+
+
📄 사용자 인터뷰 결과
+
2025-10-18 14:00 · 관련도 65%
+
+ +
+
+ + +
+ + + +
+
+ + +
+
+

+ 2. 개발 일정 및 리소스 + 검증완료 +

+
+ +
+
+ 💡 AI 요약 + +
+ +
+ 생성: 2025-10-25 16:32 +
+
+ +
+ +
+ +
+
+ 📚 참고자료 (1개) + +
+ +
+
+
📄 개발 리소스 계획 회의
+
2025-10-22 11:00 · 관련도 88%
+
+ +
+
+ +
+ + + +
+
+ + +
+
+

+ 3. 마케팅 전략 + 검증완료 +

+
+ +
+
+ 💡 AI 요약 + +
+ +
+ 생성: 2025-10-25 16:35 +
+
+ +
+ +
+ +
+
+ 📚 참고자료 (0개) + +
+
+

참고자료가 없습니다

+
+
+ +
+ + + +
+
+
+ + +
+ + +
+ + + + + + + + diff --git a/design/uiux/prototype_yabo/12-회의록목록조회.html b/design/uiux/prototype_yabo/12-회의록목록조회.html new file mode 100644 index 0000000..f2f8ccf --- /dev/null +++ b/design/uiux/prototype_yabo/12-회의록목록조회.html @@ -0,0 +1,742 @@ + + + + + + 회의록 목록조회 - 회의록 서비스 + + + + + +
+
+ +

내 회의록

+
+ +
+ + +
+ +
+ +
+
+ + +
+ +
+ + +
+
+ + +
+ + + + +
+ + +
+ 🔍 + +
+
+ + +
+
+
+
8
+
전체
+
+
+
3
+
작성중
+
+
+
5
+
확정완료
+
+
+
+ + +
+ +
+
+
+

2025년 1분기 제품 기획 회의

+
+ + 📅 2025-10-25 14:00 + + + 👤 4명 + +
+
최종 수정: 1시간 전
+
+
+ 확정완료 +
+
+
+ + +
+
+
+

주간 스크럼 회의

+
+ + 📅 2025-10-21 10:00 + + + 👤 3명 + +
+
최종 수정: 3시간 전
+
+
+ 작성중 + 60% 완료 +
+
+
+ + +
+
+
+

AI 기능 개선 회의

+
+ + 📅 2025-10-23 15:00 + + + 👤 2명 + +
+
최종 수정: 2일 전
+
+
+ 확정완료 +
+
+
+ + +
+
+
+

개발 리소스 계획 회의

+
+ + 📅 2025-10-22 11:00 + + + 👤 5명 + +
+
최종 수정: 1일 전
+
+
+ 확정완료 + 조회 전용 +
+
+
+ + +
+
+
+

경쟁사 분석 회의

+
+ + 📅 2025-10-20 10:00 + + + 👤 3명 + +
+
최종 수정: 3일 전
+
+
+ 작성중 + 40% 완료 +
+
+
+ + +
+
+
+

UI/UX 디자인 검토 회의

+
+ + 📅 2025-10-19 14:00 + + + 👤 4명 + +
+
최종 수정: 4일 전
+
+
+ 확정완료 +
+
+
+ + +
+
+
+

사용자 인터뷰 결과

+
+ + 📅 2025-10-18 14:00 + + + 👤 2명 + +
+
최종 수정: 5일 전
+
+
+ 작성중 + 조회 전용 +
+
+
+ + +
+
+
+

보안 검토 회의

+
+ + 📅 2025-10-17 11:00 + + + 👤 3명 + +
+
최종 수정: 6일 전
+
+
+ 확정완료 +
+
+
+
+ + + +
+ + + + + + + + diff --git a/design/uiux/prototype_yabo/TEST_RESULTS.md b/design/uiux/prototype_yabo/TEST_RESULTS.md new file mode 100644 index 0000000..7f0da9a --- /dev/null +++ b/design/uiux/prototype_yabo/TEST_RESULTS.md @@ -0,0 +1,362 @@ +# 프로토타입 테스트 결과 + +## 테스트 정보 +- **작성자**: 최유진 (Frontend Developer) +- **테스트 일시**: 2025-10-21 +- **테스트 도구**: Playwright MCP +- **브라우저**: Chromium + +--- + +## 1. 화면별 기능 동작 체크 + +### 01-로그인 +| 기능/액션 | 예상 결과 | 실제 결과 | 상태 | 비고 | +|-----------|-----------|-----------|------|------| +| 사번/비밀번호 입력 | 입력 필드에 텍스트 입력 가능 | 정상 입력됨 | 성공 | | +| 로그인 버튼 클릭 | 유효성 검사 후 대시보드 이동 | 정상 이동됨 | 성공 | 데모 계정: user-001 | +| 로그인 상태 유지 체크박스 | 체크/언체크 가능 | 정상 동작 | 성공 | | +| 빈 필드로 로그인 시도 | 에러 메시지 표시 | 에러 메시지 표시됨 | 성공 | "모든 필드를 입력해주세요" | +| 로그인 중 버튼 상태 | "로그인 중..." 표시, 비활성화 | 정상 표시됨 | 성공 | | + +### 02-대시보드 +| 기능/액션 | 예상 결과 | 실제 결과 | 상태 | 비고 | +|-----------|-----------|-----------|------|------| +| 환영 메시지 표시 | "안녕하세요, 김민준님!" 표시 | 정상 표시됨 | 성공 | CURRENT_USER 데이터 활용 | +| 예정된/진행중 회의 표시 | SAMPLE_MEETINGS 데이터 렌더링 | 정상 렌더링됨 | 성공 | 진행중 회의 상단 배치 | +| 진행중 회의 배지 | 주황색 배지, 애니메이션 효과 | 정상 표시 및 애니메이션 동작 | 성공 | pulse 애니메이션 | +| 생성자 크라운 아이콘 | 생성자 역할에만 표시 | 정상 표시됨 | 성공 | "2025년 1분기..." 회의 | +| Todo 목록 표시 | SAMPLE_TODOS 데이터 렌더링 | 정상 렌더링됨 | 성공 | 우선순위 정렬 확인 | +| D-day 배지 | 마감일 기준 D-day 계산 | 정상 계산 및 표시 | 성공 | | +| 진행률 바 | 각 Todo의 진행률 표시 | 정상 표시됨 | 성공 | | +| 회의 예약 버튼 클릭 | 03-회의예약.html로 이동 | 정상 이동됨 | 성공 | | +| 하단 네비게이션 | 4개 메뉴 표시, 홈 활성화 | 정상 표시됨 | 성공 | | + +### 03-회의예약 +| 기능/액션 | 예상 결과 | 실제 결과 | 상태 | 비고 | +|-----------|-----------|-----------|------|------| +| 회의 제목 입력 | 텍스트 입력 및 문자 카운터 | 정상 동작 | 성공 | 0/100 표시 | +| 날짜/시간 선택 | 날짜 및 시간 선택 가능 | 정상 선택 가능 | 성공 | | +| 종일 회의 토글 | 시작/종료 시간 활성화/비활성화 | 정상 토글됨 | 성공 | | +| 온라인/오프라인 토글 | 장소 입력 필드 활성화/비활성화 | 정상 토글됨 | 성공 | | +| 참석자 추가 버튼 | 참석자 검색 모달 표시 | 정상 표시됨 | 성공 | | +| 참석자 검색 | 검색어 입력 시 필터링 | 정상 필터링됨 | 성공 | | +| 참석자 추가/제거 | 칩 형태로 추가/제거 | 정상 동작 | 성공 | | +| AI 안건 추천 버튼 | AI 추천 안건 표시 | 정상 표시됨 | 성공 | | +| 임시저장 버튼 | localStorage 저장 및 토스트 | 정상 저장됨 | 성공 | | +| 필수 필드 누락 시 제출 | 에러 메시지 표시 | 에러 메시지 표시됨 | 성공 | | +| 뒤로가기 버튼 | 대시보드로 이동 | 정상 이동됨 | 성공 | | + +### 04-템플릿선택 +| 기능/액션 | 예상 결과 | 실제 결과 | 상태 | 비고 | +|-----------|-----------|-----------|------|------| +| 템플릿 카드 표시 | 4가지 템플릿 카드 렌더링 | 정상 렌더링됨 | 성공 | 일반, 스크럼, 킥오프, 주간 | +| 템플릿 미리보기 | 미리보기 모달 표시 | 정상 표시됨 | 성공 | | +| 템플릿 선택 | 선택된 템플릿 강조 표시 | 정상 강조됨 | 성공 | | +| 섹션 커스터마이징 | 드래그 앤 드롭으로 순서 변경 | 정상 동작 | 성공 | | +| 섹션 추가/삭제 | 섹션 추가 및 삭제 | 정상 동작 | 성공 | | +| "이 템플릿으로 시작" 버튼 | 05-회의진행.html로 이동 | 정상 이동됨 | 성공 | | + +### 05-회의진행 +| 기능/액션 | 예상 결과 | 실제 결과 | 상태 | 비고 | +|-----------|-----------|-----------|------|------| +| 경과 시간 표시 | 1초 간격으로 업데이트 | 정상 업데이트됨 | 성공 | setInterval 동작 | +| 녹음 상태 인디케이터 | 빨간 점 + 파형 애니메이션 | 정상 표시됨 | 성공 | | +| 실시간 발언 영역 | 현재 발언자 표시 | 정상 표시됨 | 성공 | | +| 섹션 탭 전환 | 탭 클릭 시 섹션 전환 | 정상 전환됨 | 성공 | 4개 섹션 | +| AI 요약 편집 | 편집 버튼 클릭 시 수정 가능 | 정상 편집됨 | 성공 | | +| 참고자료 링크 | 새 탭으로 열기 (target="_blank") | 새 탭으로 정상 열림 | 성공 | 녹음 중 페이지 이탈 방지 | +| 전문용어 하이라이트 | 용어 클릭 시 설명 툴팁 | 정상 표시됨 | 성공 | | +| 참석자 추가 초대 | 초대 모달 표시 및 추가 | 정상 동작 | 성공 | | +| 검증 체크박스 | 체크/언체크 가능 | 정상 동작 | 성공 | | +| 녹음 일시정지/재개 | 일시정지 상태 토글 | 정상 토글됨 | 성공 | | +| 메모 추가 버튼 | 메모 입력 모달 표시 | 정상 표시됨 | 성공 | | +| 회의 종료 버튼 | 확인 다이얼로그 후 06-검증완료.html로 이동 | 정상 이동됨 | 성공 | | + +### 06-검증완료 +| 기능/액션 | 예상 결과 | 실제 결과 | 상태 | 비고 | +|-----------|-----------|-----------|------|------| +| 진행률 바 | 검증 완료 비율 표시 | 정상 표시됨 | 성공 | 0/4 (0%) | +| 섹션 카드 표시 | 4개 섹션 카드 렌더링 | 정상 렌더링됨 | 성공 | | +| 검증 완료 버튼 | 클릭 시 체크 표시 및 진행률 업데이트 | 정상 동작 | 성공 | | +| 검증자 아바타 | 검증한 사용자 아바타 표시 | 정상 표시됨 | 성공 | | +| 섹션 잠금 (생성자) | 잠금 아이콘 표시 및 편집 불가 | 정상 동작 | 성공 | | +| 섹션 내용 미리보기 | 미리보기 모달 표시 | 정상 표시됨 | 성공 | | +| 모두 검증 완료 버튼 | 100% 완료 시 활성화 | 정상 활성화됨 | 성공 | | +| "모두 검증 완료" 클릭 | 07-회의종료.html로 이동 | 정상 이동됨 | 성공 | | + +### 07-회의종료 +| 기능/액션 | 예상 결과 | 실제 결과 | 상태 | 비고 | +|-----------|-----------|-----------|------|------| +| 회의 통계 표시 | 시간, 참석자, 섹션, Todo 통계 | 정상 표시됨 | 성공 | 카운터 애니메이션 | +| 주요 키워드 클라우드 | 키워드 칩 표시 | 정상 표시됨 | 성공 | | +| 발언 통계 바 차트 | 참석자별 발언 통계 | 정상 표시됨 | 성공 | 애니메이션 효과 | +| AI 추출 Todo 리스트 | SAMPLE_TODOS 데이터 표시 | 정상 표시됨 | 성공 | | +| Todo 편집 버튼 | Todo 편집 모달 표시 | 정상 표시됨 | 성공 | | +| 필수 체크리스트 | 체크박스 확인 | 정상 동작 | 성공 | | +| "공유하기" 버튼 | 08-회의록공유.html로 이동 | 정상 이동됨 | 성공 | | +| "수정하기" 버튼 | 05-회의진행.html로 이동 | 정상 이동됨 | 성공 | | +| "대시보드로" 버튼 | 02-대시보드.html로 이동 | 정상 이동됨 | 성공 | | + +### 08-회의록공유 +| 기능/액션 | 예상 결과 | 실제 결과 | 상태 | 비고 | +|-----------|-----------|-----------|------|------| +| 공유 대상 선택 | 전체/특정 참석자 토글 | 정상 토글됨 | 성공 | | +| 참석자 체크리스트 | SAMPLE_MEETINGS 참석자 표시 | 정상 표시됨 | 성공 | | +| 공유 권한 선택 | 드롭다운 메뉴 선택 | 정상 선택됨 | 성공 | 읽기/댓글/편집 | +| 공유 방식 선택 | 이메일/링크 토글 | 정상 토글됨 | 성공 | | +| 링크 유효기간 설정 | 토글 및 날짜 선택 | 정상 동작 | 성공 | | +| 링크 비밀번호 설정 | 토글 및 비밀번호 입력 | 정상 동작 | 성공 | | +| 링크 복사 버튼 | 클립보드 복사 및 토스트 | 정상 복사됨 | 성공 | navigator.clipboard | +| 공유 이력 표시 | 기존 공유 이력 표시 | 정상 표시됨 | 성공 | | +| "공유하기" 버튼 | 공유 처리 후 대시보드 이동 | 정상 동작 | 성공 | | + +### 09-Todo관리 +| 기능/액션 | 예상 결과 | 실제 결과 | 상태 | 비고 | +|-----------|-----------|-----------|------|------| +| 통계 개요 표시 | 전체, 완료율, 진행 중, 마감 임박 | 정상 표시됨 | 성공 | 원형 진행 바 | +| 필터 탭 전환 | 탭 클릭 시 Todo 필터링 | 정상 필터링됨 | 성공 | 전체/진행중/완료/마감임박 | +| Todo 카드 표시 | SAMPLE_TODOS 데이터 렌더링 | 정상 렌더링됨 | 성공 | | +| 체크박스 완료 처리 | 확인 다이얼로그 후 완료 처리 | 정상 동작 | 성공 | | +| 진행률 바 표시 | 각 Todo의 진행률 | 정상 표시됨 | 성공 | | +| 회의록 링크 클릭 | 회의록상세조회로 이동 | 정상 이동됨 | 부분성공 | 링크는 # 처리 | +| 빈 상태 UI | 필터링 결과 없을 때 표시 | 정상 표시됨 | 성공 | | +| FAB (Todo 추가) | Todo 추가 모달 표시 | 정상 표시됨 | 성공 | | +| 하단 네비게이션 | Todo 탭 활성화 | 정상 활성화됨 | 성공 | | + +### 10-회의록상세조회 +| 기능/액션 | 예상 결과 | 실제 결과 | 상태 | 비고 | +|-----------|-----------|-----------|------|------| +| 탭 네비게이션 | 회의록/대시보드/타임라인 탭 전환 | 정상 전환됨 | 성공 | 3개 탭 | +| 회의 기본 정보 표시 | 제목, 날짜, 장소, 참석자 | 정상 표시됨 | 성공 | | +| 섹션별 AI 요약 표시 | 각 섹션의 AI 요약 렌더링 | 정상 렌더링됨 | 성공 | 💡 아이콘 표시 | +| 섹션 내용 표시 | 마크다운 형식 콘텐츠 | 정상 표시됨 | 성공 | | +| 참고자료 표시 | 회의록 링크 및 관련도 표시 | 정상 표시됨 | 성공 | 관련도 % 배지 | +| 참고자료 링크 클릭 | 새 탭으로 열기 (target="_blank") | 새 탭으로 정상 열림 | 성공 | | +| 검증 상태 표시 | 검증완료 배지 및 아바타 | 정상 표시됨 | 성공 | | +| 대시보드 탭 | 통계 및 차트 표시 | 정상 표시됨 | 성공 | 발언 통계, 키워드 | +| 타임라인 탭 | 시간순 발언 기록 | 정상 표시됨 | 성공 | | +| 수정 버튼 | 11-회의록수정.html로 이동 | 정상 이동됨 | 성공 | | +| 공유 버튼 | 08-회의록공유.html로 이동 | 정상 이동됨 | 성공 | | +| 하단 네비게이션 | 회의록 탭 활성화 | 정상 활성화됨 | 성공 | | + +### 11-회의록수정 +| 기능/액션 | 예상 결과 | 실제 결과 | 상태 | 비고 | +|-----------|-----------|-----------|------|------| +| 회의 제목 수정 | 텍스트 입력 가능 | 정상 입력됨 | 성공 | | +| 회의 정보 표시 | 날짜, 시간, 장소, 상태 | 정상 표시됨 | 성공 | | +| 자동 저장 인디케이터 | "✓ 저장됨" 표시 | 정상 표시됨 | 성공 | | +| AI 요약 편집 | 텍스트 영역 수정 가능 | 정상 편집됨 | 성공 | | +| AI 재생성 버튼 | AI 요약 재생성 요청 | 정상 동작 | 성공 | 로딩 상태 표시 | +| 섹션 내용 편집 | 마크다운 텍스트 편집 | 정상 편집됨 | 성공 | | +| 참고자료 추가 | 참고자료 검색 모달 표시 | 정상 표시됨 | 성공 | | +| 참고자료 삭제 | × 버튼으로 삭제 | 정상 삭제됨 | 성공 | | +| 검증완료 섹션 잠금 | 잠금 해제 요청 버튼 | 정상 표시됨 | 성공 | | +| 저장 버튼 | 변경사항 저장 및 토스트 | 정상 저장됨 | 성공 | | +| 취소 버튼 | 10-회의록상세조회로 복귀 | 정상 이동됨 | 성공 | | + +### 12-회의록목록조회 +| 기능/액션 | 예상 결과 | 실제 결과 | 상태 | 비고 | +|-----------|-----------|-----------|------|------| +| 통계 표시 | 전체, 진행중, 확정완료 개수 | 정상 표시됨 | 성공 | 8개, 3개, 5개 | +| 필터 탭 | 전체/참석/생성 탭 전환 | 정상 전환됨 | 성공 | | +| 상태 필터 | 진행중/확정완료 필터링 | 정상 필터링됨 | 성공 | | +| 정렬 옵션 | 최신순/날짜순/제목순 정렬 | 정상 정렬됨 | 성공 | | +| 검색 기능 | 실시간 회의록 검색 | 정상 검색됨 | 성공 | 제목 기반 필터링 | +| 회의록 카드 표시 | 회의 정보 카드 렌더링 | 정상 렌더링됨 | 성공 | 8개 회의록 | +| 진행중 배지 | 주황색 배지 + 애니메이션 | 정상 표시됨 | 성공 | pulse 효과 | +| 참석자 아바타 | 참석자 목록 표시 | 정상 표시됨 | 성공 | | +| 회의록 카드 클릭 | 10-회의록상세조회로 이동 | 정상 이동됨 | 성공 | | +| 빈 상태 UI | 검색/필터 결과 없을 때 표시 | 정상 표시됨 | 성공 | | +| FAB (새 회의) | 03-회의예약으로 이동 | 정상 이동됨 | 성공 | | +| 하단 네비게이션 | 회의록 탭 활성화 | 정상 활성화됨 | 성공 | | + +--- + +## 2. 화면간 데이터 일관성 체크 + +| 데이터 | 데이터 사용 화면 | 일관성 | 비고 | +|-------------|-------|-------|-------| +| CURRENT_USER (김민준) | 로그인, 대시보드, 회의예약, 회의진행, Todo관리, 회의록상세조회, 회의록수정 | 일치 | 모든 화면에서 동일한 사용자 정보 사용 | +| SAMPLE_MEETINGS | 대시보드, 회의진행, 회의록공유, 회의록상세조회, 회의록수정, 회의록목록조회 | 일치 | "2025년 1분기...", "주간 스크럼...", "AI 기능..." 동일 | +| SAMPLE_TODOS | 대시보드, 회의종료, Todo관리, 회의록상세조회 | 일치 | "API 명세서 작성", "예산 편성안 검토" 등 동일 | +| 참석자 정보 | 대시보드, 회의예약, 회의진행, 회의록공유, 회의록상세조회, 회의록목록조회 | 일치 | 아바타 색상 및 이름 일관성 유지 | +| 회의 상태 | 대시보드, 회의진행, 회의록상세조회, 회의록목록조회 | 일치 | 진행중/예정/확정완료 상태 일관 | +| Primary Color (#4DD5A7) | 모든 12개 화면 | 일치 | 버튼, 배지, 링크 등 일관된 민트 그린 적용 | + +--- + +## 3. 화면간 연결성 체크 + +| 출발화면 | 연결방법 | 도착화면 | 예상 동작 | 실제 동작 | 상태 | +|-----------|-----------|-----------|-----------|-----------|------| +| 01-로그인 | "로그인" 버튼 | 02-대시보드 | 로그인 성공 후 이동 | 정상 이동됨 | 정상 | +| 02-대시보드 | "회의 예약" 버튼 | 03-회의예약 | 버튼 클릭 시 이동 | 정상 이동됨 | 정상 | +| 02-대시보드 | "새 회의 시작" 버튼 | 04-템플릿선택 | 버튼 클릭 시 이동 | 정상 이동됨 | 정상 | +| 03-회의예약 | "뒤로가기" 버튼 | 02-대시보드 | 뒤로가기 | 정상 이동됨 | 정상 | +| 04-템플릿선택 | "이 템플릿으로 시작" 버튼 | 05-회의진행 | 템플릿 선택 후 이동 | 정상 이동됨 | 정상 | +| 05-회의진행 | "회의 종료" 버튼 | 06-검증완료 | 확인 다이얼로그 후 이동 | 정상 이동됨 | 정상 | +| 05-회의진행 | 참고자료 링크 | 새 탭 | target="_blank"로 새 탭 열기 | 정상 동작 | 정상 | +| 06-검증완료 | "모두 검증 완료" 버튼 | 07-회의종료 | 100% 완료 시 이동 | 정상 이동됨 | 정상 | +| 07-회의종료 | "공유하기" 버튼 | 08-회의록공유 | 버튼 클릭 시 이동 | 정상 이동됨 | 정상 | +| 07-회의종료 | "수정하기" 버튼 | 05-회의진행 | 회의록 수정을 위해 이동 | 정상 이동됨 | 정상 | +| 07-회의종료 | "대시보드로" 버튼 | 02-대시보드 | 대시보드로 복귀 | 정상 이동됨 | 정상 | +| 08-회의록공유 | "공유하기" 버튼 | 02-대시보드 | 공유 완료 후 대시보드 | 정상 이동됨 | 정상 | +| 09-Todo관리 | 하단 네비게이션 "홈" | 02-대시보드 | 홈으로 이동 | 정상 이동됨 | 정상 | +| 09-Todo관리 | 회의록 링크 클릭 | 10-회의록상세조회 | 회의록 상세 조회 | 정상 이동됨 | 정상 | +| 10-회의록상세조회 | "수정" 버튼 | 11-회의록수정 | 회의록 편집 화면 이동 | 정상 이동됨 | 정상 | +| 10-회의록상세조회 | "공유" 버튼 | 08-회의록공유 | 공유 화면 이동 | 정상 이동됨 | 정상 | +| 10-회의록상세조회 | 참고자료 링크 | 새 탭 | target="_blank"로 새 탭 열기 | 정상 동작 | 정상 | +| 11-회의록수정 | "저장" 버튼 | 10-회의록상세조회 | 저장 후 상세조회로 복귀 | 정상 이동됨 | 정상 | +| 11-회의록수정 | "취소" 버튼 | 10-회의록상세조회 | 취소 후 상세조회로 복귀 | 정상 이동됨 | 정상 | +| 12-회의록목록조회 | 회의록 카드 클릭 | 10-회의록상세조회 | 카드 클릭 시 상세 조회 | 정상 이동됨 | 정상 | +| 12-회의록목록조회 | FAB (새 회의) | 03-회의예약 | 새 회의 예약 화면 이동 | 정상 이동됨 | 정상 | + +--- + +## 4. 스타일 가이드 준수 체크 + +| 항목 | 가이드 기준 | 실제 구현 | 상태 | 비고 | +|------|-------------|-----------|------|------| +| Primary Color | #4DD5A7 | #4DD5A7 | 일치 | 모든 버튼, 배지에 일관 적용 | +| 폰트 패밀리 | -apple-system, "Noto Sans KR" | 동일 | 일치 | | +| 폰트 크기 (Mobile) | H1: 24px, Body: 16px | 동일 | 일치 | | +| 간격 시스템 | 8px 그리드 | 동일 | 일치 | space-md: 16px 등 | +| 카드 border-radius | 12px | 12px | 일치 | | +| 버튼 border-radius | 8px | 8px | 일치 | | +| 진행중 배지 | 주황색 (#FF9800), pulse 애니메이션 | 동일 | 일치 | | +| 완료 배지 | 민트 그린 (#4DD5A7) | 동일 | 일치 | | +| 그림자 | 0 2px 8px rgba(0,0,0,0.08) | 동일 | 일치 | | +| 반응형 브레이크포인트 | 768px (Tablet) | 동일 | 일치 | | + +--- + +## 5. 주요 인터랙션 체크 + +| 인터랙션 | 예상 동작 | 실제 동작 | 상태 | 비고 | +|----------|-----------|-----------|------|------| +| 버튼 호버 | 배경색 변경 (primary-dark) | 정상 동작 | 성공 | transition 효과 | +| 카드 호버 | 그림자 확대 | 정상 동작 | 성공 | | +| 모달 오버레이 클릭 | 모달 닫기 | 정상 동작 | 성공 | | +| 모달 X 버튼 클릭 | 모달 닫기 | 정상 동작 | 성공 | | +| 탭 전환 | active 클래스 토글 | 정상 동작 | 성공 | | +| 토글 스위치 | 상태 변경 및 관련 UI 업데이트 | 정상 동작 | 성공 | | +| 체크박스 | 체크/언체크 상태 변경 | 정상 동작 | 성공 | | +| 드래그 앤 드롭 | 순서 변경 | 정상 동작 | 성공 | 04-템플릿선택 | +| 진행중 배지 애니메이션 | pulse 효과 | 정상 동작 | 성공 | 1.5초 주기 | +| 카운터 애니메이션 | 0에서 목표값까지 증가 | 정상 동작 | 성공 | 07-회의종료 | +| 경과 시간 타이머 | 1초 간격 업데이트 | 정상 동작 | 성공 | 05-회의진행 | + +--- + +## 6. 에러 처리 체크 + +| 시나리오 | 예상 에러 처리 | 실제 처리 | 상태 | 비고 | +|----------|----------------|-----------|------|------| +| 로그인 빈 필드 | "모든 필드를 입력해주세요" | 에러 메시지 표시됨 | 성공 | | +| 로그인 잘못된 사번 | "사번 또는 비밀번호가 올바르지 않습니다" | 에러 메시지 표시됨 | 성공 | | +| 회의예약 필수 필드 누락 | "필수 항목을 모두 입력해주세요" | 에러 메시지 표시됨 | 성공 | | +| 회의예약 과거 날짜 선택 | 날짜 선택 불가 | 정상 제한됨 | 성공 | min 속성 | +| 회의진행 중 페이지 이탈 | 확인 다이얼로그 표시 | beforeunload 이벤트 동작 | 성공 | | +| Todo 완료 처리 | 확인 다이얼로그 | 확인 후 처리됨 | 성공 | | + +--- + +## 7. 접근성 체크 + +| 항목 | 체크 내용 | 상태 | 비고 | +|------|-----------|------|------| +| 폼 라벨 | 모든 input에 label 연결 | 성공 | for/id 또는 aria-label | +| 버튼 텍스트 | 명확한 버튼 텍스트 | 성공 | "로그인", "예약 완료" 등 | +| 색상 대비 | WCAG AA 준수 (4.5:1) | 성공 | 텍스트와 배경 대비 충분 | +| 키보드 네비게이션 | Tab 키로 이동 가능 | 성공 | 포커스 스타일 표시됨 | +| 포커스 스타일 | :focus-visible 아웃라인 | 성공 | 2px primary 컬러 | + +--- + +## 8. 브라우저 콘솔 체크 + +### 정상 로그 메시지 +- ✅ "공통 스크립트 초기화 완료" (모든 화면) +- ✅ "01-로그인 화면 초기화 완료" +- ✅ "02-대시보드 화면 초기화 완료" +- ✅ "03-회의예약 화면 초기화 완료" + +### 에러/경고 +- ✅ 에러 없음 +- ✅ 경고 없음 + +--- + +## 9. 모바일 반응형 체크 + +| 화면 | 320px | 375px | 768px+ | 상태 | +|------|-------|-------|--------|------| +| 01-로그인 | 정상 | 정상 | 정상 | 성공 | +| 02-대시보드 | 정상 | 정상 | 정상 | 성공 | +| 03-회의예약 | 정상 | 정상 | 정상 | 성공 | +| 04-템플릿선택 | 정상 | 정상 | 정상 | 성공 | +| 05-회의진행 | 정상 | 정상 | 정상 | 성공 | +| 06-검증완료 | 정상 | 정상 | 정상 | 성공 | +| 07-회의종료 | 정상 | 정상 | 정상 | 성공 | +| 08-회의록공유 | 정상 | 정상 | 정상 | 성공 | +| 09-Todo관리 | 정상 | 정상 | 정상 | 성공 | +| 10-회의록상세조회 | 정상 | 정상 | 정상 | 성공 | +| 11-회의록수정 | 정상 | 정상 | 정상 | 성공 | +| 12-회의록목록조회 | 정상 | 정상 | 정상 | 성공 | + +--- + +## 10. 종합 평가 + +### 성공 항목 ✅ +- ✅ 12개 화면 모두 UI/UX 설계서와 정확히 매칭 +- ✅ 스타일 가이드 100% 준수 (민트 그린 #4DD5A7) +- ✅ 공통 리소스 (common.css, common.js) 활용 +- ✅ 샘플 데이터 (SAMPLE_MEETINGS, SAMPLE_TODOS) 일관성 유지 +- ✅ 화면 간 연결성 완벽 구현 (12개 화면 간 네비게이션) +- ✅ 실제 동작하는 인터랙션 (JavaScript) +- ✅ Mobile First 반응형 디자인 (320px ~ 768px ~ 1024px+) +- ✅ 접근성 기준 준수 (WCAG 2.1 Level AA) +- ✅ 에러 처리 구현 +- ✅ 브라우저 콘솔 에러 없음 +- ✅ 참고자료 링크 새 탭 열기 (target="_blank") - 녹음 중 페이지 이탈 방지 +- ✅ 회의록 상세조회/수정/목록조회 화면 완전 구현 + +### 개선 필요 항목 ⚠️ +- ⚠️ 일부 링크는 # 처리 (실제 API 연동 없음) +- ⚠️ 회의록 상세조회 화면의 대시보드/타임라인 탭은 기본 데이터로 표시 + +### 최종 결론 +**프로토타입 개발 목표 100% 달성** +- 12개 전체 화면 완벽 구현 (01-로그인 ~ 12-회의록목록조회) +- UI/UX 설계서 완전 준수 +- 스타일 가이드 일관성 유지 +- 실제 동작하는 인터랙션 +- 화면 간 데이터 일관성 및 연결성 확보 +- Playwright 브라우저 테스트 통과 (화면 10, 11, 12 추가 검증 완료) + +--- + +## 11. 테스트 실행 방법 + +1. **브라우저에서 파일 열기**: + ``` + file:///C:/Users/yabo0/home/workspace/HGZero/design/uiux/prototype/01-로그인.html + ``` + +2. **로그인**: + - 사번: `user-001` 또는 `demo` + - 비밀번호: 8자 이상 (아무거나) + +3. **화면 플로우 테스트**: + - 로그인 → 대시보드 → 회의 예약 → 템플릿 선택 → 회의 진행 → 검증 완료 → 회의 종료 → 회의록 공유 → Todo 관리 + +4. **개발자 도구로 모바일 뷰 테스트**: + - F12 → Device Toolbar (Ctrl+Shift+M) + - iPhone SE (375px), iPad (768px) 테스트 + +--- + +**테스트 작성자**: 최유진 (Frontend Developer) +**테스트 완료 일시**: 2025-10-21 diff --git a/design/uiux/prototype_yabo/common.css b/design/uiux/prototype_yabo/common.css new file mode 100644 index 0000000..c8c93ba --- /dev/null +++ b/design/uiux/prototype_yabo/common.css @@ -0,0 +1,808 @@ +/* + * 회의록 서비스 공통 스타일시트 + * 기반: design/uiux/style-guide.md + */ + +/* ======================================== + 1. CSS Variables (Design Tokens) + ======================================== */ +:root { + /* Primary Colors */ + --primary: #4DD5A7; + --primary-dark: #3DBD95; + --primary-light: #E8F9F3; + + /* Semantic Colors */ + --success: #4DD5A7; + --warning: #FFB74D; + --error: #FF6B6B; + --info: #64B5F6; + --ongoing: #FF9800; + + /* Neutral Colors */ + --gray-900: #212121; + --gray-700: #616161; + --gray-500: #9E9E9E; + --gray-300: #E0E0E0; + --gray-100: #F5F5F5; + --white: #FFFFFF; + + /* Typography */ + --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", "Roboto", sans-serif; + --font-h1: 24px; + --font-h2: 20px; + --font-h3: 18px; + --font-body: 16px; + --font-small: 14px; + --font-caption: 12px; + + --font-weight-regular: 400; + --font-weight-medium: 500; + --font-weight-bold: 700; + + /* Spacing (8px grid) */ + --space-xs: 4px; + --space-sm: 8px; + --space-md: 16px; + --space-lg: 24px; + --space-xl: 32px; + --space-xxl: 48px; + + /* Transitions */ + --transition-fast: 0.15s ease; + --transition-normal: 0.2s ease; + --transition-slow: 0.3s ease; + + /* Shadows */ + --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.08); + --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08); + --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12); + --shadow-fab: 0 4px 12px rgba(77, 213, 167, 0.4); + + /* Border Radius */ + --radius-sm: 4px; + --radius-md: 8px; + --radius-lg: 12px; + --radius-full: 50%; +} + +/* Tablet/Desktop Typography */ +@media (min-width: 768px) { + :root { + --font-h1: 32px; + --font-h2: 24px; + --font-h3: 20px; + } +} + +/* ======================================== + 2. Reset & Base Styles + ======================================== */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { + font-size: 16px; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +body { + font-family: var(--font-family); + font-size: var(--font-body); + font-weight: var(--font-weight-regular); + color: var(--gray-700); + line-height: 1.6; + background: var(--gray-100); +} + +/* ======================================== + 3. Typography + ======================================== */ +h1, h2, h3, h4, h5, h6 { + color: var(--gray-900); + font-weight: var(--font-weight-bold); + line-height: 1.2; +} + +h1 { font-size: var(--font-h1); } +h2 { font-size: var(--font-h2); } +h3 { font-size: var(--font-h3); } + +a { + color: var(--primary); + text-decoration: none; + transition: color var(--transition-fast); +} + +a:hover { + color: var(--primary-dark); +} + +/* ======================================== + 4. Layout + ======================================== */ +.container { + width: 100%; + max-width: 100%; + padding: var(--space-md); + margin: 0 auto; +} + +@media (min-width: 768px) { + .container { + max-width: 768px; + padding: var(--space-lg); + } +} + +@media (min-width: 1024px) { + .container { + max-width: 1200px; + padding: var(--space-xl); + } +} + +.page { + min-height: 100vh; + padding-bottom: 80px; /* Bottom nav height */ +} + +/* ======================================== + 5. Cards + ======================================== */ +.card { + background: var(--white); + border-radius: var(--radius-lg); + box-shadow: var(--shadow-md); + padding: var(--space-md); + transition: box-shadow var(--transition-normal); +} + +.card:hover { + box-shadow: var(--shadow-lg); +} + +.card-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: var(--space-md); +} + +.card-title { + font-size: var(--font-h3); + font-weight: var(--font-weight-bold); + color: var(--gray-900); +} + +.card-body { + margin-bottom: var(--space-md); +} + +.card-footer { + display: flex; + justify-content: space-between; + align-items: center; + padding-top: var(--space-md); + border-top: 1px solid var(--gray-300); +} + +/* Card Variants */ +.card-highlight { + background: var(--primary-light); + border-left: 4px solid var(--primary); +} + +.card-ongoing { + border-left: 4px solid var(--ongoing); +} + +/* ======================================== + 6. Buttons + ======================================== */ +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: var(--space-sm); + padding: 12px 24px; + border-radius: var(--radius-md); + font-size: var(--font-body); + font-weight: var(--font-weight-medium); + border: none; + cursor: pointer; + transition: all var(--transition-normal); + text-decoration: none; +} + +.btn:disabled { + opacity: 0.5; + cursor: not-allowed; +} + +/* Primary Button */ +.btn-primary { + background: var(--primary); + color: var(--white); +} + +.btn-primary:hover:not(:disabled) { + background: var(--primary-dark); +} + +/* Secondary Button */ +.btn-secondary { + background: transparent; + color: var(--primary); + border: 1px solid var(--primary); +} + +.btn-secondary:hover:not(:disabled) { + background: var(--primary-light); +} + +/* Ghost Button */ +.btn-ghost { + background: transparent; + color: var(--gray-700); + padding: 8px 16px; +} + +.btn-ghost:hover:not(:disabled) { + background: var(--gray-100); +} + +/* Error Button */ +.btn-error { + background: var(--error); + color: var(--white); +} + +.btn-error:hover:not(:disabled) { + background: #E85555; +} + +/* Button Sizes */ +.btn-sm { + padding: 8px 16px; + font-size: var(--font-small); +} + +.btn-lg { + padding: 16px 32px; + font-size: var(--font-h3); +} + +/* FAB */ +.fab { + position: fixed; + bottom: 24px; + right: 24px; + width: 56px; + height: 56px; + background: var(--primary); + color: var(--white); + border-radius: var(--radius-full); + box-shadow: var(--shadow-fab); + border: none; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + font-size: 24px; + transition: all var(--transition-normal); + z-index: 100; +} + +.fab:hover { + background: var(--primary-dark); + transform: scale(1.05); +} + +/* ======================================== + 7. Badges + ======================================== */ +.badge { + display: inline-flex; + align-items: center; + gap: var(--space-xs); + padding: 4px 8px; + border-radius: 12px; + font-size: var(--font-caption); + font-weight: var(--font-weight-medium); +} + +/* Status Badges */ +.badge-complete { + background: var(--success); + color: var(--white); +} + +.badge-ongoing { + background: var(--ongoing); + color: var(--white); + animation: pulse 1.5s ease-in-out infinite; +} + +.badge-scheduled { + background: var(--info); + color: var(--white); +} + +.badge-overdue { + background: var(--error); + color: var(--white); +} + +.badge-draft { + background: var(--gray-300); + color: var(--gray-700); +} + +/* Priority Badges */ +.badge-high { + background: #FFEBEE; + color: #D32F2F; + border: 1px solid #EF9A9A; +} + +.badge-medium { + background: #FFF3E0; + color: #F57C00; + border: 1px solid #FFCC80; +} + +.badge-low { + background: #E8F5E9; + color: #388E3C; + border: 1px solid #A5D6A7; +} + +/* ======================================== + 8. Form Elements + ======================================== */ +.form-group { + margin-bottom: var(--space-md); +} + +.form-label { + display: block; + margin-bottom: var(--space-sm); + font-size: var(--font-small); + font-weight: var(--font-weight-medium); + color: var(--gray-900); +} + +.form-control { + width: 100%; + padding: 12px 16px; + border: 1px solid var(--gray-300); + border-radius: var(--radius-md); + font-size: var(--font-body); + font-family: var(--font-family); + background: var(--white); + transition: border-color var(--transition-normal); +} + +.form-control:focus { + outline: none; + border-color: var(--primary); + box-shadow: 0 0 0 3px rgba(77, 213, 167, 0.1); +} + +.form-control::placeholder { + color: var(--gray-500); +} + +.form-control:disabled { + background: var(--gray-100); + cursor: not-allowed; +} + +textarea.form-control { + resize: vertical; + min-height: 100px; +} + +/* Checkbox */ +.checkbox-wrapper { + display: flex; + align-items: center; + gap: var(--space-sm); +} + +.checkbox { + width: 20px; + height: 20px; + border: 2px solid var(--gray-300); + border-radius: var(--radius-sm); + cursor: pointer; + transition: all var(--transition-fast); +} + +.checkbox:checked { + background: var(--primary); + border-color: var(--primary); +} + +/* ======================================== + 9. Navigation + ======================================== */ +.bottom-nav { + position: fixed; + bottom: 0; + left: 0; + right: 0; + height: 64px; + background: var(--white); + border-top: 1px solid var(--gray-300); + box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08); + display: flex; + justify-content: space-around; + align-items: center; + z-index: 1000; +} + +.nav-item { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 4px; + padding: var(--space-sm); + color: var(--gray-500); + text-decoration: none; + transition: color var(--transition-fast); + font-size: var(--font-caption); +} + +.nav-item.active { + color: var(--primary); +} + +.nav-item:hover { + color: var(--primary); +} + +.nav-icon { + font-size: 24px; +} + +/* Tabs */ +.tabs { + display: flex; + border-bottom: 2px solid var(--gray-300); + margin-bottom: var(--space-md); + overflow-x: auto; +} + +.tab { + padding: 12px 16px; + color: var(--gray-500); + font-weight: var(--font-weight-medium); + border-bottom: 2px solid transparent; + cursor: pointer; + transition: all var(--transition-fast); + white-space: nowrap; +} + +.tab.active { + color: var(--primary); + border-bottom: 2px solid var(--primary); +} + +.tab:hover { + color: var(--primary); +} + +/* ======================================== + 10. Modal & Overlay + ======================================== */ +.modal-overlay { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.5); + backdrop-filter: blur(4px); + z-index: 2000; + display: none; + align-items: flex-end; +} + +.modal-overlay.show { + display: flex; +} + +.modal { + width: 100%; + max-width: 480px; + background: var(--white); + border-radius: 16px 16px 0 0; + padding: var(--space-lg); + box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.16); + animation: slideUp 0.3s ease; +} + +@media (min-width: 768px) { + .modal-overlay { + align-items: center; + justify-content: center; + } + + .modal { + border-radius: 16px; + } +} + +.modal-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: var(--space-md); +} + +.modal-title { + font-size: var(--font-h2); + font-weight: var(--font-weight-bold); + color: var(--gray-900); +} + +.modal-close { + background: transparent; + border: none; + font-size: 24px; + color: var(--gray-500); + cursor: pointer; + padding: var(--space-sm); +} + +.modal-body { + margin-bottom: var(--space-lg); +} + +.modal-footer { + display: flex; + gap: var(--space-md); + justify-content: flex-end; +} + +/* ======================================== + 11. Avatars + ======================================== */ +.avatar { + width: 40px; + height: 40px; + border-radius: var(--radius-full); + display: flex; + align-items: center; + justify-content: center; + font-weight: var(--font-weight-bold); + color: var(--white); + font-size: var(--font-small); +} + +.avatar-sm { + width: 32px; + height: 32px; + font-size: var(--font-caption); +} + +.avatar-lg { + width: 56px; + height: 56px; + font-size: var(--font-body); +} + +.avatar-group { + display: flex; + align-items: center; +} + +.avatar-group .avatar { + margin-left: -8px; + border: 2px solid var(--white); +} + +.avatar-group .avatar:first-child { + margin-left: 0; +} + +/* Avatar Color Variants */ +.avatar-green { background: #4DD5A7; } +.avatar-blue { background: #64B5F6; } +.avatar-yellow { background: #FFB74D; } +.avatar-pink { background: #F06292; } +.avatar-purple { background: #9575CD; } +.avatar-orange { background: #FF9800; } + +/* ======================================== + 12. Lists + ======================================== */ +.list { + list-style: none; +} + +.list-item { + background: var(--white); + padding: var(--space-md); + margin-bottom: var(--space-sm); + border-radius: var(--radius-md); + box-shadow: var(--shadow-sm); + display: flex; + align-items: center; + gap: var(--space-md); + transition: box-shadow var(--transition-normal); +} + +.list-item:hover { + box-shadow: var(--shadow-md); +} + +.list-item-content { + flex: 1; +} + +.list-item-title { + font-weight: var(--font-weight-medium); + color: var(--gray-900); + margin-bottom: var(--space-xs); +} + +.list-item-meta { + display: flex; + gap: var(--space-md); + font-size: var(--font-small); + color: var(--gray-500); +} + +/* ======================================== + 13. Progress Bar + ======================================== */ +.progress { + width: 100%; + height: 8px; + background: var(--gray-300); + border-radius: 4px; + overflow: hidden; +} + +.progress-bar { + height: 100%; + background: var(--primary); + transition: width var(--transition-normal); +} + +.progress-bar-success { background: var(--success); } +.progress-bar-warning { background: var(--warning); } +.progress-bar-error { background: var(--error); } + +/* ======================================== + 14. Utility Classes + ======================================== */ +/* Display */ +.d-flex { display: flex; } +.d-none { display: none; } +.d-block { display: block; } + +/* Flex */ +.flex-column { flex-direction: column; } +.flex-wrap { flex-wrap: wrap; } +.align-items-center { align-items: center; } +.justify-content-between { justify-content: space-between; } +.justify-content-center { justify-content: center; } +.gap-sm { gap: var(--space-sm); } +.gap-md { gap: var(--space-md); } +.gap-lg { gap: var(--space-lg); } + +/* Spacing */ +.mt-sm { margin-top: var(--space-sm); } +.mt-md { margin-top: var(--space-md); } +.mt-lg { margin-top: var(--space-lg); } +.mb-sm { margin-bottom: var(--space-sm); } +.mb-md { margin-bottom: var(--space-md); } +.mb-lg { margin-bottom: var(--space-lg); } +.p-sm { padding: var(--space-sm); } +.p-md { padding: var(--space-md); } +.p-lg { padding: var(--space-lg); } + +/* Text */ +.text-center { text-align: center; } +.text-right { text-align: right; } +.text-muted { color: var(--gray-500); } +.text-primary { color: var(--primary); } +.text-error { color: var(--error); } +.text-small { font-size: var(--font-small); } +.text-caption { font-size: var(--font-caption); } +.font-bold { font-weight: var(--font-weight-bold); } +.font-medium { font-weight: var(--font-weight-medium); } + +/* Border */ +.border-bottom { border-bottom: 1px solid var(--gray-300); } +.border-top { border-top: 1px solid var(--gray-300); } + +/* ======================================== + 15. Animations + ======================================== */ +@keyframes fadeIn { + from { opacity: 0; } + to { opacity: 1; } +} + +@keyframes slideUp { + from { transform: translateY(100%); } + to { transform: translateY(0); } +} + +@keyframes pulse { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.7; } +} + +@keyframes spin { + to { transform: rotate(360deg); } +} + +/* ======================================== + 16. Accessibility + ======================================== */ +:focus-visible { + outline: 2px solid var(--primary); + outline-offset: 2px; +} + +/* Screen reader only */ +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + +/* ======================================== + 17. Loading & Empty States + ======================================== */ +.loading { + display: flex; + align-items: center; + justify-content: center; + padding: var(--space-xl); +} + +.spinner { + width: 40px; + height: 40px; + border: 4px solid var(--gray-300); + border-top-color: var(--primary); + border-radius: var(--radius-full); + animation: spin 0.8s linear infinite; +} + +.empty-state { + text-align: center; + padding: var(--space-xxl) var(--space-md); + color: var(--gray-500); +} + +.empty-state-icon { + font-size: 48px; + margin-bottom: var(--space-md); +} + +.empty-state-title { + font-size: var(--font-h3); + font-weight: var(--font-weight-bold); + color: var(--gray-700); + margin-bottom: var(--space-sm); +} diff --git a/design/uiux/prototype_yabo/common.js b/design/uiux/prototype_yabo/common.js new file mode 100644 index 0000000..834729c --- /dev/null +++ b/design/uiux/prototype_yabo/common.js @@ -0,0 +1,513 @@ +/** + * 회의록 서비스 공통 JavaScript + * 공통 함수, 유틸리티, 데이터 관리 + */ + +// ======================================== +// 1. Global State & Sample Data +// ======================================== + +// 현재 사용자 정보 +const CURRENT_USER = { + id: 'user-001', + name: '김민준', + email: 'minjun.kim@example.com', + avatar: '김', + avatarColor: 'green' +}; + +// 샘플 회의 데이터 +const SAMPLE_MEETINGS = [ + { + id: 'meeting-001', + title: '2025년 1분기 제품 기획 회의', + date: '2025-10-25', + time: '14:00', + duration: 90, + location: '본사 2층 대회의실', + status: 'scheduled', // ongoing, scheduled, completed + participants: [ + { id: 'user-001', name: '김민준', avatar: '김', avatarColor: 'green', role: 'creator' }, + { id: 'user-002', name: '박서연', avatar: '박', avatarColor: 'blue' }, + { id: 'user-003', name: '이준호', avatar: '이', avatarColor: 'yellow' }, + { id: 'user-004', name: '최유진', avatar: '최', avatarColor: 'pink' } + ], + sections: 3, + todos: 5 + }, + { + id: 'meeting-002', + title: '주간 스크럼 회의', + date: '2025-10-21', + time: '10:00', + duration: 30, + location: 'Zoom', + status: 'ongoing', + participants: [ + { id: 'user-002', name: '박서연', avatar: '박', avatarColor: 'blue', role: 'creator' }, + { id: 'user-001', name: '김민준', avatar: '김', avatarColor: 'green' }, + { id: 'user-005', name: '정도현', avatar: '정', avatarColor: 'purple' } + ], + sections: 2, + todos: 8 + }, + { + id: 'meeting-003', + title: 'AI 기능 개선 회의', + date: '2025-10-23', + time: '15:00', + duration: 60, + location: '본사 3층 스타의실', + status: 'completed', + participants: [ + { id: 'user-003', name: '이준호', avatar: '이', avatarColor: 'yellow', role: 'creator' }, + { id: 'user-001', name: '김민준', avatar: '김', avatarColor: 'green' } + ], + sections: 4, + todos: 3 + } +]; + +// 샘플 Todo 데이터 +const SAMPLE_TODOS = [ + { + id: 'todo-001', + title: 'API 명세서 작성', + assignee: { id: 'user-003', name: '이준호', avatar: '이', avatarColor: 'yellow' }, + dueDate: '2025-10-23', + priority: 'high', + status: 'in_progress', + progress: 60, + meetingId: 'meeting-001', + meetingTitle: '2025년 1분기 제품 기획 회의' + }, + { + id: 'todo-002', + title: '데이터베이스 스키마 설계', + assignee: { id: 'user-003', name: '이준호', avatar: '이', avatarColor: 'yellow' }, + dueDate: '2025-10-20', + priority: 'high', + status: 'overdue', + progress: 80, + meetingId: 'meeting-001', + meetingTitle: '2025년 1분기 제품 기획 회의' + }, + { + id: 'todo-003', + title: 'UI 프로토타입 디자인', + assignee: { id: 'user-004', name: '최유진', avatar: '최', avatarColor: 'pink' }, + dueDate: '2025-10-28', + priority: 'medium', + status: 'not_started', + progress: 0, + meetingId: 'meeting-001', + meetingTitle: '2025년 1분기 제품 기획 회의' + }, + { + id: 'todo-004', + title: '예산 편성안 검토', + assignee: { id: 'user-001', name: '김민준', avatar: '김', avatarColor: 'green' }, + dueDate: '2025-10-22', + priority: 'high', + status: 'in_progress', + progress: 40, + meetingId: 'meeting-002', + meetingTitle: '주간 스크럼 회의' + }, + { + id: 'todo-005', + title: '사용자 피드백 분석', + assignee: { id: 'user-002', name: '박서연', avatar: '박', avatarColor: 'blue' }, + dueDate: '2025-10-19', + priority: 'medium', + status: 'completed', + progress: 100, + meetingId: 'meeting-002', + meetingTitle: '주간 스크럼 회의' + } +]; + +// ======================================== +// 2. DOM Utilities +// ======================================== + +/** + * 요소 선택 + * @param {string} selector - CSS 선택자 + * @returns {Element|null} + */ +function $(selector) { + return document.querySelector(selector); +} + +/** + * 여러 요소 선택 + * @param {string} selector - CSS 선택자 + * @returns {NodeList} + */ +function $$(selector) { + return document.querySelectorAll(selector); +} + +/** + * 요소 생성 + * @param {string} tag - 태그명 + * @param {object} attrs - 속성 객체 + * @param {string} content - 내부 HTML + * @returns {Element} + */ +function createElement(tag, attrs = {}, content = '') { + const el = document.createElement(tag); + Object.keys(attrs).forEach(key => { + if (key === 'className') { + el.className = attrs[key]; + } else if (key === 'dataset') { + Object.keys(attrs[key]).forEach(dataKey => { + el.dataset[dataKey] = attrs[key][dataKey]; + }); + } else { + el.setAttribute(key, attrs[key]); + } + }); + if (content) { + el.innerHTML = content; + } + return el; +} + +// ======================================== +// 3. UI Components +// ======================================== + +/** + * 아바타 HTML 생성 + * @param {object} user - 사용자 객체 + * @param {string} size - 크기 (sm, md, lg) + * @returns {string} + */ +function createAvatar(user, size = 'md') { + const sizeClass = size !== 'md' ? `avatar-${size}` : ''; + return `
${user.avatar}
`; +} + +/** + * 배지 HTML 생성 + * @param {string} text - 배지 텍스트 + * @param {string} type - 배지 타입 + * @returns {string} + */ +function createBadge(text, type) { + return `${text}`; +} + +/** + * 진행률 바 HTML 생성 + * @param {number} progress - 진행률 (0-100) + * @returns {string} + */ +function createProgressBar(progress) { + let barClass = 'progress-bar'; + if (progress === 100) barClass += ' progress-bar-success'; + else if (progress < 30) barClass += ' progress-bar-error'; + else if (progress < 70) barClass += ' progress-bar-warning'; + + return ` +
+
+
+ `; +} + +// ======================================== +// 4. Date & Time Utilities +// ======================================== + +/** + * 날짜 포맷팅 (YYYY-MM-DD → YYYY년 MM월 DD일) + * @param {string} dateStr - 날짜 문자열 + * @returns {string} + */ +function formatDate(dateStr) { + const date = new Date(dateStr); + const year = date.getFullYear(); + const month = date.getMonth() + 1; + const day = date.getDate(); + return `${year}년 ${month}월 ${day}일`; +} + +/** + * 시간 포맷팅 (HH:mm) + * @param {string} timeStr - 시간 문자열 + * @returns {string} + */ +function formatTime(timeStr) { + return timeStr; +} + +/** + * D-Day 계산 + * @param {string} dateStr - 목표 날짜 + * @returns {number} - D-Day (음수면 지연) + */ +function calculateDday(dateStr) { + const today = new Date(); + today.setHours(0, 0, 0, 0); + const target = new Date(dateStr); + target.setHours(0, 0, 0, 0); + const diff = target - today; + return Math.ceil(diff / (1000 * 60 * 60 * 24)); +} + +/** + * D-Day 텍스트 생성 + * @param {number} dday - D-Day 값 + * @returns {string} + */ +function getDdayText(dday) { + if (dday === 0) return 'D-Day'; + if (dday > 0) return `D-${dday}`; + return `D+${Math.abs(dday)} (지연)`; +} + +// ======================================== +// 5. Status Helpers +// ======================================== + +/** + * Todo 상태 정보 가져오기 + * @param {object} todo - Todo 객체 + * @returns {object} - {badgeType, badgeText} + */ +function getTodoStatusInfo(todo) { + const dday = calculateDday(todo.dueDate); + + if (todo.status === 'completed') { + return { badgeType: 'complete', badgeText: '완료' }; + } + if (dday < 0) { + return { badgeType: 'overdue', badgeText: getDdayText(dday) }; + } + if (dday === 0) { + return { badgeType: 'ongoing', badgeText: 'D-Day' }; + } + if (dday <= 2) { + return { badgeType: 'scheduled', badgeText: `D-${dday}` }; + } + return { badgeType: 'draft', badgeText: `D-${dday}` }; +} + +/** + * 회의 상태 정보 가져오기 + * @param {object} meeting - 회의 객체 + * @returns {object} - {badgeType, badgeText} + */ +function getMeetingStatusInfo(meeting) { + if (meeting.status === 'ongoing') { + return { badgeType: 'ongoing', badgeText: '진행중' }; + } + if (meeting.status === 'completed') { + return { badgeType: 'complete', badgeText: '확정완료' }; + } + return { badgeType: 'scheduled', badgeText: '예정' }; +} + +// ======================================== +// 6. Modal Functions +// ======================================== + +/** + * 모달 열기 + * @param {string} modalId - 모달 ID + */ +function openModal(modalId) { + const modal = $(`#${modalId}`); + if (modal) { + modal.classList.add('show'); + document.body.style.overflow = 'hidden'; + } +} + +/** + * 모달 닫기 + * @param {string} modalId - 모달 ID + */ +function closeModal(modalId) { + const modal = $(`#${modalId}`); + if (modal) { + modal.classList.remove('show'); + document.body.style.overflow = ''; + } +} + +/** + * 모달 오버레이 클릭 시 닫기 + */ +function initModalClose() { + $$('.modal-overlay').forEach(overlay => { + overlay.addEventListener('click', (e) => { + if (e.target === overlay) { + closeModal(overlay.id); + } + }); + }); + + $$('.modal-close').forEach(btn => { + btn.addEventListener('click', () => { + const modal = btn.closest('.modal-overlay'); + if (modal) { + closeModal(modal.id); + } + }); + }); +} + +// ======================================== +// 7. Navigation +// ======================================== + +/** + * 활성 네비게이션 아이템 설정 + * @param {string} activeId - 활성화할 nav-item ID + */ +function setActiveNav(activeId) { + $$('.nav-item').forEach(item => { + item.classList.remove('active'); + }); + const activeItem = $(`#${activeId}`); + if (activeItem) { + activeItem.classList.add('active'); + } +} + +/** + * 페이지 이동 + * @param {string} url - 이동할 URL + */ +function navigateTo(url) { + window.location.href = url; +} + +// ======================================== +// 8. Form Helpers +// ======================================== + +/** + * 폼 데이터를 객체로 변환 + * @param {HTMLFormElement} form - 폼 요소 + * @returns {object} + */ +function getFormData(form) { + const formData = new FormData(form); + const data = {}; + for (let [key, value] of formData.entries()) { + data[key] = value; + } + return data; +} + +/** + * 폼 초기화 + * @param {string} formId - 폼 ID + */ +function resetForm(formId) { + const form = $(`#${formId}`); + if (form) { + form.reset(); + } +} + +// ======================================== +// 9. Toast Notification +// ======================================== + +/** + * 토스트 알림 표시 + * @param {string} message - 메시지 + * @param {string} type - 타입 (success, error, info) + */ +function showToast(message, type = 'info') { + const toast = createElement('div', { + className: `toast toast-${type}`, + style: ` + position: fixed; + bottom: 80px; + left: 50%; + transform: translateX(-50%); + background: ${type === 'success' ? 'var(--success)' : type === 'error' ? 'var(--error)' : 'var(--info)'}; + color: white; + padding: 12px 24px; + border-radius: 8px; + box-shadow: 0 4px 12px rgba(0,0,0,0.2); + z-index: 3000; + animation: fadeIn 0.3s ease; + ` + }, message); + + document.body.appendChild(toast); + + setTimeout(() => { + toast.style.animation = 'fadeOut 0.3s ease'; + setTimeout(() => { + document.body.removeChild(toast); + }, 300); + }, 3000); +} + +// ======================================== +// 10. Local Storage Helpers +// ======================================== + +/** + * 로컬 스토리지에 데이터 저장 + * @param {string} key - 키 + * @param {any} value - 값 + */ +function saveToStorage(key, value) { + try { + localStorage.setItem(key, JSON.stringify(value)); + } catch (e) { + console.error('로컬 스토리지 저장 실패:', e); + } +} + +/** + * 로컬 스토리지에서 데이터 가져오기 + * @param {string} key - 키 + * @returns {any} + */ +function getFromStorage(key) { + try { + const value = localStorage.getItem(key); + return value ? JSON.parse(value) : null; + } catch (e) { + console.error('로컬 스토리지 로드 실패:', e); + return null; + } +} + +// ======================================== +// 11. Initialization +// ======================================== + +/** + * 공통 초기화 + */ +function initCommon() { + // 모달 닫기 이벤트 설정 + initModalClose(); + + // 외부 링크는 새 탭으로 열기 + $$('a[href^="http"]').forEach(link => { + link.setAttribute('target', '_blank'); + link.setAttribute('rel', 'noopener noreferrer'); + }); + + console.log('공통 스크립트 초기화 완료'); +} + +// DOM 로드 완료 시 공통 초기화 실행 +if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', initCommon); +} else { + initCommon(); +} diff --git a/design/uiux/style-guide_yabo.md b/design/uiux/style-guide_yabo.md new file mode 100644 index 0000000..e44d73d --- /dev/null +++ b/design/uiux/style-guide_yabo.md @@ -0,0 +1,1189 @@ +# 회의록 서비스 스타일 가이드 + +## 1. 디자인 철학 + +### 핵심 원칙 +- **Mobile First**: 모바일 환경 우선 설계 +- **깔끔한 미니멀리즘**: 정보의 명확한 계층 구조와 여백 활용 +- **직관적 UX**: 사용자가 생각 없이 사용 가능한 인터페이스 +- **일관성**: 모든 화면에서 동일한 디자인 패턴 적용 + +--- + +## 2. 컬러 시스템 + +### Primary Colors (주요 색상) +```css +--primary: #4DD5A7; /* 민트 그린 - 메인 액션, CTA */ +--primary-dark: #3DBD95; /* 민트 그린 (진하게) - 호버, 액티브 */ +--primary-light: #E8F9F3; /* 민트 그린 (연하게) - 배경, 하이라이트 */ +``` + +### Semantic Colors (의미 색상) +```css +--success: #4DD5A7; /* 성공, 완료 */ +--warning: #FFB74D; /* 경고, 임박 */ +--error: #FF6B6B; /* 에러, 긴급 */ +--info: #64B5F6; /* 정보, 알림 */ +--ongoing: #FF9800; /* 진행 중 (주황) */ +``` + +### Neutral Colors (중립 색상) +```css +--gray-900: #212121; /* 제목, 강조 텍스트 */ +--gray-700: #616161; /* 본문 텍스트 */ +--gray-500: #9E9E9E; /* 보조 텍스트 */ +--gray-300: #E0E0E0; /* 구분선, 테두리 */ +--gray-100: #F5F5F5; /* 배경 (연한 회색) */ +--white: #FFFFFF; /* 카드, 모달 배경 */ +``` + +### 색상 사용 가이드 +- **Primary**: 주요 액션 버튼, 활성 탭, FAB +- **Success**: 완료 상태, 체크박스 체크됨 +- **Warning**: 마감 임박 Todo, 경고 배지 +- **Error**: 에러 메시지, 마감 지연 Todo +- **Gray**: 텍스트, 구분선, 비활성 요소 + +--- + +## 3. 타이포그래피 + +### 폰트 패밀리 +```css +--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", + "Noto Sans KR", "Roboto", sans-serif; +``` + +### 폰트 크기 (Mobile First) +```css +/* Mobile (320px~768px) */ +--font-h1: 24px; /* 페이지 제목 */ +--font-h2: 20px; /* 섹션 제목 */ +--font-h3: 18px; /* 서브 타이틀 */ +--font-body: 16px; /* 본문 */ +--font-small: 14px; /* 보조 정보 */ +--font-caption: 12px; /* 캡션, 메타 정보 */ + +/* Tablet/Desktop (768px+) */ +--font-h1-desktop: 32px; +--font-h2-desktop: 24px; +--font-h3-desktop: 20px; +--font-body-desktop: 16px; +``` + +### 폰트 굵기 +```css +--font-weight-regular: 400; +--font-weight-medium: 500; +--font-weight-bold: 700; +``` + +### 사용 예시 +- **제목 (H1)**: font-size: 24px, font-weight: 700, color: --gray-900 +- **본문 (Body)**: font-size: 16px, font-weight: 400, color: --gray-700, line-height: 1.6 +- **보조 정보 (Small)**: font-size: 14px, font-weight: 400, color: --gray-500 + +--- + +## 4. 간격 시스템 (Spacing) + +### 기본 단위 (8px 그리드 시스템) +```css +--space-xs: 4px; +--space-sm: 8px; +--space-md: 16px; +--space-lg: 24px; +--space-xl: 32px; +--space-xxl: 48px; +``` + +### 사용 가이드 +- **컴포넌트 내부 패딩**: 16px (--space-md) +- **카드 간격**: 16px (--space-md) +- **섹션 간격**: 24px (--space-lg) +- **페이지 여백**: 16px (Mobile), 24px (Tablet/Desktop) + +--- + +## 5. 레이아웃 & 그리드 + +### 브레이크포인트 +```css +--breakpoint-mobile: 320px; +--breakpoint-tablet: 768px; +--breakpoint-desktop: 1024px; +``` + +### 컨테이너 Max-Width +```css +--container-mobile: 100%; +--container-tablet: 768px; +--container-desktop: 1200px; +``` + +### 그리드 시스템 +- **Mobile**: 4 columns (16px gutter) +- **Tablet**: 8 columns (16px gutter) +- **Desktop**: 12 columns (24px gutter) + +### 2열 레이아웃 (회의 진행 화면) +```css +/* Mobile: 단일 열 (스크롤 가능) */ +.two-column-layout { + display: flex; + flex-direction: column; + height: 100vh; +} + +.editor-panel { + flex: 1; + padding: 16px; + overflow-y: auto; +} + +.info-panel { + height: 50vh; + border-top: 1px solid var(--gray-300); +} + +/* Desktop: 2열 구조 (왼쪽 60-70%, 오른쪽 30-40%) */ +@media (min-width: 768px) { + .two-column-layout { + flex-direction: row; + } + + .editor-panel { + flex: 0 0 65%; + border-right: 1px solid var(--gray-300); + } + + .info-panel { + flex: 0 0 35%; + height: 100vh; + border-top: none; + } +} +``` + +**사용 시나리오**: +- 회의 진행 화면 (05-회의진행.html) + - 왼쪽: 텍스트 에디터 (툴바 + contentEditable 영역) + - 오른쪽: 탭 패널 (참석자/AI 제안/용어 사전/관련 자료) + +--- + +## 6. 카드 디자인 + +### 카드 스타일 +```css +.card { + background: var(--white); + border-radius: 12px; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); + padding: 16px; + transition: box-shadow 0.2s ease; +} + +.card:hover { + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); +} +``` + +### 카드 변형 +- **기본 카드**: 배경 흰색, 그림자 있음 +- **강조 카드**: 배경 primary-light, 좌측 4px primary 보더 +- **진행 중 카드**: 배경 흰색, 좌측 4px ongoing 보더 + +--- + +## 7. 버튼 디자인 + +### Primary Button (주요 액션) +```css +.btn-primary { + background: var(--primary); + color: var(--white); + padding: 12px 24px; + border-radius: 8px; + font-size: 16px; + font-weight: 500; + border: none; + transition: background 0.2s ease; +} + +.btn-primary:hover { + background: var(--primary-dark); +} +``` + +### Secondary Button (보조 액션) +```css +.btn-secondary { + background: transparent; + color: var(--primary); + padding: 12px 24px; + border-radius: 8px; + font-size: 16px; + font-weight: 500; + border: 1px solid var(--primary); +} + +.btn-secondary:hover { + background: var(--primary-light); +} +``` + +### Ghost Button (최소 강조) +```css +.btn-ghost { + background: transparent; + color: var(--gray-700); + padding: 8px 16px; + border-radius: 8px; + font-size: 14px; + border: none; +} + +.btn-ghost:hover { + background: var(--gray-100); +} +``` + +### FAB (Floating Action Button) +```css +.fab { + width: 56px; + height: 56px; + background: var(--primary); + color: var(--white); + border-radius: 50%; + box-shadow: 0 4px 12px rgba(77, 213, 167, 0.4); + position: fixed; + bottom: 24px; + right: 24px; +} +``` + +--- + +## 8. 배지 (Badges) + +### 상태 배지 +```css +/* 완료 */ +.badge-complete { + background: var(--success); + color: var(--white); + padding: 4px 8px; + border-radius: 12px; + font-size: 12px; +} + +/* 진행중 */ +.badge-ongoing { + background: var(--ongoing); + color: var(--white); + padding: 4px 8px; + border-radius: 12px; + font-size: 12px; + animation: pulse 1.5s ease-in-out infinite; +} + +/* 예정 */ +.badge-scheduled { + background: var(--info); + color: var(--white); + padding: 4px 8px; + border-radius: 12px; + font-size: 12px; +} + +/* 지연 */ +.badge-overdue { + background: var(--error); + color: var(--white); + padding: 4px 8px; + border-radius: 12px; + font-size: 12px; +} +``` + +### 우선순위 배지 +```css +/* 높음 */ +.badge-high { + background: #FFEBEE; + color: #D32F2F; + border: 1px solid #EF9A9A; +} + +/* 보통 */ +.badge-medium { + background: #FFF3E0; + color: #F57C00; + border: 1px solid #FFCC80; +} + +/* 낮음 */ +.badge-low { + background: #E8F5E9; + color: #388E3C; + border: 1px solid #A5D6A7; +} +``` + +--- + +## 9. 아이콘 + +### 아이콘 라이브러리 +- **Material Icons** 또는 **Feather Icons** 권장 +- 일관된 스타일 유지 (Outlined 또는 Rounded) + +### 아이콘 크기 +```css +--icon-sm: 16px; /* 인라인 아이콘 */ +--icon-md: 24px; /* 기본 아이콘 */ +--icon-lg: 32px; /* 강조 아이콘 */ +``` + +### 주요 아이콘 매핑 +- **회의**: 📅 calendar +- **Todo**: ✅ check-circle +- **녹음**: 🎙️ mic +- **참석자**: 👤 user +- **설정**: ⚙️ settings +- **검색**: 🔍 search +- **알림**: 🔔 bell +- **링크**: 🔗 link + +--- + +## 10. 네비게이션 + +### 반응형 네비게이션 전략 +- **Mobile (< 768px)**: 하단 네비게이션 바 (3개 메뉴) +- **Desktop (≥ 768px)**: 왼쪽 사이드바 (240px 고정폭) + +### 하단 네비게이션 (Mobile) +```css +.bottom-nav { + position: fixed; + bottom: 0; + left: 0; + right: 0; + height: 64px; + background: var(--white); + border-top: 1px solid var(--gray-300); + box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08); + display: flex; + justify-content: space-around; + z-index: 100; +} + +.nav-item { + flex: 1; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 4px; + color: var(--gray-500); + font-size: 12px; + cursor: pointer; + transition: color 0.2s ease; +} + +.nav-item.active { + color: var(--primary); +} + +.nav-item-icon { + font-size: 24px; +} + +/* Desktop에서 하단 네비게이션 숨김 */ +@media (min-width: 768px) { + .bottom-nav { + display: none; + } +} +``` + +**메뉴 항목**: +- 홈 (📊) → 대시보드 +- 회의록 (📋) → 회의록목록 +- Todo (✅) → Todo관리 + +### 사이드바 네비게이션 (Desktop) +```css +.sidebar { + position: fixed; + left: 0; + top: 0; + bottom: 0; + width: 240px; + background: var(--white); + border-right: 1px solid var(--gray-300); + display: none; + flex-direction: column; + z-index: 100; +} + +@media (min-width: 768px) { + .sidebar { + display: flex; + } + + .main-content { + margin-left: 240px; + } +} + +/* 사이드바 로고 영역 */ +.sidebar-logo { + padding: 24px 16px; + display: flex; + align-items: center; + gap: 12px; + border-bottom: 1px solid var(--gray-300); +} + +.sidebar-logo-icon { + width: 40px; + height: 40px; + background: var(--primary); + color: var(--white); + border-radius: 8px; + display: flex; + align-items: center; + justify-content: center; + font-size: 20px; + font-weight: 700; +} + +.sidebar-logo-text { + font-size: 18px; + font-weight: 700; + color: var(--gray-900); +} + +/* 사이드바 메뉴 */ +.sidebar-nav { + flex: 1; + padding: 16px 8px; + overflow-y: auto; +} + +.sidebar-nav-item { + display: flex; + align-items: center; + gap: 12px; + padding: 12px 16px; + margin-bottom: 4px; + border-radius: 8px; + color: var(--gray-700); + font-size: 16px; + text-decoration: none; + transition: all 0.2s ease; + cursor: pointer; +} + +.sidebar-nav-item:hover { + background: var(--gray-100); +} + +.sidebar-nav-item.active { + background: var(--primary-light); + color: var(--primary); + font-weight: 500; +} + +.sidebar-nav-icon { + font-size: 20px; + width: 24px; + text-align: center; +} + +/* 사이드바 사용자 정보 영역 */ +.sidebar-user { + padding: 16px; + border-top: 1px solid var(--gray-300); + display: flex; + align-items: center; + gap: 12px; +} + +.sidebar-user-info { + flex: 1; +} + +.sidebar-user-name { + font-size: 14px; + font-weight: 500; + color: var(--gray-900); +} + +.sidebar-user-email { + font-size: 12px; + color: var(--gray-500); + margin-top: 2px; +} +``` + +**메뉴 항목**: +- 📊 대시보드 (active) +- 📋 회의 목록 → 회의록목록조회 +- ✅ Todo 관리 → Todo관리 + +### 탭 네비게이션 +```css +.tab-nav { + display: flex; + border-bottom: 1px solid var(--gray-300); + background: var(--white); +} + +.tab { + padding: 12px 16px; + color: var(--gray-500); + border-bottom: 2px solid transparent; + background: transparent; + font-size: 16px; + font-weight: 400; + cursor: pointer; + transition: all 0.2s ease; +} + +.tab:hover { + color: var(--gray-700); +} + +.tab.active { + color: var(--primary); + border-bottom: 2px solid var(--primary); + font-weight: 500; +} +``` + +**사용 예시**: +- 회의록 상세 화면: 회의록 / 대시보드 (2개 탭) +- 회의 진행 화면 (오른쪽 패널): 참석자 / AI 제안 / 용어 사전 / 관련 자료 (4개 탭) + +### 우측 사이드바 탭 (회의 진행 화면) + +#### 레이아웃 +```css +/* 메인 레이아웃 */ +.main-layout { + display: flex; + gap: 16px; +} + +.main-content { + flex: 1; + min-width: 0; +} + +.right-sidebar { + display: none; /* 모바일에서는 숨김 */ +} + +@media (min-width: 768px) { + .right-sidebar { + display: block; + width: 320px; + flex-shrink: 0; + border-left: 1px solid var(--gray-300); + padding-left: 16px; + } +} +``` + +#### 사이드바 탭 스타일 +```css +.sidebar-tabs { + display: flex; + border-bottom: 2px solid var(--gray-300); + margin-bottom: 16px; + overflow-x: auto; + gap: 4px; +} + +.sidebar-tab { + flex: 1; + padding: 8px 4px; + background: transparent; + border: none; + cursor: pointer; + font-size: 12px; + font-weight: 500; + color: var(--gray-500); + transition: all 0.2s ease; + border-bottom: 2px solid transparent; + white-space: nowrap; + text-align: center; +} + +.sidebar-tab.active { + color: var(--primary); + border-bottom-color: var(--primary); +} + +.sidebar-panel { + display: none; +} + +.sidebar-panel.active { + display: block; + animation: fadeIn 0.2s ease; +} + +@keyframes fadeIn { + from { opacity: 0; transform: translateY(4px); } + to { opacity: 1; transform: translateY(0); } +} +``` + +#### 참석자 리스트 +```css +.participant-item { + display: flex; + align-items: center; + gap: 8px; + padding: 8px; + border-bottom: 1px solid var(--gray-100); +} + +.participant-item:last-child { + border-bottom: none; +} + +.participant-status { + font-size: 10px; + color: var(--gray-500); +} +``` + +#### AI 제안 카드 +```css +.ai-suggestion-card { + background: var(--primary-light); + border: 1px dashed var(--primary); + border-radius: 8px; + padding: 8px; + margin-bottom: 8px; +} + +.ai-suggestion-title { + display: flex; + align-items: center; + gap: 4px; + font-size: 14px; + font-weight: 700; + margin-bottom: 4px; +} + +.ai-suggestion-content { + font-size: 12px; + color: var(--gray-700); + line-height: 1.4; + margin-bottom: 8px; +} + +.ai-suggestion-actions { + display: flex; + gap: 4px; +} +``` + +#### 용어 사전 리스트 +```css +.term-item { + padding: 8px; + border-radius: 4px; + background: var(--white); + border: 1px solid var(--gray-200); + margin-bottom: 8px; + cursor: pointer; + transition: background 0.2s ease; +} + +.term-item:hover { + background: var(--gray-100); +} + +.term-name { + font-size: 14px; + font-weight: 700; + color: var(--gray-900); + margin-bottom: 2px; +} + +.term-definition { + font-size: 12px; + color: var(--gray-600); + line-height: 1.3; +} + +.term-badge { + display: inline-block; + font-size: 10px; + padding: 2px 6px; + background: var(--warning); + color: var(--white); + border-radius: 8px; + margin-left: 4px; +} +``` + +#### 관련 자료 리스트 +```css +.related-doc-item { + display: flex; + align-items: flex-start; + gap: 8px; + padding: 8px; + border-radius: 4px; + background: var(--white); + border: 1px solid var(--gray-200); + margin-bottom: 8px; + cursor: pointer; + transition: background 0.2s ease; +} + +.related-doc-item:hover { + background: var(--gray-100); +} + +.related-doc-icon { + font-size: 24px; + flex-shrink: 0; +} + +.related-doc-info { + flex: 1; + min-width: 0; +} + +.related-doc-title { + font-size: 14px; + font-weight: 500; + color: var(--gray-900); + margin-bottom: 2px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.related-doc-meta { + font-size: 12px; + color: var(--gray-500); +} + +.related-doc-relevance { + display: flex; + align-items: center; + gap: 2px; + font-size: 12px; + color: var(--warning); + flex-shrink: 0; +} +``` + +**사용 위치**: +- 회의 진행 화면 (05-회의진행.html) +- 데스크톱/태블릿 (768px+)에서만 표시 +- 모바일에서는 하단 시트로 변환 (향후 구현) + +**구성 요소**: +1. **참석자 탭**: 현재 회의 참석자 목록 및 상태 +2. **AI 제안 탭**: 회의록 요약 및 Todo 자동 추출 제안 +3. **용어 사전 탭**: 회의에서 언급된 전문용어 설명 +4. **관련 자료 탭**: AI가 찾은 관련 회의록 목록 + +--- + +## 11. 폼 요소 + +### Input Field +```css +.input { + width: 100%; + padding: 12px 16px; + border: 1px solid var(--gray-300); + border-radius: 8px; + font-size: 16px; + background: var(--white); + transition: border-color 0.2s ease; +} + +.input:focus { + border-color: var(--primary); + outline: none; + box-shadow: 0 0 0 3px rgba(77, 213, 167, 0.1); +} + +.input::placeholder { + color: var(--gray-500); +} +``` + +### Checkbox +```css +.checkbox { + width: 20px; + height: 20px; + border: 2px solid var(--gray-300); + border-radius: 4px; + transition: all 0.2s ease; +} + +.checkbox:checked { + background: var(--primary); + border-color: var(--primary); +} +``` + +--- + +## 12. 모달 & 다이얼로그 + +### 모달 오버레이 +```css +.modal-overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.5); + backdrop-filter: blur(4px); + z-index: 1000; +} +``` + +### 모달 콘텐츠 +```css +.modal { + background: var(--white); + border-radius: 16px 16px 0 0; /* Mobile: Bottom Sheet */ + max-width: 480px; + padding: 24px; + box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.16); +} + +/* Desktop: Centered Modal */ +@media (min-width: 768px) { + .modal { + border-radius: 16px; + margin: auto; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } +} +``` + +--- + +## 13. 애니메이션 + +### 트랜지션 +```css +--transition-fast: 0.15s ease; +--transition-normal: 0.2s ease; +--transition-slow: 0.3s ease; +``` + +### 주요 애니메이션 + +#### Fade In +```css +@keyframes fadeIn { + from { opacity: 0; } + to { opacity: 1; } +} +``` + +#### Slide Up (Bottom Sheet) +```css +@keyframes slideUp { + from { transform: translateY(100%); } + to { transform: translateY(0); } +} +``` + +#### Pulse (진행 중 배지) +```css +@keyframes pulse { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.7; } +} +``` + +--- + +## 14. 접근성 (Accessibility) + +### 색상 대비 +- **WCAG 2.1 Level AA** 준수 +- 텍스트와 배경 대비율: 최소 4.5:1 +- 큰 텍스트(18px+) 대비율: 최소 3:1 + +### 포커스 스타일 +```css +:focus-visible { + outline: 2px solid var(--primary); + outline-offset: 2px; +} +``` + +### 터치 타겟 +- 최소 크기: 44x44px (iOS), 48x48px (Android) +- 터치 타겟 간 최소 간격: 8px + +--- + +## 15. 반응형 디자인 + +### Mobile First 접근 +```css +/* Mobile (기본) */ +.container { + padding: 16px; +} + +/* Tablet (768px+) */ +@media (min-width: 768px) { + .container { + padding: 24px; + } +} + +/* Desktop (1024px+) */ +@media (min-width: 1024px) { + .container { + padding: 32px; + } +} +``` + +--- + +## 참조 이미지 분석 결과 + +### 확인된 디자인 특징 (reference/sampleimg 기반) +1. **Primary Color**: #4DD5A7 (민트 그린) - 모든 액션 버튼과 강조 요소에 사용 +2. **카드 디자인**: 흰색 배경, 12px 둥근 모서리, 미세한 그림자 +3. **타이포그래피**: 명확한 계층 구조, 충분한 여백 +4. **아바타**: 원형, 다양한 색상 배경 (팀원 구분) +5. **배지**: 둥근 모서리, 명확한 색상 코딩 (진행 중=주황, 완료=민트) +6. **간격**: 16px 기본 간격 일관 적용 +7. **섹션 구분**: 미세한 구분선 또는 배경색 차이로 구분 + +--- + +## 16. 회의 진행 화면 우측 사이드바 카드 디자인 + +### 공통 디자인 원칙 (통일성) +모든 우측 사이드바 카드는 **일관된 디자인 시스템**을 따릅니다: + +```css +/* 공통 카드 베이스 스타일 */ +.sidebar-card { + background: #FAFAFA; /* 연한 회색 배경 */ + border: 1px dashed #D0D0D0; /* 회색 점선 테두리 */ + border-radius: var(--radius-md); + padding: var(--space-md); + margin-bottom: var(--space-md); +} + +/* 공통 카드 타이틀 */ +.sidebar-card-title { + font-size: var(--font-body); /* 16px */ + font-weight: var(--font-weight-bold); + color: var(--primary); /* 민트 그린 */ + margin-bottom: var(--space-xs); +} + +/* 공통 카드 본문 */ +.sidebar-card-text { + font-size: var(--font-small); /* 14px */ + color: var(--gray-700); + line-height: 1.6; +} + +/* 공통 호버 */ +.sidebar-card:hover { + background: #F0F0F0; /* 조금 더 진한 회색 */ + border-color: var(--primary); /* 민트 그린 테두리 */ +} +``` + +### AI 제안 카드 +```css +.ai-suggestion-card { + background: #FAFAFA; + border: 1px dashed #D0D0D0; + border-radius: var(--radius-md); + padding: var(--space-md); + margin-bottom: var(--space-md); +} + +.ai-suggestion-header { + display: flex; + align-items: center; + gap: var(--space-xs); + font-size: var(--font-body); /* 16px */ + font-weight: var(--font-weight-bold); + color: var(--primary); + margin-bottom: var(--space-sm); +} + +.ai-suggestion-text { + font-size: var(--font-small); /* 14px */ + color: var(--gray-700); + line-height: 1.6; +} +``` + +**구성 요소**: +- 헤더: ✨ (아이콘) + 제목 (16px Bold, 민트 그린) +- 본문: 제안 내용 (14px, gray-700) +- 액션 버튼: Primary 버튼 + Ghost 버튼 + +### 용어 사전 카드 +```css +.term-item { + background: #FAFAFA; /* 기본: 연한 회색 배경 */ + border: 1px dashed #D0D0D0; + border-radius: var(--radius-md); + padding: var(--space-md); + margin-bottom: var(--space-md); +} + +.term-item.highlight { + background: var(--primary-light); /* 하이라이트: 민트 연한 배경 */ + border: 1px dashed var(--primary); /* 민트 그린 점선 테두리 */ +} + +.term-item:hover { + background: #F0F0F0; + border-color: var(--primary); +} + +.term-name { + font-size: var(--font-body); /* 16px */ + font-weight: var(--font-weight-bold); + color: var(--primary); /* 민트 그린 */ + margin-bottom: var(--space-xs); +} + +.term-definition { + font-size: var(--font-small); /* 14px */ + color: var(--gray-700); + line-height: 1.6; +} + +.term-context { + font-size: 11px; + color: var(--gray-500); + padding-top: var(--space-xs); + border-top: 1px dashed #D0D0D0; /* 점선 구분선 */ + margin-top: var(--space-xs); +} +``` + +**구성 요소**: +- 용어명: Bold (16px, 민트 그린) + 카테고리 배지 + 언급 아이콘 (💬, 14px) +- 정의: 일반 텍스트 (14px, gray-700) +- 컨텍스트: 작은 텍스트 (11px, gray-500, 상단 점선 구분선) + - "회의에서 N회 언급됨" + - "관련 회의록에서 언급됨" + - "회의에서 언급됨 (HH:MM)" + - "{관련 회의록명} (날짜)에서 {컨텍스트 정보}" + +**하이라이트 조건**: +- 현재 진행 중인 회의에서 언급된 용어 +- 민트 그린 연한 배경 (#E8F9F3) +- 민트 그린 점선 테두리 + +**인터랙션**: +- 호버 시: 조금 더 진한 회색 배경 (#F0F0F0) + 민트 그린 테두리 + +### 관련 회의록 카드 +```css +.related-doc-item { + background: #FAFAFA; /* 연한 회색 배경 */ + border: 1px dashed #D0D0D0; /* 회색 점선 테두리 */ + border-radius: var(--radius-md); + padding: var(--space-md); + margin-bottom: var(--space-md); +} + +.related-doc-item:hover { + background: #F0F0F0; /* 조금 더 진한 회색 */ + border-color: var(--primary); /* 민트 그린 테두리 */ +} + +.related-doc-header { + font-size: var(--font-body); /* 16px */ + font-weight: var(--font-weight-bold); + color: var(--primary); /* 민트 그린 */ + margin-bottom: var(--space-xs); +} + +.related-doc-text { + font-size: var(--font-small); /* 14px */ + color: var(--gray-700); + line-height: 1.6; +} + +.related-doc-meta { + font-size: var(--font-caption); /* 12px */ + color: var(--gray-600); +} + +.related-doc-relevance { + color: var(--success); /* 관련도는 초록색 */ + font-weight: var(--font-weight-medium); +} +``` + +**구성 요소**: +- 제목: Bold (16px, 민트 그린) +- 메타정보: 날짜 | 관련도 (12px, gray-600) + - 관련도는 초록색 (success, font-weight-medium) +- 본문: 요약 텍스트 (14px, gray-700, line-height 1.6) + +**인터랙션**: +- 호버 시: 조금 더 진한 회색 배경 (#F0F0F0) + 민트 그린 테두리 + +### 통일성 체크리스트 +모든 사이드바 카드는 다음을 준수합니다: +- ✅ 배경: `#FAFAFA` (연한 회색) +- ✅ 테두리: `1px dashed #D0D0D0` (회색 점선) +- ✅ 타이틀 색상: `var(--primary)` (민트 그린) +- ✅ 타이틀 크기: `16px` (var(--font-body)) +- ✅ 타이틀 굵기: `Bold` (var(--font-weight-bold)) +- ✅ 본문 색상: `var(--gray-700)` +- ✅ 본문 크기: `14px` (var(--font-small)) +- ✅ 호버 배경: `#F0F0F0` (더 진한 회색) +- ✅ 호버 테두리: `var(--primary)` (민트 그린) + +--- + +## 변경 이력 + +| 버전 | 날짜 | 작성자 | 변경 내용 | +|------|------|--------|----------| +| 1.0 | 2025-10-21 | 최유진 | 최초 작성 - reference/sampleimg 샘플 이미지 기반 스타일 가이드 작성 | +| 1.0.1 | 2025-10-21 | 이미준 | 네비게이션 간소화 및 인터랙션 개선
- 설정 메뉴 제거 (사이드바, 하단 네비게이션, 메뉴 모달)
- 로그아웃 기능은 프로필 영역으로 통합
- Todo 항목 클릭 시 회의록 상세 화면으로 이동하는 인터랙션 추가
- 네비게이션 메뉴 항목 간소화: 대시보드, 회의 목록, Todo 관리 (3개 항목으로 축소) | +| 1.1 | 2025-10-21 | 이미준 | 반응형 네비게이션 및 2열 레이아웃 패턴 추가
- **반응형 네비게이션 전략**: Mobile (하단 네비게이션), Desktop (왼쪽 사이드바 240px)
- **사이드바 네비게이션 (Desktop)**: 로고 영역, 메뉴 항목 (대시보드/회의 목록/Todo 관리), 사용자 정보 영역
- **하단 네비게이션 (Mobile)**: 홈/회의록/Todo (3개 메뉴, 프로필 제거)
- **2열 레이아웃 패턴**: 회의 진행 화면용 (왼쪽 65% 에디터, 오른쪽 35% 탭 패널)
- **탭 네비게이션 사용 예시**: 회의록 상세 (2개 탭), 회의 진행 (4개 탭) | +| 1.1.1 | 2025-10-21 | 도그냥 | 회의 진행 화면 개선
- **메모 기능 제거**: 하단 액션바에서 메모 버튼 제거 (일시정지, 회의종료만 유지)
- **AI 제안 적용 기능 개선**:
- 논의사항 제안: "논의사항에 적용" 버튼으로 논의사항 섹션에 직접 추가
- 결정사항 제안: "결정사항에 적용" 버튼으로 결정사항 섹션에 직접 추가
- 액션아이템 제안: "액션아이템에 적용" 버튼으로 중복 제거 후 액션아이템 섹션에 추가
- 적용 시 해당 섹션 탭으로 자동 이동 및 성공 토스트 표시 | +| 1.1.2 | 2025-10-21 | 도그냥 | 우측 사이드바 탭 디자인 개선 (gappa 프로토타입 기반)
- **AI 제안 카드**: 회색 배경(#F5F5F5), 민트 그린 점선 테두리, 헤더 (✨/📋 아이콘 + 제목), 본문, 액션 버튼
- **용어 사전 카드**:
- 흰색 배경, 회색 실선 테두리
- 하이라이트 카드: 민트 그린 연한 배경(#E8F9F3), 민트 그린 테두리 (현재 회의에서 언급된 용어)
- 용어명 + 카테고리 배지 + 언급 아이콘 (💬)
- 하단 컨텍스트: "회의에서 N회 언급됨" 또는 "관련 회의록에서 언급됨"
- 호버 시: 민트 그린 테두리 + 그림자
- **관련 회의록 카드**: 회색 배경(#F5F5F5), 회색 점선 테두리, 제목 + 메타정보 (날짜, 관련도) + 요약 텍스트 | +| 1.1.3 | 2025-10-21 | 도그냥 | 용어 사전 및 관련 회의록 탭 디자인 통일성 개선
- **용어 사전 카드 디자인 개선**:
- 기본 상태: 민트 배경에서 화이트 배경 + 회색 테두리로 변경
- 하이라이트 상태: 민트 연한 배경 + 민트 테두리 (현재 회의 언급 용어만)
- 용어명: 16px Semibold
- 배지: 민트 연한 배경, 테두리 제거
- 언급 아이콘: 14px
- 컨텍스트: 상단 회색 구분선, 11px
- 호버: 민트 테두리 + 그림자
- **관련 회의록 카드 타이틀 강조**:
- 제목 폰트: Semibold → Bold (16px)
- 호버 시: 더 진한 회색 배경
- **사이드바 패널 타이틀 통일**:
- h3: 14px Bold (섹션 타이틀)
- h4: 14px Semibold (서브 타이틀) | +| 1.1.4 | 2025-10-21 | 도그냥 | 우측 사이드바 3개 탭 (AI제안, 용어사전, 관련회의록) 디자인 통일성 개선
- **공통 디자인 원칙 수립**: 모든 카드가 일관된 디자인 시스템을 따르도록 개선
- 배경: `#FAFAFA` (연한 회색)
- 테두리: `1px dashed #D0D0D0` (회색 점선)
- 타이틀: 16px Bold, 민트 그린 (`var(--primary)`)
- 본문: 14px, gray-700
- 호버 상태: 진한 회색 배경 (#F0F0F0) + 민트 그린 테두리
- **AI 제안 카드**: 헤더 폰트 Bold (16px)
- **용어 사전 카드**: 배경 회색(#FAFAFA), 점선 테두리, 타이틀 민트 그린, 컨텍스트 구분선 점선으로 변경
- **관련 회의록 카드**: 타이틀 민트 그린으로 변경, 호버 시 민트 테두리 추가
- **통일성 체크리스트** 추가: 9가지 디자인 규칙 명시 | diff --git a/design/uiux/uiux.md b/design/uiux/uiux.md index 0b004cf..4a75eb0 100644 --- a/design/uiux/uiux.md +++ b/design/uiux/uiux.md @@ -4,7 +4,7 @@ - **작성일**: 2025-10-21 - **최종 수정일**: 2025-10-21 - **작성자**: 이미준 (서비스 기획자) -- **버전**: 1.3.2 +- **버전**: 1.5 - **설계 철학**: Mobile First Design --- @@ -226,21 +226,17 @@ graph TD #### UI 구성요소 **Mobile (320px~768px)** -- **헤더** (Fixed, 상단) - - 서비스 로고 및 타이틀 ("회의록 서비스") - - 검색 아이콘 - - 프로필 아이콘 (메뉴) +- **헤더** (상단) + - "안녕하세요, {사용자명}님!" (H2, Bold) + - 부제: "오늘의 일정을 확인하세요" (Body-sm, 회색) -- **메인 콘텐츠** (스크롤, padding-bottom: 80px) - - **환영 메시지** - - "안녕하세요, {사용자명}님!" (H3) - - 부제: "오늘도 효율적인 회의록 작성을 시작하세요" (Body-sm, 회색) +- **메인 콘텐츠** (스크롤, padding-bottom: 80px, background: gray-50) + - **통계 카드 그리드** (3개 카드) + - "예정된 회의": 개수 표시 (아이콘: 📅) + - "진행 중 Todo": 개수 표시 (아이콘: ✅) + - "Todo 완료율": 퍼센트 표시 (아이콘: 📈) - - **빠른 액션** (가로 배치) - - "새 회의 시작" 버튼 (Primary, 아이콘: play_circle, flex: 1) - - "회의 예약" 버튼 (Secondary, 아이콘: calendar_today) - - - **예정된/진행중 회의** 카드 (신규) + - **최근 회의** 섹션 - 헤더: "예정된 회의" (H4) + "전체 보기 →" 링크 - 회의 리스트 (최대 3개, 우선순위 순) 1. **진행중 회의** (우선 표시) @@ -315,40 +311,55 @@ graph TD - 클릭 시: 회의록 상세 화면으로 이동 (읽기 전용) - 빈 상태: "공유받은 회의록이 없습니다" -- **하단 네비게이션** (Fixed, 하단) - - 홈 (active), 회의록, Todo, 프로필 - - 각 항목: Material Icon + 레이블 +- **하단 네비게이션** (Fixed, 하단, 모바일 전용) + - 홈 (active), 회의록, Todo (3개 항목) + - 각 항목: 이모지 아이콘 + 레이블 + - 프로필 탭 제거됨 **Tablet/Desktop (768px+)** -- **사이드바** (좌측, Fixed, 240px) - - 서비스 로고 - - 메인 메뉴 (세로 배치) - - 대시보드 (active, 강조 표시) - - 회의 목록 - - Todo 관리 - - 설정 - - 하단: 프로필 요약 +- **왼쪽 사이드바** (Fixed, 240px) + - **로고 영역** + - 민트 그린 아이콘 (M) + - "회의록 서비스" 텍스트 -- **메인 콘텐츠** (Grid Layout) - - **상단 영역**: - - 환영 메시지 - - 빠른 액션 (가로 배치) + - **메인 메뉴** (세로 배치) + - 📊 대시보드 (active, 민트 그린 배경) + - 📋 회의 목록 → 12-회의록목록조회.html + - ✅ Todo 관리 → 09-Todo관리.html + - ⚙️ 설정 (준비중) - - **통계 그리드** (3컬럼, auto-fit): - - 예정된/진행중 회의 (아이콘: 📅, Primary 색상) - - 진행중 회의 수 별도 표시 (빨강 배지) - - 진행 중 Todo (아이콘: ✅, Warning 색상) - - Todo 완료율 (아이콘: 📈, Success 색상) + - **하단 사용자 정보** + - 아바타 + - 사용자 이름 + - 이메일 주소 - - **2컬럼 그리드**: - - 좌측 컬럼 (2/3 너비) - - 예정된/진행중 회의 섹션 - - 진행중 회의 우선 표시 (상단) - - 예정된 회의 (하단) - - 내 회의록 섹션 - - 우측 컬럼 (1/3 너비) - - 내 Todo 위젯 - - 공유받은 회의록 위젯 +- **메인 콘텐츠** (왼쪽 여백 240px) + - **헤더** + - "안녕하세요, {사용자명}님!" (H2) + - "오늘의 일정을 확인하세요" (부제) + + - **통계 카드 그리드** (3개, auto-fit) + - 예정된 회의 (📅) + - 진행 중 Todo (✅) + - Todo 완료율 (📈) + + - **최근 회의 그리드** (2-3컬럼) + - 회의 카드들 (진행중 우선) + - 참여하기/수정/보기 버튼 + + - **할당된 Todo 리스트** + - 화이트 카드 배경 + - 각 Todo 항목 구분선 + + - **내 회의록 리스트** + - 화이트 카드 배경 + - 전체보기 → 12-회의록목록조회.html + + - **공유받은 회의록 리스트** + - 화이트 카드 배경 + - 전체보기 → 12-회의록목록조회.html + +- **하단 네비게이션**: 숨김 (데스크톱에서는 사이드바 사용) #### 인터랙션 1. **빠른 액션** @@ -385,7 +396,9 @@ graph TD 3. **카드 인터랙션** - 회의록 항목 클릭 → 회의록 상세 화면으로 이동 - - Todo 항목 클릭 → Todo 관리 화면으로 이동 + - **Todo 항목 클릭 → 해당 Todo가 포함된 회의록 상세 화면으로 이동** + - URL 파라미터로 회의록 ID와 Todo ID 전달 + - 회의록 상세 화면에서 해당 Todo 섹션으로 자동 스크롤 - "전체 보기" 링크 클릭 → 해당 목록 화면으로 이동 - 호버 효과: 카드 그림자 증가, 약간 상승 (transform: translateY(-2px)) @@ -669,124 +682,295 @@ graph TD #### UI 구성요소 +**전체 레이아웃 (2열 구조)** +- **헤더** (Fixed, 상단) + - 좌측: "회의 진행 중" 제목 + 경과시간 배지 (빨강, 01:03) + - 우측: "회의 종료" 버튼 (민트 그린 테두리) + +- **왼쪽 영역: 회의 내용 작성** (60-70% 너비) + - **텍스트 에디터 툴바** + - B (Bold), I (Italic), U (Underline) + - 색상 선택, 링크 추가 + + - **편집 영역** (contentEditable, 스크롤 가능) + - 실시간 입력 텍스트: "회의 내용을 작성하거나 AI가 자동으로 작성합니다..." + - 섹션 구조: + ``` + # 참석자 + - 김민준 + - 박서연 + - 이준호 + + # 안건 + 1. 신규 기능 개발 일정 논의 + 2. 예산 편성 검토 + ``` + - 자동 저장 (30초 간격) + +- **오른쪽 영역: 정보 패널** (30-40% 너비, 탭 구조) + - **탭 네비게이션** (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 제안 탭** + - 제목: "AI 제안" + - **카드 디자인** (통일된 스타일): + - 배경: 연한 회색 (#FAFAFA) + - 테두리: 회색 점선 (1px dashed #D0D0D0) + - 테두리 둥글기: 8px + - 내부 패딩: 16px + - 카드 간 여백: 16px + - 헤더 폰트: 16px Bold, 민트 그린 (#4DD5A7) + - 본문 폰트: 14px, gray-700 + - 구조: 헤더 + 본문 텍스트 + 액션 버튼 + + - **논의사항 제안 카드** + - 헤더: "💬 논의사항 제안" (아이콘 + 제목, 16px bold, 민트 그린) + - 내용: "AI 모델 정확도 향상 방안" (strong 태그, 14px) + - 현재 STT 정확도: 92% (14px 일반, gray-700) + - 목표 정확도: 95% 이상 + - 도메인 특화 학습 데이터 확보 필요 + - 액션 버튼: "논의사항에 적용" (btn-primary btn-sm) + "수정" (btn-ghost btn-sm) + + - **결정사항 제안 카드** + - 헤더: "✅ 결정사항 제안" (아이콘 + 제목, 16px bold, 민트 그린) + - 내용: "개발 일정 최종 확정" (strong 태그, 14px) + - 설계: 2주 (11/1~11/14) (14px 일반, gray-700) + - 개발: 10주 (11/15~1/23) + - 테스트 및 배포: 2주 (1/24~2/6) + - 액션 버튼: "결정사항에 적용" (btn-primary btn-sm) + "수정" (btn-ghost btn-sm) + + - **액션아이템 제안 카드** + - 헤더: "📋 액션 아이템(Todo) 자동 추출" (아이콘 + 제목, 16px bold, 민트 그린) + - 추출된 Todo 목록 (14px 일반, gray-700): + 1. API 명세서 작성 (이준호, 10/23까지) + 2. UI 프로토타입 디자인 (최유진, 10/28까지) + 3. AI 모델 성능 테스트 (박서연, 10/25까지) + - 액션 버튼: "3개 Todo 생성" (btn-primary btn-sm) + "수정" (btn-ghost btn-sm) + + - **용어 사전 탭** + - 제목: "용어 사전" + - 용어 검색 입력 필드 (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)** -- **헤더** (Fixed, 최소화 가능) - - 회의 제목 - - 경과 시간 (00:00:00) - - 녹음 상태 인디케이터 (빨간 점 + 파형) - - 메뉴 버튼 (설정, 참석자 목록, **참석자 추가 초대**) +- **2열 구조를 1열로 전환** +- 왼쪽 영역: 메인 콘텐츠 (전체 너비) +- 오른쪽 탭 패널: 하단 시트로 표시 + - 탭 버튼 클릭 시 바텀시트 슬라이드업 + - 오버레이 + 닫기 버튼 -- **메인 콘텐츠** (스크롤) - - **실시간 발언 영역** (상단, 고정) - - 현재 발언자 이름 - - 실시간 텍스트 변환 내용 (3-5초 지연) - - 화자 자동 식별 배지 - - - **회의록 섹션들** (탭 또는 아코디언) - - 각 섹션: - - 섹션 제목 - - **AI 회의 내용 요약 영역** (섹션 최상단) - - AI 자동 생성 요약 (2-3문장) - - 편집 버튼 (참석자가 수정 가능) - - 요약 생성 시간 표시 - - AI 자동 작성 내용 (실시간 업데이트) - - 수동 편집 버튼 - - 검증 완료 체크박스 - - **참고자료 영역** (섹션 하단) - - 관련 이전 회의록 링크 (최대 3개) - - 맥락상 관련 회의록 링크 - - 각 링크: 회의 제목, 날짜, 관련도 표시 - - 섹션 간 탭 또는 아코디언 전환 - - - **전문용어 하이라이트** - - 감지된 용어에 밑줄 또는 배경색 - - 터치/클릭 시 맥락 기반 설명 툴팁 - -- **하단 액션 바** (Fixed) - - 녹음 일시정지/재개 버튼 - - 수동 메모 추가 버튼 - - 회의 종료 버튼 - -**Tablet/Desktop (768px+)** -- **좌측 패널** (30%) - - 참석자 목록 - - 발언 통계 - - 주요 키워드 - -- **중앙 패널** (50%) - - 회의록 섹션 (모바일과 동일) - -- **우측 패널** (20%) - - 실시간 발언 - - AI 제안 (Todo, 결정사항 후보) +**Desktop (768px+)** +- 2열 고정 레이아웃 +- 왼쪽: 편집 영역 +- 오른쪽: 탭 패널 (고정) #### 인터랙션 -1. **실시간 업데이트** - - 발언 → STT → AI 분석 → 섹션별 자동 배치 (3-5초 주기) - - WebSocket 통해 모든 참석자에게 동기화 - - 수정 사항 실시간 하이라이트 (3초간) +1. **텍스트 편집 (왼쪽 영역)** + - **편집 모드**: contentEditable 영역 클릭하여 즉시 편집 시작 + - **자동 저장**: 편집 중 30초 간격 자동 저장 + - **툴바 사용**: + - B (Bold): 선택된 텍스트를 굵게 + - I (Italic): 선택된 텍스트를 이탤릭체로 + - U (Underline): 선택된 텍스트에 밑줄 + - 색상 선택: 텍스트 강조 색상 변경 + - 링크 추가: URL 입력 모달 표시 + - **실시간 동기화**: WebSocket 통해 모든 참석자에게 편집 내용 동기화 + - **충돌 감지**: 동시 편집 시 충돌 감지 및 병합 옵션 제공 -2. **수동 편집** - - 섹션 내 텍스트 클릭 → 편집 모드 - - 편집 중 자동 저장 (30초 간격) - - 동시 편집 충돌 감지 및 해결 +2. **탭 전환 (오른쪽 영역)** + - **참석자 탭**: 현재 회의 참석자 목록 표시 (4명) 및 참석자 추가 기능 + - **참석자 추가 폼** (상단): + - 이메일 입력 필드 (form-control 스타일, placeholder: "이메일 주소 입력") + - "초대" 버튼 (btn btn-primary btn-sm) + - 이메일 입력 후 "초대" 클릭 시: + 1. 이메일 유효성 검증 (정규식: /^[^\s@]+@[^\s@]+\.[^\s@]+$/) + 2. 빈 값 체크: 빈 값이면 "이메일 주소를 입력해주세요" 경고 토스트 + 3. 잘못된 형식: "올바른 이메일 형식이 아닙니다" 오류 토스트 + 4. 유효한 이메일: "{email}에게 초대 링크가 전송되었습니다" 성공 토스트 + 5. 입력창 초기화 (value = '') + 6. 실제 구현 시 서버 API 호출 (/api/meetings/invite) + - **참석자 목록** (하단): + - 각 참석자: 아바타 + 이름 + - 상태 표시 없음 (발언 중/온라인 등 제거) + - 참석자 수 동적 업데이트 (초대 성공 시) -3. **AI 요약 편집** - - 요약 영역의 "편집" 버튼 클릭 → 텍스트 편집 모드 - - 수정 내용 자동 저장 (30초 간격) - - 수정 시간 및 수정자 기록 - - 실시간 동기화: 다른 참석자에게 즉시 반영 + - **AI 제안 탭**: AI가 생성한 회의록 개선 제안 (3가지 유형) -4. **참고자료 링크** - - 참고자료 영역의 회의록 링크 클릭 → **새 탭(target="_blank")에서 해당 회의록 열기** - - **녹음 중인 페이지 이탈 방지**: 링크는 항상 새 탭으로 열림 - - 관련도 표시: 퍼센트 또는 별점으로 시각화 - - AI가 자동으로 관련 회의록 검색 및 연결 (UFR-AI-040) + - **논의사항 제안 카드**: 제안 내용 + "논의사항에 적용" 버튼 + - 제안 구조: + - 제목: "AI 모델 정확도 향상 방안" (strong) + - 내용: 3-5개의 구체적인 논의 포인트 (bullet points) + - "논의사항에 적용" 클릭 시: + 1. 논의사항 섹션(section-1)의 content-1 영역에 제안 내용 추가 + 2. 기존 내용 하단에 `
` 태그로 구분하여 추가 + 3. 제목은 `` 태그, 내용은 `

` 태그로 구조화 + 4. 성공 토스트 표시: "논의사항에 AI 제안이 추가되었습니다" + 5. 자동으로 논의사항 탭(섹션 1)으로 전환 (switchSection(1)) + 6. 제안 카드 숨김 처리 (display: none) + - "수정" 버튼: 제안을 거부하고 카드 숨김 -5. **전문용어 설명** - - 하이라이트된 용어 클릭 → 바텀시트(모바일) 또는 사이드 패널(데스크톱) - - 설명 내용: - - 간단한 정의 - - 이 회의에서의 의미 - - 관련 과거 회의록 링크 - - 참조 문서 링크 + - **결정사항 제안 카드**: 제안 내용 + "결정사항에 적용" 버튼 + - 제안 구조: + - 제목: "개발 일정 최종 확정" (strong) + - 내용: 확정된 결정사항 (bullet points) + - "결정사항에 적용" 클릭 시: + 1. 결정사항 섹션(section-2)의 content-2 영역에 제안 내용 추가 + 2. 기존 내용 하단에 `
` 태그로 구분하여 추가 + 3. 제목은 `✓` 접두어 포함, 내용은 `

` 태그로 구조화 + 4. 성공 토스트 표시: "결정사항에 AI 제안이 추가되었습니다" + 5. 자동으로 결정사항 탭(섹션 2)으로 전환 (switchSection(2)) + 6. 제안 카드 숨김 처리 (display: none) + - "수정" 버튼: 제안을 거부하고 카드 숨김 -6. **녹음 제어** - - 일시정지: 회의록 작성 중단, 재개 가능 - - 종료: 확인 다이얼로그 → 회의종료 화면으로 이동 + - **액션아이템 제안 카드**: 제안 내용 + "3개 Todo 생성" 버튼 + - 제안 구조: + - 헤더: "📋 액션 아이템(Todo) 자동 추출" + - 내용: 3개의 Todo 항목 (제목, 담당자, 마감일) + - "3개 Todo 생성" 클릭 시: + 1. 액션아이템 섹션(section-3)의 content-3 영역에 Todo 항목 추가 + 2. **중복 체크**: 기존 Todo 목록에서 동일한 제목이 있는지 확인 + 3. 중복되지 않은 Todo만 추가 (Set 자료구조 활용) + 4. Todo HTML 구조: checkbox + 제목 + 담당자/마감일 + 우선순위 배지 + 5. 성공 토스트 표시: "N개의 액션아이템이 추가되었습니다 (중복 제외)" + 6. 중복된 항목이 있으면: "모든 항목이 이미 존재합니다" (info 토스트) + 7. 자동으로 액션아이템 탭(섹션 3)으로 전환 (switchSection(3)) + 8. 제안 카드 숨김 처리 (display: none) + - "수정" 버튼: 제안을 거부하고 카드 숨김 -7. **참석자 추가 초대** (회의 진행 중) - - 헤더 메뉴 또는 참석자 목록에서 "+ 참석자 초대" 버튼 클릭 - - 초대 모달 표시: - - 이메일 입력 필드 (여러 명 입력 가능, 쉼표/엔터로 구분) - - 검색 기능: 조직 내 사용자 검색 및 선택 - - 권한 선택: 편집 가능/읽기 전용 - - "초대 발송" 버튼 - - 초대 발송 후: - - 실시간으로 참석자 목록에 "초대됨" 상태로 추가 - - 초대받은 사람에게 알림 발송 (이메일/앱 푸시) - - 초대받은 사람이 수락 시 "참여 중"으로 상태 변경 - - 권한: - - **회의 생성자**: 모든 참석자 초대 가능 - - **일반 참석자**: 회의 설정에 따라 초대 가능 여부 결정 + - **용어 사전 탭**: 회의에서 언급된 전문용어 설명 + - 용어 카드 (민트 그린 배경): 용어명 + 간단한 정의 + - 카드 클릭 → 확장하여 상세 설명 표시 + - 상세 설명: 이 회의에서의 의미, 관련 회의록 링크 + + - **관련 자료 탭**: AI가 찾은 관련 회의록 (32건) + - 회의록 링크 클릭 → **새 탭(target="_blank")에서 해당 회의록 열기** + - **녹음 중인 페이지 이탈 방지**: 모든 링크는 새 탭으로 열림 + - 관련도 표시: 퍼센트 또는 별점으로 시각화 + +3. **회의 종료** + - 헤더의 "회의 종료" 버튼 클릭 + - 확인 다이얼로그 표시: "회의를 종료하시겠습니까?" + - 확인 → 회의 종료 처리 및 07-회의종료.html로 이동 + +4. **실시간 업데이트** + - STT 음성 인식 결과 실시간 반영 (3-5초 주기) + - 모든 참석자의 편집 내용 실시간 동기화 + - 수정 사항 하이라이트 표시 (3초간) #### 데이터 요구사항 -- **입력**: 회의 ID, 오디오 스트림 +- **입력**: + - 회의 ID + - 오디오 스트림 (실시간 STT용) + - 사용자 편집 내용 (텍스트 입력) - **출력**: - - 실시간 텍스트 변환 결과 - - 구조화된 회의록 데이터 - - **섹션별 AI 요약 (자동 생성)** - - 전문용어 및 설명 - - **참고자료 목록 (관련 회의록 링크)** -- **연동**: STT 서비스, AI 서비스 (UFR-AI-010, UFR-AI-040), RAG 서비스, Collaboration 서비스 + - 실시간 텍스트 변환 결과 (STT) + - 편집된 회의록 내용 + - **AI 제안 목록** (회의록 개선 제안) + - **전문용어 및 설명** (용어 사전) + - **관련 회의록 목록** (32건, 관련도 포함) + - 참석자 목록 및 상태 +- **연동**: + - STT 서비스 (UFR-AI-010) + - AI 서비스 (AI 제안 생성, UFR-AI-040) + - RAG 서비스 (관련 회의록 검색) + - Collaboration 서비스 (실시간 동기화) #### 에러 처리 -- **녹음 권한 거부**: "마이크 권한이 필요합니다" + 설정 안내 -- **STT 실패**: "음성 인식에 실패했습니다. 수동으로 입력해주세요" -- **AI 요약 생성 실패**: "요약 생성에 실패했습니다. 수동으로 작성해주세요" -- **참고자료 검색 실패**: "관련 회의록을 찾을 수 없습니다" -- **동기화 실패**: "네트워크 연결을 확인해주세요. 내용은 로컬에 저장됩니다" -- **충돌 발생**: "다른 참석자가 동일한 부분을 수정 중입니다" + 병합 옵션 +- **마이크 권한 거부**: "마이크 권한이 필요합니다" 토스트 + 설정 안내 링크 +- **STT 실패**: "음성 인식에 실패했습니다. 수동으로 입력해주세요" 토스트 +- **AI 제안 생성 실패**: "AI 제안을 불러올 수 없습니다" 토스트 (편집은 계속 가능) +- **관련 자료 검색 실패**: "관련 회의록을 찾을 수 없습니다" 메시지 표시 +- **동기화 실패**: "네트워크 연결을 확인해주세요. 내용은 로컬에 저장됩니다" 토스트 +- **편집 충돌**: "다른 참석자가 동일한 부분을 수정 중입니다" 다이얼로그 + 병합 옵션 +- **회의 종료 실패**: "회의 종료 중 오류가 발생했습니다" 토스트 + 재시도 버튼 --- @@ -1149,7 +1333,6 @@ graph TD - **탭 네비게이션** (상단, Fixed) - "회의록" 탭 (기본 활성) - "대시보드" 탭 - - "타임라인" 탭 (선택) - **회의록 탭 콘텐츠** (섹션별 구조) - 각 섹션: @@ -1214,7 +1397,6 @@ graph TD - **상단**: 탭 네비게이션 - 회의록 (기본) - 대시보드 - - 타임라인 - **메인 영역**: - 회의록 탭: 전체 회의록 내용 (섹션별 구조) - 대시보드 탭: 핵심내용, 결정사항, Todo 진행상황, 참고자료 (11-회의록대시보드.html 구조 참조) @@ -1223,7 +1405,6 @@ graph TD 1. **탭 전환** - "회의록" 탭: 전체 회의록 내용 표시 (섹션별 구조) - "대시보드" 탭: 핵심내용, 결정사항, Todo, 참고자료 요약 표시 - - "타임라인" 탭: 시간 순서대로 회의 진행 과정 표시 (선택) - 탭 전환 시 URL 변경 없이 클라이언트 사이드 렌더링 2. **회의록 탭 인터랙션** @@ -1791,11 +1972,15 @@ graph TD |------|------|--------|----------| | 1.0 | 2025-10-21 | 이미준 | 최초 작성 - 11개 화면 설계 완료 | | 1.1 | 2025-10-21 | 이미준 | AI 요약 및 참고자료 기능 추가
- 05-회의진행: AI 회의 내용 요약 자동 생성 및 참고자료 자동 연결 추가
- 10-회의록상세조회: 섹션별 AI 요약 표시 및 참고자료 영역 추가
- 11-회의록수정: AI 요약 수정 및 참고자료 편집 기능 추가
- 관련 유저스토리: UFR-AI-040 (관련 회의록 자동 연결) | -| 1.2 | 2025-10-21 | 이미준 | 회의록 상세 화면 구조 개선 (프로토타입 기반)
- 10-회의록상세조회: 탭 기반 네비게이션 추가 (회의록/대시보드/타임라인)
- 대시보드 탭 추가: 핵심내용, 결정사항, Todo 진행상황, 참고자료 섹션
- 참고자료 관련도 점수 표시 (백분율 + 색상 코딩)
- 참고자료 카테고리 탭 (관련 회의록/프로젝트 문서/이슈 트래커/위키 페이지)
- 참조: design-gappa/uiux/prototype 파일 (11-회의록대시보드.html, 05-회의진행.html) | -| 1.3 | 2025-10-21 | 이미준 | 대시보드 및 회의록 목록 화면 개선 (사용자 피드백 반영)
- 02-대시보드: 예정된 회의 카드 추가, Todo 우선순위 정렬 개선 (지연→진행→미진행→완료, 최대 5개), 내 회의록 상태 배지 추가, 공유받은 회의록 섹션 개선
- 12-회의록목록조회: 신규 화면 추가 (필터링/정렬/검색 기능)
- 필터: 참여 유형(공유받은/참석한/생성한), 상태(전체/작성중/확정완료)
- 정렬: 최신 회의순/최신 업데이트순/제목 가나다순
- 검색: 제목/참석자/키워드 통합 검색
- 통계 정보 표시 (전체/작성중/확정완료 개수)
- 참조: design/uiux/prototype_fix 및 design-gappa/uiux/prototype 파일 | -| 1.3.1 | 2025-10-21 | 이미준 | 대시보드 진행중 회의 표시 기능 추가
- 02-대시보드: 예정된 회의 카드에 진행중 회의 포함
- 진행중 회의 우선 표시 (최상단)
- "진행중" 배지 (빨강/주황, 깜빡임 애니메이션)
- "참여하기" 버튼으로 즉시 회의 참여 가능
- 정렬: 진행중 회의 → 예정된 회의 (일시 순)
- 데이터 요구사항: 회의 상태 (ongoing) 추가, 진행중 회의 필터 조건 정의
- 에러 처리: 진행중 회의 참여 실패 시나리오 추가 (종료됨/권한없음/네트워크오류) | -| 1.3.2 | 2025-10-21 | 이미준 | 대시보드 예정된 회의 역할 기반 접근 제어 추가
- 02-대시보드: 예정된 회의에 생성자/참석자별 차별화된 권한 적용
- **생성자 권한**: 회의 수정 가능 (크라운 아이콘 표시, "수정" 버튼)
- **참석자 권한**: 시작 10분 전부터 참여 가능 ("참여하기" 버튼 조건부 활성화)
- 실시간 타이머 표시 (참여 가능 시간 카운트다운, 1분 간격 갱신)
- UI 구성요소: 역할 표시 (크라운 아이콘), 액션 버튼 (역할 및 시간 기반 조건부 렌더링)
- 인터랙션: 생성자 수정 플로우, 참석자 시간 기반 참여 플로우, 타이머 자동 갱신
- 데이터 요구사항: 생성자 ID, 사용자 역할 (creator\|attendee), 참여 가능 시간 계산
- 에러 처리: 시간 제한 접근, 권한 제한 수정 시도, 회의 수정 실패 시나리오 추가 | -| 1.4 | 2025-10-21 | 최유진 | 회의진행 화면 개선 및 스타일 가이드 작성
- 05-회의진행: 사용성 개선
- **참고자료 링크**: 새 탭(target="_blank")으로 열기 기능 추가 (녹음 중 페이지 이탈 방지)
- **참석자 추가 초대**: 회의 진행 중 참석자 추가 초대 기능 추가
- 초대 모달: 이메일 입력, 조직 내 사용자 검색, 권한 선택 (편집 가능/읽기 전용)
- 실시간 참석자 목록 업데이트 및 알림 발송 (이메일/앱 푸시)
- 권한 제어: 생성자는 모든 참석자 초대 가능, 일반 참석자는 회의 설정에 따라 결정
- design/uiux/style-guide.md: 신규 작성 (reference/sampleimg 샘플 이미지 기반)
- 민트 그린(#4DD5A7) 프라이머리 컬러 적용
- Mobile First 디자인 시스템 정의
- 15개 섹션: 컬러, 타이포그래피, 간격, 카드, 버튼, 배지, 아이콘, 네비게이션, 폼, 모달, 애니메이션, 접근성, 반응형 등 | +| 1.1.1 | 2025-10-21 | 이미준 | 회의록 상세 화면 구조 개선 (프로토타입 기반)
- 10-회의록상세조회: 탭 기반 네비게이션 추가 (회의록/대시보드)
- 대시보드 탭 추가: 핵심내용, 결정사항, Todo 진행상황, 참고자료 섹션
- 참고자료 관련도 점수 표시 (백분율 + 색상 코딩)
- 참고자료 카테고리 탭 (관련 회의록/프로젝트 문서/이슈 트래커/위키 페이지)
- 참조: design-gappa/uiux/prototype 파일 (11-회의록대시보드.html, 05-회의진행.html) | +| 1.1.2 | 2025-10-21 | 이미준 | 대시보드 및 회의록 목록 화면 개선 (사용자 피드백 반영)
- 02-대시보드: 예정된 회의 카드 추가, Todo 우선순위 정렬 개선 (지연→진행→미진행→완료, 최대 5개), 내 회의록 상태 배지 추가, 공유받은 회의록 섹션 개선
- 12-회의록목록조회: 신규 화면 추가 (필터링/정렬/검색 기능)
- 필터: 참여 유형(공유받은/참석한/생성한), 상태(전체/작성중/확정완료)
- 정렬: 최신 회의순/최신 업데이트순/제목 가나다순
- 검색: 제목/참석자/키워드 통합 검색
- 통계 정보 표시 (전체/작성중/확정완료 개수)
- 참조: design/uiux/prototype_fix 및 design-gappa/uiux/prototype 파일 | +| 1.2 | 2025-10-21 | 이미준 | 대시보드 진행중 회의 표시 기능 추가
- 02-대시보드: 예정된 회의 카드에 진행중 회의 포함
- 진행중 회의 우선 표시 (최상단)
- "진행중" 배지 (빨강/주황, 깜빡임 애니메이션)
- "참여하기" 버튼으로 즉시 회의 참여 가능
- 정렬: 진행중 회의 → 예정된 회의 (일시 순)
- 데이터 요구사항: 회의 상태 (ongoing) 추가, 진행중 회의 필터 조건 정의
- 에러 처리: 진행중 회의 참여 실패 시나리오 추가 (종료됨/권한없음/네트워크오류) | +| 1.2.1 | 2025-10-21 | 이미준 | 대시보드 예정된 회의 역할 기반 접근 제어 추가
- 02-대시보드: 예정된 회의에 생성자/참석자별 차별화된 권한 적용
- **생성자 권한**: 회의 수정 가능 (크라운 아이콘 표시, "수정" 버튼)
- **참석자 권한**: 시작 10분 전부터 참여 가능 ("참여하기" 버튼 조건부 활성화)
- 실시간 타이머 표시 (참여 가능 시간 카운트다운, 1분 간격 갱신)
- UI 구성요소: 역할 표시 (크라운 아이콘), 액션 버튼 (역할 및 시간 기반 조건부 렌더링)
- 인터랙션: 생성자 수정 플로우, 참석자 시간 기반 참여 플로우, 타이머 자동 갱신
- 데이터 요구사항: 생성자 ID, 사용자 역할 (creator\|attendee), 참여 가능 시간 계산
- 에러 처리: 시간 제한 접근, 권한 제한 수정 시도, 회의 수정 실패 시나리오 추가 | +| 1.2.2 | 2025-10-21 | 최유진 | 회의진행 화면 개선 및 스타일 가이드 작성
- 05-회의진행: 사용성 개선
- **참고자료 링크**: 새 탭(target="_blank")으로 열기 기능 추가 (녹음 중 페이지 이탈 방지)
- **참석자 추가 초대**: 회의 진행 중 참석자 추가 초대 기능 추가
- 초대 모달: 이메일 입력, 조직 내 사용자 검색, 권한 선택 (편집 가능/읽기 전용)
- 실시간 참석자 목록 업데이트 및 알림 발송 (이메일/앱 푸시)
- 권한 제어: 생성자는 모든 참석자 초대 가능, 일반 참석자는 회의 설정에 따라 결정
- design/uiux/style-guide.md: 신규 작성 (reference/sampleimg 샘플 이미지 기반)
- 민트 그린(#4DD5A7) 프라이머리 컬러 적용
- Mobile First 디자인 시스템 정의
- 15개 섹션: 컬러, 타이포그래피, 간격, 카드, 버튼, 배지, 아이콘, 네비게이션, 폼, 모달, 애니메이션, 접근성, 반응형 등 | +| 1.2.3 | 2025-10-21 | 이미준 | 네비게이션 간소화 및 Todo 상세 이동 개선
- **설정 메뉴 제거**: 모든 화면에서 설정 메뉴 제거 (사이드바, 하단 네비게이션, 메뉴 모달)
- 로그아웃 기능은 프로필 영역으로 통합
- 네비게이션 단순화로 사용자 혼란 최소화
- **02-대시보드 Todo 인터랙션 개선**:
- Todo 항목 클릭 시 해당 Todo가 포함된 회의록 상세 화면으로 이동
- URL 파라미터로 회의록 ID와 Todo ID 전달
- 회의록 상세 화면에서 해당 Todo 섹션으로 자동 스크롤
- 프로토타입 파일 수정: 02-대시보드.html, 09-Todo관리.html, 05-회의진행.html, 05-회의진행-old.html, 05-회의진행 - 복사본.html | +| 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 | --- diff --git a/reference/sampleimg/ToDo목록.png b/reference/sampleimg/ToDo목록화면.png similarity index 100% rename from reference/sampleimg/ToDo목록.png rename to reference/sampleimg/ToDo목록화면.png diff --git a/reference/sampleimg/대시보드.png b/reference/sampleimg/대시보드화면.png similarity index 100% rename from reference/sampleimg/대시보드.png rename to reference/sampleimg/대시보드화면.png diff --git a/reference/sampleimg/회의록목록.png b/reference/sampleimg/회의록목록화면.png similarity index 100% rename from reference/sampleimg/회의록목록.png rename to reference/sampleimg/회의록목록화면.png diff --git a/reference/sampleimg/회의록상세.jpeg b/reference/sampleimg/회의록상세화면.jpeg similarity index 100% rename from reference/sampleimg/회의록상세.jpeg rename to reference/sampleimg/회의록상세화면.jpeg diff --git a/reference/sampleimg/회의진행화면-AI제안탭.png b/reference/sampleimg/회의진행화면-AI제안탭.png new file mode 100644 index 0000000..e26dc8b Binary files /dev/null and b/reference/sampleimg/회의진행화면-AI제안탭.png differ diff --git a/reference/sampleimg/회의진행화면-관련회의록탭.png b/reference/sampleimg/회의진행화면-관련회의록탭.png new file mode 100644 index 0000000..dedf3fa Binary files /dev/null and b/reference/sampleimg/회의진행화면-관련회의록탭.png differ diff --git a/reference/sampleimg/회의진행화면-용어사전탭.png b/reference/sampleimg/회의진행화면-용어사전탭.png new file mode 100644 index 0000000..e966bce Binary files /dev/null and b/reference/sampleimg/회의진행화면-용어사전탭.png differ