웹 개발CSS

반응형 글자 크기, 미디어쿼리 대신 clamp() 한 줄로 끝내기

2026-09-18 · 2분 읽기

미디어쿼리 기반 폰트 크기 조절의 한계

반응형 웹을 구축할 때 뷰포트 너비에 맞춰 제목이나 본문의 글자 크기를 변경하는 작업은 필수적입니다. 과거에는 미디어쿼리를 사용하여 특정 해상도 분기점마다 폰트 크기 속성을 재정의했습니다.

이 방식은 분기점과 분기점 사이 구간에서 글자 크기가 고정되어 화면 크기에 비례하는 유려한 레이아웃을 만들기 어렵습니다. 브레이크포인트를 지날 때마다 글자 크기가 계단식으로 급격하게 튀는 시각적 단절이 발생하며, 디바이스 해상도가 파편화된 환경에서 수많은 미디어쿼리를 유지보수해야 하는 부담이 생깁니다.

clamp() 함수의 문법과 유동 타이포그래피 원리

CSS clamp() 함수는 상한선과 하한선 사이에서 유동적으로 변하는 값을 단 한 줄의 선언으로 정의합니다. 문법은 최솟값, 선호값, 최댓값 순서로 작성합니다.

선호값이 최솟값보다 작아지면 최솟값이 적용되고, 최댓값보다 커지면 최댓값에서 고정됩니다. 선호값 자리에 뷰포트 너비에 반응하는 수식을 배치하면 화면 크기에 따라 글자 크기가 선형으로 부드럽게 늘어나거나 줄어듭니다.

복잡한 수식을 직접 작성하기 번거로울 때는 CSS clamp() 계산기 를 활용하여 최소 및 최대 뷰포트와 글자 크기만 입력하면 필요한 코드를 손쉽게 얻을 수 있습니다.

vw 단위 단독 사용 시 발생하는 접근성 결함

선호값으로 단순히 4vw와 같은 뷰포트 단위를 단독으로 사용하면 텍스트 크기 조절과 관련된 접근성 결함이 발생합니다.

뷰포트 단위는 오직 브라우저 창의 가로세로 픽셀 크기에만 의존합니다. 시각 약자나 고해상도 모니터 사용자가 브라우저 설정에서 글자 크기를 확대하거나 시스템 기본 글꼴 크기를 키워도 vw 기반 텍스트는 크기가 전혀 변하지 않습니다.

따라서 사용자의 폰트 크기 설정을 반영하는 상대 단위인 rem과 화면 너비에 반응하는 vw를 결합한 복합 수식을 선호값으로 사용해야 합니다.

직선 방정식으로 기울기와 절편 구하기

최소 화면 폭에서 최소 글자 크기, 최대 화면 폭에서 최대 글자 크기가 되는 직선 하나를 그리면 됩니다. 1rem이 16px인 환경을 기준으로 최소 화면 360px에서 글자 20px, 최대 화면 1200px에서 글자 40px이 되는 상황을 가정해 보겠습니다.

기울기는 화면이 1px 넓어질 때 글자가 몇 px 커지는가를 의미합니다. 값의 차이를 나누어 계산하면 약 0.02381이 나오며, vw는 화면 폭의 100분의 1이므로 100을 곱해 2.381vw가 됩니다.

절편은 직선의 방정식 원리를 활용하여 구합니다. 계산된 절편 11.43px을 rem 단위로 바꾸면 0.714rem이 되며, 최종적으로 절편은 rem 단위로, 기울기는 vw 단위로 더하여 적용합니다.

절편을 rem으로 두는 것이 핵심입니다. 사용자가 브라우저 글자 크기를 키우면 rem이 함께 커져 선호값 전체가 올라가고, 최솟값과 최댓값 역시 rem 단위이므로 유기적으로 움직입니다.

이러한 수식 도출 과정은 CSS clamp() 계산기 에 해당 조건들을 입력하면 동일한 원리로 코드가 생성되므로, 직접 계산한 값과 비교하며 원리를 이해하는 데 도움을 받을 수 있습니다.