2nd/10_Wiki/Topics_Dev/유동적 타이포그래피 (Fluid Typography).md

# [[유동적 타이포그래피 (Fluid Typography)|유동적 타이포그래피 (Fluid Typography]]

## 📌 Brief Summary
유동적 타이포그래피(Fluid Typography)는 미디어 쿼리나 중단점(breakpoint)에 따라 텍스트 크기가 갑자기 변하는 대신, 뷰포트(viewport)나 부모 컨테이너의 너비에 비례하여 폰트 크기가 매끄럽고 일정하게 크기가 조정되는 기법입니다 [1]. 이 기법은 모바일에서 제목이 과도하게 커지거나 데스크톱에서 본문 텍스트가 너무 작아지는 문제를 해결해 주며, 모든 화면 크기에서 편안한 가독성을 제공합니다 [2, 3]. 최신 반응형 디자인에서는 주로 CSS의 `clamp()` 함수와 상대 단위(rem, em, vw 등)를 결합하여 구현되며, 복잡한 미디어 쿼리의 필요성을 줄여 유지보수성을 높여줍니다 [2, 4, 5].

## 📖 Core Content

*   **동작 원리 및 `clamp()` 함수의 활용**
    *   유동적 타이포그래피는 주로 `vw`(뷰포트 너비), `vi`(뷰포트 인라인 크기), 또는 컨테이너 너비인 `cqi` 단위를 활용하여 구현됩니다 [6, 7]. 이를 통해 수많은 중단점을 수동으로 계산할 필요 없이 모든 크기에서 보간(interpolate)된 폰트 크기를 제공할 수 있습니다 [8].
    *   크기를 제어하기 위해 CSS `clamp(최솟값, 선호값, 최댓값)` 함수가 널리 사용됩니다 [3, 5, 9]. 예를 들어 `font-size: clamp(1.5rem, 2vw + 1rem, 3rem);`으로 설정하면, 브라우저가 화면의 가용 공간에 따라 지정된 최솟값과 최댓값 사이에서 폰트 크기를 유동적으로 조정합니다 [4].

*   **사용자 접근성([[Accessibility|Accessibility]])과 단위 선택**
    *   순수하게 뷰포트 단위(`vw` 등)만 사용하여 폰트 크기를 고정하면, 사용자의 브라우저 확대/축소(Zoom) 기능이나 기본 폰트 크기 설정이 무력화되는 접근성 문제가 발생합니다 [10, 11].
    *   이를 해결하기 위해 `px` 대신 `em`이나 `rem` 같은 상대 단위를 사용하여 최솟값과 최댓값을 정의해야 합니다 [5, 12]. 이는 사용자의 기본 폰트 설정을 존중하면서도 유동적인 크기 조절을 가능하게 합니다 [5].
    *   웹 콘텐츠 접근성 지침(WCAG 1.4.4)에 따라 텍스트가 200%까지 확대될 수 있도록 보장해야 하며, 이를 위해 최대 폰트 크기가 최소 폰트 크기의 2.5배를 초과하지 않도록 설정하는 "2.5x 규칙(2.5x Rule)"을 따르는 것이 업계의 모범 사례입니다 [11, 13, 14].

*   **CSS 아키텍처 및 유지보수 측면의 이점**
    *   유동적 타이포그래피는 픽셀 기반의 고정된 너비 리스트를 관리하고 중단점마다 폰트 크기를 재정의해야 했던 기존의 방식과 비교할 때 작성해야 할 CSS 코드 양을 크게 줄여줍니다 [4].
    *   최신 프론트엔드 환경에서는 화면 전체 뷰포트 기준의 반응형 설계에서 컴포넌트 중심의 설계로 사고가 전환됨에 따라, 컨테이너 쿼리([[Container Queries|Container Queries]])와 유동적 타이포그래피를 결합하여 부모 컨테이너의 크기에 맞게 텍스트가 유연하게 적응하도록 만듭니다 [7, 15].

## 🔗 Knowledge Connections
- **Related Topics:** [[반응형 웹 디자인 (Responsive Web Design)|반응형 웹 디자인 (Responsive Web Design]], [[컨테이너 쿼리 (Container Queries)|컨테이너 쿼리 (Container Queries]], 웹 접근성 (WCAG 1.4.4), CSS 함수 (clamp, calc)
- **Projects/Contexts:** 현대적 반응형 웹 디자인 및 컴포넌트 중심 CSS 아키텍처 환경
- **Contradictions/Notes:** 뷰포트 단위를 사용하여 타이포그래피를 반응형으로 만드는 것은 시각적으로 부드러운 전환을 제공하지만, `100vw`와 같이 뷰포트 단위만 단독으로 사용할 경우 브라우저 줌이나 사용자의 기본 폰트 크기 설정을 무력화시켜 접근성에 심각한 악영향을 미치므로 반드시 `calc()`나 `clamp()`와 함께 상대 단위(`rem`/`em`)를 조합하여 사용해야 한다고 여러 소스에서 강하게 경고하고 있습니다 [10-12, 16].

---
*Last updated: 2026-04-26*