데스크톱에서 보기 좋게 제목을 48px로 잡았더니 모바일에서는 화면의 절반을 차지한다. 그래서 미디어 쿼리를 열고 태블릿용 36px, 모바일용 28px를 따로 선언한다. 제목, 부제목, 본문, 캡션까지 이 작업을 반복하면 폰트 크기 선언만 수십 줄이 된다. 더 큰 문제는 그 사이다. 768px에서는 멀쩡하던 제목이 769px가 되는 순간 갑자기 커진다. 고객의 화면은 연속적인데 우리 사이트의 글자는 계단식으로 움직인다.
clamp() 한 줄이 미디어 쿼리 아홉 줄을 대신한다
CSS의 clamp(최솟값, 선호값, 최댓값) 함수는 글자 크기에 하한선과 상한선을 정해두고, 그 사이에서는 화면 폭에 비례해 부드럽게 변하게 만든다. 예를 들어 font-size: clamp(1.75rem, 4vw, 3rem)이라고 쓰면 좁은 화면에서는 28px 아래로 내려가지 않고, 넓은 화면에서는 48px를 넘지 않으며, 그 사이에서는 화면 폭의 4%를 따라 자연스럽게 흐른다. 브레이크포인트가 필요 없으니 769px에서 글자가 튀는 일도 없다.
글자만이 아니다 — 여백과 간격도 흐른다
clamp()는 font-size 전용 함수가 아니다. 섹션 사이의 여백, 카드의 안쪽 패딩, 제목과 본문 사이 간격에도 그대로 쓸 수 있다. 데스크톱에서는 넉넉하게 120px, 모바일에서는 답답하지 않게 48px — 이런 요구사항이 padding: clamp(3rem, 8vw, 7.5rem) 한 줄로 끝난다. 타이포그래피와 여백이 같은 원리로 움직이면 사이트 전체의 리듬이 화면 크기와 상관없이 일정하게 유지된다.
실무에서 챙겨야 할 두 가지
- vw만 단독으로 쓰지 않는다. 선호값을 4vw처럼 뷰포트 단위로만 쓰면 브라우저의 글자 확대 기능이 무시되어 접근성 문제가 생긴다. calc(1rem + 2vw)처럼 rem을 섞어주면 확대 설정이 반영된다.
- 최솟값과 최댓값의 비율을 검증한다. 모바일 제목과 데스크톱 제목의 비율이 너무 크면 중간 구간에서 글자가 과하게 빠르게 변한다. 1.5~1.8배 안쪽이 안정적이다.
지원 걱정은 접어둬도 된다
clamp()는 2020년부터 모든 주요 브라우저가 지원해 왔다. 새 기능이라 망설일 단계는 이미 지났고, 오히려 지금도 미디어 쿼리로 폰트 크기를 계단식으로 관리하고 있다면 코드만 길어지고 있는 셈이다. 한글 사이트라면 효과가 더 크다. 한글은 영문보다 글자 폭이 넓어 제목이 어색하게 줄바꿈되기 쉬운데, 유동 타이포그래피는 이 문제를 구조적으로 줄여준다.
마치며
반응형 디자인의 목표는 모든 화면에서 자연스럽게 읽히는 사이트다. 그 목표를 브레이크포인트 수십 개로 달성하던 시대에서, 함수 한 줄로 달성하는 시대로 넘어가고 있다. CYAN은 새 프로젝트의 타이포그래피와 여백 시스템을 clamp() 기반 유동 스케일로 설계해 어떤 기기에서도 일정한 인상을 유지하도록 만들고 있다. 사이트의 글자가 화면마다 들쭉날쭉하게 느껴진다면, 점검해 볼 때가 된 것이다.