반응형
회사 일을 하면서 폰트를 적용하는 것을 하게 되었습니다. 단순히 앱에 넣어서 사용하는 것이 아니라 url에 있는 폰트 파일을 다운받아서 앱에 등록하고 적용하는 작업을 진행하였습니다.
잘 마무리하였지만, 이에 관련된 정보를 다른 사람들에게 전파하는 과정에서 공부하게 된 것들을 정리해 보았습니다.
🔤 정적 폰트란?
정적 폰트는 각각의 스타일(예: Regular, Bold, Italic 등)이 별도의 파일로 제공되는 전통적인 폰트 형식입니다. 하나의 파일에서 하나의 굵기만 다룰 수 있습니다. 보통 이름이 폰트이름-굵기 형식으로 되어 있습니다.
✅ 특징
- 스타일별로 개별 파일 필요
예: Roboto-Regular.ttf, Roboto-Bold.ttf, Roboto-Italic.ttf 등 - 렌더링 속도가 빠름 (단순 구조)
- 오래된 시스템이나 브라우저에서도 호환성이 높음
🚫 단점
- 다양한 스타일을 사용하려면 여러 개의 파일을 로딩해야 함 → 앱/웹의 로딩 속도 저하
- 파일 수가 많아지면서 유지보수가 복잡해짐
🧬 가변 폰트란?
가변 폰트는 하나의 파일로 여러 스타일(굵기, 기울기 등)을 모두 표현할 수 있는 현대적 폰트 포맷입니다. OpenType Font 1.8부터 지원되었습니다. 컴퓨터에서 실행하보면 하나의 파일인데 여러 폰트 굵기를 사용할 수 있습니다.
✅ 특징
- 한 개의 파일로 다양한 스타일 제공
→ weight, width, slant, italic, optical size 등을 CSS나 코드로 조절 가능 - 파일 수 감소 → 성능 향상
- 세밀한 조절 가능
예: font-weight: 430처럼 정해진 Bold가 아닌 미세한 조절이 가능
🚫 단점
- 구형 브라우저나 OS에서 호환성 문제 발생 가능 (iOS 11+, Android 8+, 대부분의 최신 브라우저는 지원)
- 렌더링 엔진이 폰트 내부의 수학적 조절을 처리해야 하므로 약간의 렌더링 비용이 발생할 수 있음
📊 비교 요약
항목정적 폰트가변 폰트
| 파일 수 | 스타일마다 개별 파일 | 하나의 파일로 모든 스타일 |
| 유연성 | 제한적 (기존 스타일만 가능) | 매우 유연 (세밀한 조절 가능) |
| 성능 | 스타일 많아질수록 느림 | 적은 HTTP 요청으로 성능 우수 |
| 호환성 | 모든 환경에서 안정적 | 최신 브라우저/OS 필요 |
| 유지보수 | 파일 많아 관리 복잡 | 단일 파일로 관리 용이 |
🎯 언제 어떤 폰트를 써야 할까?
사용 환경추천 폰트 타입
| 복잡하지 않은 디자인, 정해진 스타일만 필요 | 정적 폰트 |
| 다양한 스타일 사용 + 성능 고려 | 가변 폰트 |
| 모바일/웹 앱에서 미세한 타이포 조정이 필요할 때 | 가변 폰트 |
| 구형 브라우저 지원이 중요한 프로젝트 | 정적 폰트 또는 fallback 필요 |
📎 마무리
가변 폰트는 디자인 유연성, 성능, 관리 측면에서 매우 강력한 도구입니다. 특히 개발자라면 폰트를 단순한 텍스트 스타일링 요소가 아니라 성능, 브랜딩, 접근성에 영향을 미치는 중요한 자산으로 보고, 적절하게 선택하고 적용할 수 있어야 합니다.
반응형