shared-dg05-coffeeQuokka/hgzero
1
0
Fork 0
mirror of https://github.com/hwanny1128/HGZero.git synced 2025-12-06 17:16:25 +00:00
Code Issues Packages Projects Releases Wiki Activity
hgzero/design-last/uiux/style-guide.md
djeon 084b0085fa 스타일 가이드 추가 
- design-last/uiux/style-guide.md 파일 추가
- UI/UX 설계를 위한 스타일 가이드 문서

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

Co-Authored-By: Claude <noreply@anthropic.com>
2025-10-20 15:33:10 +09:00

1563 lines
35 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# 회의록 작성 및 공유 개선 서비스 - 스타일 가이드
## 목차
- [개요](#개요)
- [브랜드 아이덴티티](#브랜드-아이덴티티)
- [디자인 원칙](#디자인-원칙)
- [컬러 시스템](#컬러-시스템)
- [타이포그래피](#타이포그래피)
- [간격 시스템](#간격-시스템)
- [컴포넌트 스타일](#컴포넌트-스타일)
- [반응형 브레이크포인트](#반응형-브레이크포인트)
- [회의록 서비스 특화 컴포넌트](#회의록-서비스-특화-컴포넌트)
- [인터랙션 패턴](#인터랙션-패턴)
- [변경 이력](#변경-이력)
---
## 개요
### 문서 목적
회의록 작성 및 공유 개선 서비스의 시각적 일관성을 보장하고, 디자이너와 개발자 간 효율적인 협업을 위한 스타일 가이드를 제공합니다.
### 적용 범위
- 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 | 초기 스타일 가이드 작성 | 이미준 |
---
**문서 끝**
Reference in New Issue View Git Blame Copy Permalink