hgzero/design/uiux_다람지/style-guide.md

# 회의록 작성 서비스 - 스타일 가이드

## 1. 디자인 시스템 개요

### 1.1 디자인 철학
- **Mobile First**: 모바일 환경을 우선으로 설계하고 점진적으로 향상
- **접근성 우선**: WCAG 2.1 Level AA 준수
- **일관성**: 모든 화면에서 동일한 시각적 언어 사용

---

## 2. 색상 팔레트

### 2.1 Primary Colors
```css
--primary: #0066CC;          /* 주요 액션 버튼, 링크 */
--primary-dark: #004A99;     /* Hover, Active 상태 */
--primary-light: #E6F2FF;    /* 배경, 하이라이트 */
```

### 2.2 Text Colors
```css
--text-primary: #1A1A1A;     /* 제목, 본문 (15:1 대비) */
--text-secondary: #666666;   /* 부가 정보 (5:1 대비) */
--text-disabled: #999999;    /* 비활성 텍스트 */
--text-inverse: #FFFFFF;     /* 어두운 배경의 텍스트 */
```

### 2.3 Background Colors
```css
--bg-white: #FFFFFF;         /* 주요 배경 */
--bg-gray: #F5F5F5;          /* 보조 배경 */
--bg-dark: #1A1A1A;          /* 다크 모드 배경 */
```

### 2.4 Status Colors
```css
--success: #0A7029;          /* 성공, 완료 (4.5:1 대비) */
--error: #C41E3A;            /* 오류, 위험 (4.5:1 대비) */
--warning: #856404;          /* 경고, 주의 (4.5:1 대비) */
--info: #0066CC;             /* 정보 */
```

### 2.5 Border & Shadow
```css
--border-light: #E0E0E0;     /* 기본 테두리 */
--border-medium: #CCCCCC;    /* 강조 테두리 */
--shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
--shadow-md: 0 4px 6px rgba(0,0,0,0.1);
--shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
```

---

## 3. 타이포그래피

### 3.1 폰트 패밀리
```css
--font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                "Helvetica Neue", Arial, sans-serif;
--font-mono: "SF Mono", Monaco, "Cascadia Code", monospace;
```

### 3.2 폰트 크기
```css
--font-xs: 0.75rem;    /* 12px - 캡션, 레이블 */
--font-sm: 0.875rem;   /* 14px - 본문, 입력 필드 */
--font-base: 1rem;     /* 16px - 기본 본문 */
--font-lg: 1.125rem;   /* 18px - 소제목 */
--font-xl: 1.25rem;    /* 20px - 제목 */
--font-2xl: 1.5rem;    /* 24px - 큰 제목 */
--font-3xl: 2rem;      /* 32px - 페이지 제목 */
```

### 3.3 폰트 굵기
```css
--font-regular: 400;
--font-medium: 500;
--font-semibold: 600;
--font-bold: 700;
```

### 3.4 행간
```css
--leading-tight: 1.25;   /* 제목 */
--leading-normal: 1.5;   /* 본문 */
--leading-relaxed: 1.75; /* 긴 텍스트 */
```

---

## 4. 간격 시스템

### 4.1 Spacing Scale
```css
--space-1: 0.25rem;   /* 4px */
--space-2: 0.5rem;    /* 8px */
--space-3: 0.75rem;   /* 12px */
--space-4: 1rem;      /* 16px */
--space-5: 1.25rem;   /* 20px */
--space-6: 1.5rem;    /* 24px */
--space-8: 2rem;      /* 32px */
--space-10: 2.5rem;   /* 40px */
--space-12: 3rem;     /* 48px */
--space-16: 4rem;     /* 64px */
```

### 4.2 적용 규칙
- **컴포넌트 내부 패딩**: space-4 (16px)
- **컴포넌트 간 간격**: space-6 (24px)
- **섹션 간 간격**: space-8 (32px)
- **페이지 여백**: space-4 (모바일), space-8 (데스크톱)

---

## 5. 레이아웃

### 5.1 Breakpoints
```css
/* Mobile First */
--breakpoint-sm: 640px;    /* 작은 태블릿 */
--breakpoint-md: 768px;    /* 태블릿 */
--breakpoint-lg: 1024px;   /* 데스크톱 */
--breakpoint-xl: 1280px;   /* 큰 데스크톱 */
```

### 5.2 Container
```css
--container-mobile: 100%;
--container-tablet: 720px;
--container-desktop: 960px;
--container-wide: 1200px;
```

### 5.3 Grid System
- **Mobile (< 768px)**: 1 column
- **Tablet (768px - 1023px)**: 2 columns
- **Desktop (≥ 1024px)**: 3 columns
- **Gap**: 24px

---

## 6. 컴포넌트 스타일

### 6.1 버튼

#### Primary Button
```css
background: var(--primary);
color: var(--text-inverse);
padding: 12px 24px;
border-radius: 8px;
font-weight: var(--font-semibold);
```

**상태:**
- Hover: `background: var(--primary-dark)`
- Active: `transform: scale(0.98)`
- Disabled: `opacity: 0.5; cursor: not-allowed`

#### Secondary Button
```css
background: transparent;
color: var(--primary);
border: 2px solid var(--primary);
padding: 10px 22px;
```

#### Ghost Button
```css
background: transparent;
color: var(--text-primary);
padding: 12px 24px;
```

### 6.2 입력 필드

```css
border: 1px solid var(--border-light);
border-radius: 8px;
padding: 12px 16px;
font-size: var(--font-sm);
transition: border-color 0.2s;
```

**상태:**
- Focus: `border-color: var(--primary); outline: 2px solid var(--primary-light)`
- Error: `border-color: var(--error)`
- Disabled: `background: var(--bg-gray); cursor: not-allowed`

### 6.3 카드

```css
background: var(--bg-white);
border-radius: 12px;
padding: var(--space-6);
box-shadow: var(--shadow-sm);
transition: box-shadow 0.3s;
```

**Hover:**
```css
box-shadow: var(--shadow-md);
transform: translateY(-2px);
```

### 6.4 Badge/Chip

```css
display: inline-flex;
align-items: center;
padding: 4px 12px;
border-radius: 16px;
font-size: var(--font-xs);
font-weight: var(--font-medium);
```

**변형:**
- Success: `background: var(--success); color: white`
- Error: `background: var(--error); color: white`
- Info: `background: var(--primary-light); color: var(--primary)`

---

## 7. 아이콘

### 7.1 아이콘 크기
```css
--icon-sm: 16px;   /* 인라인 아이콘 */
--icon-md: 24px;   /* 버튼, 입력 필드 */
--icon-lg: 32px;   /* 큰 아이콘 */
--icon-xl: 48px;   /* 일러스트 아이콘 */
```

### 7.2 아이콘 사용 원칙
- SVG 형식 사용
- `currentColor` 사용하여 텍스트 색상 상속
- 접근성을 위해 `aria-label` 또는 `sr-only` 텍스트 제공

---

## 8. 애니메이션

### 8.1 Transition Duration
```css
--duration-fast: 150ms;    /* Hover 효과 */
--duration-base: 200ms;    /* 일반 전환 */
--duration-slow: 300ms;    /* Modal, Drawer */
```

### 8.2 Easing Functions
```css
--ease-in: cubic-bezier(0.4, 0, 1, 1);
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
```

### 8.3 애니메이션 원칙
- 성능을 위해 `transform`과 `opacity`만 애니메이션
- `prefers-reduced-motion` 미디어 쿼리 지원
- 불필요한 애니메이션 지양

---

## 9. 접근성

### 9.1 색상 대비
- 일반 텍스트: 최소 4.5:1
- 큰 텍스트 (18pt+ 또는 14pt bold+): 최소 3:1
- UI 컴포넌트: 최소 3:1

### 9.2 포커스 표시
```css
*:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
```

### 9.3 터치 타겟
- 최소 크기: 44x44px
- 간격: 최소 8px

### 9.4 스크린 리더
```css
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
```

---

## 10. 다크 모드

```css
@media (prefers-color-scheme: dark) {
  :root {
    --bg-white: #1A1A1A;
    --bg-gray: #2A2A2A;
    --text-primary: #FFFFFF;
    --text-secondary: #CCCCCC;
    --border-light: #404040;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  }
}
```

---

## 11. 모바일 최적화

### 11.1 터치 최적화
- 버튼/링크 최소 크기: 44x44px
- 스와이프 제스처 지원
- Pull-to-refresh 지원

### 11.2 성능 최적화
- 이미지 lazy loading
- 코드 스플리팅
- CSS 최소화
- 시스템 폰트 우선 사용

---

## 12. 컴포넌트 라이브러리

### 12.1 공통 컴포넌트
1. **Header**: 페이지 상단 네비게이션
2. **Button**: Primary, Secondary, Ghost
3. **Input**: Text, Email, Password, Date, Time
4. **Card**: 정보 카드, 클릭 가능한 카드
5. **Badge**: 상태 표시
6. **Modal**: 팝업 다이얼로그
7. **Toast**: 알림 메시지
8. **Loading**: 로딩 스피너
9. **Empty State**: 빈 상태 일러스트
10. **Bottom Navigation**: 모바일 하단 네비게이션

### 12.2 도메인 컴포넌트
1. **Meeting Card**: 회의 정보 카드
2. **Minutes Editor**: 회의록 편집기
3. **Todo Item**: Todo 항목
4. **Attendee Avatar**: 참석자 아바타
5. **Term Tooltip**: 전문용어 툴팁

---

## 13. 사용 예시

### 13.1 페이지 구조
```html
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>페이지 제목</title>
  <link rel="stylesheet" href="common.css">
</head>
<body>
  <header class="header">
    <!-- 헤더 내용 -->
  </header>

  <main class="main-content">
    <!-- 메인 콘텐츠 -->
  </main>

  <script src="common.js"></script>
</body>
</html>
```

### 13.2 버튼 사용
```html
<!-- Primary Button -->
<button class="btn btn-primary">회의 시작</button>

<!-- Secondary Button -->
<button class="btn btn-secondary">취소</button>

<!-- Ghost Button -->
<button class="btn btn-ghost">뒤로</button>

<!-- Disabled Button -->
<button class="btn btn-primary" disabled>저장</button>
```

### 13.3 입력 필드
```html
<div class="form-group">
  <label for="meeting-title" class="form-label">
    회의 제목 <span class="required">*</span>
  </label>
  <input
    type="text"
    id="meeting-title"
    class="form-input"
    placeholder="예: 주간 회의"
    required
  >
  <span class="form-error">회의 제목을 입력해주세요</span>
</div>
```

---

## 14. 변경 이력

| 버전 | 날짜 | 변경 내용 |
|------|------|-----------|
| 1.0 | 2025-01-20 | 초기 스타일 가이드 작성 |