smith화면 폭이 달라질 때마다 글자 크기를 미디어 쿼리로 끊어 쓰다 보면 breakpoint 경계에서 글자가 갑자기 툭 커지는 느낌이 들어요. 결론부터 말하면 clamp(최소, 선호값, 최대) 한 줄이면 폭 구간 안에서 글자 크기가 직선으로 부드럽게 커지고, 구간 밖에서는 최소·최대값에 고정돼요. 선호값은 절편 + 기울기 × 100vw 공식으로 구해요.
예를 들어 폭 320px에서 16px, 폭 1280px에서 24px가 되길 원하면 코드는 clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)이에요. 이 글에서는 이 숫자가 어떻게 나오는지 직접 계산하고, 제목·본문·여백에 쓰는 값, 그리고 실수하기 쉬운 부분을 정리해요. 계산이 귀찮다면 CSS clamp() 계산기에 최소·최대 값만 넣으면 같은 식으로 코드를 만들어 줘요.
clamp()는 어떻게 값을 고를까
clamp(MIN, VAL, MAX)는 max(MIN, min(VAL, MAX))와 같은 뜻이에요. 먼저 선호값 VAL을 계산하고, MIN보다 작으면 MIN을, MAX보다 크면 MAX를 돌려줘요. 그래서 VAL이 vw처럼 화면 폭에 따라 변하는 값이면 폭이 좁을 때는 최소, 넓을 때는 최대, 그 사이에서는 직선으로 변하는 크기가 만들어져요. 문법은 MDN의 CSS clamp() 문서에 정리돼 있어요.
선호값 공식: 기울기와 절편
직선의 식은 크기 = 기울기 × 폭 + 절편이에요. 두 점 (최소폭, 최소크기)와 (최대폭, 최대크기)를 지나는 직선을 구하면 돼요.
- 기울기 s = (최대크기 − 최소크기) ÷ (최대폭 − 최소폭)
- 절편 b = 최소크기 − s × 최소폭
- CSS 선호값 = b + (s × 100)vw (vw는 화면 폭의 1%라서 100을 곱해요)
16px(320px)에서 24px(1280px)로 키우는 경우를 계산하면 이래요.
- s = (24 − 16) ÷ (1280 − 320) = 8 ÷ 960 = 0.008333
- b = 16 − 0.008333 × 320 = 16 − 2.6667 = 13.3333px, rem으로 바꾸면 13.3333 ÷ 16 = 0.8333rem
- 선호값 = 0.8333rem + 0.8333vw →
clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)
검산도 해 볼 수 있어요. 폭 800px이라면 13.3333 + 0.008333 × 800 = 20px로, 320px(16px)과 1280px(24px)의 정중앙이에요. 폭이 200px로 좁아지면 계산값은 14.99px지만 최소값 16px 아래로는 내려가지 않고, 폭이 2000px이면 계산값 30px 대신 24px로 멈춰요.
구간 안에서는 폭이 늘어난 만큼 일정한 비율로 커져요.
표로 보기
| 구분 | 글자 크기 |
|---|---|
| 320 | 24 |
| 480 | 26.7 |
| 768 | 31.5 |
| 1024 | 35.7 |
| 1280 | 40 |
용도별 예시 값
폭 320~1280px 구간에서 계산한 값이에요. 모두 위 공식으로 직접 구했어요.
| 용도 | 최소 → 최대 | 기울기 | 코드 |
|---|---|---|---|
| 본문 | 16 → 18px | 0.2083vw | clamp(1rem, 0.9583rem + 0.2083vw, 1.125rem) |
| 소제목(h3) | 18 → 24px | 0.625vw | clamp(1.125rem, 1.0rem + 0.625vw, 1.5rem) |
| 제목(h2) | 24 → 40px | 1.6667vw | clamp(1.5rem, 1.1667rem + 1.6667vw, 2.5rem) |
| 여백(padding) | 16 → 48px | 3.3333vw | clamp(1rem, 0.3333rem + 3.3333vw, 3rem) |
소제목 행을 검산하면 s = 6 ÷ 960 = 0.00625, b = 18 − 0.00625 × 320 = 16px = 1rem, 기울기는 0.625vw예요.
본문처럼 변화가 작은 요소는 굳이 clamp를 쓰지 않고 고정 값으로 두어도 읽기에 큰 차이가 없어요. 효과가 크게 느껴지는 건 제목과 여백이에요.
왜 vw만 쓰지 않고 rem을 더할까
font-size: 2vw처럼 쓰면 사용자가 브라우저 설정에서 기본 글꼴 크기를 키워도 글자가 그대로일 수 있어요. rem 항을 더한 선호값은 그 설정에 반응해서 접근성에 유리해요. 반대로 px로 출력하면 설정과 무관한 고정 값이 되니 글자 크기에는 rem을 권해요. px와 rem 변환은 px→rem 변환기로 확인할 수 있고, 두 단위의 차이는 px rem em 차이 글에 자세히 있어요.
clamp()를 쓸 때 흔한 실수
- 연산자 공백을 빼먹기 —
clamp(1rem, 0.8rem+0.8vw, 1.5rem)처럼+앞뒤 공백이 없으면 값이 무효 처리돼요.+와-는 앞뒤에 공백을 둬야 해요. - 최소·최대 순서 뒤집기 — 최소값이 최대값보다 크면 의도와 다른 값이 나와요. 큰 화면에서 오히려 작아지게 하려면 선호값의 기울기를 음수로 쓰고 최소·최대는 여전히 작은 값, 큰 값 순으로 둬요.
- 줄 길이를 안 보기 — 글자가 커져도 본문 영역이 같이 넓어지면 한 줄이 너무 길어져요.
max-width를 함께 정해요. - 글자색 대비 놓치기 — 글자 크기가 바뀌어도 배경과의 대비는 그대로 필요해요. 큰 글자와 작은 글자의 대비 기준이 다르니 색상 대비 검사기로 확인하세요.
- 고정 값과 섞어 쓰기 —
font-size는 clamp로 쓰면서line-height를 px 고정으로 두면 글자가 커질 때 줄 간격이 모자라요.line-height는 단위 없는 숫자(예: 1.5)로 쓰는 편이 안전해요.
미디어 쿼리와 어떻게 나눠 쓸까
clamp는 크기를 연속적으로 바꿀 때, 미디어 쿼리는 레이아웃 구조를 바꿀 때(2열→1열, 메뉴 접기 등) 알맞아요. 둘은 경쟁 관계가 아니라서 같이 써요. 예를 들어 제목 크기는 clamp로 부드럽게 키우고, 사이드바는 768px 미만에서 미디어 쿼리로 아래로 내리는 식이에요. 코드량 면에서도 breakpoint 3개에 글자 크기를 하나씩 쓰는 것보다 한 줄로 줄어들어 유지보수가 쉬워요.
실전 예시: 메인 큰 제목을 32px에서 64px로
폭 기준을 휴대폰 375px, 데스크톱 1440px로 잡고 큰 제목을 32px에서 64px로 키운다고 해 볼게요. 기울기는 (64 − 32) ÷ (1440 − 375) = 32 ÷ 1065 = 0.030047이고, 절편은 32 − 0.030047 × 375 = 20.7324px입니다. rem으로 바꾸면 20.7324 ÷ 16 = 1.2958rem, vw로는 0.030047 × 100 = 3.0047vw라서 코드는 clamp(2rem, 1.2958rem + 3.0047vw, 4rem)이에요. 태블릿 폭 768px에서는 20.7324 + 0.030047 × 768 = 43.81px가 돼요. 이렇게 변화 폭이 두 배인 제목은 줄바꿈이 크게 달라지니 375px와 768px, 1440px에서 모두 줄 수를 확인해 두세요. 줄 간격은 line-height: 1.2처럼 단위 없는 값으로 두면 글자가 커질수록 줄 간격도 같이 커져요.
자주 묻는 질문
clamp()는 모든 브라우저에서 되나요?
현재 주요 브라우저에서 널리 지원돼요. 아주 오래된 브라우저까지 고려한다면 clamp 선언 바로 위에 font-size: 1rem; 같은 고정 값을 먼저 쓰세요. 지원하는 브라우저에서는 뒤에 오는 선언이 덮어써요.
글자 크기 말고 width나 gap에도 쓸 수 있나요?
길이를 받는 속성이면 모두 가능해요. padding, margin, gap, width, border-radius에 같은 방식으로 쓸 수 있어요.
vw 대신 %를 쓰면 안 되나요?
font-size의 %는 부모 글자 크기 기준이라 화면 폭과 무관해요. 화면 폭에 반응시키려면 vw(또는 컨테이너 쿼리 단위)를 써야 해요.
최소 폭과 최대 폭은 어떻게 정하나요?
디자인 시안의 작은 화면 폭과 큰 화면 폭을 기준으로 해요. 휴대폰은 320~375px, 데스크톱은 1280~1440px을 많이 쓰고, 본문 영역의 max-width가 정해져 있다면 그 폭을 최대 폭으로 잡아도 돼요.
값이 마음에 안 들면 어떻게 고치나요?
최소·최대 크기와 폭 값을 바꿔 다시 계산하면 돼요. CSS clamp() 계산기에서는 폭별 실제 크기를 표로 보여 줘서 어느 폭에서 얼마가 되는지 바로 확인할 수 있어요.
정리
clamp() 선호값은 기울기와 절편 두 숫자만 구하면 돼요. 16→24px(320→1280px)는 clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)이고, 같은 방식으로 제목·여백 값도 만들 수 있어요. 글자는 rem 단위로, 줄 길이와 글자 대비는 따로 점검하는 것을 잊지 마세요. 다른 CSS 도구로는 그라데이션 생성기와 박스 섀도우 생성기도 함께 써 보세요.