CSS clamp() 생성기

CSS clamp() 생성기란?

CSS clamp() 생성기는 프런트엔드 개발자와 디자이너를 위한 무료 유동 타이포그래피 계산기입니다. 최소 폰트 크기, 최대 폰트 크기, 최소 뷰포트 너비, 최대 뷰포트 너비를 넣으면 preferred 값이 rem 오프셋과 vw 기울기를 조합한 clamp(최소, preferred, 최대) 선언을 돌려줍니다. 덕분에 글자가 화면에 따라 선형으로 커지면서도 상·하한을 절대 벗어나지 않습니다. 이로써 font-size 미디어 쿼리를 겹겹이 쌓을 필요가 없어 제목과 본문이 모든 기기에서 반응형으로 유지됩니다. 미리보기 크기를 골라 실제 렌더링을 확인하고, 출력 단위를 rem과 px 사이에서 전환한 뒤, 그 한 줄을 스타일시트에 바로 복사하세요.

CSS clamp() 생성기 사용법

1. 최소 폰트 크기를 입력합니다 — 가장 작은 화면에서 글자가 가질 크기입니다.
2. 최대 폰트 크기를 입력합니다 — 가장 큰 화면에서 글자가 도달할 크기입니다.
3. 크기가 그 사이를 스케일할 최소·최대 뷰포트 너비를 설정합니다.
4. 원한다면 설정을 열어 출력 단위를 바꿉니다(rem은 접근성에 유리하고 px도 선택할 수 있습니다).
5. 미리보기 크기를 골라 해당 뷰포트에서 예시 글자를 렌더링하고 실시간 clamp() 값을 확인합니다.
6. 생성된 clamp() 표현식을 복사해 CSS font-size에 붙여넣습니다.

예시

최소 폰트 16, 최대 폰트 20, 최소 vw 320, 최대 vw 1240

font-size: clamp(1rem, 0.913rem + 0.435vw, 1.25rem);

최소 폰트 32, 최대 폰트 64, 최소 vw 320, 최대 vw 1536

font-size: clamp(2rem, 1.474rem + 2.632vw, 4rem);

최소 폰트 12, 최대 폰트 14, 최소 vw 480, 최대 vw 1280

font-size: clamp(0.75rem, 0.675rem + 0.25vw, 0.875rem);

자주 묻는 질문

clamp() 값은 미디어 쿼리 없이 어떻게 스케일되나요?

clamp(최소, preferred, 최대)는 하한, preferred(유동) 값, 상한을 받습니다. preferred 값은 rem + vw 형태의 직선으로, 최소 뷰포트에서는 폰트가 최소값과 같고 최대 뷰포트에서는 최대값과 같도록 계산됩니다. 그 두 너비 사이에서는 브라우저가 자동으로 보간하고, 범위를 벗어나면 clamp()가 크기를 가장 가까운 경계에 고정합니다 — 모두 선언 한 줄로 끝납니다.

출력이 px가 아니라 rem인 이유는 무엇인가요?

고정 부분에 rem을 쓰면 사용자의 브라우저 폰트 크기 설정을 존중해 접근성에 더 좋습니다. 뷰포트에 비례하는 기울기는 vw로 표현합니다. 프로젝트에 절대 단위가 필요하면 설정에서 px로 바꿀 수 있지만, 권장 기본값은 rem입니다.

어떤 뷰포트 범위를 써야 하나요?

흔히 최소값은 지원하는 가장 작은 너비(보통 320px나 360px), 최대값은 가장 넓은 콘텐츠 컨테이너(예: 1240px~1536px)로 둡니다. 폰트는 그 범위 안에서만 완전히 유동적이며, 아래로 내려가면 최소값에, 위로 올라가면 최대값에 머뭅니다.

font-size 말고 다른 CSS 길이에도 쓸 수 있나요?

네. 생성된 clamp() 값은 그저 하나의 길이이므로 padding, margin, gap 등 길이를 받는 어떤 속성에도 붙여넣을 수 있습니다. 라벨이 font-size를 언급하는 건 유동 타이포그래피가 가장 흔한 용도이기 때문이며, 간격에 써도 계산은 동일합니다.

제 데이터가 어딘가로 전송되나요?

아니요. 계산은 전부 브라우저 안에서 JavaScript로 실행됩니다 — 폰트 크기와 뷰포트 너비가 서버로 업로드되지 않으므로 비공개로 작동하며, 페이지를 한 번 로드한 뒤에는 오프라인에서도 사용할 수 있습니다.