generated from gc/template-java-maven
HYOJIN
c2a71c1b77
- 디자인 시스템 가이드 문서 11개 생성 (docs/design/) - CSS 변수 토큰 시스템 (@theme + :root/.dark 전환) - cn() 유틸리티 (clsx + tailwind-merge) - Button/Badge 공통 컴포넌트 (variant/size, 다크모드 대응) - 하드코딩 Tailwind 색상 → CSS 변수 토큰 리팩토링 (30개 파일) - 차트 팔레트 다크모드 색상 업데이트 (CHART_COLORS_HEX) - 버튼 다크모드 채도/대비 강화 (primary-600 기반) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
91 lines
2.8 KiB
Markdown
91 lines
2.8 KiB
Markdown
# 타이포그래피
|
|
|
|
---
|
|
|
|
## 폰트 패밀리
|
|
|
|
| 역할 | 폰트 | 적용 범위 |
|
|
|------|------|-----------|
|
|
| 기본 (한글) | Pretendard Variable / Pretendard | 모든 UI 텍스트 |
|
|
| 기본 (영문/숫자) | Inter | 영문 전용 컨텍스트 |
|
|
| 코드 | JetBrains Mono / Fira Code | 코드 블록, API Key 등 |
|
|
|
|
CSS 변수:
|
|
```css
|
|
--font-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
|
|
system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo',
|
|
'Noto Sans KR', 'Malgun Gothic', sans-serif;
|
|
--font-mono: 'JetBrains Mono', 'Fira Code', Consolas, Monaco, 'Courier New', monospace;
|
|
```
|
|
|
|
---
|
|
|
|
## 타입 스케일
|
|
|
|
8단계 스케일. `rem` 단위 기준 (root 16px).
|
|
|
|
| 단계 | 이름 | px | rem | line-height | weight | 용도 |
|
|
|------|------|----|-----|-------------|--------|------|
|
|
| 1 | Display | 48px | 3rem | 1.2 | 700 | 히어로, 랜딩 |
|
|
| 2 | H1 | 36px | 2.25rem | 1.2 | 700 | 페이지 제목 |
|
|
| 3 | H2 | 30px | 1.875rem | 1.25 | 600 | 섹션 제목 |
|
|
| 4 | H3 | 24px | 1.5rem | 1.3 | 600 | 카드 제목 |
|
|
| 5 | Body-lg | 18px | 1.125rem | 1.6 | 400 | 강조 본문 |
|
|
| 6 | Body | 16px | 1rem | 1.6 | 400 | 기본 본문 |
|
|
| 7 | Caption | 14px | 0.875rem | 1.5 | 400 | 레이블, 보조 |
|
|
| 8 | Overline | 12px | 0.75rem | 1.5 | 500 | 카테고리, 태그 |
|
|
|
|
---
|
|
|
|
## Font Weight
|
|
|
|
| 값 | 이름 | 사용처 |
|
|
|----|------|--------|
|
|
| 300 | Light | 큰 디스플레이 텍스트 부제목 |
|
|
| 400 | Regular | 기본 본문 |
|
|
| 500 | Medium | 캡션, Overline, 강조 레이블 |
|
|
| 600 | SemiBold | H2, H3, 버튼 |
|
|
| 700 | Bold | Display, H1, 강조 수치 |
|
|
|
|
---
|
|
|
|
## Tailwind 클래스 매핑
|
|
|
|
| 단계 | Tailwind 클래스 |
|
|
|------|----------------|
|
|
| Display | `text-5xl font-bold leading-tight` |
|
|
| H1 | `text-4xl font-bold leading-tight` |
|
|
| H2 | `text-3xl font-semibold leading-snug` |
|
|
| H3 | `text-2xl font-semibold leading-snug` |
|
|
| Body-lg | `text-lg font-normal leading-relaxed` |
|
|
| Body | `text-base font-normal leading-relaxed` |
|
|
| Caption | `text-sm font-normal leading-normal` |
|
|
| Overline | `text-xs font-medium leading-normal tracking-wide uppercase` |
|
|
|
|
---
|
|
|
|
## 한글 타이포그래피 규칙
|
|
|
|
- `word-break: keep-all` 적용 — 단어 중간에서 줄바꿈 방지
|
|
- 한글 사용 시 `letter-spacing` 조정 금지 (Pretendard 기본값 유지)
|
|
- 본문 최대 너비: `max-w-prose` (65ch) — 가독성 확보
|
|
|
|
```css
|
|
/* 전역 적용 권장 */
|
|
p, li, dd {
|
|
word-break: keep-all;
|
|
}
|
|
```
|
|
|
|
---
|
|
|
|
## 색상 규칙
|
|
|
|
| 상황 | 클래스 |
|
|
|------|--------|
|
|
| 제목, 본문 | `text-[var(--color-text-primary)]` |
|
|
| 보조 설명 | `text-[var(--color-text-secondary)]` |
|
|
| placeholder, 비활성 | `text-[var(--color-text-tertiary)]` |
|
|
| 링크 | `text-[var(--color-primary)] hover:text-[var(--color-primary-hover)]` |
|
|
| 위험/오류 | `text-[var(--color-danger)]` |
|