eKeerar
64 lines
3.4 KiB
Markdown
64 lines
3.4 KiB
Markdown
# TYPOGRAPHY — 타이포그래피 규칙
|
|
|
|
> ⚠️ **가독성 최우선(readability first).** 이 앱은 오디오 튜닝 도구로, 사용자가 값을 읽고
|
|
> 자연어를 입력하며 오래 들여다봅니다. **작고 흐린 글자로 인한 피로를 피하는 것이 규칙의 목적**입니다.
|
|
> 애매하면 **더 크게, 더 또렷하게**를 택한다.
|
|
|
|
## 핵심 규칙 (절대 원칙)
|
|
1. **최소 12px** — 어떤 텍스트도 12px 미만 금지. (라벨·힌트·배지·축 포함)
|
|
2. **최대 24px** — 최상위 제목만 24px. 그 이상 키우지 않는다.
|
|
3. **저대비 회색 텍스트(dim/mute)는 12px 이상**을 유지하고, **중요한 정보는 14px 이상**을 권장.
|
|
4. 정보 위계는 **크기 + 굵기 + 색**으로 표현한다(크기만으로 과하게 벌리지 않기).
|
|
|
|
## 타입 스케일 (12 → 24)
|
|
| 역할(Role) | px | Weight | 사용처 |
|
|
|---|---|---|---|
|
|
| **Caption** (최소) | **12** | 400/600 | 라벨, 힌트, 배지, 그래프 축, 보조 캡션 |
|
|
| Body S | 13 | 400/600 | 칩, 버튼, 보조 본문 |
|
|
| Body | 14 | 400 | 기본 본문, 리스트 항목, 설명문 |
|
|
| Body L | 15 | 600 | 값 강조, 입력 텍스트, 프로파일명(목록) |
|
|
| Subtitle | 16 | 600 | 카드 강조, 대상 기기명 |
|
|
| Section | 18 | 700 | 섹션/창 소제목, 헤더 타이틀 |
|
|
| Heading | 21 | 700 | 다이얼로그 제목 |
|
|
| **Title** (최대) | **24** | 700 | 페이지/최상위 제목 |
|
|
|
|
- 반(半)단계(13.5·14.5 등)는 목업(HTML) 미세조정용일 뿐, **WPF에서는 위 정수 스케일로 스냅**한다.
|
|
|
|
## 색·대비 (다크 테마 기준)
|
|
- 본문 기본: `#F2F3F5` (text)
|
|
- 보조: `#A8ABB4` (dim) — **12px 이상에서만** 사용
|
|
- 약한 보조: `#767A83` (mute) — 캡션/각주 한정, **작은 크기에서 남용 금지**
|
|
- 강조/링크: `#4CC2FF` (accent)
|
|
- 라이트 테마(M5) 도입 시에도 **동일 대비 비율**을 유지한다.
|
|
|
|
## 간격·굵기 가이드
|
|
- 줄간격(line-height) 본문 1.4~1.6.
|
|
- 굵기: 제목 700, 강조 값 600, 본문 400. **얇은(300) 폰트 금지**(가독성).
|
|
- 폰트 패밀리: `Segoe UI Variable, Segoe UI`.
|
|
|
|
## WPF 구현 지침 (M1/M5에서 적용)
|
|
- **창 기본 FontSize = 14** 로 두고, 역할별 스타일 키를 리소스로 정의해 **인라인 FontSize 사용을 지양**한다.
|
|
- 예시 `ResourceDictionary`:
|
|
```xml
|
|
<sys:Double x:Key="Font.Caption">12</sys:Double>
|
|
<sys:Double x:Key="Font.BodyS">13</sys:Double>
|
|
<sys:Double x:Key="Font.Body">14</sys:Double>
|
|
<sys:Double x:Key="Font.BodyL">15</sys:Double>
|
|
<sys:Double x:Key="Font.Subtitle">16</sys:Double>
|
|
<sys:Double x:Key="Font.Section">18</sys:Double>
|
|
<sys:Double x:Key="Font.Heading">21</sys:Double>
|
|
<sys:Double x:Key="Font.Title">24</sys:Double>
|
|
|
|
<Style x:Key="Caption" TargetType="TextBlock">
|
|
<Setter Property="FontSize" Value="{StaticResource Font.Caption}"/>
|
|
<Setter Property="Foreground" Value="{DynamicResource TextMuteBrush}"/>
|
|
</Style>
|
|
<!-- Body / Section / Title 등 동일 패턴 -->
|
|
```
|
|
- 기존 프리빌트 XAML의 인라인 `FontSize`는 **M5(테마) 단계에서 위 스타일 키로 치환**한다.
|
|
- 접근성: 사용자 OS 글꼴 배율(125%/150%)에서도 레이아웃이 깨지지 않도록 **고정 폭보다 Auto/*, 최소 높이 지정**을 선호.
|
|
|
|
## 목업과의 관계
|
|
- `mockups/gallery.html`은 이 스케일(최소 12·최대 24)로 조정되어 있다. 시각 기준은 갤러리를 참고하되,
|
|
**수치 기준(정수 스케일)은 이 문서가 원본(source of truth)**이다.
|