# 회의록 작성 및 공유 개선 서비스 - 스타일 가이드 ## 목차 - [개요](#개요) - [브랜드 아이덴티티](#브랜드-아이덴티티) - [디자인 원칙](#디자인-원칙) - [컬러 시스템](#컬러-시스템) - [타이포그래피](#타이포그래피) - [간격 시스템](#간격-시스템) - [컴포넌트 스타일](#컴포넌트-스타일) - [반응형 브레이크포인트](#반응형-브레이크포인트) - [회의록 서비스 특화 컴포넌트](#회의록-서비스-특화-컴포넌트) - [인터랙션 패턴](#인터랙션-패턴) - [변경 이력](#변경-이력) --- ## 개요 ### 문서 목적 회의록 작성 및 공유 개선 서비스의 시각적 일관성을 보장하고, 디자이너와 개발자 간 효율적인 협업을 위한 스타일 가이드를 제공합니다. ### 적용 범위 - Web (모든 브라우저) - Mobile (iOS, Android) - Tablet - Desktop ### 관련 문서 - [유저스토리](../userstory.md) - [UI/UX 설계서](uiux.md) - [레퍼런스 사이트](https://ko.designus.design/reference/service/19) - 클로바노트 --- ## 브랜드 아이덴티티 ### 디자인 컨셉 **"Smart Meeting Assistant" - 스마트한 회의 도우미** 회의록 작성의 번거로움을 해결하고, AI 기반 자동화를 통해 효율적인 협업을 지원하는 전문 업무 도구 ### 브랜드 핵심 가치 #### 1. 전문성 (Professionalism) - 업무용 도구로서의 신뢰성과 정확성 - 깔끔하고 정돈된 인터페이스 - 일관된 시각적 언어 #### 2. 효율성 (Efficiency) - 빠르고 직관적인 사용자 경험 - 필요한 정보에 즉시 접근 - 불필요한 단계 제거 #### 3. 지능성 (Intelligence) - AI 기반 자동화 및 분석 - 맥락을 이해하는 스마트한 기능 - 사용자 패턴 학습 및 추천 #### 4. 협업성 (Collaboration) - 실시간 동기화 및 공유 - 투명한 변경 이력 - 팀원 간 원활한 소통 ### 브랜드 톤 & 매너 **Visual (시각적)** - 모던 (Modern): 최신 디자인 트렌드 반영 - 클린 (Clean): 여백과 계층 구조 명확 - 프로페셔널 (Professional): 업무 환경에 적합 **Voice (언어적)** - 친절하지만 간결함 - 업무 중심의 명확한 표현 - 전문 용어는 설명 제공 **Emotion (감성적)** - 신뢰감: 안정적이고 정확한 서비스 - 효율성: 시간을 절약해주는 도구 - 똑똑함: AI가 도와주는 스마트 어시스턴트 --- ## 디자인 원칙 ### 1. Mobile First 모바일 환경을 우선 설계하고 점진적으로 확장 - 핵심 기능에 집중 - 터치 최적화 (최소 44x44px) - 세로 스크롤 우선 ### 2. 정보 계층 구조 중요한 정보를 명확하게 구분 - 타이포그래피 스케일 활용 - 색상과 크기로 우선순위 표현 - 시각적 가중치 일관성 유지 ### 3. 일관성 (Consistency) 모든 화면에서 동일한 패턴 사용 - 컴포넌트 재사용 - 인터랙션 패턴 통일 - 용어 및 아이콘 일관성 ### 4. 접근성 (Accessibility) WCAG 2.1 Level AA 준수 - 색상 대비 4.5:1 이상 - 키보드 네비게이션 지원 - 스크린 리더 호환 ### 5. 성능 최적화 빠른 로딩과 부드러운 인터랙션 - 이미지 최적화 (WebP) - 코드 스플리팅 - Lazy Loading --- ## 컬러 시스템 ### Primary Palette #### Light Mode (기본) **Primary - 신뢰감, 전문성** ``` Primary: #1976D2 (Material Blue 700) Primary Light: #42A5F5 (Blue 400) - Hover 상태 Primary Dark: #1565C0 (Blue 800) - Active 상태 ``` **Secondary - 강조, 알림** ``` Secondary: #FFC107 (Amber 500) Secondary Light: #FFD54F (Amber 300) Secondary Dark: #FFA000 (Amber 700) ``` **Semantic Colors - 의미 전달** ``` Success: #4CAF50 (Green 500) - 완료, 성공 Error: #F44336 (Red 500) - 오류, 위험 Warning: #FF9800 (Orange 500) - 주의, 경고 Info: #2196F3 (Blue 500) - 정보, 안내 ``` **Neutral Colors - 텍스트 및 배경** ``` Gray 50: #FAFAFA (Background light) Gray 100: #F5F5F5 (Surface) Gray 200: #EEEEEE (Border light) Gray 300: #E0E0E0 (Border) Gray 400: #BDBDBD (Disabled) Gray 500: #9E9E9E (Disabled text) Gray 600: #757575 (Hint text) Gray 700: #616161 (Secondary text) Gray 800: #424242 (Primary text variant) Gray 900: #212121 (Primary text) ``` **Background & Text** ``` Background: #FFFFFF (흰색) Surface: #F5F5F5 (연한 회색) Text Primary: #212121 (검은색) Text Secondary: #616161 (중간 회색) Text Disabled: #9E9E9E (연한 회색) Text Hint: #757575 (힌트) ``` #### Dark Mode **Primary Palette** ``` Primary: #64B5F6 (Blue 300) Secondary: #FFD54F (Amber 300) Success: #81C784 (Green 300) Error: #E57373 (Red 300) Warning: #FFB74D (Orange 300) Info: #4FC3F7 (Light Blue 300) ``` **Neutral Colors** ``` Gray 50: #303030 (Surface variant) Gray 100: #1E1E1E (Surface) Gray 200: #2C2C2C (Border light) Gray 300: #3A3A3A (Border) Gray 400: #4A4A4A (Disabled) Gray 500: #6E6E6E (Disabled text) Gray 600: #9E9E9E (Hint text) Gray 700: #B0B0B0 (Secondary text) Gray 800: #E0E0E0 (Primary text variant) Gray 900: #FFFFFF (Primary text) ``` **Background & Text** ``` Background: #121212 (어두운 검은색) Surface: #1E1E1E (어두운 회색) Text Primary: #FFFFFF (흰색) Text Secondary: #B0B0B0 (밝은 회색) Text Disabled: #6E6E6E (어두운 회색) Text Hint: #9E9E9E (힌트) ``` ### 차별화 기능별 컬러 **전문용어 하이라이트** ``` Text Color: #1976D2 (Primary) Underline: 1px dotted #1976D2 Hover Background: rgba(25, 118, 210, 0.05) ``` **Todo 뱃지** ``` Background: #FF9800 (Warning) Text: #FFFFFF (White) Badge: 원형 또는 라운드 사각형 ``` **AI 처리 중** ``` Progress Bar: #2196F3 (Info) Background: #E3F2FD (Info Light) Icon: 🤖 또는 AI 아이콘 ``` **관련 회의록** ``` Background: rgba(100, 181, 246, 0.05) Border: 1px solid rgba(100, 181, 246, 0.2) Accent: 3px solid #64B5F6 (좌측) ``` ### 색상 사용 가이드 #### Primary Color 사용 - 주요 CTA 버튼 - 링크 - 선택된 탭/메뉴 - 프로그레스 바 - 전문용어 하이라이트 #### Secondary Color 사용 - 보조 CTA - 배지 - 강조 표시 - 알림 #### Semantic Colors 사용 - Success: 완료 상태, 성공 메시지 - Error: 오류 메시지, 필수 필드 누락 - Warning: 주의 사항, 마감 임박 - Info: 정보 안내, 팁 #### Neutral Colors 사용 - Gray 900: 본문 텍스트 - Gray 700: 부가 정보 - Gray 500: Disabled 상태 - Gray 300: 테두리 - Gray 100: 배경 (Surface) ### 접근성 검증 **색상 대비율** (WCAG 2.1 AA 준수) ``` Primary (#1976D2) on White (#FFFFFF): 8.59:1 ✓ (AAA) Text Primary (#212121) on White: 16.10:1 ✓ (AAA) Text Secondary (#616161) on White: 7.23:1 ✓ (AAA) Gray 500 (#9E9E9E) on White: 3.95:1 ✗ (본문 사용 금지) ``` **검증 도구** - Chrome DevTools: Lighthouse Accessibility Audit - WebAIM Contrast Checker - Axe DevTools --- ## 타이포그래피 ### 폰트 패밀리 **Primary Font** ```css font-family: 'Pretendard', 'Apple SD Gothic Neo', -apple-system, BlinkMacSystemFont, sans-serif; ``` **Code/Monospace** (타임스탬프용) ```css font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace; ``` ### 폰트 선택 이유 **Pretendard** - 한글 가독성 우수 - 무료 오픈소스 - 9가지 굵기 지원 (Thin ~ Black) - 가변 폰트 지원 - 웹/모바일 최적화 **JetBrains Mono** - 코드 및 숫자 가독성 - 타임스탬프 [14:05] 표시에 최적 - Monospace 특성으로 정렬 용이 ### 타입 스케일 **Desktop / Tablet / Mobile 공통** ``` Display Size: 32px Line Height: 40px Font Weight: 700 (Bold) Letter Spacing: -0.5px 용도: 온보딩, 빈 상태 메시지, 랜딩 Heading 1 Size: 24px Line Height: 32px Font Weight: 700 (Bold) Letter Spacing: -0.3px 용도: 페이지 제목 Heading 2 Size: 20px Line Height: 28px Font Weight: 700 (Bold) Letter Spacing: -0.2px 용도: 섹션 제목 Heading 3 Size: 18px Line Height: 24px Font Weight: 600 (SemiBold) Letter Spacing: -0.1px 용도: 카드 제목, 서브 섹션 Body Large Size: 16px Line Height: 24px Font Weight: 400 (Regular) Letter Spacing: 0px 용도: 본문, 회의록 내용 Body Size: 14px Line Height: 20px Font Weight: 400 (Regular) Letter Spacing: 0px 용도: 설명 텍스트, 부가 정보 Caption Size: 12px Line Height: 16px Font Weight: 400 (Regular) Letter Spacing: 0.1px 용도: 레이블, 타임스탬프, 메타 정보 Label Size: 11px Line Height: 14px Font Weight: 500 (Medium) Letter Spacing: 0.2px 용도: 버튼 텍스트, 배지, 태그 ``` ### 폰트 굵기 (Font Weight) ``` Regular: 400 - 본문, 일반 텍스트 Medium: 500 - 강조, 레이블, 버튼 SemiBold: 600 - 서브 헤딩 Bold: 700 - 주요 헤딩, 강한 강조 ``` ### 회의록 특화 타이포그래피 **타임스탬프** ``` Font: JetBrains Mono, 12px Color: Gray 500 Background: Gray 100 (선택) Padding: 2px 6px Border Radius: 4px Format: [14:05] 또는 14:05 ``` **화자명** ``` Font: Pretendard, 14px Weight: 500 (Medium) Color: Gray 900 Format: "김민준:" ``` **발언 내용** ``` Font: Pretendard, 14px Weight: 400 (Regular) Color: Gray 900 Line Height: 22px ``` **회의록 예시** ``` [14:05] 김민준: 프로젝트 일정을 검토했습니다. RAG 시스템 구현은 다음 주까지 완료 예정입니다. ``` ### 텍스트 색상 사용 ``` Primary Text (Gray 900): - 제목 - 본문 - 중요 정보 Secondary Text (Gray 700): - 부가 설명 - 메타 정보 - 날짜/시간 Disabled Text (Gray 500): - 비활성 상태 - Placeholder - 힌트 텍스트 Link Text (Primary): - 링크 - 클릭 가능한 텍스트 - Hover 시 Primary Dark ``` ### 행간 및 자간 **Line Height (행간)** - Heading: 1.33 (예: 24px / 32px) - Body: 1.5 (예: 16px / 24px) - Caption: 1.33 (예: 12px / 16px) **Letter Spacing (자간)** - Heading: 음수 (-0.5px ~ -0.1px) - 밀착감 - Body: 0px - 기본 - Caption/Label: 양수 (0.1px ~ 0.2px) - 가독성 ### 텍스트 정렬 ``` Left Align: 기본 (본문, 제목) Center Align: 빈 상태, 모달 타이틀 Right Align: 숫자, 메타 정보 (날짜/시간) Justify: 사용 금지 (가독성 저하) ``` ### 반응형 타이포그래피 **Mobile (320-767px)** - 기본 스케일 사용 - 최소 폰트 크기: 11px (Label) - 터치 영역 고려: 버튼 텍스트 최소 14px **Tablet (768-1023px)** - 기본 스케일 유지 - Line Height 약간 증가 가능 (선택) **Desktop (1024px+)** - Display: 36px (선택적 확대) - Heading 1: 28px (선택적 확대) - 나머지 기본 스케일 유지 --- ## 간격 시스템 ### 8px 기반 시스템 Material Design 및 iOS Human Interface Guidelines를 따르는 8px 단위 간격 시스템 ``` spacing-0: 0px (없음) spacing-1: 4px (xs - 매우 작은 여백) spacing-2: 8px (sm - 작은 여백) spacing-3: 12px (md- - 중간-작은 여백) spacing-4: 16px (md - 기본 여백) spacing-5: 20px (md+ - 중간-큰 여백) spacing-6: 24px (lg - 큰 여백) spacing-8: 32px (xl - 매우 큰 여백) spacing-10: 40px (xxl - 초대형 여백) spacing-12: 48px (3xl - 페이지 구분) spacing-16: 64px (4xl - 섹션 구분) ``` ### 컴포넌트별 간격 가이드 **버튼** ``` 내부 패딩: 12px (상하) × 24px (좌우) 버튼 간 간격: 8px (수평) / 12px (수직) 최소 높이: 44px (Mobile) / 40px (Desktop) ``` **카드** ``` 내부 패딩: 16px 카드 간 간격: 12px (Mobile) / 16px (Tablet) / 20px (Desktop) 제목-내용: 12px 내용-액션: 16px ``` **입력 필드** ``` 내부 패딩: 12px (상하) × 16px (좌우) 레이블-필드: 8px 필드-에러: 4px 필드 간 간격: 16px ``` **섹션** ``` 섹션 간 간격: 24px (Mobile) / 32px (Tablet) / 40px (Desktop) 제목-내용: 16px ``` **페이지 여백** ``` Mobile: 16px (좌우) Tablet: 24px (좌우) Desktop: 32px (좌우) 또는 중앙 정렬 (최대 1200px) ``` ### 레이아웃 그리드 **Mobile (320-767px)** ``` Columns: 4 Gutter: 16px Margin: 16px Column Width: Auto ``` **Tablet (768-1023px)** ``` Columns: 8 Gutter: 20px Margin: 24px Column Width: Auto ``` **Desktop (1024px+)** ``` Columns: 12 Gutter: 24px Margin: 32px 또는 중앙 정렬 Max Width: 1200px (선택) ``` ### Z-Index 레이어 ``` z-base: 0 (기본 콘텐츠) z-dropdown: 100 (드롭다운, 메뉴) z-sticky: 200 (고정 헤더, 하단 탭) z-overlay: 300 (모달 배경, Backdrop) z-modal: 400 (모달 콘텐츠, Dialog) z-popover: 500 (툴팁, 팝오버, 전문용어 패널) z-toast: 600 (알림 토스트, 스낵바) ``` ### 간격 사용 원칙 1. **일관성 유지**: 항상 8px 배수 사용 2. **계층 구조**: 큰 간격 → 중요한 구분 3. **숨쉬는 공간**: 여백 충분히 확보 4. **터치 영역**: 최소 44x44px 보장 (8px 여백 포함) --- ## 컴포넌트 스타일 ### 1. 버튼 (Button) #### Primary Button ``` 배경: Primary (#1976D2) 텍스트: White (#FFFFFF) 폰트: 14px / Medium (500) 패딩: 12px 24px 높이: 44px (Mobile) / 40px (Desktop) 모서리: 8px 둥글게 (border-radius) 그림자: 0 2px 4px rgba(25, 118, 210, 0.2) 최소 너비: 120px (Desktop) / 100% (Mobile) States: Hover: 배경 #1565C0, 그림자 0 4px 8px rgba(25, 118, 210, 0.3) Active: 배경 #0D47A1, 그림자 제거 Disabled: 배경 Gray 300, 텍스트 Gray 500, 그림자 제거 Loading: 배경 유지, 스피너 표시, 텍스트 숨김 ``` #### Secondary Button ``` 배경: Transparent 테두리: 1px solid Primary 텍스트: Primary 패딩: 12px 24px 높이: 44px (Mobile) / 40px (Desktop) 모서리: 8px States: Hover: 배경 rgba(25, 118, 210, 0.1) Active: 배경 rgba(25, 118, 210, 0.2) Disabled: 테두리 Gray 300, 텍스트 Gray 500 ``` #### Text Button ``` 배경: Transparent 텍스트: Primary 패딩: 8px 16px 높이: Auto 모서리: 4px States: Hover: 배경 Gray 100 Active: 배경 Gray 200 Disabled: 텍스트 Gray 500 ``` #### 버튼 크기 변형 ``` Small: 높이: 32px 패딩: 8px 16px 폰트: 12px Medium (기본): 높이: 44px (Mobile) / 40px (Desktop) 패딩: 12px 24px 폰트: 14px Large: 높이: 56px 패딩: 16px 32px 폰트: 16px ``` #### 아이콘 버튼 ``` 크기: 44px × 44px (원형 또는 사각형) 아이콘 크기: 24px 배경: Transparent Hover: 배경 Gray 100 Active: 배경 Gray 200 ``` ### 2. 카드 (Card) ``` 배경: White (Light) / Surface (#1E1E1E, Dark) 테두리: 1px solid Gray 300 (선택) 모서리: 12px 그림자: 0 2px 8px rgba(0, 0, 0, 0.08) 패딩: 16px 최소 높이: 없음 (콘텐츠에 따라) 구조: Header (선택): 제목 + 액션 Content: 본문 Footer (선택): 버튼, 메타 정보 States: Hover: 그림자 0 4px 12px rgba(0, 0, 0, 0.12) Active: 그림자 0 1px 4px rgba(0, 0, 0, 0.06) Disabled: 배경 Gray 100, 그림자 제거 ``` ### 3. 입력 필드 (Input Field) #### Text Input ``` 배경: White 테두리: 1px solid Gray 300 모서리: 8px 높이: 44px 패딩: 12px 16px 폰트: 14px Regular Placeholder: Gray 500 States: Focus: 테두리 2px solid Primary 아웃라인 4px rgba(25, 118, 210, 0.1) Error: 테두리 1px solid Error 하단 메시지 12px Error color Disabled: 배경 Gray 100, 텍스트 Gray 500 ``` #### 레이블 및 헬퍼 텍스트 ``` Label: 폰트: 12px Medium 색상: Gray 700 위치: 입력 필드 상단 8px 간격 Helper Text: 폰트: 12px Regular 색상: Gray 600 위치: 입력 필드 하단 4px 간격 Error Message: 폰트: 12px Regular 색상: Error (#F44336) 아이콘: ⚠️ 포함 ``` ### 4. 체크박스 / 라디오 #### 체크박스 ``` 크기: 20px × 20px 모서리: 4px 테두리: 2px solid Gray 500 배경 (선택 시): Primary 체크마크: White, 2px stroke States: Hover: 테두리 Primary Disabled: 테두리 Gray 300, 배경 Gray 100 ``` #### 라디오 버튼 ``` 크기: 20px × 20px 모서리: 50% (원형) 테두리: 2px solid Gray 500 배경 (선택 시): Primary 내부 점: 8px × 8px White 원 States: Hover: 테두리 Primary Disabled: 테두리 Gray 300 ``` ### 5. 스위치 (Toggle) ``` 크기: 44px × 24px 모서리: 12px (완전히 둥글게) 배경 (Off): Gray 300 배경 (On): Primary 핸들: 20px × 20px 원형, White 그림자 0 2px 4px rgba(0, 0, 0, 0.2) Animation: 전환: 300ms cubic-bezier(0.4, 0.0, 0.2, 1) ``` ### 6. 드롭다운 (Dropdown) ``` 버튼: 배경: White 테두리: 1px solid Gray 300 모서리: 8px 높이: 44px 패딩: 12px 16px 아이콘: 화살표 (▼) 우측 메뉴: 배경: White 테두리: 1px solid Gray 300 모서리: 8px 그림자: 0 4px 12px rgba(0, 0, 0, 0.15) 최대 높이: 300px (스크롤) 옵션: 패딩: 12px 16px Hover: 배경 Gray 100 Selected: 배경 Primary 5% 투명도 ``` ### 7. 탭 (Tab) ``` 컨테이너: 배경: Transparent 하단 테두리: 1px solid Gray 300 탭 아이템: 패딩: 12px 16px 폰트: 14px Medium States: Default: 텍스트 Gray 700 Hover: 텍스트 Gray 900 Selected: 텍스트 Primary 하단 선 2px solid Primary 인디케이터: 높이: 2px 배경: Primary 애니메이션: 슬라이드 300ms ``` ### 8. 모달 (Modal) ``` Backdrop: 배경: rgba(0, 0, 0, 0.5) 애니메이션: Fade In 200ms Dialog: 배경: White 모서리: 12px (상단) / 0px (하단, Mobile) 그림자: 0 8px 16px rgba(0, 0, 0, 0.16) 최대 너비: 600px (Desktop) 최대 높이: 80vh 패딩: 20px Header: 패딩: 20px 20px 16px 닫기 버튼: 우측 상단 Content: 패딩: 0 20px 스크롤: 세로 스크롤 (필요 시) Footer: 패딩: 16px 20px 20px 버튼 정렬: 우측 (Cancel / Confirm) ``` ### 9. 프로그레스 바 (Progress Bar) ``` Linear: 배경: Gray 200 진행: Primary gradient 높이: 4px 모서리: 2px 애니메이션: 부드러운 진행 (0.3s ease) Circular: 배경: Gray 200 진행: Primary 두께: 4px 크기: 24px (Small) / 32px (Medium) / 48px (Large) 애니메이션: 회전 (1s linear infinite) ``` ### 10. 배지 (Badge) ``` 크기: 20px × 20px (원형) 또는 Auto × 20px (라운드) 배경: Warning (#FF9800) 또는 Error (#F44336) 텍스트: White, 11px Bold 패딩: 0 (원형) / 4px 8px (라운드) 위치: 우측 상단 절대 위치 (상위 요소 기준) 그림자: 0 2px 4px rgba(255, 152, 0, 0.3) ``` ### 11. 툴팁 (Tooltip) ``` 배경: rgba(33, 33, 33, 0.9) 텍스트: White, 12px Regular 패딩: 8px 12px 모서리: 6px 화살표: 6px 삼각형 최대 너비: 280px 그림자: 0 2px 8px rgba(0, 0, 0, 0.15) 애니메이션: Fade In 200ms ``` --- ## 반응형 브레이크포인트 ### 브레이크포인트 정의 ``` Mobile: 320px - 767px (기본, 우선 설계) Tablet: 768px - 1023px (점진적 향상) Desktop: 1024px+ (점진적 향상) ``` ### CSS 미디어 쿼리 ```css /* Mobile First (기본) */ .component { width: 100%; padding: 16px; } /* Tablet */ @media (min-width: 768px) { .component { width: calc(50% - 8px); padding: 20px; } } /* Desktop */ @media (min-width: 1024px) { .component { width: calc(33.33% - 12px); padding: 24px; } } ``` ### 반응형 전략 #### Mobile (320-767px) - 전체 너비 사용 - 세로 스크롤 우선 - 하단 탭 네비게이션 - FAB (Floating Action Button) - 카드 1열 배치 #### Tablet (768-1023px) - 카드 2열 배치 - 사이드 패널 추가 (선택) - 하단 탭 유지 #### Desktop (1024px+) - 카드 2-3열 배치 - 좌측 사이드바 네비게이션 - 우측 패널 (Todo, 알림 등) - 3단 레이아웃 ### 컴포넌트별 반응형 **버튼** - Mobile: 전체 너비 (width: 100%) - Tablet+: Auto 너비 (min-width: 120px) **카드** - Mobile: 1열 (width: 100%) - Tablet: 2열 (width: calc(50% - 8px)) - Desktop: 3열 (width: calc(33.33% - 12px)) **입력 필드** - Mobile: 전체 너비 - Desktop: 최대 너비 제한 (max-width: 400px) **모달** - Mobile: 전체 너비, 하단 슬라이드 업 - Desktop: 중앙 정렬, 최대 너비 600px --- ## 회의록 서비스 특화 컴포넌트 ### 1. 전문용어 하이라이트 (차별화 포인트) #### 인라인 하이라이트 ``` 텍스트 색상: Primary (#1976D2) 밑줄: 1px dotted Primary 커서: pointer 배경 (Hover): rgba(25, 118, 210, 0.05) 애니메이션: 배경 Fade In 200ms ``` #### 툴팁 (간단한 설명) ``` 배경: rgba(33, 33, 33, 0.9) 텍스트: White, 12px Regular 패딩: 8px 12px 모서리: 6px 화살표: 포함 (하단 중앙) 최대 너비: 280px 그림자: 0 2px 8px rgba(0, 0, 0, 0.15) 애니메이션: Fade In 200ms Z-Index: 500 (z-popover) 내용: - 간단한 정의 (1-2문장) - "더보기" 링크 (클릭 시 상세 패널) ``` #### 상세 패널 (맥락 기반 설명) ``` 배경: White 그림자: 0 -4px 20px rgba(0, 0, 0, 0.15) 패딩: 20px 모서리: 12px 12px 0 0 (상단만) 최대 높이: 60vh 스크롤: 세로 스크롤 애니메이션: Slide Up 300ms Z-Index: 500 (z-popover) 구조: Header: - 용어명 (18px Bold) - 닫기 버튼 (×) Content: - 간단한 정의 - 맥락 기반 설명 - 실제 사용 사례 - 관련 프로젝트/이슈 - 과거 회의록 링크 (최대 3개) - 사내 문서 링크 ``` **사용 예시** ``` 프로젝트 일정을 검토했습니다. RAG 시스템 구현은... ^^^ (점선 밑줄, Primary 색상) ``` ### 2. Todo 뱃지 (차별화 포인트) #### 원형 뱃지 (숫자 표시) ``` 크기: 20px × 20px (원형) 배경: Warning (#FF9800) 텍스트: White, 11px Bold 위치: 우측 상단 절대 위치 그림자: 0 2px 4px rgba(255, 152, 0, 0.3) Z-Index: 10 (상위 요소 기준) 내용: 숫자 (1-99, 100+ → "99+") ``` #### 인라인 뱃지 (할당 상태 표시) ``` 배경: rgba(255, 152, 0, 0.1) 텍스트: Warning (#FF9800), 12px Medium 패딩: 2px 8px 모서리: 4px 아이콘: 🔵 또는 ✅ 내용: "(2) 할당됨" 또는 "(5/12) 완료" ``` #### Todo 모달 (카드 클릭 시) ``` 배경: White 모서리: 12px 그림자: 0 8px 16px rgba(0, 0, 0, 0.16) 패딩: 20px 최대 너비: 400px 구조: - Todo 내용 (14px Regular) - 담당자 (12px Gray 700, 👤 아이콘) - 마감일 (12px Gray 700, 📅 아이콘) - 우선순위 (배지) - 관련 회의록 링크 (Primary 링크) - [완료] 버튼 (Primary) ``` **사용 예시** ``` ## Todo (Todo 섹션 제목) 🔵 (2) 할당됨 (인라인 뱃지) ## 논의 내용 - 다음 주까지 완료 (우측 상단에 원형 뱃지 "2") ``` ### 3. AI 처리 인디케이터 #### AI 회의록 생성 로딩 ``` 컨테이너: 배경: rgba(33, 150, 243, 0.05) 테두리: 1px solid rgba(33, 150, 243, 0.2) 모서리: 8px 패딩: 16px 헤더: 아이콘: 🤖 또는 AI 아이콘 텍스트: "AI 회의록 생성 중", 14px Medium 프로그레스 바: 배경: Gray 200 진행: Info (#2196F3) gradient 높이: 4px 모서리: 2px 퍼센트: 우측 표시 (60%) 상태 텍스트: 폰트: 12px Regular 색상: Gray 700 내용: 단계별 메시지 - "음성 데이터 분석 중..." (0-20%) - "발언 내용 분류 중..." (20-40%) - "논의 내용 정리 중..." (40-60%) - "결정 사항 추출 중..." (60-80%) - "회의록 생성 중..." (80-100%) ``` #### AI Todo 추출 로딩 ``` 컨테이너: 배경: rgba(33, 150, 243, 0.05) 패딩: 16px 모서리: 8px 헤더: 아이콘: 🤖 텍스트: "Todo 자동 추출 중", 14px Medium 스피너: 색상: Info (#2196F3) 크기: 32px 애니메이션: Pulse (3개 점 펄스) 상태 텍스트: 내용: "액션 아이템 분석 중..." ``` #### STT 정확도 표시 ``` 배경: Gray 100 (선택) 패딩: 4px 8px 모서리: 4px 폰트: 11px Regular 정확도별 색상: 90-100%: Success (#4CAF50) + ✓ 아이콘 70-89%: Warning (#FF9800) + ⚠️ 아이콘 0-69%: Error (#F44336) + ⚠️ 아이콘 + "수동 확인 필요" 예시: [정확도: 95% ✓] [정확도: 45% ⚠️ 수동 확인 필요] ``` ### 4. 관련 회의록 카드 ``` 배경: rgba(100, 181, 246, 0.05) 테두리: 1px solid rgba(100, 181, 246, 0.2) 좌측 액센트: 3px solid #64B5F6 모서리: 8px 패딩: 12px 그림자 (Hover): 0 4px 8px rgba(100, 181, 246, 0.2) 구조: - 아이콘: 📝 - 제목: 14px Medium Gray 900 - 날짜: 12px Gray 600 - 참석자: 12px Gray 600, 최대 3명 표시 - 관련도 프로그레스: 4px 높이 - 관련도 라벨: "관련도: 85%", 12px Primary - 연관 키워드: 태그 형식 (#RAG시스템, #성능최적화) ``` **관련도 점수별 스타일** ``` 90-100%: Primary Dark (#1565C0) 70-89%: Primary (#1976D2) 50-69%: Primary Light (#42A5F5) 30-49%: 표시 안 함 (관련도 낮음) ``` ### 5. 타임스탬프 ``` 폰트: JetBrains Mono, 12px 색상: Gray 500 배경: Gray 100 (선택) 패딩: 2px 6px (선택) 모서리: 4px (선택) 형식: - [14:05] (브래킷 포함) - 14:05 (브래킷 없음) - [14:05:32] (초 포함, 선택) 사용 예시: [14:05] 김민준: 프로젝트 일정을 검토... ``` ### 6. 화자 표시 ``` 폰트: Pretendard, 14px Medium 색상: Gray 900 형식: "김민준:" (콜론 포함) 패딩 (우측): 4px (발언 내용과 간격) 프로필 이미지 (선택): 크기: 24px × 24px 원형 위치: 화자명 좌측 기본 이미지: 이니셜 (예: "김" → "김") ``` ### 7. 프롬프팅 가이드 UI ``` 컨테이너: 배경: White 테두리: 1px solid Gray 300 모서리: 12px 패딩: 20px 그림자: 0 4px 12px rgba(0, 0, 0, 0.12) 헤더: 아이콘: 🤖 텍스트: "회의록 개선", 18px Bold 사전 정의 프롬프트: 레이아웃: 라디오 버튼 목록 패딩: 12px Hover: 배경 Gray 100 Selected: 배경 Primary 5% 투명도 프롬프트 아이템: - 제목: 14px Medium - 설명: 12px Gray 700 - 예상 시간: 12px Gray 600 (선택) 커스텀 프롬프트: - 텍스트 영역: 최소 높이 100px - Placeholder: "직접 입력..." 팁 섹션: - 아이콘: 💡 - 배경: rgba(255, 193, 7, 0.1) - 패딩: 12px - 모서리: 8px - 예시: "간결하게 요약해줘", "전문용어 설명 포함" CTA 버튼: - [생성하기] 버튼 (Primary) - 전체 너비 ``` --- ## 인터랙션 패턴 ### 1. 터치/클릭 피드백 #### Ripple Effect (Material Design) ``` 색상: rgba(25, 118, 210, 0.2) (Primary 20% 투명도) 시작: 클릭/터치 위치 크기: 원형, 중심에서 확산 지속 시간: 600ms Easing: cubic-bezier(0.4, 0.0, 0.2, 1) 적용 대상: 버튼, 카드, 리스트 아이템, 탭 ``` #### Press State ``` 배경 변화: 10% 어두워짐 (darken) 지속 시간: 100ms (Instant) Easing: linear 적용 대상: 모든 클릭 가능 요소 ``` ### 2. 애니메이션 토큰 #### Duration (지속 시간) ``` instant: 100ms - 즉각적 피드백 (Press, Toggle) fast: 200ms - 빠른 전환 (Fade, Tooltip) normal: 300ms - 기본 전환 (Slide, Modal) slow: 500ms - 강조 전환 (Page Transition) ``` #### Easing (이징 함수) ``` standard: cubic-bezier(0.4, 0.0, 0.2, 1) - 기본, 대부분 사용 decelerate: cubic-bezier(0.0, 0.0, 0.2, 1) - 진입 (Fade In, Slide In) accelerate: cubic-bezier(0.4, 0.0, 1, 1) - 퇴장 (Fade Out, Slide Out) sharp: cubic-bezier(0.4, 0.0, 0.6, 1) - 날카로운 (Snap) ``` ### 3. 화면 전환 애니메이션 #### Push (앞으로 이동) ```css /* 진입 */ .screen-push-enter { transform: translateX(100%); opacity: 1; } .screen-push-enter-active { transform: translateX(0); transition: transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1); } /* 퇴장 */ .screen-push-exit { transform: translateX(0); } .screen-push-exit-active { transform: translateX(-30%); opacity: 0.8; transition: all 300ms cubic-bezier(0.4, 0.0, 0.2, 1); } ``` #### Pop (뒤로 이동) ```css .screen-pop-enter { transform: translateX(-30%); opacity: 0.8; } .screen-pop-enter-active { transform: translateX(0); opacity: 1; transition: all 300ms cubic-bezier(0.4, 0.0, 0.2, 1); } .screen-pop-exit { transform: translateX(0); } .screen-pop-exit-active { transform: translateX(100%); transition: transform 300ms cubic-bezier(0.4, 0.0, 0.2, 1); } ``` #### Modal (모달 표시) ```css /* Backdrop */ .modal-backdrop-enter { opacity: 0; } .modal-backdrop-enter-active { opacity: 1; transition: opacity 200ms cubic-bezier(0.0, 0.0, 0.2, 1); } /* Content (Bottom Sheet - Mobile) */ .modal-enter-mobile { transform: translateY(100%); } .modal-enter-active-mobile { transform: translateY(0); transition: transform 300ms cubic-bezier(0.0, 0.0, 0.2, 1); } /* Content (Dialog - Desktop) */ .modal-enter-desktop { transform: scale(0.9); opacity: 0; } .modal-enter-active-desktop { transform: scale(1); opacity: 1; transition: all 200ms cubic-bezier(0.0, 0.0, 0.2, 1); } ``` #### Fade (페이드 인/아웃) ```css .fade-enter { opacity: 0; } .fade-enter-active { opacity: 1; transition: opacity 200ms cubic-bezier(0.4, 0.0, 0.2, 1); } .fade-exit { opacity: 1; } .fade-exit-active { opacity: 0; transition: opacity 200ms cubic-bezier(0.4, 0.0, 1, 1); } ``` ### 4. 로딩 상태 #### Skeleton UI ```css .skeleton { background: linear-gradient( 90deg, #f0f0f0 0px, #e0e0e0 40px, #f0f0f0 80px ); background-size: 200px 100%; animation: skeleton-loading 1.5s infinite; border-radius: 4px; } @keyframes skeleton-loading { 0% { background-position: -200px 0; } 100% { background-position: calc(200px + 100%) 0; } } ``` #### Spinner (원형) ```css .spinner { width: 32px; height: 32px; border: 3px solid rgba(25, 118, 210, 0.2); border-top-color: #1976D2; border-radius: 50%; animation: spinner-rotate 1s linear infinite; } @keyframes spinner-rotate { to { transform: rotate(360deg); } } ``` #### Pulse (3개 점) ```css .pulse { display: flex; gap: 8px; } .pulse-dot { width: 8px; height: 8px; background: #1976D2; border-radius: 50%; animation: pulse-scale 1.5s ease-in-out infinite; } .pulse-dot:nth-child(2) { animation-delay: 0.2s; } .pulse-dot:nth-child(3) { animation-delay: 0.4s; } @keyframes pulse-scale { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0.5; } } ``` ### 5. 스크롤 인터랙션 #### Pull to Refresh ``` 상태: - Idle: 기본 - Pulling: 아래로 당기는 중 (화살표 ↓) - Release: 임계점 도달 (화살표 ↑) - Refreshing: 새로고침 중 (스피너) 임계점: 80px 스피너 크기: 24px 애니메이션: 300ms ``` #### Infinite Scroll ``` 트리거 위치: 하단 200px 전 로딩 인디케이터: 하단 중앙, 스피너 로딩 메시지: "더 불러오는 중..." (12px Gray 700) 종료 메시지: "모든 항목을 불러왔습니다" (12px Gray 600) ``` ### 6. 제스처 #### Swipe (스와이프) ``` 방향: 좌우 (수평) 최소 거리: 50px 최소 속도: 0.3px/ms 적용 대상: 카드, 리스트 아이템, 탭 액션: - 좌측 스와이프: 삭제, 보관 - 우측 스와이프: 완료, 즐겨찾기 ``` #### Long Press (롱프레스) ``` 지속 시간: 500ms 피드백: 햅틱 (모바일), 배경 변화 적용 대상: 리스트 아이템, 카드 액션: - 컨텍스트 메뉴 표시 - 다중 선택 모드 진입 ``` ### 7. 포커스 관리 #### Focus Ring ``` 아웃라인: 2px solid Primary 오프셋: 2px 모서리: 4px 애니메이션: 200ms 적용 조건: - :focus-visible (키보드 네비게이션만) - 마우스 클릭 시 표시 안 함 ``` #### Tab 순서 ``` 순서: 논리적 흐름 (좌→우, 상→하) Skip Link: "본문으로 건너뛰기" (접근성) Tab Index: -1 (프로그래밍 방식) / 0 (자연 순서) ``` ### 8. 에러 상태 애니메이션 #### Shake (흔들림) ```css @keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); } 20%, 40%, 60%, 80% { transform: translateX(10px); } } .error-shake { animation: shake 0.5s; } ``` 적용 대상: 입력 필드 오류, 필수 항목 누락 --- ## 변경 이력 | 버전 | 날짜 | 변경 내용 | 작성자 | |------|------|-----------|--------| | 1.0 | 2025-01-20 | 초기 스타일 가이드 작성 | 이미준 | --- **문서 끝**