Files

T

koriweb 5ba5a55c78 feat: Wiki 지식 자산 업데이트 - UX Scenarios, Frontend, Game Design, Topics 추가 [2026-05-08]

2026-05-08 19:52:07 +09:00

5.8 KiB

Raw Blame History

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, tags, raw_sources, last_reinforced, github_commit, inferred_by, tech_stack

title

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

📌 한 줄 통찰 (The Karpathy Summary)

유동적 타이포그래피(Fluid Typography)는 고정된 중단점(breakpoint)에서 글꼴 크기가 갑자기 변하는 대신, 브라우저의 뷰포트나 컨테이너의 크기에 따라 글꼴 크기가 부드럽고 연속적으로 조절되는 반응형 웹 디자인 기법입니다 [1-3]. 주로 CSS의 clamp() 함수와 뷰포트 상대 단위(vw 등)를 활용하여 모바일에서 데스크톱까지 모든 화면에서 최적의 가독성을 제공하며, 복잡한 미디어 쿼리 작성의 필요성을 줄여줍니다 [4, 5].

📖 구조화된 지식 (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].
상대 단위의 활용: 고정 단위(픽셀) 대신 vw, vi(뷰포트 단위)나 cqw, cqi(컨테이너 단위)와 같은 단위를 기준 값(예: 1rem)에 더하여 사용합니다 [1]. 이를 통해 개발자는 여러 기기에 대응하기 위한 수많은 미디어 쿼리나 컨테이너 쿼리 중단점(breakpoint)을 수동으로 계산할 필요 없이, 시작점과 변화율만 지정하면 됩니다 [5].
접근성(Accessibility) 및 사용자 제어 고려사항: 유동적 타이포그래피를 적용할 때 주의할 점은, 뷰포트 단위(vw 등)에만 전적으로 의존할 경우 사용자가 텍스트를 돋보기 기능으로 확대/축소하거나 기본 폰트 크기 설정을 변경하는 것을 무력화할 수 있다는 것입니다 [9, 10]. 이는 보조 기술 없이 텍스트를 200%까지 확대할 수 있어야 한다는 WCAG 1.4.4 접근성 지침을 위반할 위험이 있습니다 [10]. 따라서 clamp() 함수의 최소값과 최대값에 rem이나 em과 같은 사용자 설정 기반의 상대 단위를 사용하여 글꼴 크기 확대를 보장해야 하며, 최대 폰트 크기가 최소 폰트 크기의 2.5배를 넘지 않도록 설정하는 것이 권장됩니다 [11, 12].

🔗 지식 연결 (Graph)

Related Topics: 반응형 웹 디자인(Responsive Web Design), CSS 미디어 쿼리(CSS Media Queries), 웹 접근성(Web Accessibility), CSS 컨테이너 쿼리(Container Queries)
Projects/Contexts: 모바일 우선주의 설계(Mobile-First Design), 디자인 시스템(Design[[ systems)]], 프론트엔드 유지보수성(Frontend Maintainability)
Contradictions/Notes: 뷰포트에 전적으로 반응하는 글꼴 크기(예: font-size: 100vw)는 부드러운 전환을 제공하지만, 사용자의 텍스트 확대/축소 기능을 무력화하여 사용자 경험과 접근성에 악영향을 미칩니다. 이를 방지하기 위해서는 뷰포트 단위를 단독으로 쓰지 말고 rem 등의 기본 단위와 혼합하여(예: calc(16px + 1vw)) 사용자가 크기를 제어할 수 있는 여지를 남겨야 합니다 [10, 13, 14].

Last updated: 2026-04-26

🤖 LLM 활용 힌트 (How to Use This Knowledge)

언제 이 지식을 쓰는가:

(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: 이 프로젝트 컨벤션 반영한 구조 스켈레톤)

# TODO

🤔 의사결정 기준 (Decision Criteria)

선택 A를 써야 할 때:

(TODO)

선택 B를 써야 할 때:

(TODO)

기본값:

(TODO)

❌ 안티패턴 (Anti-Patterns)

[안티패턴]: (TODO: 무엇을 하면 안 되는가 + 이유 + 대신 무엇을)

5.8 KiB Raw Blame History