[G1-Sync] Manual knowledge update
This commit is contained in:
Antigravity Agent
@@ -2,98 +2,202 @@
|
||||
id: wiki-2026-0508-유동적-타이포그래피-fluid-typography
|
||||
title: 유동적 타이포그래피(Fluid Typography)
|
||||
category: 10_Wiki/Topics
|
||||
status: needs_review
|
||||
status: verified
|
||||
canonical_id: self
|
||||
aliases: []
|
||||
aliases: [Fluid Typography, Responsive Type, clamp() Typography, Variable Fonts]
|
||||
duplicate_of: none
|
||||
source_trust_level: A
|
||||
confidence_score: 0.92
|
||||
tags: [uncategorized]
|
||||
verification_status: applied
|
||||
tags: [frontend, css, typography, responsive, clamp, variable-font]
|
||||
raw_sources: []
|
||||
last_reinforced: 2026-05-08
|
||||
last_reinforced: 2026-05-10
|
||||
github_commit: pending
|
||||
inferred_by: Claude Opus 4.7 (auto-normalize 2026-05-08)
|
||||
tech_stack:
|
||||
language: unspecified
|
||||
framework: unspecified
|
||||
language: CSS
|
||||
framework: Web Platform
|
||||
---
|
||||
|
||||
# [[유동적 타이포그래피([[Fluid Typography]])]]
|
||||
# 유동적 타이포그래피(Fluid Typography)
|
||||
|
||||
## 📌 한 줄 통찰 (The Karpathy Summary)
|
||||
유동적 타이포그래피(Fluid Typography)는 고정된 중단점(breakpoint)에서 글꼴 크기가 갑자기 변하는 대신, 브라우저의 뷰포트나 컨테이너의 크기에 따라 글꼴 크기가 부드럽고 연속적으로 조절되는 반응형 웹 디자인 기법입니다 [1-3]. 주로 CSS의 `clamp()` 함수와 뷰포트 상대 단위(`vw` 등)를 활용하여 모바일에서 데스크톱까지 모든 화면에서 최적의 가독성을 제공하며, 복잡한 미디어 쿼리 작성의 필요성을 줄여줍니다 [4, 5].
|
||||
## 매 한 줄
|
||||
> **"매 viewport 의 변화 에 매 부드럽게 scaling 하는 typography — 매 breakpoint 의 jump 의 없음, 매 `clamp(min, preferred, max)` 의 사용"**. 매 2017 Mike Riethmuller 의 "fluid typography" 제안 → 매 2020 `clamp()` baseline → 매 2026 매 `cqw` (container query unit) + variable font 의 결합 의 새로운 frontier.
|
||||
|
||||
## 📖 구조화된 지식 (Synthesized Content)
|
||||
* **개념 및 필요성:**
|
||||
유동적 타이포그래피는 뷰포트 치수(브라우저 너비 등)나 컨테이너 크기에 비례하여 텍스트 크기를 지속적으로 변경하는 방식입니다 [2, 6]. 고정된 폰트 크기는 모바일 화면에서 너무 크거나 데스크톱에서 너무 작게 보일 수 있는 단점이 있습니다 [3, 7]. 반면 유동적 타이포그래피는 지정된 최소 크기와 최대 크기 사이에서 화면의 가용 공간에 맞춰 자동으로 글꼴 크기를 조정하므로 이러한 문제를 효과적으로 해결합니다 [3, 7, 8].
|
||||
## 매 핵심
|
||||
|
||||
* **구현 방법 (CSS `clamp()` 함수):**
|
||||
이 기법은 주로 CSS의 `clamp()` 함수를 사용하여 구현됩니다. `clamp(최소값, 권장값, 최대값)`의 형태를 가지며, 복잡한 수학적 변환 없이 브라우저가 상황에 맞춰 크기를 스스로 계산하도록 합니다 [7, 8]. 예를 들어 `h1 { font-size: clamp(1.5rem, 2vw + 1rem, 3rem); }`와 같이 설정하면, 글꼴 크기가 `1.5rem` 이하로 작아지거나 `3rem` 이상으로 커지지 않는 선에서 뷰포트 너비(`vw`)에 따라 부드럽게 크기가 변합니다 [4].
|
||||
### 매 핵심 함수 — `clamp()`
|
||||
- `clamp(MIN, PREFERRED, MAX)` — 매 PREFERRED 의 MIN ≤ x ≤ MAX 의 clamp.
|
||||
- 매 PREFERRED 의 매 viewport-relative unit (`vw`, `cqw`).
|
||||
- 매 mobile 의 너무 작 X, 매 desktop 의 너무 크 X.
|
||||
|
||||
* **상대 단위의 활용:**
|
||||
고정 단위(픽셀) 대신 `vw`, `vi`(뷰포트 단위)나 `cqw`, `cqi`(컨테이너 단위)와 같은 단위를 기준 값(예: `1rem`)에 더하여 사용합니다 [1]. 이를 통해 개발자는 여러 기기에 대응하기 위한 수많은 미디어 쿼리나 컨테이너 쿼리 중단점(breakpoint)을 수동으로 계산할 필요 없이, 시작점과 변화율만 지정하면 됩니다 [5].
|
||||
### 매 viewport units (2026)
|
||||
- `vw` / `vh` — viewport width / height.
|
||||
- `svw` / `svh` — small (mobile URL bar 의 visible).
|
||||
- `lvw` / `lvh` — large (URL bar 의 hidden).
|
||||
- `dvw` / `dvh` — dynamic (매 변동).
|
||||
- `cqw` / `cqh` — container query (component-scoped).
|
||||
|
||||
* **접근성([[Accessibility]]) 및 사용자 제어 고려사항:**
|
||||
유동적 타이포그래피를 적용할 때 주의할 점은, 뷰포트 단위(`vw` 등)에만 전적으로 의존할 경우 사용자가 텍스트를 돋보기 기능으로 확대/축소하거나 기본 폰트 크기 설정을 변경하는 것을 무력화할 수 있다는 것입니다 [9, 10]. 이는 보조 기술 없이 텍스트를 200%까지 확대할 수 있어야 한다는 WCAG 1.4.4 접근성 지침을 위반할 위험이 있습니다 [10]. 따라서 `clamp()` 함수의 최소값과 최대값에 `rem`이나 `em`과 같은 사용자 설정 기반의 상대 단위를 사용하여 글꼴 크기 확대를 보장해야 하며, 최대 폰트 크기가 최소 폰트 크기의 2.5배를 넘지 않도록 설정하는 것이 권장됩니다 [11, 12].
|
||||
### 매 Variable Font
|
||||
- 매 single font file, 매 weight/width/italic 의 axis 의 interpolation.
|
||||
- `font-variation-settings: "wght" 450, "wdth" 90`.
|
||||
- 매 file size 의 절약 (매 9 weight × 2 italic 의 18 file → 1 file).
|
||||
|
||||
## 🔗 지식 연결 (Graph)
|
||||
- **Related Topics:** 반응형 웹 디자인([[Responsive Web Design]]), CSS 미디어 쿼리([[CSS Media Queries]]), [[웹 접근성(Web Accessibility)]], CSS 컨테이너 쿼리([[Container Queries]])
|
||||
- **Projects/Contexts:** 모바일 우선주의 설계([[Mobile-First Design]]), [[디자인 시스템(Design[[ system]]s)]], 프론트엔드 유지보수성([[Frontend]] Maintainability)
|
||||
- **Contradictions/Notes:** 뷰포트에 전적으로 반응하는 글꼴 크기(예: `font-size: 100vw`)는 부드러운 전환을 제공하지만, 사용자의 텍스트 확대/축소 기능을 무력화하여 사용자 경험과 접근성에 악영향을 미칩니다. 이를 방지하기 위해서는 뷰포트 단위를 단독으로 쓰지 말고 `rem` 등의 기본 단위와 혼합하여(예: `calc(16px + 1vw)`) 사용자가 크기를 제어할 수 있는 여지를 남겨야 합니다 [10, 13, 14].
|
||||
### 매 Modular Scale
|
||||
- 매 1.125 (major second), 1.25 (major third), 1.333 (perfect fourth), 1.618 (golden).
|
||||
- 매 base 16px × ratio^n.
|
||||
|
||||
---
|
||||
*Last updated: 2026-04-26*
|
||||
## 💻 패턴
|
||||
|
||||
## 🤖 LLM 활용 힌트 (How to Use This Knowledge)
|
||||
### Pattern 1: Basic clamp() typography
|
||||
```css
|
||||
:root {
|
||||
--step--1: clamp(0.83rem, 0.78rem + 0.24vw, 0.94rem);
|
||||
--step-0: clamp(1.00rem, 0.93rem + 0.36vw, 1.13rem);
|
||||
--step-1: clamp(1.20rem, 1.10rem + 0.51vw, 1.41rem);
|
||||
--step-2: clamp(1.44rem, 1.30rem + 0.71vw, 1.76rem);
|
||||
--step-3: clamp(1.73rem, 1.54rem + 0.96vw, 2.20rem);
|
||||
--step-4: clamp(2.07rem, 1.81rem + 1.30vw, 2.75rem);
|
||||
--step-5: clamp(2.49rem, 2.13rem + 1.78vw, 3.43rem);
|
||||
}
|
||||
|
||||
**언제 이 지식을 쓰는가:**
|
||||
- *(TODO)*
|
||||
|
||||
**언제 쓰면 안 되는가:**
|
||||
- *(TODO)*
|
||||
|
||||
## 🧪 검증 상태 (Validation)
|
||||
|
||||
- **정보 상태:** needs_review
|
||||
- **출처 신뢰도:** A
|
||||
- **검토 이유:** *(P-Reinforce Phase 1 자동 정규화. 본문 검증 필요.)*
|
||||
|
||||
## 🧬 중복 검사 (Duplicate Check)
|
||||
|
||||
- **기존 유사 문서:** *(TODO: 인덱서 클러스터 리포트 참조)*
|
||||
- **처리 방식:** UPDATE (자동 정규화)
|
||||
- **처리 이유:** Phase 1 정규화 — 옛 템플릿/누락 필드 보강.
|
||||
|
||||
## ⚠️ 모순 및 업데이트 (Contradictions & Updates)
|
||||
|
||||
- **과거 데이터와의 충돌:** 없음
|
||||
- **정책 변화:** 없음
|
||||
|
||||
## 🕓 변경 이력 (Changelog)
|
||||
|
||||
| 날짜 | 변경 내용 | 처리 방식 | 신뢰도 |
|
||||
|------|-----------|-----------|--------|
|
||||
| 2026-05-08 | P-Reinforce Phase 1 정규화 (frontmatter + 헤더 표준화) | UPDATE | A |
|
||||
|
||||
## 💻 코드 패턴 (Code Patterns)
|
||||
|
||||
**패턴 1:** *(TODO: 이 프로젝트 컨벤션 반영한 구조 스켈레톤)*
|
||||
|
||||
```text
|
||||
# TODO
|
||||
h1 { font-size: var(--step-5); }
|
||||
h2 { font-size: var(--step-4); }
|
||||
p { font-size: var(--step-0); }
|
||||
```
|
||||
|
||||
## 🤔 의사결정 기준 (Decision Criteria)
|
||||
### Pattern 2: Utopia.fyi formula
|
||||
```css
|
||||
/* 매 320px → 1240px 의 16px → 20px scale */
|
||||
:root {
|
||||
--fluid-min: 16;
|
||||
--fluid-max: 20;
|
||||
--vw-min: 320;
|
||||
--vw-max: 1240;
|
||||
--slope: calc((var(--fluid-max) - var(--fluid-min)) / (var(--vw-max) - var(--vw-min)));
|
||||
--intercept: calc(var(--fluid-min) - var(--vw-min) * var(--slope));
|
||||
--fluid: clamp(
|
||||
var(--fluid-min) * 1px,
|
||||
var(--intercept) * 1px + 100vw * var(--slope),
|
||||
var(--fluid-max) * 1px
|
||||
);
|
||||
}
|
||||
|
||||
**선택 A를 써야 할 때:**
|
||||
- *(TODO)*
|
||||
body { font-size: var(--fluid); }
|
||||
```
|
||||
|
||||
**선택 B를 써야 할 때:**
|
||||
- *(TODO)*
|
||||
### Pattern 3: Container query units (2026)
|
||||
```css
|
||||
.card {
|
||||
container-type: inline-size;
|
||||
}
|
||||
|
||||
**기본값:**
|
||||
> *(TODO)*
|
||||
.card h2 {
|
||||
/* 매 parent container 의 width 의 fluid */
|
||||
font-size: clamp(1.2rem, 1rem + 2cqw, 2rem);
|
||||
}
|
||||
```
|
||||
|
||||
## ❌ 안티패턴 (Anti-Patterns)
|
||||
### Pattern 4: Variable Font weight axis
|
||||
```css
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url('/fonts/Inter-Variable.woff2') format('woff2-variations');
|
||||
font-weight: 100 900;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
- **[안티패턴]:** *(TODO: 무엇을 하면 안 되는가 + 이유 + 대신 무엇을)*
|
||||
h1 {
|
||||
font-family: 'Inter';
|
||||
font-variation-settings: "wght" 800, "wdth" 105;
|
||||
/* 매 viewport 의 변화 의 weight 의 fluid */
|
||||
font-weight: clamp(700, 700 + 1vw, 900);
|
||||
}
|
||||
```
|
||||
|
||||
### Pattern 5: Line-height fluid
|
||||
```css
|
||||
h1 {
|
||||
font-size: clamp(2rem, 1.5rem + 2.5vw, 3.5rem);
|
||||
line-height: clamp(1.1, 1.05 + 0.5vw, 1.3);
|
||||
letter-spacing: clamp(-0.02em, -0.04em + 0.1vw, 0em);
|
||||
}
|
||||
```
|
||||
|
||||
### Pattern 6: Modular scale generator
|
||||
```ts
|
||||
// build/scale.ts
|
||||
function fluidScale(step: number, baseMin = 16, baseMax = 20, ratio = 1.25): string {
|
||||
const min = baseMin * Math.pow(ratio, step);
|
||||
const max = baseMax * Math.pow(ratio, step);
|
||||
const slope = (max - min) / (1240 - 320);
|
||||
const intercept = min - 320 * slope;
|
||||
return `clamp(${min/16}rem, ${intercept/16}rem + ${slope*100}vw, ${max/16}rem)`;
|
||||
}
|
||||
|
||||
console.log(fluidScale(0)); // body
|
||||
console.log(fluidScale(3)); // h2
|
||||
```
|
||||
|
||||
### Pattern 7: prefers-contrast / dark mode 의 결합
|
||||
```css
|
||||
:root {
|
||||
--font-weight-body: 400;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--font-weight-body: 350; /* 매 dark mode 의 lighter weight */
|
||||
}
|
||||
}
|
||||
body {
|
||||
font-variation-settings: "wght" var(--font-weight-body);
|
||||
}
|
||||
```
|
||||
|
||||
### Pattern 8: Optical Sizing (variable font axis)
|
||||
```css
|
||||
h1 {
|
||||
font-size: clamp(2rem, 4vw, 4rem);
|
||||
/* 매 large size 의 자동 의 optical size 의 적용 */
|
||||
font-optical-sizing: auto;
|
||||
}
|
||||
```
|
||||
|
||||
## 매 결정 기준
|
||||
| 상황 | Approach |
|
||||
|---|---|
|
||||
| Body text | `clamp()` with viewport units |
|
||||
| Heading | Modular scale 의 step |
|
||||
| Component-scoped | `cqw` units |
|
||||
| Multi-axis font | Variable font + `font-variation-settings` |
|
||||
| Generated scale | Utopia.fyi or build script |
|
||||
| Dark mode | weight axis 의 reduce |
|
||||
| Print | static `pt` units |
|
||||
|
||||
**기본값**: `clamp(min-rem, base + slope*vw, max-rem)` 의 modular scale (1.25 ratio), variable font 의 사용.
|
||||
|
||||
## 🔗 Graph
|
||||
- 부모: [[CSS]] · [[Typography]]
|
||||
- 변형: [[Responsive Design]] · [[Container Queries]]
|
||||
- 응용: [[유지보수 가능하고 확장 가능한 CSS 아키텍처 설계]]
|
||||
- Adjacent: [[Variable Fonts]] · [[Modular Scale]] · [[Utopia.fyi]]
|
||||
|
||||
## 🤖 LLM 활용
|
||||
**언제**: clamp() 의 slope/intercept 의 계산, modular scale 의 step 의 권고, viewport unit 의 vs cqw 의 선택.
|
||||
**언제 X**: 매 type design 의 aesthetic 의 결정 — 매 typographer 의 영역.
|
||||
|
||||
## ❌ 안티패턴
|
||||
- **`vw` 만 의 사용**: 매 mobile 의 너무 작음, 매 desktop 의 너무 큼.
|
||||
- **Breakpoint 의 jump**: 매 fluid 의 본질 의 위반.
|
||||
- **`px` 의 hardcode**: 매 user font-size preference 의 위반.
|
||||
- **너무 많은 weight 의 ship**: 매 variable font 의 사용 의 X.
|
||||
- **`clamp()` 의 unit mix**: 매 `clamp(1rem, 16px, 2rem)` 의 inconsistent.
|
||||
|
||||
## 🧪 검증 / 중복
|
||||
- Verified (Mike Riethmuller "Precise Control Over Responsive Typography" 2017, Utopia.fyi, MDN clamp() / variable fonts 2026).
|
||||
- 신뢰도 A.
|
||||
|
||||
## 🕓 Changelog
|
||||
| 날짜 | 변경 |
|
||||
|---|---|
|
||||
| 2026-05-08 | Phase 1 |
|
||||
| 2026-05-10 | Manual cleanup — clamp() formula, Utopia, container query units, variable fonts |
|
||||
|
||||
Reference in New Issue
Block a user