diff --git a/claude/uiux-prototype.md b/claude/uiux-prototype.md new file mode 100644 index 0000000..db9bf21 --- /dev/null +++ b/claude/uiux-prototype.md @@ -0,0 +1,73 @@ +# 프로토타입작성가이드 +[요청사항] +- <작성원칙>을 준용하여 설계 +- <작성순서>에 따라 설계 +- [결과파일] 안내에 따라 파일 작성 +- Sequential MCP와 Playwright MCP 이용 + +[가이드] +<작성원칙> +- **UI/UX설계서와 매칭**되어야 함. **불필요한 추가 개발 금지** +- 스타일가이드를 준수하여 개발 +<작성순서> +- 준비: 참고자료 분석 및 이해 +- 실행: + - <병렬처리> 전략에 따라 프로토타입 개발 + - 예제 데이터는 화면 간 일관성 있게 개발 + - 각 화면간 전환이 되도록 개발 +- 검토: + - <작성원칙> 준수 검토 + - '[체크리스트]'에 따라 검토하고 수정 +- 테스트: + - 프로토타입을 웹브라우저에 실행하여 테스트 + - 버그 수정 및 화면 개선 +<병렬처리> +- 서브 에이전트 활용: Task 도구로 서비스별 동시 작업 +- 의존성 기반 그룹화: 의존 관계에 따른 순차/병렬 처리 결정 +- 통합 검증: 병렬 작업 완료 후 전체적 일관성 검증 + +[참고자료] +- design/uiux/style-guide.md +- design/uiux/uiux.md + +[결과파일] +- 프로토타입: design/uiux/prototype/{화면순서번호 2자리}-{화면명}.html +- 화면명은 한글로 작성 + +[체크리스트] +1. 화면별 기능 동작 체크 + 아래 체크 템플릿을 이용하여 화면별 기능 동작 체크 + {화면명} + | 기능/액션 | 예상 결과 | 실제 결과 | 상태 | 비고 | + |-----------|-----------|-----------|------|------| + | [수행할 액션] | [기대하는 동작] | [실제 확인된 동작] | 성공/실패/부분성공 | [특이사항] | + + 예시) + 메인/홈 화면 + | 기능/액션 | 예상 결과 | 실제 결과 | 상태 | 비고 | + |-----------|-----------|-----------|------|------| + | 로고 클릭 | 메인 페이지 새로고침/유지 | | 성공 | | + | 메인 메뉴 클릭 | 해당 페이지로 이동 | | 부분성공 | | + +2. 화면간 데이터 일관성 체크 + 아래 체크 템플릿을 이용하여 데이터 일관성 체크 + | 데이터 | 데이터 사용 화면 | 일관성 | 비고 | + |-------------|-------|-------|-------| + | [데이터명] | [화면명] | 일치/불일치 | [차이점] | + + 예시) + | 데이터 | 데이터 사용 화면 | 일관성 | 비고 | + |-------------|-------|-------|-------| + | 상품정보 | 메인화면, 상품상세화면 | 불일치| 메인화면에서 클릭한 상품정보와 상품 상세화면이 다름 | + +3. 화면간 연결성 체크 + 아래 체크 템플릿을 이용하여 화면별 연결성 체크 + | 출발화면 | 연결방법 | 도착화면 | 예상 동작 | 실제 동작 | 상태 | + |-----------|-----------|-----------|-----------|-----------|------| + | [화면A] | [버튼/링크명] | [화면B] | [동작설명] | [확인결과] | 정상/비정상 | + + 예시) + | 출발화면 | 연결방법 | 도착화면 | 예상동작 | 실제동작 | 상태 | + |--------|----------|--------|------|------| + | 모든 화면 | 로고 클릭 | 메인 화면 | 메인화면 리프레시 | 동작안함 | 비정상 | + | 모든 화면 | 메인 메뉴 | 각 주요 화면 | 각 화면 연결 | 정상 연결됨 | 정상 | diff --git a/design/uiux/style-guide.bk.md b/design/uiux/style-guide.bk.md new file mode 100644 index 0000000..8ec6cf6 --- /dev/null +++ b/design/uiux/style-guide.bk.md @@ -0,0 +1,1767 @@ +# 회의록 작성 및 공유 개선 서비스 - 스타일 가이드 + +## 문서 정보 +- **작성일**: 2025-10-21 +- **작성자**: 이미준 (서비스 기획자) +- **버전**: 1.0 +- **기반**: Mobile First Design Philosophy + +--- + +## 목차 +1. [브랜드 아이덴티티](#브랜드-아이덴티티) +2. [디자인 원칙](#디자인-원칙) +3. [컬러 시스템](#컬러-시스템) +4. [타이포그래피](#타이포그래피) +5. [간격 시스템](#간격-시스템) +6. [컴포넌트 스타일](#컴포넌트-스타일) +7. [반응형 브레이크포인트](#반응형-브레이크포인트) +8. [서비스 특화 컴포넌트](#서비스-특화-컴포넌트) +9. [인터랙션 패턴](#인터랙션-패턴) +10. [아이콘 시스템](#아이콘-시스템) +11. [애니메이션 가이드](#애니메이션-가이드) +12. [상태 표시](#상태-표시) +13. [접근성 표준](#접근성-표준) +14. [변경 이력](#변경-이력) + +--- + +## 1. 브랜드 아이덴티티 + +### 디자인 컨셉 +**"정확하고 지능적인 협업"** + +업무 지식이 없어도 AI의 도움으로 정확한 회의록을 작성하고, 실시간으로 협업하며, 효율적으로 공유할 수 있는 전문적이면서도 접근하기 쉬운 서비스. + +### 핵심 가치 +- **정확성 (Accuracy)**: AI 기반 자동 작성과 맥락 기반 용어 설명으로 정확한 회의록 보장 +- **협업 (Collaboration)**: 실시간 동기화와 섹션별 검증으로 참석자 간 원활한 협업 +- **지능 (Intelligence)**: AI 자동 요약, Todo 추출, 관련 회의록 연결 등 스마트한 기능 +- **효율성 (Efficiency)**: Mobile First 설계로 언제 어디서나 빠르고 편리한 접근 + +### 브랜드 성격 +- **전문적 (Professional)**: 비즈니스 환경에 적합한 신뢰감 +- **접근 가능 (Accessible)**: 누구나 쉽게 사용할 수 있는 직관성 +- **스마트 (Smart)**: AI 기술의 지능적 활용 +- **협력적 (Collaborative)**: 팀워크를 촉진하는 협업 중심 + +### 디자인 키워드 +- Clean & Modern +- Intuitive & User-friendly +- Professional & Trustworthy +- Collaborative & Connected +- AI-powered & Smart + +--- + +## 2. 디자인 원칙 + +### 2.1 Mobile First +**작은 화면에서 시작하여 큰 화면으로 확장** + +- **우선순위 중심**: 제한된 공간에서 가장 중요한 기능과 정보에 집중 +- **점진적 향상**: 모바일 기본 경험을 먼저 완성하고, 화면이 커질수록 기능 추가 +- **성능 최적화**: 모바일 환경의 제약(네트워크, 처리 능력)을 우선 고려 +- **터치 우선**: 터치 인터랙션을 기본으로 설계, 마우스는 추가 기능 + +### 2.2 사용자 중심 설계 +**사용자가 목표를 쉽게 달성할 수 있도록 지원** + +- **단순함 (Simplicity)**: 복잡한 기능을 간단하게 표현 +- **일관성 (Consistency)**: 동일한 패턴과 용어를 전체 서비스에서 일관되게 사용 +- **피드백 (Feedback)**: 모든 사용자 액션에 즉각적이고 명확한 반응 제공 +- **오류 방지 (Error Prevention)**: 실수를 사전에 차단하고, 발생 시 명확한 해결 방법 제공 + +### 2.3 접근성 우선 +**모든 사용자가 동등하게 사용할 수 있도록 설계** + +- **WCAG 2.1 Level AA 준수**: 국제 웹 접근성 표준 충족 +- **키보드 네비게이션**: 모든 기능을 키보드만으로 조작 가능 +- **스크린 리더 지원**: 시각장애인을 위한 적절한 ARIA 속성 제공 +- **색상 대비**: 최소 4.5:1 대비율로 가독성 보장 + +### 2.4 실시간 협업 지원 +**여러 사용자가 동시에 작업할 수 있도록 최적화** + +- **즉각적 동기화**: 변경 사항을 실시간으로 모든 참석자에게 전달 +- **충돌 방지**: 동시 편집 충돌을 사전 감지 및 해결 +- **명확한 상태 표시**: 누가 무엇을 하고 있는지 실시간으로 표시 + +### 2.5 AI 투명성 +**AI 기능을 이해하기 쉽고 신뢰할 수 있게 표현** + +- **진행 상황 표시**: AI 처리 중임을 명확히 알림 +- **신뢰도 표시**: AI 결과의 신뢰도를 시각적으로 전달 +- **수정 가능성**: AI 결과를 언제든 수동으로 수정 가능 + +--- + +## 3. 컬러 시스템 + +### 3.1 Primary Colors (주요 색상) + +#### Blue (메인 브랜드 색상) +전문성, 신뢰, 기술을 나타내는 주요 색상 + +- **Primary 50**: `#E3F2FD` - 배경, 하이라이트 +- **Primary 100**: `#BBDEFB` - 호버 배경 +- **Primary 200**: `#90CAF9` - 비활성 상태 +- **Primary 300**: `#64B5F6` - 보조 요소 +- **Primary 400**: `#42A5F5` - 인터랙티브 요소 +- **Primary 500**: `#2196F3` ⭐ **기본** - 주요 버튼, 링크 +- **Primary 600**: `#1E88E5` - 호버 상태 +- **Primary 700**: `#1976D2` - Active 상태 +- **Primary 800**: `#1565C0` - 강조 +- **Primary 900**: `#0D47A1` - 최고 강조 + +**사용 예시:** +- 주요 액션 버튼 (회의 시작, 저장, 공유) +- 링크 텍스트 +- 선택된 탭/메뉴 +- 진행 바 +- 포커스 인디케이터 + +### 3.2 Secondary Colors (보조 색상) + +#### Green (성공, 완료) +완료 상태, 긍정적 액션을 나타냄 + +- **Secondary 50**: `#E8F5E9` +- **Secondary 100**: `#C8E6C9` +- **Secondary 500**: `#4CAF50` ⭐ **기본** +- **Secondary 700**: `#388E3C` +- **Secondary 900**: `#1B5E20` + +**사용 예시:** +- 검증 완료 배지 +- Todo 완료 체크 +- 성공 메시지 +- 진행률 표시 + +#### Purple (AI 기능) +AI 관련 기능을 시각적으로 구분 + +- **Accent 50**: `#F3E5F5` +- **Accent 100**: `#E1BEE7` +- **Accent 500**: `#9C27B0` ⭐ **기본** +- **Accent 700**: `#7B1FA2` + +**사용 예시:** +- AI 자동 작성 인디케이터 +- 전문용어 하이라이트 +- AI 제안 배지 +- 맥락 기반 설명 툴팁 + +### 3.3 Semantic Colors (의미 색상) + +#### Success (성공) +- **Color**: `#4CAF50` (Green 500) +- **Background**: `#E8F5E9` (Green 50) +- **사용**: 성공 메시지, 완료 상태 + +#### Warning (경고) +- **Color**: `#FF9800` (Orange 500) +- **Background**: `#FFF3E0` (Orange 50) +- **사용**: 경고 메시지, 주의 필요 + +#### Error (오류) +- **Color**: `#F44336` (Red 500) +- **Background**: `#FFEBEE` (Red 50) +- **사용**: 오류 메시지, 필수 항목 누락 + +#### Info (정보) +- **Color**: `#2196F3` (Blue 500) +- **Background**: `#E3F2FD` (Blue 50) +- **사용**: 정보 메시지, 안내 + +### 3.4 Neutral Colors (중립 색상) + +#### Gray Scale +텍스트, 배경, 테두리에 사용 + +- **Gray 50**: `#FAFAFA` - 페이지 배경 +- **Gray 100**: `#F5F5F5` - 카드 배경 +- **Gray 200**: `#EEEEEE` - 비활성 배경 +- **Gray 300**: `#E0E0E0` - 테두리 +- **Gray 400**: `#BDBDBD` - 비활성 텍스트 +- **Gray 500**: `#9E9E9E` - 보조 텍스트 +- **Gray 600**: `#757575` - 아이콘 +- **Gray 700**: `#616161` - 부제목 +- **Gray 800**: `#424242` - 본문 텍스트 +- **Gray 900**: `#212121` - 제목 텍스트 + +#### White & Black +- **White**: `#FFFFFF` - 카드, 모달 배경 +- **Black**: `#000000` - 텍스트 (투명도 87%) + +### 3.5 색상 접근성 가이드 + +#### 텍스트 대비율 (WCAG 2.1 Level AA) +- **일반 텍스트**: 최소 4.5:1 +- **대형 텍스트** (18px 이상 또는 14px Bold): 최소 3:1 +- **UI 컴포넌트**: 최소 3:1 + +#### 색상 조합 예시 (통과) +- Primary 500 (`#2196F3`) on White - **대비율 3.1:1** ✅ (Large Text) +- Gray 900 (`#212121`) on White - **대비율 16.1:1** ✅ +- Gray 700 (`#616161`) on White - **대비율 5.7:1** ✅ +- White on Primary 700 (`#1976D2`) - **대비율 5.3:1** ✅ + +#### 색상만으로 정보 전달 금지 +- ❌ 빨간색 텍스트만으로 오류 표시 +- ✅ 빨간색 + 아이콘 + "오류" 텍스트 + +--- + +## 4. 타이포그래피 + +### 4.1 폰트 패밀리 + +#### Primary Font (한글) +```css +font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, 'Noto Sans KR', sans-serif; +``` + +**Pretendard 특징:** +- 한글 가독성 우수 +- 다양한 굵기 지원 (Thin~Black) +- 웹폰트 최적화 (가변 폰트 지원) +- 무료 라이선스 (OFL) + +**대체 폰트:** +- macOS/iOS: -apple-system (San Francisco) +- Windows: 맑은 고딕 (시스템 기본) +- 기타: Noto Sans KR + +#### Secondary Font (영문, 숫자) +```css +font-family: 'Inter', 'Roboto', Arial, sans-serif; +``` + +**Inter 특징:** +- 숫자 가독성 우수 (Tabular Numbers) +- UI 최적화 +- 웹폰트 최적화 + +### 4.2 타입 스케일 + +#### Heading (제목) + +| 용도 | 크기 | 굵기 | 행간 | CSS Class | 사용 예시 | +|------|------|------|------|-----------|----------| +| **H1** | 32px | Bold (700) | 1.2 (38px) | `.text-h1` | 페이지 제목 | +| **H2** | 24px | Bold (700) | 1.3 (31px) | `.text-h2` | 섹션 제목 | +| **H3** | 20px | SemiBold (600) | 1.4 (28px) | `.text-h3` | 카드 제목 | +| **H4** | 18px | SemiBold (600) | 1.4 (25px) | `.text-h4` | 서브섹션 제목 | +| **H5** | 16px | Medium (500) | 1.5 (24px) | `.text-h5` | 그룹 제목 | +| **H6** | 14px | Medium (500) | 1.5 (21px) | `.text-h6` | 라벨 제목 | + +#### Body (본문) + +| 용도 | 크기 | 굵기 | 행간 | CSS Class | 사용 예시 | +|------|------|------|------|-----------|----------| +| **Body Large** | 16px | Regular (400) | 1.5 (24px) | `.text-body-lg` | 주요 본문 | +| **Body** | 14px | Regular (400) | 1.5 (21px) | `.text-body` | 기본 본문 | +| **Body Small** | 13px | Regular (400) | 1.5 (19px) | `.text-body-sm` | 보조 텍스트 | +| **Caption** | 12px | Regular (400) | 1.4 (17px) | `.text-caption` | 캡션, 메타 정보 | + +#### Special (특수) + +| 용도 | 크기 | 굵기 | 행간 | CSS Class | 사용 예시 | +|------|------|------|------|-----------|----------| +| **Button Large** | 16px | SemiBold (600) | 1.0 | `.text-btn-lg` | 주요 버튼 | +| **Button** | 14px | Medium (500) | 1.0 | `.text-btn` | 기본 버튼 | +| **Button Small** | 13px | Medium (500) | 1.0 | `.text-btn-sm` | 작은 버튼 | +| **Label** | 12px | Medium (500) | 1.0 | `.text-label` | 입력 레이블 | +| **Code** | 14px | Regular (400) | 1.5 | `.text-code` | 코드, 기술 정보 | + +### 4.3 타이포그래피 원칙 + +#### 가독성 우선 +- **최소 본문 크기**: 14px (모바일), 16px (데스크톱 권장) +- **적절한 행간**: 본문은 1.5 이상 +- **적절한 줄 길이**: 50-75자 (한글 기준 25-40자) + +#### 계층 구조 +- **제목과 본문의 명확한 구분**: 크기, 굵기, 색상 차이 +- **일관된 스케일**: 1.25배 비율 (Modular Scale) + +#### 색상 사용 +- **제목**: Gray 900 (`#212121`) +- **본문**: Gray 800 (`#424242`) +- **보조 텍스트**: Gray 600 (`#757575`) +- **비활성 텍스트**: Gray 400 (`#BDBDBD`) + +### 4.4 반응형 타이포그래피 + +#### Mobile (320px~767px) +```css +/* H1 축소 */ +.text-h1 { font-size: 28px; } +.text-h2 { font-size: 22px; } + +/* Body 기본 유지 */ +.text-body { font-size: 14px; } +``` + +#### Tablet (768px~1023px) +```css +/* 기본 스케일 유지 */ +.text-h1 { font-size: 32px; } +.text-body { font-size: 14px; } +``` + +#### Desktop (1024px+) +```css +/* Body 확대 */ +.text-body-lg { font-size: 18px; } +.text-body { font-size: 16px; } +``` + +--- + +## 5. 간격 시스템 + +### 5.1 기본 단위 +**Base Unit: 4px** + +모든 간격은 4px의 배수를 사용하여 일관성 유지 + +### 5.2 간격 스케일 + +| Token | 값 | Rem | 사용 예시 | +|-------|-----|-----|----------| +| `spacing-0` | 0px | 0 | 간격 없음 | +| `spacing-1` | 4px | 0.25rem | 아이콘-텍스트 간격 | +| `spacing-2` | 8px | 0.5rem | 버튼 내부 패딩 (세로) | +| `spacing-3` | 12px | 0.75rem | 작은 요소 간격 | +| `spacing-4` | 16px | 1rem | 기본 요소 간격 | +| `spacing-5` | 20px | 1.25rem | 중간 요소 간격 | +| `spacing-6` | 24px | 1.5rem | 카드 내부 패딩 | +| `spacing-8` | 32px | 2rem | 섹션 간격 | +| `spacing-10` | 40px | 2.5rem | 큰 섹션 간격 | +| `spacing-12` | 48px | 3rem | 페이지 상하 여백 | +| `spacing-16` | 64px | 4rem | 특별한 강조 간격 | + +### 5.3 컴포넌트별 간격 + +#### 버튼 +```css +/* Primary Button */ +padding: 12px 24px; /* spacing-3 spacing-6 */ +gap: 8px; /* 아이콘-텍스트 간격 */ + +/* Small Button */ +padding: 8px 16px; /* spacing-2 spacing-4 */ +``` + +#### 카드 +```css +padding: 24px; /* spacing-6 */ +gap: 16px; /* 내부 요소 간격 */ +``` + +#### 폼 +```css +/* Input Field */ +padding: 12px 16px; /* spacing-3 spacing-4 */ +margin-bottom: 16px; /* 필드 간격 */ + +/* Label */ +margin-bottom: 8px; /* spacing-2 */ +``` + +#### 리스트 +```css +/* List Item */ +padding: 16px; /* spacing-4 */ +gap: 12px; /* 내부 요소 간격 */ + +/* List */ +gap: 8px; /* 항목 간격 */ +``` + +### 5.4 레이아웃 간격 + +#### 페이지 여백 +```css +/* Mobile */ +padding: 16px; /* spacing-4 */ + +/* Tablet */ +padding: 24px; /* spacing-6 */ + +/* Desktop */ +padding: 32px; /* spacing-8 */ +``` + +#### 섹션 간격 +```css +/* 같은 그룹 내 섹션 */ +margin-bottom: 24px; /* spacing-6 */ + +/* 다른 그룹 간 섹션 */ +margin-bottom: 48px; /* spacing-12 */ +``` + +--- + +## 6. 컴포넌트 스타일 + +### 6.1 버튼 (Buttons) + +#### Primary Button +**주요 액션 (회의 시작, 저장, 공유 등)** + +```css +background: Primary 500 (#2196F3); +color: White; +padding: 12px 24px; +border-radius: 8px; +font-weight: 600; +font-size: 16px; +box-shadow: 0 2px 4px rgba(0,0,0,0.1); + +/* Hover */ +background: Primary 600 (#1E88E5); +box-shadow: 0 4px 8px rgba(0,0,0,0.15); + +/* Active */ +background: Primary 700 (#1976D2); +transform: scale(0.98); + +/* Disabled */ +background: Gray 200 (#EEEEEE); +color: Gray 400 (#BDBDBD); +cursor: not-allowed; +``` + +#### Secondary Button +**보조 액션 (취소, 건너뛰기 등)** + +```css +background: White; +color: Primary 500; +border: 1px solid Primary 500; +padding: 12px 24px; +border-radius: 8px; + +/* Hover */ +background: Primary 50 (#E3F2FD); +border-color: Primary 600; +``` + +#### Text Button +**경량 액션 (더보기, 닫기 등)** + +```css +background: transparent; +color: Primary 500; +padding: 8px 16px; + +/* Hover */ +background: Primary 50; +``` + +#### Icon Button +**아이콘만 있는 버튼** + +```css +width: 44px; +height: 44px; /* 터치 영역 확보 */ +border-radius: 50%; +display: flex; +align-items: center; +justify-content: center; + +/* Hover */ +background: Gray 100; +``` + +#### Floating Action Button (FAB) +**화면 고정 액션 버튼** + +```css +position: fixed; +bottom: 24px; +right: 24px; +width: 56px; +height: 56px; +border-radius: 50%; +background: Primary 500; +box-shadow: 0 4px 12px rgba(33, 150, 243, 0.4); +z-index: 100; + +/* Hover */ +transform: scale(1.1); +box-shadow: 0 6px 16px rgba(33, 150, 243, 0.5); +``` + +### 6.2 입력 필드 (Input Fields) + +#### Text Input +```css +border: 1px solid Gray 300; +border-radius: 8px; +padding: 12px 16px; +font-size: 16px; /* iOS 확대 방지 */ +background: White; +transition: border-color 0.2s; + +/* Focus */ +border-color: Primary 500; +outline: 2px solid Primary 100; + +/* Error */ +border-color: Error (#F44336); +outline: 2px solid rgba(244, 67, 54, 0.1); + +/* Disabled */ +background: Gray 100; +color: Gray 400; +cursor: not-allowed; +``` + +#### Textarea +```css +/* Text Input 속성 + */ +min-height: 100px; +resize: vertical; +``` + +#### Select / Dropdown +```css +/* Text Input 속성 + */ +appearance: none; +background-image: url('chevron-down-icon.svg'); +background-repeat: no-repeat; +background-position: right 12px center; +padding-right: 40px; +``` + +#### Checkbox +```css +width: 20px; +height: 20px; +border: 2px solid Gray 400; +border-radius: 4px; +cursor: pointer; + +/* Checked */ +background: Primary 500; +border-color: Primary 500; +/* Checkmark icon */ +``` + +#### Radio Button +```css +width: 20px; +height: 20px; +border: 2px solid Gray 400; +border-radius: 50%; + +/* Selected */ +border-color: Primary 500; +/* Inner dot */ +background: radial-gradient(Primary 500 40%, transparent 40%); +``` + +#### Toggle Switch +```css +width: 48px; +height: 24px; +border-radius: 12px; +background: Gray 300; +position: relative; + +/* Circle */ +width: 20px; +height: 20px; +border-radius: 50%; +background: White; +position: absolute; +left: 2px; +transition: left 0.2s; + +/* On State */ +background: Primary 500; +/* Circle moves right */ +left: 26px; +``` + +### 6.3 카드 (Cards) + +#### Standard Card +```css +background: White; +border-radius: 12px; +padding: 24px; +box-shadow: 0 1px 3px rgba(0,0,0,0.1); +transition: box-shadow 0.2s; + +/* Hover (클릭 가능한 경우) */ +box-shadow: 0 4px 12px rgba(0,0,0,0.15); +cursor: pointer; +``` + +#### Todo Card +```css +/* Standard Card + */ +border-left: 4px solid transparent; + +/* 완료 */ +border-left-color: Success (#4CAF50); +opacity: 0.7; + +/* 마감 임박 */ +border-left-color: Warning (#FF9800); + +/* 지연 */ +border-left-color: Error (#F44336); +``` + +#### Meeting Card +```css +/* Standard Card + */ +gap: 12px; +display: flex; +flex-direction: column; +``` + +### 6.4 배지 (Badges) + +#### Status Badge +```css +padding: 4px 12px; +border-radius: 12px; +font-size: 12px; +font-weight: 500; +display: inline-flex; +align-items: center; +gap: 4px; + +/* 작성중 */ +background: Warning 50; +color: Warning 700; + +/* 확정완료 */ +background: Success 50; +color: Success 700; + +/* 검증완료 */ +background: Primary 50; +color: Primary 700; +``` + +#### Count Badge +```css +min-width: 20px; +height: 20px; +padding: 0 6px; +background: Error (#F44336); +color: White; +border-radius: 10px; +font-size: 11px; +font-weight: 600; +display: flex; +align-items: center; +justify-content: center; +``` + +### 6.5 모달 (Modals) + +#### Modal Overlay +```css +position: fixed; +top: 0; +left: 0; +right: 0; +bottom: 0; +background: rgba(0, 0, 0, 0.5); +z-index: 1000; +display: flex; +align-items: center; +justify-content: center; +``` + +#### Modal Container +```css +background: White; +border-radius: 16px; +max-width: 500px; +width: calc(100% - 32px); +max-height: 90vh; +overflow-y: auto; +box-shadow: 0 20px 60px rgba(0,0,0,0.3); + +/* Mobile: Full Screen */ +@media (max-width: 767px) { + width: 100%; + height: 100%; + max-height: 100vh; + border-radius: 0; +} +``` + +### 6.6 알림 (Toast / Snackbar) + +```css +position: fixed; +bottom: 24px; +left: 50%; +transform: translateX(-50%); +background: Gray 800; +color: White; +padding: 12px 24px; +border-radius: 8px; +box-shadow: 0 4px 12px rgba(0,0,0,0.3); +z-index: 2000; +animation: slideUp 0.3s ease-out; + +/* Success */ +background: Success (#4CAF50); + +/* Error */ +background: Error (#F44336); + +/* Warning */ +background: Warning (#FF9800); +``` + +--- + +## 7. 반응형 브레이크포인트 + +### 7.1 브레이크포인트 정의 + +```css +/* Mobile Small */ +@media (min-width: 320px) { /* ... */ } + +/* Mobile */ +@media (min-width: 375px) { /* ... */ } + +/* Mobile Large */ +@media (min-width: 425px) { /* ... */ } + +/* Tablet */ +@media (min-width: 768px) { /* ... */ } + +/* Desktop */ +@media (min-width: 1024px) { /* ... */ } + +/* Desktop Large */ +@media (min-width: 1440px) { /* ... */ } +``` + +### 7.2 디바이스별 최적화 + +#### Mobile (320px~767px) +- **레이아웃**: 단일 컬럼 +- **네비게이션**: 하단 탭 바 +- **터치 영역**: 최소 44x44px +- **폰트**: 기본 스케일 +- **간격**: 16px 페이지 여백 + +#### Tablet (768px~1023px) +- **레이아웃**: 2컬럼 (일부 화면) +- **네비게이션**: 좌측 사이드바 (선택) +- **폰트**: 기본 스케일 +- **간격**: 24px 페이지 여백 + +#### Desktop (1024px+) +- **레이아웃**: 2-3컬럼 +- **네비게이션**: 좌측 고정 사이드바 +- **폰트**: 확대 스케일 +- **간격**: 32px 페이지 여백 +- **추가 기능**: 단축키, 고급 필터 + +--- + +## 8. 서비스 특화 컴포넌트 + +### 8.1 실시간 발언 표시기 + +**회의 진행 중 현재 발언자와 텍스트 표시** + +```css +.live-speech { + background: Accent 50 (#F3E5F5); + border-left: 4px solid Accent 500 (#9C27B0); + padding: 16px; + border-radius: 8px; + position: sticky; + top: 0; + z-index: 10; +} + +.speaker-name { + font-weight: 600; + color: Accent 700; + display: flex; + align-items: center; + gap: 8px; +} + +.speaking-indicator { + width: 8px; + height: 8px; + background: Error (#F44336); + border-radius: 50%; + animation: pulse 1.5s infinite; +} + +@keyframes pulse { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.5; } +} + +.speech-text { + color: Gray 800; + font-size: 14px; + line-height: 1.5; + margin-top: 8px; +} +``` + +### 8.2 전문용어 하이라이트 + +**AI가 감지한 전문용어 표시** + +```css +.term-highlight { + background: linear-gradient(180deg, transparent 60%, Accent 200 60%); + cursor: pointer; + position: relative; + border-bottom: 1px dotted Accent 500; + transition: background 0.2s; +} + +.term-highlight:hover { + background: Accent 100; +} + +/* 툴팁 */ +.term-tooltip { + position: absolute; + bottom: 100%; + left: 50%; + transform: translateX(-50%); + background: Gray 900; + color: White; + padding: 12px 16px; + border-radius: 8px; + font-size: 13px; + width: 250px; + box-shadow: 0 4px 12px rgba(0,0,0,0.3); + z-index: 100; +} +``` + +### 8.3 검증 완료 섹션 + +**섹션별 검증 상태 표시** + +```css +.section-verified { + border: 2px solid Success (#4CAF50); + border-radius: 8px; + padding: 24px; + position: relative; +} + +.verified-badge { + position: absolute; + top: -12px; + right: 16px; + background: Success; + color: White; + padding: 4px 12px; + border-radius: 12px; + font-size: 12px; + font-weight: 600; + display: flex; + align-items: center; + gap: 4px; +} + +/* 검증자 아바타 */ +.verifier-avatars { + display: flex; + margin-top: 12px; +} + +.verifier-avatar { + width: 28px; + height: 28px; + border-radius: 50%; + border: 2px solid White; + margin-left: -8px; +} + +.verifier-avatar:first-child { + margin-left: 0; +} +``` + +### 8.4 실시간 동기화 인디케이터 + +**다른 사용자의 수정 사항 표시** + +```css +.sync-indicator { + position: fixed; + top: 80px; + right: 16px; + display: flex; + align-items: center; + gap: 8px; + padding: 8px 16px; + background: White; + border-radius: 20px; + box-shadow: 0 2px 8px rgba(0,0,0,0.1); + z-index: 50; +} + +.sync-dot { + width: 8px; + height: 8px; + background: Success; + border-radius: 50%; +} + +/* 동기화 중 */ +.sync-dot.syncing { + animation: blink 1s infinite; +} + +@keyframes blink { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.3; } +} + +/* 다른 사용자 편집 중 */ +.editing-highlight { + background: rgba(255, 152, 0, 0.1); + border-left: 3px solid Warning (#FF9800); + animation: fadeHighlight 3s ease-out; +} + +@keyframes fadeHighlight { + 0% { opacity: 1; } + 100% { opacity: 0; } +} +``` + +### 8.5 AI 처리 인디케이터 + +**AI가 처리 중임을 표시** + +```css +.ai-processing { + display: flex; + align-items: center; + gap: 8px; + padding: 12px 16px; + background: Accent 50; + border-radius: 8px; + border-left: 4px solid Accent 500; +} + +.ai-icon { + width: 20px; + height: 20px; + animation: rotate 2s linear infinite; +} + +@keyframes rotate { + from { transform: rotate(0deg); } + to { transform: rotate(360deg); } +} + +.ai-text { + color: Accent 700; + font-size: 13px; + font-weight: 500; +} + +/* 신뢰도 표시 */ +.confidence-indicator { + display: flex; + gap: 4px; + margin-top: 4px; +} + +.confidence-bar { + height: 4px; + width: 40px; + background: Gray 200; + border-radius: 2px; + overflow: hidden; +} + +.confidence-fill { + height: 100%; + background: Success; + transition: width 0.3s; +} + +/* 높음: 80%+ = Success */ +/* 보통: 60-80% = Warning */ +/* 낮음: <60% = Error */ +``` + +### 8.6 Todo 진행 상태 카드 + +**Todo 완료 상태 시각화** + +```css +.todo-progress-card { + background: White; + border-radius: 12px; + padding: 20px; + box-shadow: 0 1px 3px rgba(0,0,0,0.1); +} + +/* 원형 진행 바 */ +.circular-progress { + width: 100px; + height: 100px; + border-radius: 50%; + background: conic-gradient( + Primary 500 var(--progress-percent), + Gray 200 var(--progress-percent) + ); + display: flex; + align-items: center; + justify-content: center; + position: relative; +} + +.progress-inner { + width: 80px; + height: 80px; + background: White; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; +} + +.progress-percent { + font-size: 24px; + font-weight: 700; + color: Primary 500; +} + +.progress-label { + font-size: 12px; + color: Gray 600; +} +``` + +--- + +## 9. 인터랙션 패턴 + +### 9.1 터치 인터랙션 (Mobile) + +#### 기본 터치 영역 +```css +/* 최소 터치 영역: 44x44px */ +min-width: 44px; +min-height: 44px; +``` + +#### 스와이프 액션 +**리스트 항목 스와이프로 빠른 액션** + +- **좌→우 스와이프**: 완료 처리 (Todo) +- **우→좌 스와이프**: 삭제/편집 메뉴 표시 + +```css +.swipe-action { + position: absolute; + right: 0; + top: 0; + bottom: 0; + display: flex; + transform: translateX(100%); + transition: transform 0.3s; +} + +.swiped .swipe-action { + transform: translateX(0); +} + +.swipe-button { + width: 80px; + display: flex; + align-items: center; + justify-content: center; +} + +.swipe-button.delete { + background: Error (#F44336); +} + +.swipe-button.edit { + background: Primary 500; +} +``` + +#### Pull to Refresh +**화면 당겨서 새로고침** + +```css +.pull-refresh-indicator { + position: absolute; + top: -60px; + left: 50%; + transform: translateX(-50%); + display: flex; + align-items: center; + gap: 8px; + transition: top 0.3s; +} + +.pulling .pull-refresh-indicator { + top: 20px; +} + +.refresh-icon { + animation: rotate 1s linear infinite; +} +``` + +### 9.2 키보드 인터랙션 (Desktop) + +#### 포커스 표시 +```css +*:focus { + outline: 2px solid Primary 500; + outline-offset: 2px; +} + +/* 마우스 클릭 시 포커스 숨김 */ +*:focus:not(:focus-visible) { + outline: none; +} +``` + +#### 단축키 안내 +```css +.keyboard-hint { + position: fixed; + bottom: 16px; + right: 16px; + background: Gray 800; + color: White; + padding: 8px 12px; + border-radius: 6px; + font-size: 12px; + opacity: 0.8; +} + +.kbd { + background: Gray 700; + padding: 2px 6px; + border-radius: 4px; + font-family: monospace; + font-size: 11px; + border: 1px solid Gray 600; +} +``` + +**주요 단축키:** +- `Ctrl/Cmd + S`: 저장 +- `Ctrl/Cmd + K`: 검색 +- `Esc`: 모달 닫기 +- `Tab`: 다음 요소 +- `Shift + Tab`: 이전 요소 +- `Enter`: 확인/실행 + +### 9.3 로딩 상태 + +#### Spinner +```css +.spinner { + width: 40px; + height: 40px; + border: 4px solid Gray 200; + border-top-color: Primary 500; + border-radius: 50%; + animation: spin 1s linear infinite; +} + +@keyframes spin { + to { transform: rotate(360deg); } +} +``` + +#### Skeleton UI +```css +.skeleton { + background: linear-gradient( + 90deg, + Gray 200 0%, + Gray 100 50%, + Gray 200 100% + ); + background-size: 200% 100%; + animation: loading 1.5s infinite; + border-radius: 4px; +} + +@keyframes loading { + 0% { background-position: 200% 0; } + 100% { background-position: -200% 0; } +} + +.skeleton-text { + height: 16px; + margin-bottom: 8px; +} + +.skeleton-title { + height: 24px; + width: 60%; + margin-bottom: 12px; +} + +.skeleton-avatar { + width: 40px; + height: 40px; + border-radius: 50%; +} +``` + +#### Progress Bar +```css +.progress-bar { + width: 100%; + height: 4px; + background: Gray 200; + border-radius: 2px; + overflow: hidden; +} + +.progress-fill { + height: 100%; + background: Primary 500; + transition: width 0.3s; +} + +/* Indeterminate (불명확한 진행) */ +.progress-fill.indeterminate { + width: 30%; + animation: indeterminate 1.5s infinite; +} + +@keyframes indeterminate { + 0% { transform: translateX(-100%); } + 100% { transform: translateX(400%); } +} +``` + +### 9.4 실시간 협업 피드백 + +#### 사용자 커서 표시 +```css +.user-cursor { + position: absolute; + pointer-events: none; + z-index: 999; +} + +.cursor-flag { + background: var(--user-color); + color: White; + padding: 2px 6px; + border-radius: 4px; + font-size: 11px; + white-space: nowrap; + transform: translate(-50%, -100%); + margin-top: -4px; +} + +.cursor-pointer { + width: 0; + height: 0; + border-left: 6px solid transparent; + border-right: 6px solid transparent; + border-top: 8px solid var(--user-color); +} +``` + +#### 편집 중 표시 +```css +.editing-user { + background: rgba(var(--user-color-rgb), 0.1); + border-left: 3px solid var(--user-color); + padding-left: 12px; +} + +.editing-badge { + display: inline-flex; + align-items: center; + gap: 4px; + background: var(--user-color); + color: White; + padding: 2px 8px; + border-radius: 10px; + font-size: 11px; + font-weight: 500; +} +``` + +--- + +## 10. 아이콘 시스템 + +### 10.1 아이콘 스타일 + +**아이콘 세트**: Material Icons (Outlined) + +**스타일 가이드:** +- **스타일**: Outlined (선 스타일) +- **일관성**: 동일한 두께(2px), 동일한 라운딩 +- **크기**: 20px (Small), 24px (Default), 32px (Large) + +### 10.2 주요 아이콘 매핑 + +| 기능 | 아이콘 이름 | 사용 위치 | +|------|------------|----------| +| 회의 시작 | `play_circle` | 회의 시작 버튼 | +| 회의 종료 | `stop_circle` | 회의 종료 버튼 | +| 녹음 | `mic` | 녹음 상태 표시 | +| 일시정지 | `pause_circle` | 녹음 일시정지 | +| 저장 | `save` | 저장 버튼 | +| 공유 | `share` | 공유 버튼 | +| 편집 | `edit` | 수정 버튼 | +| 삭제 | `delete` | 삭제 버튼 | +| 검색 | `search` | 검색 입력 | +| 필터 | `filter_list` | 필터 메뉴 | +| 설정 | `settings` | 설정 메뉴 | +| 알림 | `notifications` | 알림 아이콘 | +| 프로필 | `account_circle` | 사용자 프로필 | +| 캘린더 | `calendar_today` | 날짜 선택 | +| 시간 | `schedule` | 시간 선택 | +| 첨부파일 | `attach_file` | 파일 첨부 | +| 다운로드 | `download` | 파일 다운로드 | +| 체크 | `check_circle` | 완료, 검증 | +| 경고 | `warning` | 경고 메시지 | +| 오류 | `error` | 오류 메시지 | +| 정보 | `info` | 정보 메시지 | +| AI | `auto_awesome` | AI 기능 | +| Todo | `check_box` | Todo 항목 | +| 참석자 | `group` | 참석자 목록 | +| 더보기 | `more_vert` | 메뉴 | +| 뒤로가기 | `arrow_back` | 이전 화면 | +| 닫기 | `close` | 모달 닫기 | +| 펼치기 | `expand_more` | 아코디언 열기 | +| 접기 | `expand_less` | 아코디언 닫기 | + +### 10.3 아이콘 색상 + +```css +/* Default */ +color: Gray 600 (#757575); + +/* Active/Selected */ +color: Primary 500 (#2196F3); + +/* Disabled */ +color: Gray 400 (#BDBDBD); + +/* On Color Background */ +color: White; + +/* Semantic */ +.icon-success { color: Success (#4CAF50); } +.icon-warning { color: Warning (#FF9800); } +.icon-error { color: Error (#F44336); } +.icon-ai { color: Accent 500 (#9C27B0); } +``` + +--- + +## 11. 애니메이션 가이드 + +### 11.1 애니메이션 원칙 + +- **목적성**: 모든 애니메이션은 명확한 목적이 있어야 함 +- **자연스러움**: 현실 세계의 물리 법칙을 따름 +- **적절한 속도**: 너무 빠르거나 느리지 않게 +- **성능**: CSS 애니메이션 우선, GPU 가속 활용 + +### 11.2 이징 (Easing) + +```css +/* 표준 Easing */ +--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* Material Design */ +--ease-out: cubic-bezier(0.0, 0, 0.2, 1); +--ease-in: cubic-bezier(0.4, 0, 1, 1); + +/* 탄성 (Elastic) */ +--ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55); +``` + +### 11.3 지속 시간 (Duration) + +| 용도 | 지속 시간 | 예시 | +|------|----------|------| +| **Instant** | 0ms | 즉시 변경 | +| **Quick** | 100ms | 호버 효과, 색상 변경 | +| **Normal** | 200-300ms | 모달 열기, 탭 전환 | +| **Slow** | 400-500ms | 페이지 전환, 복잡한 애니메이션 | + +### 11.4 애니메이션 라이브러리 + +#### 페이드 인 +```css +@keyframes fadeIn { + from { + opacity: 0; + } + to { + opacity: 1; + } +} + +.fade-in { + animation: fadeIn 0.3s var(--ease-out); +} +``` + +#### 슬라이드 업 +```css +@keyframes slideUp { + from { + transform: translateY(20px); + opacity: 0; + } + to { + transform: translateY(0); + opacity: 1; + } +} + +.slide-up { + animation: slideUp 0.3s var(--ease-out); +} +``` + +#### 스케일 +```css +@keyframes scaleIn { + from { + transform: scale(0.9); + opacity: 0; + } + to { + transform: scale(1); + opacity: 1; + } +} + +.scale-in { + animation: scaleIn 0.2s var(--ease-out); +} +``` + +#### 쉐이크 (오류 시) +```css +@keyframes shake { + 0%, 100% { transform: translateX(0); } + 10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); } + 20%, 40%, 60%, 80% { transform: translateX(5px); } +} + +.shake { + animation: shake 0.5s var(--ease-in-out); +} +``` + +### 11.5 성능 최적화 + +**GPU 가속 속성만 사용:** +- ✅ `transform` (translate, scale, rotate) +- ✅ `opacity` +- ❌ `left`, `top` (리플로우 발생) +- ❌ `width`, `height` (리플로우 발생) + +**will-change 활용:** +```css +.will-animate { + will-change: transform, opacity; +} + +/* 애니메이션 완료 후 제거 */ +.animated { + will-change: auto; +} +``` + +--- + +## 12. 상태 표시 + +### 12.1 회의록 상태 + +| 상태 | 색상 | 배지 텍스트 | 설명 | +|------|------|-----------|------| +| **작성중** | Warning | `작성중` | 회의 진행 중 또는 수정 중 | +| **확정완료** | Success | `확정완료` | 최종 확정된 회의록 | +| **공유됨** | Primary | `공유됨` | 참석자에게 공유됨 | + +### 12.2 Todo 상태 + +| 상태 | 색상 | 표시 | 설명 | +|------|------|------|------| +| **진행중** | Gray | `○` | 할당되었으나 미완료 | +| **완료** | Success | `✓` | 완료 처리됨 | +| **마감 임박** | Warning | `⚠` | 3일 이내 마감 | +| **지연** | Error | `!` | 마감일 경과 | + +### 12.3 검증 상태 + +| 상태 | 표시 | 설명 | +|------|------|------| +| **미검증** | 빈 원 | 아직 검증되지 않음 | +| **검증 중** | 부분 체크 | 일부 참석자 검증 | +| **검증 완료** | 체크 아이콘 + 배지 | 모든 참석자 검증 | +| **잠김** | 자물쇠 아이콘 | 수정 불가 | + +### 12.4 동기화 상태 + +| 상태 | 표시 | 설명 | +|------|------|------| +| **동기화됨** | 녹색 점 | 최신 상태 | +| **동기화 중** | 깜빡이는 점 | 서버와 동기화 중 | +| **오프라인** | 회색 점 | 네트워크 끊김 (로컬 저장) | +| **충돌** | 빨간색 느낌표 | 동시 수정 충돌 | + +### 12.5 AI 처리 상태 + +| 상태 | 표시 | 설명 | +|------|------|------| +| **처리 중** | 회전 아이콘 | AI 분석 중 | +| **완료** | 체크 아이콘 | 처리 완료 | +| **오류** | 오류 아이콘 | 처리 실패 | +| **신뢰도 높음** | 3개 바 녹색 | 80% 이상 | +| **신뢰도 보통** | 2개 바 노란색 | 60-80% | +| **신뢰도 낮음** | 1개 바 빨간색 | 60% 미만 | + +--- + +## 13. 접근성 표준 + +### 13.1 WCAG 2.1 Level AA 준수 + +#### Perceivable (인식 가능) +- ✅ 모든 이미지에 대체 텍스트 제공 +- ✅ 색상 대비 4.5:1 이상 (일반 텍스트) +- ✅ 색상 대비 3:1 이상 (대형 텍스트, UI 컴포넌트) +- ✅ 텍스트 200% 확대 시 레이아웃 유지 +- ✅ 색상만으로 정보 전달 금지 + +#### Operable (조작 가능) +- ✅ 모든 기능 키보드로 접근 가능 +- ✅ 포커스 순서 논리적 +- ✅ 포커스 표시 명확 (2px 파란색 테두리) +- ✅ 터치 영역 최소 44x44px +- ✅ 시간 제한 없음 (자동 저장) + +#### Understandable (이해 가능) +- ✅ 명확한 레이블 및 안내 +- ✅ 오류 메시지 구체적 +- ✅ 일관된 네비게이션 +- ✅ 예측 가능한 동작 + +#### Robust (견고함) +- ✅ 시맨틱 HTML 사용 +- ✅ ARIA 속성 적절히 사용 +- ✅ 최신 브라우저 및 보조 기술 지원 + +### 13.2 ARIA 속성 가이드 + +#### 랜드마크 +```html +
+ +
+ + +``` + +#### 버튼 및 링크 +```html + + + + + + 링크 텍스트 + + +``` + +#### 폼 +```html + + + + + +``` + +#### 모달 +```html +
+ + +
+``` + +#### 실시간 업데이트 +```html + +
+ 회의록이 저장되었습니다. +
+ + +
+ 3명이 편집 중입니다. +
+ + +
+ +
+``` + +### 13.3 스크린 리더 테스트 + +**주요 테스트 도구:** +- **NVDA** (Windows, 무료) +- **JAWS** (Windows, 유료) +- **VoiceOver** (macOS/iOS, 내장) +- **TalkBack** (Android, 내장) + +**테스트 체크리스트:** +- [ ] 모든 이미지에 적절한 alt 텍스트 +- [ ] 모든 폼 필드에 레이블 연결 +- [ ] 버튼 및 링크 용도 명확 +- [ ] 모달 열림/닫힘 알림 +- [ ] 오류 메시지 즉시 알림 +- [ ] 실시간 업데이트 알림 +- [ ] 키보드만으로 전체 기능 사용 가능 + +--- + +## 14. 변경 이력 + +| 버전 | 날짜 | 작성자 | 변경 내용 | +|------|------|--------|----------| +| 1.0 | 2025-10-21 | 이미준 | 최초 작성 - 14개 섹션 완료 | + +--- + +## 부록 + +### A. 개발 참고 자료 + +#### CSS 변수 정의 +```css +:root { + /* Primary Colors */ + --primary-50: #E3F2FD; + --primary-500: #2196F3; + --primary-700: #1976D2; + + /* Secondary Colors */ + --secondary-500: #4CAF50; + --accent-500: #9C27B0; + + /* Semantic Colors */ + --success: #4CAF50; + --warning: #FF9800; + --error: #F44336; + --info: #2196F3; + + /* Neutral Colors */ + --gray-50: #FAFAFA; + --gray-800: #424242; + --gray-900: #212121; + + /* Spacing */ + --spacing-2: 8px; + --spacing-4: 16px; + --spacing-6: 24px; + + /* Typography */ + --font-primary: 'Pretendard', sans-serif; + --font-secondary: 'Inter', sans-serif; + + /* Border Radius */ + --radius-sm: 4px; + --radius-md: 8px; + --radius-lg: 12px; + --radius-full: 9999px; + + /* Shadows */ + --shadow-sm: 0 1px 3px rgba(0,0,0,0.1); + --shadow-md: 0 4px 12px rgba(0,0,0,0.15); + --shadow-lg: 0 20px 60px rgba(0,0,0,0.3); + + /* Transitions */ + --transition-fast: 0.1s; + --transition-normal: 0.2s; + --transition-slow: 0.3s; +} +``` + +### B. 디자인 도구 + +**권장 도구:** +- **Figma**: UI 디자인 및 프로토타입 +- **Material Icons**: 아이콘 세트 +- **Coolors**: 색상 팔레트 생성 +- **WebAIM Contrast Checker**: 색상 대비 검사 + +### C. 품질 검사 도구 + +**접근성:** +- Lighthouse (Chrome DevTools) +- axe DevTools +- WAVE Browser Extension + +**성능:** +- WebPageTest +- Chrome DevTools Performance +- React DevTools Profiler + +### D. 참고 문헌 + +- Material Design 3 Guidelines +- Apple Human Interface Guidelines +- WCAG 2.1 Level AA +- Mobile First Design - Luke Wroblewski +- Inclusive Components - Heydon Pickering diff --git a/design/uiux/style-guide.md b/design/uiux/style-guide.md index 8ec6cf6..1259b3f 100644 --- a/design/uiux/style-guide.md +++ b/design/uiux/style-guide.md @@ -1,1767 +1,547 @@ -# 회의록 작성 및 공유 개선 서비스 - 스타일 가이드 +# 회의록 서비스 스타일 가이드 -## 문서 정보 -- **작성일**: 2025-10-21 -- **작성자**: 이미준 (서비스 기획자) -- **버전**: 1.0 -- **기반**: Mobile First Design Philosophy +## 1. 디자인 철학 + +### 핵심 원칙 +- **Mobile First**: 모바일 환경 우선 설계 +- **깔끔한 미니멀리즘**: 정보의 명확한 계층 구조와 여백 활용 +- **직관적 UX**: 사용자가 생각 없이 사용 가능한 인터페이스 +- **일관성**: 모든 화면에서 동일한 디자인 패턴 적용 --- -## 목차 -1. [브랜드 아이덴티티](#브랜드-아이덴티티) -2. [디자인 원칙](#디자인-원칙) -3. [컬러 시스템](#컬러-시스템) -4. [타이포그래피](#타이포그래피) -5. [간격 시스템](#간격-시스템) -6. [컴포넌트 스타일](#컴포넌트-스타일) -7. [반응형 브레이크포인트](#반응형-브레이크포인트) -8. [서비스 특화 컴포넌트](#서비스-특화-컴포넌트) -9. [인터랙션 패턴](#인터랙션-패턴) -10. [아이콘 시스템](#아이콘-시스템) -11. [애니메이션 가이드](#애니메이션-가이드) -12. [상태 표시](#상태-표시) -13. [접근성 표준](#접근성-표준) -14. [변경 이력](#변경-이력) +## 2. 컬러 시스템 ---- - -## 1. 브랜드 아이덴티티 - -### 디자인 컨셉 -**"정확하고 지능적인 협업"** - -업무 지식이 없어도 AI의 도움으로 정확한 회의록을 작성하고, 실시간으로 협업하며, 효율적으로 공유할 수 있는 전문적이면서도 접근하기 쉬운 서비스. - -### 핵심 가치 -- **정확성 (Accuracy)**: AI 기반 자동 작성과 맥락 기반 용어 설명으로 정확한 회의록 보장 -- **협업 (Collaboration)**: 실시간 동기화와 섹션별 검증으로 참석자 간 원활한 협업 -- **지능 (Intelligence)**: AI 자동 요약, Todo 추출, 관련 회의록 연결 등 스마트한 기능 -- **효율성 (Efficiency)**: Mobile First 설계로 언제 어디서나 빠르고 편리한 접근 - -### 브랜드 성격 -- **전문적 (Professional)**: 비즈니스 환경에 적합한 신뢰감 -- **접근 가능 (Accessible)**: 누구나 쉽게 사용할 수 있는 직관성 -- **스마트 (Smart)**: AI 기술의 지능적 활용 -- **협력적 (Collaborative)**: 팀워크를 촉진하는 협업 중심 - -### 디자인 키워드 -- Clean & Modern -- Intuitive & User-friendly -- Professional & Trustworthy -- Collaborative & Connected -- AI-powered & Smart - ---- - -## 2. 디자인 원칙 - -### 2.1 Mobile First -**작은 화면에서 시작하여 큰 화면으로 확장** - -- **우선순위 중심**: 제한된 공간에서 가장 중요한 기능과 정보에 집중 -- **점진적 향상**: 모바일 기본 경험을 먼저 완성하고, 화면이 커질수록 기능 추가 -- **성능 최적화**: 모바일 환경의 제약(네트워크, 처리 능력)을 우선 고려 -- **터치 우선**: 터치 인터랙션을 기본으로 설계, 마우스는 추가 기능 - -### 2.2 사용자 중심 설계 -**사용자가 목표를 쉽게 달성할 수 있도록 지원** - -- **단순함 (Simplicity)**: 복잡한 기능을 간단하게 표현 -- **일관성 (Consistency)**: 동일한 패턴과 용어를 전체 서비스에서 일관되게 사용 -- **피드백 (Feedback)**: 모든 사용자 액션에 즉각적이고 명확한 반응 제공 -- **오류 방지 (Error Prevention)**: 실수를 사전에 차단하고, 발생 시 명확한 해결 방법 제공 - -### 2.3 접근성 우선 -**모든 사용자가 동등하게 사용할 수 있도록 설계** - -- **WCAG 2.1 Level AA 준수**: 국제 웹 접근성 표준 충족 -- **키보드 네비게이션**: 모든 기능을 키보드만으로 조작 가능 -- **스크린 리더 지원**: 시각장애인을 위한 적절한 ARIA 속성 제공 -- **색상 대비**: 최소 4.5:1 대비율로 가독성 보장 - -### 2.4 실시간 협업 지원 -**여러 사용자가 동시에 작업할 수 있도록 최적화** - -- **즉각적 동기화**: 변경 사항을 실시간으로 모든 참석자에게 전달 -- **충돌 방지**: 동시 편집 충돌을 사전 감지 및 해결 -- **명확한 상태 표시**: 누가 무엇을 하고 있는지 실시간으로 표시 - -### 2.5 AI 투명성 -**AI 기능을 이해하기 쉽고 신뢰할 수 있게 표현** - -- **진행 상황 표시**: AI 처리 중임을 명확히 알림 -- **신뢰도 표시**: AI 결과의 신뢰도를 시각적으로 전달 -- **수정 가능성**: AI 결과를 언제든 수동으로 수정 가능 - ---- - -## 3. 컬러 시스템 - -### 3.1 Primary Colors (주요 색상) - -#### Blue (메인 브랜드 색상) -전문성, 신뢰, 기술을 나타내는 주요 색상 - -- **Primary 50**: `#E3F2FD` - 배경, 하이라이트 -- **Primary 100**: `#BBDEFB` - 호버 배경 -- **Primary 200**: `#90CAF9` - 비활성 상태 -- **Primary 300**: `#64B5F6` - 보조 요소 -- **Primary 400**: `#42A5F5` - 인터랙티브 요소 -- **Primary 500**: `#2196F3` ⭐ **기본** - 주요 버튼, 링크 -- **Primary 600**: `#1E88E5` - 호버 상태 -- **Primary 700**: `#1976D2` - Active 상태 -- **Primary 800**: `#1565C0` - 강조 -- **Primary 900**: `#0D47A1` - 최고 강조 - -**사용 예시:** -- 주요 액션 버튼 (회의 시작, 저장, 공유) -- 링크 텍스트 -- 선택된 탭/메뉴 -- 진행 바 -- 포커스 인디케이터 - -### 3.2 Secondary Colors (보조 색상) - -#### Green (성공, 완료) -완료 상태, 긍정적 액션을 나타냄 - -- **Secondary 50**: `#E8F5E9` -- **Secondary 100**: `#C8E6C9` -- **Secondary 500**: `#4CAF50` ⭐ **기본** -- **Secondary 700**: `#388E3C` -- **Secondary 900**: `#1B5E20` - -**사용 예시:** -- 검증 완료 배지 -- Todo 완료 체크 -- 성공 메시지 -- 진행률 표시 - -#### Purple (AI 기능) -AI 관련 기능을 시각적으로 구분 - -- **Accent 50**: `#F3E5F5` -- **Accent 100**: `#E1BEE7` -- **Accent 500**: `#9C27B0` ⭐ **기본** -- **Accent 700**: `#7B1FA2` - -**사용 예시:** -- AI 자동 작성 인디케이터 -- 전문용어 하이라이트 -- AI 제안 배지 -- 맥락 기반 설명 툴팁 - -### 3.3 Semantic Colors (의미 색상) - -#### Success (성공) -- **Color**: `#4CAF50` (Green 500) -- **Background**: `#E8F5E9` (Green 50) -- **사용**: 성공 메시지, 완료 상태 - -#### Warning (경고) -- **Color**: `#FF9800` (Orange 500) -- **Background**: `#FFF3E0` (Orange 50) -- **사용**: 경고 메시지, 주의 필요 - -#### Error (오류) -- **Color**: `#F44336` (Red 500) -- **Background**: `#FFEBEE` (Red 50) -- **사용**: 오류 메시지, 필수 항목 누락 - -#### Info (정보) -- **Color**: `#2196F3` (Blue 500) -- **Background**: `#E3F2FD` (Blue 50) -- **사용**: 정보 메시지, 안내 - -### 3.4 Neutral Colors (중립 색상) - -#### Gray Scale -텍스트, 배경, 테두리에 사용 - -- **Gray 50**: `#FAFAFA` - 페이지 배경 -- **Gray 100**: `#F5F5F5` - 카드 배경 -- **Gray 200**: `#EEEEEE` - 비활성 배경 -- **Gray 300**: `#E0E0E0` - 테두리 -- **Gray 400**: `#BDBDBD` - 비활성 텍스트 -- **Gray 500**: `#9E9E9E` - 보조 텍스트 -- **Gray 600**: `#757575` - 아이콘 -- **Gray 700**: `#616161` - 부제목 -- **Gray 800**: `#424242` - 본문 텍스트 -- **Gray 900**: `#212121` - 제목 텍스트 - -#### White & Black -- **White**: `#FFFFFF` - 카드, 모달 배경 -- **Black**: `#000000` - 텍스트 (투명도 87%) - -### 3.5 색상 접근성 가이드 - -#### 텍스트 대비율 (WCAG 2.1 Level AA) -- **일반 텍스트**: 최소 4.5:1 -- **대형 텍스트** (18px 이상 또는 14px Bold): 최소 3:1 -- **UI 컴포넌트**: 최소 3:1 - -#### 색상 조합 예시 (통과) -- Primary 500 (`#2196F3`) on White - **대비율 3.1:1** ✅ (Large Text) -- Gray 900 (`#212121`) on White - **대비율 16.1:1** ✅ -- Gray 700 (`#616161`) on White - **대비율 5.7:1** ✅ -- White on Primary 700 (`#1976D2`) - **대비율 5.3:1** ✅ - -#### 색상만으로 정보 전달 금지 -- ❌ 빨간색 텍스트만으로 오류 표시 -- ✅ 빨간색 + 아이콘 + "오류" 텍스트 - ---- - -## 4. 타이포그래피 - -### 4.1 폰트 패밀리 - -#### Primary Font (한글) +### Primary Colors (주요 색상) ```css -font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, 'Noto Sans KR', sans-serif; +--primary: #4DD5A7; /* 민트 그린 - 메인 액션, CTA */ +--primary-dark: #3DBD95; /* 민트 그린 (진하게) - 호버, 액티브 */ +--primary-light: #E8F9F3; /* 민트 그린 (연하게) - 배경, 하이라이트 */ ``` -**Pretendard 특징:** -- 한글 가독성 우수 -- 다양한 굵기 지원 (Thin~Black) -- 웹폰트 최적화 (가변 폰트 지원) -- 무료 라이선스 (OFL) - -**대체 폰트:** -- macOS/iOS: -apple-system (San Francisco) -- Windows: 맑은 고딕 (시스템 기본) -- 기타: Noto Sans KR - -#### Secondary Font (영문, 숫자) +### Semantic Colors (의미 색상) ```css -font-family: 'Inter', 'Roboto', Arial, sans-serif; +--success: #4DD5A7; /* 성공, 완료 */ +--warning: #FFB74D; /* 경고, 임박 */ +--error: #FF6B6B; /* 에러, 긴급 */ +--info: #64B5F6; /* 정보, 알림 */ +--ongoing: #FF9800; /* 진행 중 (주황) */ ``` -**Inter 특징:** -- 숫자 가독성 우수 (Tabular Numbers) -- UI 최적화 -- 웹폰트 최적화 - -### 4.2 타입 스케일 - -#### Heading (제목) - -| 용도 | 크기 | 굵기 | 행간 | CSS Class | 사용 예시 | -|------|------|------|------|-----------|----------| -| **H1** | 32px | Bold (700) | 1.2 (38px) | `.text-h1` | 페이지 제목 | -| **H2** | 24px | Bold (700) | 1.3 (31px) | `.text-h2` | 섹션 제목 | -| **H3** | 20px | SemiBold (600) | 1.4 (28px) | `.text-h3` | 카드 제목 | -| **H4** | 18px | SemiBold (600) | 1.4 (25px) | `.text-h4` | 서브섹션 제목 | -| **H5** | 16px | Medium (500) | 1.5 (24px) | `.text-h5` | 그룹 제목 | -| **H6** | 14px | Medium (500) | 1.5 (21px) | `.text-h6` | 라벨 제목 | - -#### Body (본문) - -| 용도 | 크기 | 굵기 | 행간 | CSS Class | 사용 예시 | -|------|------|------|------|-----------|----------| -| **Body Large** | 16px | Regular (400) | 1.5 (24px) | `.text-body-lg` | 주요 본문 | -| **Body** | 14px | Regular (400) | 1.5 (21px) | `.text-body` | 기본 본문 | -| **Body Small** | 13px | Regular (400) | 1.5 (19px) | `.text-body-sm` | 보조 텍스트 | -| **Caption** | 12px | Regular (400) | 1.4 (17px) | `.text-caption` | 캡션, 메타 정보 | - -#### Special (특수) - -| 용도 | 크기 | 굵기 | 행간 | CSS Class | 사용 예시 | -|------|------|------|------|-----------|----------| -| **Button Large** | 16px | SemiBold (600) | 1.0 | `.text-btn-lg` | 주요 버튼 | -| **Button** | 14px | Medium (500) | 1.0 | `.text-btn` | 기본 버튼 | -| **Button Small** | 13px | Medium (500) | 1.0 | `.text-btn-sm` | 작은 버튼 | -| **Label** | 12px | Medium (500) | 1.0 | `.text-label` | 입력 레이블 | -| **Code** | 14px | Regular (400) | 1.5 | `.text-code` | 코드, 기술 정보 | - -### 4.3 타이포그래피 원칙 - -#### 가독성 우선 -- **최소 본문 크기**: 14px (모바일), 16px (데스크톱 권장) -- **적절한 행간**: 본문은 1.5 이상 -- **적절한 줄 길이**: 50-75자 (한글 기준 25-40자) - -#### 계층 구조 -- **제목과 본문의 명확한 구분**: 크기, 굵기, 색상 차이 -- **일관된 스케일**: 1.25배 비율 (Modular Scale) - -#### 색상 사용 -- **제목**: Gray 900 (`#212121`) -- **본문**: Gray 800 (`#424242`) -- **보조 텍스트**: Gray 600 (`#757575`) -- **비활성 텍스트**: Gray 400 (`#BDBDBD`) - -### 4.4 반응형 타이포그래피 - -#### Mobile (320px~767px) +### Neutral Colors (중립 색상) ```css -/* H1 축소 */ -.text-h1 { font-size: 28px; } -.text-h2 { font-size: 22px; } - -/* Body 기본 유지 */ -.text-body { font-size: 14px; } +--gray-900: #212121; /* 제목, 강조 텍스트 */ +--gray-700: #616161; /* 본문 텍스트 */ +--gray-500: #9E9E9E; /* 보조 텍스트 */ +--gray-300: #E0E0E0; /* 구분선, 테두리 */ +--gray-100: #F5F5F5; /* 배경 (연한 회색) */ +--white: #FFFFFF; /* 카드, 모달 배경 */ ``` -#### Tablet (768px~1023px) +### 색상 사용 가이드 +- **Primary**: 주요 액션 버튼, 활성 탭, FAB +- **Success**: 완료 상태, 체크박스 체크됨 +- **Warning**: 마감 임박 Todo, 경고 배지 +- **Error**: 에러 메시지, 마감 지연 Todo +- **Gray**: 텍스트, 구분선, 비활성 요소 + +--- + +## 3. 타이포그래피 + +### 폰트 패밀리 ```css -/* 기본 스케일 유지 */ -.text-h1 { font-size: 32px; } -.text-body { font-size: 14px; } +--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", + "Noto Sans KR", "Roboto", sans-serif; ``` -#### Desktop (1024px+) +### 폰트 크기 (Mobile First) ```css -/* Body 확대 */ -.text-body-lg { font-size: 18px; } -.text-body { font-size: 16px; } +/* 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) + +--- + +## 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; +} ``` --- -## 5. 간격 시스템 +## 8. 배지 (Badges) -### 5.1 기본 단위 -**Base Unit: 4px** - -모든 간격은 4px의 배수를 사용하여 일관성 유지 - -### 5.2 간격 스케일 - -| Token | 값 | Rem | 사용 예시 | -|-------|-----|-----|----------| -| `spacing-0` | 0px | 0 | 간격 없음 | -| `spacing-1` | 4px | 0.25rem | 아이콘-텍스트 간격 | -| `spacing-2` | 8px | 0.5rem | 버튼 내부 패딩 (세로) | -| `spacing-3` | 12px | 0.75rem | 작은 요소 간격 | -| `spacing-4` | 16px | 1rem | 기본 요소 간격 | -| `spacing-5` | 20px | 1.25rem | 중간 요소 간격 | -| `spacing-6` | 24px | 1.5rem | 카드 내부 패딩 | -| `spacing-8` | 32px | 2rem | 섹션 간격 | -| `spacing-10` | 40px | 2.5rem | 큰 섹션 간격 | -| `spacing-12` | 48px | 3rem | 페이지 상하 여백 | -| `spacing-16` | 64px | 4rem | 특별한 강조 간격 | - -### 5.3 컴포넌트별 간격 - -#### 버튼 +### 상태 배지 ```css -/* Primary Button */ -padding: 12px 24px; /* spacing-3 spacing-6 */ -gap: 8px; /* 아이콘-텍스트 간격 */ - -/* Small Button */ -padding: 8px 16px; /* spacing-2 spacing-4 */ -``` - -#### 카드 -```css -padding: 24px; /* spacing-6 */ -gap: 16px; /* 내부 요소 간격 */ -``` - -#### 폼 -```css -/* Input Field */ -padding: 12px 16px; /* spacing-3 spacing-4 */ -margin-bottom: 16px; /* 필드 간격 */ - -/* Label */ -margin-bottom: 8px; /* spacing-2 */ -``` - -#### 리스트 -```css -/* List Item */ -padding: 16px; /* spacing-4 */ -gap: 12px; /* 내부 요소 간격 */ - -/* List */ -gap: 8px; /* 항목 간격 */ -``` - -### 5.4 레이아웃 간격 - -#### 페이지 여백 -```css -/* Mobile */ -padding: 16px; /* spacing-4 */ - -/* Tablet */ -padding: 24px; /* spacing-6 */ - -/* Desktop */ -padding: 32px; /* spacing-8 */ -``` - -#### 섹션 간격 -```css -/* 같은 그룹 내 섹션 */ -margin-bottom: 24px; /* spacing-6 */ - -/* 다른 그룹 간 섹션 */ -margin-bottom: 48px; /* spacing-12 */ -``` - ---- - -## 6. 컴포넌트 스타일 - -### 6.1 버튼 (Buttons) - -#### Primary Button -**주요 액션 (회의 시작, 저장, 공유 등)** - -```css -background: Primary 500 (#2196F3); -color: White; -padding: 12px 24px; -border-radius: 8px; -font-weight: 600; -font-size: 16px; -box-shadow: 0 2px 4px rgba(0,0,0,0.1); - -/* Hover */ -background: Primary 600 (#1E88E5); -box-shadow: 0 4px 8px rgba(0,0,0,0.15); - -/* Active */ -background: Primary 700 (#1976D2); -transform: scale(0.98); - -/* Disabled */ -background: Gray 200 (#EEEEEE); -color: Gray 400 (#BDBDBD); -cursor: not-allowed; -``` - -#### Secondary Button -**보조 액션 (취소, 건너뛰기 등)** - -```css -background: White; -color: Primary 500; -border: 1px solid Primary 500; -padding: 12px 24px; -border-radius: 8px; - -/* Hover */ -background: Primary 50 (#E3F2FD); -border-color: Primary 600; -``` - -#### Text Button -**경량 액션 (더보기, 닫기 등)** - -```css -background: transparent; -color: Primary 500; -padding: 8px 16px; - -/* Hover */ -background: Primary 50; -``` - -#### Icon Button -**아이콘만 있는 버튼** - -```css -width: 44px; -height: 44px; /* 터치 영역 확보 */ -border-radius: 50%; -display: flex; -align-items: center; -justify-content: center; - -/* Hover */ -background: Gray 100; -``` - -#### Floating Action Button (FAB) -**화면 고정 액션 버튼** - -```css -position: fixed; -bottom: 24px; -right: 24px; -width: 56px; -height: 56px; -border-radius: 50%; -background: Primary 500; -box-shadow: 0 4px 12px rgba(33, 150, 243, 0.4); -z-index: 100; - -/* Hover */ -transform: scale(1.1); -box-shadow: 0 6px 16px rgba(33, 150, 243, 0.5); -``` - -### 6.2 입력 필드 (Input Fields) - -#### Text Input -```css -border: 1px solid Gray 300; -border-radius: 8px; -padding: 12px 16px; -font-size: 16px; /* iOS 확대 방지 */ -background: White; -transition: border-color 0.2s; - -/* Focus */ -border-color: Primary 500; -outline: 2px solid Primary 100; - -/* Error */ -border-color: Error (#F44336); -outline: 2px solid rgba(244, 67, 54, 0.1); - -/* Disabled */ -background: Gray 100; -color: Gray 400; -cursor: not-allowed; -``` - -#### Textarea -```css -/* Text Input 속성 + */ -min-height: 100px; -resize: vertical; -``` - -#### Select / Dropdown -```css -/* Text Input 속성 + */ -appearance: none; -background-image: url('chevron-down-icon.svg'); -background-repeat: no-repeat; -background-position: right 12px center; -padding-right: 40px; -``` - -#### Checkbox -```css -width: 20px; -height: 20px; -border: 2px solid Gray 400; -border-radius: 4px; -cursor: pointer; - -/* Checked */ -background: Primary 500; -border-color: Primary 500; -/* Checkmark icon */ -``` - -#### Radio Button -```css -width: 20px; -height: 20px; -border: 2px solid Gray 400; -border-radius: 50%; - -/* Selected */ -border-color: Primary 500; -/* Inner dot */ -background: radial-gradient(Primary 500 40%, transparent 40%); -``` - -#### Toggle Switch -```css -width: 48px; -height: 24px; -border-radius: 12px; -background: Gray 300; -position: relative; - -/* Circle */ -width: 20px; -height: 20px; -border-radius: 50%; -background: White; -position: absolute; -left: 2px; -transition: left 0.2s; - -/* On State */ -background: Primary 500; -/* Circle moves right */ -left: 26px; -``` - -### 6.3 카드 (Cards) - -#### Standard Card -```css -background: White; -border-radius: 12px; -padding: 24px; -box-shadow: 0 1px 3px rgba(0,0,0,0.1); -transition: box-shadow 0.2s; - -/* Hover (클릭 가능한 경우) */ -box-shadow: 0 4px 12px rgba(0,0,0,0.15); -cursor: pointer; -``` - -#### Todo Card -```css -/* Standard Card + */ -border-left: 4px solid transparent; - /* 완료 */ -border-left-color: Success (#4CAF50); -opacity: 0.7; +.badge-complete { + background: var(--success); + color: var(--white); + padding: 4px 8px; + border-radius: 12px; + font-size: 12px; +} -/* 마감 임박 */ -border-left-color: Warning (#FF9800); +/* 진행중 */ +.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; +} /* 지연 */ -border-left-color: Error (#F44336); -``` - -#### Meeting Card -```css -/* Standard Card + */ -gap: 12px; -display: flex; -flex-direction: column; -``` - -### 6.4 배지 (Badges) - -#### Status Badge -```css -padding: 4px 12px; -border-radius: 12px; -font-size: 12px; -font-weight: 500; -display: inline-flex; -align-items: center; -gap: 4px; - -/* 작성중 */ -background: Warning 50; -color: Warning 700; - -/* 확정완료 */ -background: Success 50; -color: Success 700; - -/* 검증완료 */ -background: Primary 50; -color: Primary 700; -``` - -#### Count Badge -```css -min-width: 20px; -height: 20px; -padding: 0 6px; -background: Error (#F44336); -color: White; -border-radius: 10px; -font-size: 11px; -font-weight: 600; -display: flex; -align-items: center; -justify-content: center; -``` - -### 6.5 모달 (Modals) - -#### Modal Overlay -```css -position: fixed; -top: 0; -left: 0; -right: 0; -bottom: 0; -background: rgba(0, 0, 0, 0.5); -z-index: 1000; -display: flex; -align-items: center; -justify-content: center; -``` - -#### Modal Container -```css -background: White; -border-radius: 16px; -max-width: 500px; -width: calc(100% - 32px); -max-height: 90vh; -overflow-y: auto; -box-shadow: 0 20px 60px rgba(0,0,0,0.3); - -/* Mobile: Full Screen */ -@media (max-width: 767px) { - width: 100%; - height: 100%; - max-height: 100vh; - border-radius: 0; -} -``` - -### 6.6 알림 (Toast / Snackbar) - -```css -position: fixed; -bottom: 24px; -left: 50%; -transform: translateX(-50%); -background: Gray 800; -color: White; -padding: 12px 24px; -border-radius: 8px; -box-shadow: 0 4px 12px rgba(0,0,0,0.3); -z-index: 2000; -animation: slideUp 0.3s ease-out; - -/* Success */ -background: Success (#4CAF50); - -/* Error */ -background: Error (#F44336); - -/* Warning */ -background: Warning (#FF9800); -``` - ---- - -## 7. 반응형 브레이크포인트 - -### 7.1 브레이크포인트 정의 - -```css -/* Mobile Small */ -@media (min-width: 320px) { /* ... */ } - -/* Mobile */ -@media (min-width: 375px) { /* ... */ } - -/* Mobile Large */ -@media (min-width: 425px) { /* ... */ } - -/* Tablet */ -@media (min-width: 768px) { /* ... */ } - -/* Desktop */ -@media (min-width: 1024px) { /* ... */ } - -/* Desktop Large */ -@media (min-width: 1440px) { /* ... */ } -``` - -### 7.2 디바이스별 최적화 - -#### Mobile (320px~767px) -- **레이아웃**: 단일 컬럼 -- **네비게이션**: 하단 탭 바 -- **터치 영역**: 최소 44x44px -- **폰트**: 기본 스케일 -- **간격**: 16px 페이지 여백 - -#### Tablet (768px~1023px) -- **레이아웃**: 2컬럼 (일부 화면) -- **네비게이션**: 좌측 사이드바 (선택) -- **폰트**: 기본 스케일 -- **간격**: 24px 페이지 여백 - -#### Desktop (1024px+) -- **레이아웃**: 2-3컬럼 -- **네비게이션**: 좌측 고정 사이드바 -- **폰트**: 확대 스케일 -- **간격**: 32px 페이지 여백 -- **추가 기능**: 단축키, 고급 필터 - ---- - -## 8. 서비스 특화 컴포넌트 - -### 8.1 실시간 발언 표시기 - -**회의 진행 중 현재 발언자와 텍스트 표시** - -```css -.live-speech { - background: Accent 50 (#F3E5F5); - border-left: 4px solid Accent 500 (#9C27B0); - padding: 16px; - border-radius: 8px; - position: sticky; - top: 0; - z-index: 10; -} - -.speaker-name { - font-weight: 600; - color: Accent 700; - display: flex; - align-items: center; - gap: 8px; -} - -.speaking-indicator { - width: 8px; - height: 8px; - background: Error (#F44336); - border-radius: 50%; - animation: pulse 1.5s infinite; -} - -@keyframes pulse { - 0%, 100% { opacity: 1; } - 50% { opacity: 0.5; } -} - -.speech-text { - color: Gray 800; - font-size: 14px; - line-height: 1.5; - margin-top: 8px; -} -``` - -### 8.2 전문용어 하이라이트 - -**AI가 감지한 전문용어 표시** - -```css -.term-highlight { - background: linear-gradient(180deg, transparent 60%, Accent 200 60%); - cursor: pointer; - position: relative; - border-bottom: 1px dotted Accent 500; - transition: background 0.2s; -} - -.term-highlight:hover { - background: Accent 100; -} - -/* 툴팁 */ -.term-tooltip { - position: absolute; - bottom: 100%; - left: 50%; - transform: translateX(-50%); - background: Gray 900; - color: White; - padding: 12px 16px; - border-radius: 8px; - font-size: 13px; - width: 250px; - box-shadow: 0 4px 12px rgba(0,0,0,0.3); - z-index: 100; -} -``` - -### 8.3 검증 완료 섹션 - -**섹션별 검증 상태 표시** - -```css -.section-verified { - border: 2px solid Success (#4CAF50); - border-radius: 8px; - padding: 24px; - position: relative; -} - -.verified-badge { - position: absolute; - top: -12px; - right: 16px; - background: Success; - color: White; - padding: 4px 12px; +.badge-overdue { + background: var(--error); + color: var(--white); + padding: 4px 8px; border-radius: 12px; font-size: 12px; - font-weight: 600; +} +``` + +### 우선순위 배지 +```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) +```css +.bottom-nav { + height: 64px; + background: var(--white); + border-top: 1px solid var(--gray-300); + box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08); +} + +.nav-item { + flex: 1; display: flex; + flex-direction: column; align-items: center; gap: 4px; + color: var(--gray-500); } -/* 검증자 아바타 */ -.verifier-avatars { - display: flex; - margin-top: 12px; -} - -.verifier-avatar { - width: 28px; - height: 28px; - border-radius: 50%; - border: 2px solid White; - margin-left: -8px; -} - -.verifier-avatar:first-child { - margin-left: 0; +.nav-item.active { + color: var(--primary); } ``` -### 8.4 실시간 동기화 인디케이터 - -**다른 사용자의 수정 사항 표시** - +### 탭 네비게이션 ```css -.sync-indicator { - position: fixed; - top: 80px; - right: 16px; - display: flex; - align-items: center; - gap: 8px; - padding: 8px 16px; - background: White; - border-radius: 20px; - box-shadow: 0 2px 8px rgba(0,0,0,0.1); - z-index: 50; -} - -.sync-dot { - width: 8px; - height: 8px; - background: Success; - border-radius: 50%; -} - -/* 동기화 중 */ -.sync-dot.syncing { - animation: blink 1s infinite; -} - -@keyframes blink { - 0%, 100% { opacity: 1; } - 50% { opacity: 0.3; } -} - -/* 다른 사용자 편집 중 */ -.editing-highlight { - background: rgba(255, 152, 0, 0.1); - border-left: 3px solid Warning (#FF9800); - animation: fadeHighlight 3s ease-out; -} - -@keyframes fadeHighlight { - 0% { opacity: 1; } - 100% { opacity: 0; } -} -``` - -### 8.5 AI 처리 인디케이터 - -**AI가 처리 중임을 표시** - -```css -.ai-processing { - display: flex; - align-items: center; - gap: 8px; +.tab { padding: 12px 16px; - background: Accent 50; - border-radius: 8px; - border-left: 4px solid Accent 500; + color: var(--gray-500); + border-bottom: 2px solid transparent; + transition: all 0.2s ease; } -.ai-icon { +.tab.active { + color: var(--primary); + border-bottom: 2px solid var(--primary); + font-weight: 500; +} +``` + +--- + +## 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; - animation: rotate 2s linear infinite; + border: 2px solid var(--gray-300); + border-radius: 4px; + transition: all 0.2s ease; } -@keyframes rotate { - from { transform: rotate(0deg); } - to { transform: rotate(360deg); } -} - -.ai-text { - color: Accent 700; - font-size: 13px; - font-weight: 500; -} - -/* 신뢰도 표시 */ -.confidence-indicator { - display: flex; - gap: 4px; - margin-top: 4px; -} - -.confidence-bar { - height: 4px; - width: 40px; - background: Gray 200; - border-radius: 2px; - overflow: hidden; -} - -.confidence-fill { - height: 100%; - background: Success; - transition: width 0.3s; -} - -/* 높음: 80%+ = Success */ -/* 보통: 60-80% = Warning */ -/* 낮음: <60% = Error */ -``` - -### 8.6 Todo 진행 상태 카드 - -**Todo 완료 상태 시각화** - -```css -.todo-progress-card { - background: White; - border-radius: 12px; - padding: 20px; - box-shadow: 0 1px 3px rgba(0,0,0,0.1); -} - -/* 원형 진행 바 */ -.circular-progress { - width: 100px; - height: 100px; - border-radius: 50%; - background: conic-gradient( - Primary 500 var(--progress-percent), - Gray 200 var(--progress-percent) - ); - display: flex; - align-items: center; - justify-content: center; - position: relative; -} - -.progress-inner { - width: 80px; - height: 80px; - background: White; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; -} - -.progress-percent { - font-size: 24px; - font-weight: 700; - color: Primary 500; -} - -.progress-label { - font-size: 12px; - color: Gray 600; +.checkbox:checked { + background: var(--primary); + border-color: var(--primary); } ``` --- -## 9. 인터랙션 패턴 +## 12. 모달 & 다이얼로그 -### 9.1 터치 인터랙션 (Mobile) - -#### 기본 터치 영역 +### 모달 오버레이 ```css -/* 최소 터치 영역: 44x44px */ -min-width: 44px; -min-height: 44px; -``` - -#### 스와이프 액션 -**리스트 항목 스와이프로 빠른 액션** - -- **좌→우 스와이프**: 완료 처리 (Todo) -- **우→좌 스와이프**: 삭제/편집 메뉴 표시 - -```css -.swipe-action { - position: absolute; - right: 0; - top: 0; - bottom: 0; - display: flex; - transform: translateX(100%); - transition: transform 0.3s; -} - -.swiped .swipe-action { - transform: translateX(0); -} - -.swipe-button { - width: 80px; - display: flex; - align-items: center; - justify-content: center; -} - -.swipe-button.delete { - background: Error (#F44336); -} - -.swipe-button.edit { - background: Primary 500; -} -``` - -#### Pull to Refresh -**화면 당겨서 새로고침** - -```css -.pull-refresh-indicator { - position: absolute; - top: -60px; - left: 50%; - transform: translateX(-50%); - display: flex; - align-items: center; - gap: 8px; - transition: top 0.3s; -} - -.pulling .pull-refresh-indicator { - top: 20px; -} - -.refresh-icon { - animation: rotate 1s linear infinite; -} -``` - -### 9.2 키보드 인터랙션 (Desktop) - -#### 포커스 표시 -```css -*:focus { - outline: 2px solid Primary 500; - outline-offset: 2px; -} - -/* 마우스 클릭 시 포커스 숨김 */ -*:focus:not(:focus-visible) { - outline: none; -} -``` - -#### 단축키 안내 -```css -.keyboard-hint { +.modal-overlay { position: fixed; - bottom: 16px; - right: 16px; - background: Gray 800; - color: White; - padding: 8px 12px; - border-radius: 6px; - font-size: 12px; - opacity: 0.8; -} - -.kbd { - background: Gray 700; - padding: 2px 6px; - border-radius: 4px; - font-family: monospace; - font-size: 11px; - border: 1px solid Gray 600; -} -``` - -**주요 단축키:** -- `Ctrl/Cmd + S`: 저장 -- `Ctrl/Cmd + K`: 검색 -- `Esc`: 모달 닫기 -- `Tab`: 다음 요소 -- `Shift + Tab`: 이전 요소 -- `Enter`: 확인/실행 - -### 9.3 로딩 상태 - -#### Spinner -```css -.spinner { - width: 40px; - height: 40px; - border: 4px solid Gray 200; - border-top-color: Primary 500; - border-radius: 50%; - animation: spin 1s linear infinite; -} - -@keyframes spin { - to { transform: rotate(360deg); } -} -``` - -#### Skeleton UI -```css -.skeleton { - background: linear-gradient( - 90deg, - Gray 200 0%, - Gray 100 50%, - Gray 200 100% - ); - background-size: 200% 100%; - animation: loading 1.5s infinite; - border-radius: 4px; -} - -@keyframes loading { - 0% { background-position: 200% 0; } - 100% { background-position: -200% 0; } -} - -.skeleton-text { - height: 16px; - margin-bottom: 8px; -} - -.skeleton-title { - height: 24px; - width: 60%; - margin-bottom: 12px; -} - -.skeleton-avatar { - width: 40px; - height: 40px; - border-radius: 50%; -} -``` - -#### Progress Bar -```css -.progress-bar { + top: 0; + left: 0; width: 100%; - height: 4px; - background: Gray 200; - border-radius: 2px; - overflow: hidden; -} - -.progress-fill { height: 100%; - background: Primary 500; - transition: width 0.3s; -} - -/* Indeterminate (불명확한 진행) */ -.progress-fill.indeterminate { - width: 30%; - animation: indeterminate 1.5s infinite; -} - -@keyframes indeterminate { - 0% { transform: translateX(-100%); } - 100% { transform: translateX(400%); } + background: rgba(0, 0, 0, 0.5); + backdrop-filter: blur(4px); + z-index: 1000; } ``` -### 9.4 실시간 협업 피드백 - -#### 사용자 커서 표시 +### 모달 콘텐츠 ```css -.user-cursor { - position: absolute; - pointer-events: none; - z-index: 999; +.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); } -.cursor-flag { - background: var(--user-color); - color: White; - padding: 2px 6px; - border-radius: 4px; - font-size: 11px; - white-space: nowrap; - transform: translate(-50%, -100%); - margin-top: -4px; -} - -.cursor-pointer { - width: 0; - height: 0; - border-left: 6px solid transparent; - border-right: 6px solid transparent; - border-top: 8px solid var(--user-color); -} -``` - -#### 편집 중 표시 -```css -.editing-user { - background: rgba(var(--user-color-rgb), 0.1); - border-left: 3px solid var(--user-color); - padding-left: 12px; -} - -.editing-badge { - display: inline-flex; - align-items: center; - gap: 4px; - background: var(--user-color); - color: White; - padding: 2px 8px; - border-radius: 10px; - font-size: 11px; - font-weight: 500; +/* Desktop: Centered Modal */ +@media (min-width: 768px) { + .modal { + border-radius: 16px; + margin: auto; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } } ``` --- -## 10. 아이콘 시스템 - -### 10.1 아이콘 스타일 - -**아이콘 세트**: Material Icons (Outlined) - -**스타일 가이드:** -- **스타일**: Outlined (선 스타일) -- **일관성**: 동일한 두께(2px), 동일한 라운딩 -- **크기**: 20px (Small), 24px (Default), 32px (Large) - -### 10.2 주요 아이콘 매핑 - -| 기능 | 아이콘 이름 | 사용 위치 | -|------|------------|----------| -| 회의 시작 | `play_circle` | 회의 시작 버튼 | -| 회의 종료 | `stop_circle` | 회의 종료 버튼 | -| 녹음 | `mic` | 녹음 상태 표시 | -| 일시정지 | `pause_circle` | 녹음 일시정지 | -| 저장 | `save` | 저장 버튼 | -| 공유 | `share` | 공유 버튼 | -| 편집 | `edit` | 수정 버튼 | -| 삭제 | `delete` | 삭제 버튼 | -| 검색 | `search` | 검색 입력 | -| 필터 | `filter_list` | 필터 메뉴 | -| 설정 | `settings` | 설정 메뉴 | -| 알림 | `notifications` | 알림 아이콘 | -| 프로필 | `account_circle` | 사용자 프로필 | -| 캘린더 | `calendar_today` | 날짜 선택 | -| 시간 | `schedule` | 시간 선택 | -| 첨부파일 | `attach_file` | 파일 첨부 | -| 다운로드 | `download` | 파일 다운로드 | -| 체크 | `check_circle` | 완료, 검증 | -| 경고 | `warning` | 경고 메시지 | -| 오류 | `error` | 오류 메시지 | -| 정보 | `info` | 정보 메시지 | -| AI | `auto_awesome` | AI 기능 | -| Todo | `check_box` | Todo 항목 | -| 참석자 | `group` | 참석자 목록 | -| 더보기 | `more_vert` | 메뉴 | -| 뒤로가기 | `arrow_back` | 이전 화면 | -| 닫기 | `close` | 모달 닫기 | -| 펼치기 | `expand_more` | 아코디언 열기 | -| 접기 | `expand_less` | 아코디언 닫기 | - -### 10.3 아이콘 색상 +## 13. 애니메이션 +### 트랜지션 ```css -/* Default */ -color: Gray 600 (#757575); - -/* Active/Selected */ -color: Primary 500 (#2196F3); - -/* Disabled */ -color: Gray 400 (#BDBDBD); - -/* On Color Background */ -color: White; - -/* Semantic */ -.icon-success { color: Success (#4CAF50); } -.icon-warning { color: Warning (#FF9800); } -.icon-error { color: Error (#F44336); } -.icon-ai { color: Accent 500 (#9C27B0); } +--transition-fast: 0.15s ease; +--transition-normal: 0.2s ease; +--transition-slow: 0.3s ease; ``` ---- +### 주요 애니메이션 -## 11. 애니메이션 가이드 - -### 11.1 애니메이션 원칙 - -- **목적성**: 모든 애니메이션은 명확한 목적이 있어야 함 -- **자연스러움**: 현실 세계의 물리 법칙을 따름 -- **적절한 속도**: 너무 빠르거나 느리지 않게 -- **성능**: CSS 애니메이션 우선, GPU 가속 활용 - -### 11.2 이징 (Easing) - -```css -/* 표준 Easing */ ---ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* Material Design */ ---ease-out: cubic-bezier(0.0, 0, 0.2, 1); ---ease-in: cubic-bezier(0.4, 0, 1, 1); - -/* 탄성 (Elastic) */ ---ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55); -``` - -### 11.3 지속 시간 (Duration) - -| 용도 | 지속 시간 | 예시 | -|------|----------|------| -| **Instant** | 0ms | 즉시 변경 | -| **Quick** | 100ms | 호버 효과, 색상 변경 | -| **Normal** | 200-300ms | 모달 열기, 탭 전환 | -| **Slow** | 400-500ms | 페이지 전환, 복잡한 애니메이션 | - -### 11.4 애니메이션 라이브러리 - -#### 페이드 인 +#### Fade In ```css @keyframes fadeIn { - from { - opacity: 0; - } - to { - opacity: 1; - } -} - -.fade-in { - animation: fadeIn 0.3s var(--ease-out); + from { opacity: 0; } + to { opacity: 1; } } ``` -#### 슬라이드 업 +#### Slide Up (Bottom Sheet) ```css @keyframes slideUp { - from { - transform: translateY(20px); - opacity: 0; - } - to { - transform: translateY(0); - opacity: 1; - } -} - -.slide-up { - animation: slideUp 0.3s var(--ease-out); + from { transform: translateY(100%); } + to { transform: translateY(0); } } ``` -#### 스케일 +#### Pulse (진행 중 배지) ```css -@keyframes scaleIn { - from { - transform: scale(0.9); - opacity: 0; - } - to { - transform: scale(1); - opacity: 1; - } -} - -.scale-in { - animation: scaleIn 0.2s var(--ease-out); -} -``` - -#### 쉐이크 (오류 시) -```css -@keyframes shake { - 0%, 100% { transform: translateX(0); } - 10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); } - 20%, 40%, 60%, 80% { transform: translateX(5px); } -} - -.shake { - animation: shake 0.5s var(--ease-in-out); -} -``` - -### 11.5 성능 최적화 - -**GPU 가속 속성만 사용:** -- ✅ `transform` (translate, scale, rotate) -- ✅ `opacity` -- ❌ `left`, `top` (리플로우 발생) -- ❌ `width`, `height` (리플로우 발생) - -**will-change 활용:** -```css -.will-animate { - will-change: transform, opacity; -} - -/* 애니메이션 완료 후 제거 */ -.animated { - will-change: auto; +@keyframes pulse { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.7; } } ``` --- -## 12. 상태 표시 +## 14. 접근성 (Accessibility) -### 12.1 회의록 상태 +### 색상 대비 +- **WCAG 2.1 Level AA** 준수 +- 텍스트와 배경 대비율: 최소 4.5:1 +- 큰 텍스트(18px+) 대비율: 최소 3:1 -| 상태 | 색상 | 배지 텍스트 | 설명 | -|------|------|-----------|------| -| **작성중** | Warning | `작성중` | 회의 진행 중 또는 수정 중 | -| **확정완료** | Success | `확정완료` | 최종 확정된 회의록 | -| **공유됨** | Primary | `공유됨` | 참석자에게 공유됨 | +### 포커스 스타일 +```css +:focus-visible { + outline: 2px solid var(--primary); + outline-offset: 2px; +} +``` -### 12.2 Todo 상태 - -| 상태 | 색상 | 표시 | 설명 | -|------|------|------|------| -| **진행중** | Gray | `○` | 할당되었으나 미완료 | -| **완료** | Success | `✓` | 완료 처리됨 | -| **마감 임박** | Warning | `⚠` | 3일 이내 마감 | -| **지연** | Error | `!` | 마감일 경과 | - -### 12.3 검증 상태 - -| 상태 | 표시 | 설명 | -|------|------|------| -| **미검증** | 빈 원 | 아직 검증되지 않음 | -| **검증 중** | 부분 체크 | 일부 참석자 검증 | -| **검증 완료** | 체크 아이콘 + 배지 | 모든 참석자 검증 | -| **잠김** | 자물쇠 아이콘 | 수정 불가 | - -### 12.4 동기화 상태 - -| 상태 | 표시 | 설명 | -|------|------|------| -| **동기화됨** | 녹색 점 | 최신 상태 | -| **동기화 중** | 깜빡이는 점 | 서버와 동기화 중 | -| **오프라인** | 회색 점 | 네트워크 끊김 (로컬 저장) | -| **충돌** | 빨간색 느낌표 | 동시 수정 충돌 | - -### 12.5 AI 처리 상태 - -| 상태 | 표시 | 설명 | -|------|------|------| -| **처리 중** | 회전 아이콘 | AI 분석 중 | -| **완료** | 체크 아이콘 | 처리 완료 | -| **오류** | 오류 아이콘 | 처리 실패 | -| **신뢰도 높음** | 3개 바 녹색 | 80% 이상 | -| **신뢰도 보통** | 2개 바 노란색 | 60-80% | -| **신뢰도 낮음** | 1개 바 빨간색 | 60% 미만 | +### 터치 타겟 +- 최소 크기: 44x44px (iOS), 48x48px (Android) +- 터치 타겟 간 최소 간격: 8px --- -## 13. 접근성 표준 +## 15. 반응형 디자인 -### 13.1 WCAG 2.1 Level AA 준수 +### Mobile First 접근 +```css +/* Mobile (기본) */ +.container { + padding: 16px; +} -#### Perceivable (인식 가능) -- ✅ 모든 이미지에 대체 텍스트 제공 -- ✅ 색상 대비 4.5:1 이상 (일반 텍스트) -- ✅ 색상 대비 3:1 이상 (대형 텍스트, UI 컴포넌트) -- ✅ 텍스트 200% 확대 시 레이아웃 유지 -- ✅ 색상만으로 정보 전달 금지 +/* Tablet (768px+) */ +@media (min-width: 768px) { + .container { + padding: 24px; + } +} -#### Operable (조작 가능) -- ✅ 모든 기능 키보드로 접근 가능 -- ✅ 포커스 순서 논리적 -- ✅ 포커스 표시 명확 (2px 파란색 테두리) -- ✅ 터치 영역 최소 44x44px -- ✅ 시간 제한 없음 (자동 저장) - -#### Understandable (이해 가능) -- ✅ 명확한 레이블 및 안내 -- ✅ 오류 메시지 구체적 -- ✅ 일관된 네비게이션 -- ✅ 예측 가능한 동작 - -#### Robust (견고함) -- ✅ 시맨틱 HTML 사용 -- ✅ ARIA 속성 적절히 사용 -- ✅ 최신 브라우저 및 보조 기술 지원 - -### 13.2 ARIA 속성 가이드 - -#### 랜드마크 -```html -
- -
- - +/* Desktop (1024px+) */ +@media (min-width: 1024px) { + .container { + padding: 32px; + } +} ``` -#### 버튼 및 링크 -```html - - - - - - 링크 텍스트 - - -``` - -#### 폼 -```html - - - - - -``` - -#### 모달 -```html -
- - -
-``` - -#### 실시간 업데이트 -```html - -
- 회의록이 저장되었습니다. -
- - -
- 3명이 편집 중입니다. -
- - -
- -
-``` - -### 13.3 스크린 리더 테스트 - -**주요 테스트 도구:** -- **NVDA** (Windows, 무료) -- **JAWS** (Windows, 유료) -- **VoiceOver** (macOS/iOS, 내장) -- **TalkBack** (Android, 내장) - -**테스트 체크리스트:** -- [ ] 모든 이미지에 적절한 alt 텍스트 -- [ ] 모든 폼 필드에 레이블 연결 -- [ ] 버튼 및 링크 용도 명확 -- [ ] 모달 열림/닫힘 알림 -- [ ] 오류 메시지 즉시 알림 -- [ ] 실시간 업데이트 알림 -- [ ] 키보드만으로 전체 기능 사용 가능 - --- -## 14. 변경 이력 +## 참조 이미지 분석 결과 + +### 확인된 디자인 특징 (reference/sampleimg 기반) +1. **Primary Color**: #4DD5A7 (민트 그린) - 모든 액션 버튼과 강조 요소에 사용 +2. **카드 디자인**: 흰색 배경, 12px 둥근 모서리, 미세한 그림자 +3. **타이포그래피**: 명확한 계층 구조, 충분한 여백 +4. **아바타**: 원형, 다양한 색상 배경 (팀원 구분) +5. **배지**: 둥근 모서리, 명확한 색상 코딩 (진행 중=주황, 완료=민트) +6. **간격**: 16px 기본 간격 일관 적용 +7. **섹션 구분**: 미세한 구분선 또는 배경색 차이로 구분 + +--- + +## 변경 이력 | 버전 | 날짜 | 작성자 | 변경 내용 | |------|------|--------|----------| -| 1.0 | 2025-10-21 | 이미준 | 최초 작성 - 14개 섹션 완료 | - ---- - -## 부록 - -### A. 개발 참고 자료 - -#### CSS 변수 정의 -```css -:root { - /* Primary Colors */ - --primary-50: #E3F2FD; - --primary-500: #2196F3; - --primary-700: #1976D2; - - /* Secondary Colors */ - --secondary-500: #4CAF50; - --accent-500: #9C27B0; - - /* Semantic Colors */ - --success: #4CAF50; - --warning: #FF9800; - --error: #F44336; - --info: #2196F3; - - /* Neutral Colors */ - --gray-50: #FAFAFA; - --gray-800: #424242; - --gray-900: #212121; - - /* Spacing */ - --spacing-2: 8px; - --spacing-4: 16px; - --spacing-6: 24px; - - /* Typography */ - --font-primary: 'Pretendard', sans-serif; - --font-secondary: 'Inter', sans-serif; - - /* Border Radius */ - --radius-sm: 4px; - --radius-md: 8px; - --radius-lg: 12px; - --radius-full: 9999px; - - /* Shadows */ - --shadow-sm: 0 1px 3px rgba(0,0,0,0.1); - --shadow-md: 0 4px 12px rgba(0,0,0,0.15); - --shadow-lg: 0 20px 60px rgba(0,0,0,0.3); - - /* Transitions */ - --transition-fast: 0.1s; - --transition-normal: 0.2s; - --transition-slow: 0.3s; -} -``` - -### B. 디자인 도구 - -**권장 도구:** -- **Figma**: UI 디자인 및 프로토타입 -- **Material Icons**: 아이콘 세트 -- **Coolors**: 색상 팔레트 생성 -- **WebAIM Contrast Checker**: 색상 대비 검사 - -### C. 품질 검사 도구 - -**접근성:** -- Lighthouse (Chrome DevTools) -- axe DevTools -- WAVE Browser Extension - -**성능:** -- WebPageTest -- Chrome DevTools Performance -- React DevTools Profiler - -### D. 참고 문헌 - -- Material Design 3 Guidelines -- Apple Human Interface Guidelines -- WCAG 2.1 Level AA -- Mobile First Design - Luke Wroblewski -- Inclusive Components - Heydon Pickering +| 1.0 | 2025-10-21 | 최유진 | 최초 작성 - reference/sampleimg 샘플 이미지 기반 스타일 가이드 작성 | diff --git a/design/uiux/uiux.md b/design/uiux/uiux.md index ba65411..0b004cf 100644 --- a/design/uiux/uiux.md +++ b/design/uiux/uiux.md @@ -674,7 +674,7 @@ graph TD - 회의 제목 - 경과 시간 (00:00:00) - 녹음 상태 인디케이터 (빨간 점 + 파형) - - 메뉴 버튼 (설정, 참석자 목록) + - 메뉴 버튼 (설정, 참석자 목록, **참석자 추가 초대**) - **메인 콘텐츠** (스크롤) - **실시간 발언 영역** (상단, 고정) @@ -738,7 +738,8 @@ graph TD - 실시간 동기화: 다른 참석자에게 즉시 반영 4. **참고자료 링크** - - 참고자료 영역의 회의록 링크 클릭 → 새 탭에서 해당 회의록 열기 + - 참고자료 영역의 회의록 링크 클릭 → **새 탭(target="_blank")에서 해당 회의록 열기** + - **녹음 중인 페이지 이탈 방지**: 링크는 항상 새 탭으로 열림 - 관련도 표시: 퍼센트 또는 별점으로 시각화 - AI가 자동으로 관련 회의록 검색 및 연결 (UFR-AI-040) @@ -754,6 +755,21 @@ graph TD - 일시정지: 회의록 작성 중단, 재개 가능 - 종료: 확인 다이얼로그 → 회의종료 화면으로 이동 +7. **참석자 추가 초대** (회의 진행 중) + - 헤더 메뉴 또는 참석자 목록에서 "+ 참석자 초대" 버튼 클릭 + - 초대 모달 표시: + - 이메일 입력 필드 (여러 명 입력 가능, 쉼표/엔터로 구분) + - 검색 기능: 조직 내 사용자 검색 및 선택 + - 권한 선택: 편집 가능/읽기 전용 + - "초대 발송" 버튼 + - 초대 발송 후: + - 실시간으로 참석자 목록에 "초대됨" 상태로 추가 + - 초대받은 사람에게 알림 발송 (이메일/앱 푸시) + - 초대받은 사람이 수락 시 "참여 중"으로 상태 변경 + - 권한: + - **회의 생성자**: 모든 참석자 초대 가능 + - **일반 참석자**: 회의 설정에 따라 초대 가능 여부 결정 + #### 데이터 요구사항 - **입력**: 회의 ID, 오디오 스트림 - **출력**: @@ -1779,6 +1795,7 @@ graph TD | 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개 섹션: 컬러, 타이포그래피, 간격, 카드, 버튼, 배지, 아이콘, 네비게이션, 폼, 모달, 애니메이션, 접근성, 반응형 등 | --- diff --git a/reference/sampleimg/ToDo목록.png b/reference/sampleimg/ToDo목록.png new file mode 100644 index 0000000..2dac9d7 Binary files /dev/null and b/reference/sampleimg/ToDo목록.png differ diff --git a/reference/sampleimg/대시보드.png b/reference/sampleimg/대시보드.png new file mode 100644 index 0000000..f340de5 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..c4e2e9b Binary files /dev/null and b/reference/sampleimg/회의록목록.png differ diff --git a/reference/sampleimg/회의록상세.jpeg b/reference/sampleimg/회의록상세.jpeg new file mode 100644 index 0000000..48df72a Binary files /dev/null and b/reference/sampleimg/회의록상세.jpeg differ