CSS clamp() 유동 폰트 생성기, 미디어 쿼리 없이 반응형 글자
반응형 웹을 만들 때 가장 번거로운 작업 중 하나가 화면 크기에 따른 글자 크기 조절입니다. 예전에는 모바일·태블릿·데스크톱마다 미디어 쿼리(@media)를 여러 개 작성해 font-size를 단계별로 바꿔야 했고, 그 사이 구간에서는 글자 크기가 계단처럼 뚝뚝 끊겨 보였습니다. CSS의 clamp() 함수를 사용하면 이 문제를 한 줄로 깔끔하게 해결할 수 있습니다. 이 css clamp 생성 도구는 최소·최대 폰트와 뷰포트 값을 입력받아, 화면 너비에 따라 글자가 부드럽게 커지고 작아지는 fluid typography 코드를 즉시 만들어 줍니다.
clamp() 함수의 동작 원리
clamp(MIN, PREFERRED, MAX)는 세 개의 인수를 받습니다. 가운데 선호값(PREFERRED)이 실제로 계산되며, 그 값이 MIN보다 작으면 MIN을, MAX보다 크면 MAX를 사용합니다. 즉 결과는 항상 최소와 최대 사이에 머뭅니다. 여기서 선호값에 화면 너비 비례 단위인 vw(viewport width의 1%)를 섞으면 글자가 화면 크기를 따라 연속적으로 변합니다. 핵심은 두 기준점(작은 화면, 큰 화면)을 잇는 1차 직선을 구하는 것입니다. 이 도구는 그 기울기(vw 계수)와 절편(rem 값)을 자동으로 계산해 줍니다.
반응형 폰트 css 계산 공식
입력한 두 지점, 즉 (최소 뷰포트, 최소 폰트)와 (최대 뷰포트, 최대 폰트)를 좌표로 보면 둘을 잇는 직선의 기울기는 (최대폰트 − 최소폰트) ÷ (최대뷰포트 − 최소뷰포트)입니다. 이 기울기에 100을 곱하면 vw 계수가 되고, 직선이 화면 너비 0에서 갖는 값을 rem으로 환산하면 절편이 됩니다. 최종 코드는 다음 형태가 됩니다.
- font-size: clamp(최소rem, 절편rem + 기울기vw, 최대rem);
- 최소·최대 폰트는 입력값을 1rem=16px(또는 지정한 루트 크기) 기준으로 rem 변환합니다.
- 두 기준 뷰포트에서는 입력한 크기와 정확히 일치하고, 그 사이는 직선으로 보간됩니다.
- 기준 너비 바깥(더 작거나 더 큰 화면)에서는 최소·최대값으로 고정됩니다.
px 대신 rem을 권장하는 이유
fluid typography에서는 절대 단위인 px보다 상대 단위인 rem을 권장합니다. 사용자가 브라우저 설정에서 기본 글자 크기를 키우면 rem 기반 폰트는 함께 확대되어 시력이 약한 사용자에게도 친화적이지만, px로 고정하면 그 배율이 무시되기 때문입니다. 이 도구는 입력은 익숙한 px로 받되 출력은 접근성에 유리한 rem clamp() 코드로 변환합니다. 루트 폰트 크기를 16px이 아닌 다른 값으로 설정했다면 입력란에서 그 값을 바꿔 정확히 계산할 수 있습니다.
이 도구 활용 팁
- 제목(h1), 본문(p), 작은 캡션 등 요소별로 따로 생성해 일관된 타이포 스케일을 만드세요.
- 최소 뷰포트는 보통 360~375px(모바일), 최대 뷰포트는 1200~1440px(데스크톱)을 많이 씁니다.
- 생성된 코드는 복사 버튼으로 바로 복사해 CSS에 붙여 넣으면 됩니다.
- 미리보기 영역에서 창 크기를 줄이거나 키우며 실제 변화를 눈으로 확인할 수 있습니다.
이 결과는 표준 선형 보간식에 따른 계산값이며 1rem=16px(또는 입력한 루트 크기)를 가정합니다. 실제 디자인에서는 줄간격(line-height)과 함께 조정하는 것이 좋으므로 최종 적용 전 실제 화면에서 확인하는 것을 권장합니다. 정확한 값이 필요한 핵심 요소는 참고용으로 검토하세요.
자주 묻는 질문 (FAQ)
Q. CSS clamp() 함수는 무엇인가요?
A. clamp(최소, 선호, 최대)는 결과를 최소·최대 사이로 제한하는 함수입니다. 선호값에 vw를 섞으면 미디어 쿼리 없이 반응형 폰트를 만들 수 있습니다.
Q. 반응형 폰트 css는 어떻게 만드나요?
A. 작은 화면·큰 화면 각각의 폰트와 뷰포트를 입력하면, 두 점을 잇는 직선의 기울기와 절편을 계산해 clamp() 코드를 자동 생성합니다.
Q. px과 rem 중 무엇을 쓰는 게 좋나요?
A. 접근성을 위해 rem을 권장합니다. 이 도구는 px로 입력해도 rem 기반 clamp() 코드로 변환해 줍니다.
Q. clamp() 계산 결과는 정확한가요?
A. 입력한 두 뷰포트에서는 지정 크기와 정확히 일치합니다. 다만 1rem=16px 기본값을 가정하므로 루트 크기를 바꿨다면 결과는 참고용으로 보세요.