반응형 작업을 하다 보면 clamp()를 만나게 된다. "최소, 기본, 최대를 정해준다"는 설명은 많은데, 정작 언제 최소가 되고 언제 최대가 되는지, 그리고 왜 이걸 쓰면 안 되는 경우가 있는지는 잘 안 나온다. 이 글에서 그 부분을 정리한다.
1. 먼저 vw부터
clamp를 이해하려면 vw를 먼저 알아야 한다.
1vw= 브라우저 창 너비의 1%
즉 창 크기에 따라 값이 변한다. 4vw를 예로 들면:
| 브라우저 창 너비 | 4vw는 실제로 몇 px? |
|---|---|
| 200px | 8px |
| 400px | 16px |
| 600px | 24px |
| 800px | 32px |
| 1000px | 40px |
창이 커질수록 4vw도 비례해서 커진다. 이게 핵심이다.
2. clamp()가 하는 일
font-size: clamp(16px, 4vw, 32px);읽는 법: "4vw를 쓰되, 16px보다 작아지지 말고 32px보다 커지지 마라"
- 기본값(4vw)이 최소보다 작으면 → 최소로 고정
- 기본값이 최대보다 크면 → 최대로 고정
- 그 사이면 → 기본값 그대로 (유동적)
대입해보면:
| 창 너비 | 4vw 원래값 | clamp 결과 |
|---|---|---|
| 200px | 8px | 16px (최소로 막음) |
| 400px | 16px | 16px |
| 600px | 24px | 24px |
| 800px | 32px | 32px |
| 1200px | 48px | 32px(최대로 막음) |
3. 임계점은 어떻게 찾나?
가장 헷갈리는 부분. 임계점 = 기본값(4vw)이 최소·최대와 같아지는 순간이다.
아래쪽 임계점 — "4vw가 최소(16px)와 같아지는 화면"
4vw = 16px → 화면 400px
→ 400px보다 작으면 16px로 고정
위쪽 임계점 — "4vw가 최대(32px)와 같아지는 화면"
4vw = 32px → 화면 800px
→ 800px보다 크면 32px로 고정
계산법
4vw는 "화면의 4%"니까:
화면 = 원하는 px ÷ 0.04
최소 16px → 16 ÷ 0.04 = 400px
최대 32px → 32 ÷ 0.04 = 800px
더 쉬운 직관
vw는 화면에 비례하니까, 최대 32px은 16px의 2배 → 화면도 2배(400→800px). 계산 없이 바로 나온다.
최종 그림
화면: 0 ─────── 400px ─────── 800px ─────── ∞
값: [ 16px ][ 4vw 유동 ][ 32px ]
↑ ↑
최소→유동 전환 유동→최대 전환4. clamp vs media query
clamp()만이 정답은 아니다. 반대편엔 계단식(브레이크포인트) 방식이 있다.
/* 계단식: 구간마다 고정, 경계에서 점프 */
:root { --fs-title: 24px; } /* 모바일 */
@media (min-width: 768px) { :root { --fs-title: 32px; } } /* 태블릿 */
@media (min-width: 1024px) { :root { --fs-title: 40px; } } /* 데스크톱 */
너비: 0 ──── 768px ──── 1024px ──── ∞
크기: [ 24px ][ 32px ][ 40px ]
(구간 내 고정, 경계에서 점프)clamp
- 크기 변화 유동적(부드러움)
- 디자인 매칭 어려움
- 예측성 낮음
- 적합한곳(ex. 폰트, 여백)
media query
- 구간 내 고정, 경계에서 점프(계단식)
- 디자인 매칭 쉬움
- 예측성 높음
- 적합한곳(ex. 레이아웃, 정확한 통제)
디자인 시안 기반 작업은 대부분 계단식이다. 디자이너가 "데스크톱 40px"을 주면 그대로 넣으면 되니까.
5. 장점과 단점
장점
- 코드 한 줄로 모든 화면 대응 (media query 반복 없음)
- 점프 없이 매끄러운 변화
- 브레이크포인트 사이 빈틈을 자연스럽게 채움
- min/max 안전장치 내장 (너무 작거나 넘치는 것 방지)
단점
- 디자인 시안과 정확히 안 맞음 — 중간값이 유동적이라 특정 지점 픽셀 매칭이 어려움
- 값 예측이 힘듦 — 몇 px인지 알려면 계산 필요
- 접근성 함정 ⚠️ — 순수 vw는 사용자가 브라우저 글꼴 크기를 키워도 안 커진다 (vw는 화면 너비에만 반응)
- 레이아웃엔 못 씀 — "1열 → 2열" 전환은 여전히 media query 필요
물론 접근성 함정의 경우 크기에 rem 을 섞는 방법 등이 있는데
결국 무슨 방법으로든 값 예측이 껄끄러워 지는 문제가 있다.
