모바일 폰트 반응형 계산법

모바일 웹에서 가장 까다로운 것 중 하나가 폰트 크기입니다. 360px 화면에서 적당해 보이던 글자가 430~440px 화면(아이폰 Pro Max)에서는 상대적으로 작아 보이고, 반대로 넓은 화면 기준으로 정한 크기는 작은 화면에서 지나치게 작아집니다. 이 글에서는 실무에서 쓰는 VW 기반 폰트 계산법과, REM을 섞은 clamp()로 화면 크기와 사용자 글꼴 설정에 모두 대응하는 방법을 정리합니다.

1. 기준 너비 정하기

모바일 시안을 변환할 때 가장 먼저 정할 것은 "어떤 너비를 100vw로 볼 것인가"입니다. 기준 너비는 시안(아트보드)의 너비와 같아야 합니다. 주요 기기의 CSS 너비는 다음과 같습니다.

국내 프로젝트에서는 360px(안드로이드)이나 375px(아이폰)을 기준으로 많이 작업하며, 최근에는 피그마 기본 아이폰 프레임에 맞춘 390·393·402px 시안도 늘고 있습니다. 어떤 너비를 쓰든 시안 너비를 확인한 뒤 같은 값을 기준 너비로 쓰는 것이 핵심입니다.

2. VW 폰트 계산 공식

시안의 폰트 크기를 VW로 바꾸는 공식은 다음과 같습니다.

(시안 폰트 크기 / 기준 너비) * 100 = 결과 VW

예를 들어 본문 폰트가 16px이라면 기준 너비에 따라 다음과 같습니다.

/* 360px 시안 */ (16 / 360) * 100 = 4.444vw
/* 375px 시안 */ (16 / 375) * 100 = 4.267vw
/* 390px 시안 */ (16 / 390) * 100 = 4.103vw

값을 하나씩 계산할 필요는 없습니다. PX↔VW 변환기는 다음 순서로 쓰면 됩니다.

1. 기준 너비 프리셋에서 시안 너비(360·375·390 등)를 고릅니다.
2. px 값을 입력하면 변환 버튼 없이 바로 vw 값이 나오고, 결과를 클릭하면 복사됩니다.
3. 여러 줄의 CSS는 CSS 일괄 변환에 붙여넣으면 한 번에 바뀝니다. @media 조건은 그대로 두며, "1px 이하는 px 유지"를 켜면 테두리 값도 px로 남습니다.

자주 쓰는 값은 360px, 375px, 390px 기준 변환표에서 한눈에 볼 수 있습니다.

3. 기기별 실제 크기

375px 시안의 16px을 4.267vw로 바꾸면, 화면 너비에 따라 실제 크기가 다음처럼 달라집니다.

휴대폰 범위에서는 차이가 크지 않지만, 같은 4.267vw가 768px 태블릿에서는 약 32.8px, 1920px 모니터에서는 약 81.9px이 됩니다.

4. VW만 쓰면 안 되는 이유

폰트 크기를 VW로만 지정하면 넓은 화면에서 글자가 지나치게 커지고, 브라우저 확대나 글꼴 크기 설정에도 반응하지 않습니다. 이를 보완하는 방법은 두 가지입니다.

방법 A: 미디어 쿼리로 상한 두기

p { font-size: 4.267vw; }

/* 4.267vw가 20px에 도달하는 지점(약 469px)부터 고정 */
@media (min-width: 469px) {
  p { font-size: 1.25rem; } /* 20px */
}

전환 지점은 "고정할 크기 / vw 값 * 100"으로 구합니다(20 / 4.267 * 100 ≈ 469px). 768px처럼 임의의 지점에서 끊으면 767px에서 약 32.7px이던 글자가 768px에서 갑자기 작아지므로 주의하세요.

방법 B: clamp()로 범위 정하기 (권장)

/* 375px에서 16px → 768px에서 20px, rem을 섞어 사용자 글꼴 설정도 반영 */
p { font-size: clamp(1rem, 0.7615rem + 1.0178vw, 1.25rem); }

이 값은 375px 이하에서 16px, 430px에서 약 16.6px, 768px 이상에서 20px이 됩니다. 최솟값·최댓값을 rem으로 두고 권장값에도 rem을 섞었기 때문에, 사용자가 브라우저 글꼴 크기를 키우면 글자도 함께 커집니다. 값은 Clamp 생성기에 최소·최대 화면과 크기만 넣으면 바로 계산되고, 슬라이더로 화면 너비별 실제 크기도 확인할 수 있습니다. rem을 섞어야 하는 이유는 VW 단위와 웹 접근성에서 자세히 다룹니다.

5. 폰트 변환 시 주의사항

• 최소 크기 지정: 화면이 아주 좁아져도 글자가 12px보다 작아지지 않도록 clamp()의 최솟값으로 하한을 두세요. 본문은 16px(1rem) 이상을 권장합니다.
• 행간(Line-height): 폰트 크기를 VW로 바꿨다면 행간은 단위 없는 숫자(예: line-height: 1.5)로 지정해 폰트 크기에 연동되게 하세요. 시안의 px 행간은 행간 계산기로 비율로 바꿀 수 있습니다.
• REM 변환: 고정 크기로 둘 값은 px 대신 rem으로 지정하면 사용자 글꼴 설정을 따릅니다. PX to REM 변환기로 바로 바꿀 수 있습니다.

결론

모바일 폰트는 하나의 고정값이 아니라 화면 너비에 따라 움직이는 값입니다. 시안 너비를 기준 너비로 정해 VW로 변환하고, 실제로 적용할 때는 rem을 섞은 clamp()로 최소·최대 크기를 정해 두면 대부분의 모바일 기기에서 읽기 편한 크기를 유지할 수 있습니다.