CSS clamp() 함수란?
CSS clamp() 함수는 세 개의 값(최솟값, 선호값, 최댓값)을 받아 뷰포트 너비에 따라 부드럽게 변하는 fluid typography를 구현합니다. 한 줄의 CSS로 미디어 쿼리 없이 반응형 폰트, 패딩, 마진을 만들 수 있어 모던 웹 개발의 표준으로 자리 잡았습니다.
계산 공식 (선형 보간법)
본 계산기는 두 점 (minVw, minFont)과 (maxVw, maxFont)을 잇는 직선의 방정식 y = ax + b를 이용해 vw 단위 기울기와 rem 단위 절편을 도출합니다.
- 기울기(slope) = (maxFont - minFont) / (maxVw - minVw)
- 절편(yIntercept) = minFont - slope × minVw
- preferred = (yIntercept / 16)rem + (slope × 100)vw
- 최종: clamp(min_rem, preferred, max_rem)
이 공식은 vw 단위가 뷰포트의 1%에 해당한다는 점을 이용해 직선 방정식의 a 계수를 vw로, b 절편을 rem으로 분리한 표준 방식입니다.
활용 예시
- 본문 폰트: 320px에서 16px, 1280px에서 18px → 모바일은 작게, 데스크탑은 크게
- 제목 폰트: 320px에서 24px, 1280px에서 48px → 화면이 커질수록 임팩트 있게
- 섹션 패딩: 320px에서 16px, 1280px에서 64px → 여백도 fluid 하게
- 컨테이너 너비: clamp(320px, 90vw, 1280px) 같은 패턴도 가능
접근성과 사용자 설정 존중
rem 단위로 출력하는 이유는 사용자가 브라우저 설정에서 기본 폰트 크기를 16px 외 다른 값으로 바꿔도 비율에 맞게 확대·축소되도록 하기 위함입니다. WCAG 1.4.4 "텍스트 크기 조정" 기준을 만족하려면 px 절대값보다 rem 상대값이 권장됩니다.
헤딩 스케일 일괄 생성
"헤딩 스케일" 옵션을 체크하면 입력한 최소·최대 폰트를 본문(p) 기준으로 두고 1.25(Major Third) 비율을 적용해 h6 → h1 순으로 6단계 clamp() 코드를 자동 생성합니다. 디자인 시스템 구축이나 typography 토큰 정의 시 시간을 크게 줄일 수 있습니다.
브라우저 지원
clamp()는 Chrome 79+, Firefox 75+, Safari 13.1+, Edge 79+에서 지원됩니다. IE11이나 구형 모바일을 지원해야 한다면 폴백으로 font-size: 16px 같은 절대값을 먼저 선언하고 그 아래에 clamp() 줄을 추가하세요.
자주 묻는 질문 (FAQ)
Q. px과 rem 중 어떤 단위로 입력해야 하나요?
A. 디자인 시안이 px 기준이라면 px로 입력하고, 디자인 시스템에 rem 토큰이 있다면 rem으로 입력하세요. 본 계산기는 결과를 항상 rem(+vw)으로 출력해 접근성을 보장합니다.
Q. vw 단위로만 쓰면 안 되나요?
A. vw만 쓰면 모바일에서 너무 작아지거나 데스크탑에서 너무 커질 수 있습니다. clamp()는 최소·최대값으로 가독성을 보장하면서 그 사이만 fluid하게 보간합니다.
Q. 음수 기울기(maxFont < minFont)도 동작하나요?
A. 동작합니다. 화면이 커질수록 폰트가 작아지는 역방향 fluid도 가능하지만 일반적인 디자인 패턴은 아닙니다.