브레이크포인트가 늘어나는 가장 흔한 이유는 글자 크기와 여백을 단계마다 다시 선언하기 때문입니다. 제목을 모바일에서 28px, 태블릿에서 36px, 데스크톱에서 48px 로 정해 두면 그 사이 폭에서는 언제나 조금 어긋나 있습니다. 어긋난 지점을 메우려 기준선을 하나 더 넣고, 그러면 다시 선언할 곳이 하나 더 늘어납니다.
단계 대신 구간을 선언합니다
clamp() 는 값 세 개를 받습니다 — 최솟값 · 선호값 · 최댓값입니다. 선호값이 최솟값보다 작아지면 최솟값을, 최댓값보다 커지면 최댓값을 쓰고, 그 사이에서는 선호값을 그대로 씁니다. 선호값에 화면 폭에 연동되는 단위를 넣으면 두 극단 사이가 자연스럽게 이어집니다.
h1 { font-size: clamp(1.75rem, 1.25rem + 2.5vw, 3rem); } 한 줄이면 아주 좁은 화면에서 1.75rem 아래로 내려가지 않고, 넓어질수록 커지다가 3rem 에서 멈춥니다. 이 한 줄이 대체하는 것은 미디어 질의 두세 개와 그 안의 재선언 전부입니다.
중간값에는 반드시 rem 을 섞습니다
선호값을 4vw 처럼 화면 폭 단위만으로 쓰면 안 됩니다. 순수한 뷰포트 단위는 사용자가 브라우저에서 글자를 키워도 전혀 반응하지 않습니다. 글자를 키워 읽는 사람에게 본문이 그대로 남는다는 뜻이고, 접근성 규격이 요구하는 텍스트 확대가 성립하지 않습니다.
그래서 선호값은 1.25rem + 2.5vw 처럼 rem 항과 vw 항을 더한 형태로 씁니다. rem 항이 사용자 설정을 따라가고, vw 항이 화면 폭을 따라갑니다. 두 축이 동시에 살아 있어야 유동 크기가 편의가 아니라 품질이 됩니다.
여백에도 같은 규칙을 씁니다
구역의 상하 여백은 좁은 화면에서 답답하지 않을 최솟값과 넓은 화면에서 과하지 않을 최댓값 사이에서 움직이면 충분합니다. section { padding-block: clamp(3rem, 8vw, 7rem); } 한 줄이 그 일을 합니다. 그리드 간격도 마찬가지입니다.
값을 토큰으로 모아 두면 한 벌로 관리됩니다.
어디에는 쓰지 않습니다
모든 값을 유동으로 만들 필요는 없습니다. 테두리 두께 · 모서리 반경 · 아이콘 크기처럼 작은 값은 유동으로 만들어도 차이가 보이지 않고 계산만 늘어납니다. 줄 간격은 단위 없는 숫자(line-height: 1.7)로 두어 글자 크기를 따라가게 하는 편이 낫습니다.
마지막으로 두 극단을 실제로 확인합니다. 최솟값이 320px 폭에서 정말 읽히는지, 최댓값이 아주 넓은 화면에서 과하지 않은지 — 이 두 지점만 보면 나머지 폭은 정의상 그 사이입니다.
화면 성능과 자산 무게를 함께 보는 관점은 성능 최적화 아카이브에 있고, 실제 사이트에 이 구조를 적용하는 절차는 작업 과정에 공개돼 있습니다.
다음 회차
크기가 유동적이 되어도 그리드 칸이 내용 때문에 부풀면 배치는 여전히 무너집니다. 다음 회차는 1fr 이 약속하지 않는 것에 관한 이야기입니다.