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

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

1. 디자인 시스템 개요

1.1 디자인 철학

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

---

2. 색상 팔레트

2.1 Primary Colors

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

2.2 Text Colors

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

2.3 Background Colors

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

2.4 Status Colors

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

2.5 Border & Shadow

--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 폰트 패밀리

--font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                "Helvetica Neue", Arial, sans-serif;
--font-mono: "SF Mono", Monaco, "Cascadia Code", monospace;

3.2 폰트 크기

--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 폰트 굵기

--font-regular: 400;
--font-medium: 500;
--font-semibold: 600;
--font-bold: 700;

3.4 행간

--leading-tight: 1.25;   /* 제목 */
--leading-normal: 1.5;   /* 본문 */
--leading-relaxed: 1.75; /* 긴 텍스트 */

---

4. 간격 시스템

4.1 Spacing Scale

--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

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

5.2 Container

--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

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

background: transparent;
color: var(--primary);
border: 2px solid var(--primary);
padding: 10px 22px;

Ghost Button

background: transparent;
color: var(--text-primary);
padding: 12px 24px;

6.2 입력 필드

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 카드

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

Hover:

box-shadow: var(--shadow-md);
transform: translateY(-2px);

6.4 Badge/Chip

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 아이콘 크기

--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

--duration-fast: 150ms;    /* Hover 효과 */
--duration-base: 200ms;    /* 일반 전환 */
--duration-slow: 300ms;    /* Modal, Drawer */

8.2 Easing Functions

--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 포커스 표시

*:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

9.3 터치 타겟

• 최소 크기: 44x44px
• 간격: 최소 8px

9.4 스크린 리더

.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. 다크 모드

@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 페이지 구조

<!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 버튼 사용

<!-- 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 입력 필드

<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	초기 스타일 가이드 작성