mirror of
https://github.com/hwanny1128/HGZero.git
synced 2025-12-06 19:36:23 +00:00
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>
35 KiB
35 KiB
회의록 작성 및 공유 개선 서비스 - 스타일 가이드
목차
개요
문서 목적
회의록 작성 및 공유 개선 서비스의 시각적 일관성을 보장하고, 디자이너와 개발자 간 효율적인 협업을 위한 스타일 가이드를 제공합니다.
적용 범위
- Web (모든 브라우저)
- Mobile (iOS, Android)
- Tablet
- Desktop
관련 문서
브랜드 아이덴티티
디자인 컨셉
"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
font-family: 'Pretendard', 'Apple SD Gothic Neo', -apple-system, BlinkMacSystemFont, sans-serif;
Code/Monospace (타임스탬프용)
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 (알림 토스트, 스낵바)
간격 사용 원칙
- 일관성 유지: 항상 8px 배수 사용
- 계층 구조: 큰 간격 → 중요한 구분
- 숨쉬는 공간: 여백 충분히 확보
- 터치 영역: 최소 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 미디어 쿼리
/* 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 (앞으로 이동)
/* 진입 */
.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 (뒤로 이동)
.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 (모달 표시)
/* 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 (페이드 인/아웃)
.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
.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 (원형)
.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개 점)
.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 (흔들림)
@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 | 초기 스타일 가이드 작성 | 이미준 |
문서 끝