웹 개발CSS

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

세눌라 컴퍼니 · 2026-09-18 · 5분 읽기

미디어쿼리 방식이 불편한 이유

반응형 웹에서 화면 크기에 따라 글자 크기를 바꾸는 일은 빈번합니다. 미디어쿼리로 처리하면 분기점마다 font-size를 따로 선언해야 합니다.

h1 { font-size: 1.25rem; }
@media (min-width: 768px)  { h1 { font-size: 1.75rem; } }
@media (min-width: 1200px) { h1 { font-size: 2.5rem; } }

이 방식에는 두 가지 불편이 있습니다. 분기점 사이 구간에서 글자 크기가 고정되어 화면이 조금씩 넓어져도 크기가 따라가지 않고, 분기점을 넘는 순간 크기가 계단처럼 뜁니다. 디바이스 해상도가 다양해질수록 관리할 미디어쿼리도 늘어나지요.

CSS clamp() 함수는 최솟값, 선호값, 최댓값 세 개를 받습니다.

font-size: clamp(최솟값, 선호값, 최댓값);

선호값이 최솟값 아래로 내려가면 최솟값이 적용되고, 최댓값 위로 올라가면 최댓값에서 멈춥니다. 선호값 자리에 뷰포트 너비에 반응하는 수식을 넣으면 글자 크기가 화면에 따라 부드럽게 변합니다.

수식을 직접 계산하기 번거롭다면 CSS clamp() 계산기에 최소·최대 뷰포트와 글자 크기를 넣으면 clamp() 코드가 바로 나오고 복사 버튼으로 가져갈 수 있습니다.

선호값을 4vw처럼 뷰포트 단위만으로 지정하면 문제가 생깁니다. vw는 브라우저 창 크기에만 반응하기 때문에 사용자가 브라우저 설정에서 글자 크기를 키워도 텍스트 크기가 전혀 바뀌지 않습니다.

시각 약자가 기본 글꼴 크기를 200%로 키워 놓아도 vw 기반 텍스트는 그대로입니다. WCAG 2.1 성공 기준 1.4.4(텍스트 크기 조절)를 충족하려면 사용자 설정에 반응하는 rem과 화면 너비에 반응하는 vw를 조합해야 합니다.

"최소 화면에서 최소 크기, 최대 화면에서 최대 크기"가 되는 직선 하나를 긋는 원리입니다. 1rem = 16px 기준으로 아래 조건을 가정해 보겠습니다.

항목	최소	최대
뷰포트 너비	360px	1,200px
글자 크기	20px (1.25rem)	40px (2.5rem)

기울기는 화면이 1px 넓어질 때 글자가 몇 px 커지는가입니다.

절편은 직선 방정식에서 y절편을 구하는 방식과 같습니다.

최종 코드는 이렇게 됩니다.

font-size: clamp(1.25rem, 0.714rem + 2.381vw, 2.5rem);

절편을 rem으로 두는 것이 핵심입니다. 사용자가 브라우저 글꼴 크기를 키우면 rem이 함께 커져 선호값 전체가 올라가고, 최솟값·최댓값도 rem이니 전부 맞물려 움직입니다.

제목뿐 아니라 본문, 소제목 등 여러 요소에 clamp()를 적용하면 타이포그래피 전체가 자연스럽게 반응합니다. 아래 표는 같은 원리로 산출한 값입니다.

요소	최소(rem)	최대(rem)	clamp() 코드
h1 제목	1.25	2.5	`clamp(1.25rem, 0.714rem + 2.381vw, 2.5rem)`
h2 소제목	1.125	1.75	`clamp(1.125rem, 0.857rem + 1.19vw, 1.75rem)`
본문 p	1.0	1.125	`clamp(1rem, 0.946rem + 0.238vw, 1.125rem)`

요소가 늘어날수록 수식을 매번 구하기 번거로우니 CSS clamp() 계산기에 조건만 바꿔 넣어 가며 코드를 뽑으면 빠릅니다.

clamp()를 지원하지 않는 브라우저가 있나요?

IE 11은 미지원이고, Chrome 79+, Firefox 75+, Safari 13.1+, Edge 79+ 이상이면 동작합니다. IE 대응이 필요하면 clamp() 위에 고정 font-size 한 줄을 폴백으로 추가하세요.

1rem = 16px이 아닌 프로젝트에서도 되나요?

html에 font-size: 62.5%를 선언해 1rem = 10px로 쓰는 프로젝트라면 절편 계산 시 나누는 값을 16 대신 10으로 바꾸면 됩니다. CSS clamp() 계산기에서 기준값을 바꿔 입력하면 자동 반영됩니다.

padding이나 margin에도 쓸 수 있나요?

네. 길이 값을 받는 CSS 속성이면 어디든 clamp()가 가능합니다. 여백, gap, border-radius 등에 같은 원리로 적용할 수 있습니다.