웹 및 글꼴 파일 확장자 가이드: WOFF2, TTF, OTF 및 ICO
웹사이트를 구축하거나 디지털 제품을 디자인할 때 타이포그래피와 아이콘에 적합한 파일 형식을 선택하는 것은 시각적 품질과 로딩 속도 모두에 중요합니다. 오래된 글꼴 형식을 사용하면 글꼴을 불러오는 동안 텍스트가 "보이지 않게" 되거나 사이트 성능이 크게 저하될 수 있습니다.
이 가이드에서는 꼭 알아야 할 필수 글꼴 및 웹 그래픽 확장자를 분석해 드립니다.
빠른 참조 표: 글꼴 및 웹 형식
| 확장자 | 전체 이름 | 압축률 | 주요 용도 |
|---|---|---|---|
.woff2 |
Web Open Font Format 2.0 | 매우 높음 | 현대 웹 (최고 성능) |
.woff |
Web Open Font Format 1.0 | 높음 | 웹 (레거시 브라우저 지원) |
.ttf |
TrueType Font | 낮음 | Windows/macOS 데스크톱, 기본 웹 |
.otf |
OpenType Font | 낮음 | 그래픽 디자인, 고급 타이포그래피 |
.svg |
Scalable Vector Graphics | 다양함 | 웹 아이콘, 로고, 벡터 아트 |
.ico |
Icon | 없음 | 파비콘 (브라우저 탭 아이콘) |
1. 현대 웹 표준 (.woff2)
WOFF2는 오늘날 웹 타이포그래피의 표준입니다. 고급 압축 알고리즘(Brotli)을 사용하여 글꼴 파일 크기를 원래 WOFF보다 최대 30% 더 작게 만듭니다.
- 장점: 가장 빠른 로딩 시간, 모든 현대 브라우저에서 지원.
- 왜 사용하나요? 현대 브라우저(Chrome, Firefox, Safari, Edge)만 고려한다면 CSS
@font-face에 포함해야 할 유일한 형식은.woff2입니다.
2. 레거시 지원 (.woff)
WOFF2의 이전 버전입니다. 여전히 널리 지원되지만 효율성은 떨어집니다.
- 왜 사용하나요? WOFF2를 아직 이해하지 못하는 약간 오래된 브라우저를 지원해야 할 때 폴백(fallback)으로 사용하세요.
3. 데스크톱 및 디자인 표준 (.ttf, .otf)
이 형식들은 Word, Photoshop 또는 Figma에서 사용하기 위해 컴퓨터에 설치하는 형식입니다.
- TTF (TrueType): 1980년대 Apple과 Microsoft가 개발했습니다. 일반적인 용도로 가장 흔한 형식입니다.
- OTF (OpenType): TTF를 기반으로 구축되었지만 합자(ligatures), 소문자 대문자(small caps), 대체 글리프와 같은 고급 "OpenType 기능"을 지원합니다. 디자이너들은 고급 인쇄 및 디지털 작업에 OTF를 선호합니다.
- 웹 사용: 웹에서 사용할 수도 있지만 압축되지 않아 무겁습니다. 먼저 WOFF2로 변환하는 것이 좋습니다.
4. 확장 가능한 그래픽 (.svg)
문자 집합인 글꼴과 달리 SVG는 벡터 이미지 형식입니다.
- 로고 및 아이콘: SVG는 아무리 확대해도 흐려지지 않으므로 로고에 적합합니다.
- CSS에서: SVG를 배경 이미지로 사용하거나 "SVG 글꼴"로 사용할 수 있습니다(단, 후자는 현재 WOFF2에 밀려 대부분 사용되지 않습니다).
5. 파비콘 (.ico)
.ico 형식은 단일 파일에 여러 크기(16x16, 32x32, 48x48)의 아이콘 버전을 담을 수 있는 특수 컨테이너입니다.
- 주요 용도: 브라우저 탭에서 볼 수 있는 "파비콘".
- 현대적인 대안: 대부분의 현대 브라우저는 이제 파비콘으로 PNG나 SVG를 지원하지만,
.ico는 여전히 가장 호환성이 높은 폴백으로 남아 있습니다.
웹 타이포그래피 베스트 프랙티스
- WOFF2 우선 순위 지정: 현대 브라우저가 가장 작은 파일을 가져올 수 있도록 CSS에서 항상
.woff2를 가장 먼저 나열하세요. - 글꼴 서브셋(Subset) 만들기: 많은 글꼴 파일에는 사용하지 않는 수백 가지 언어의 문자가 포함되어 있습니다. 글꼴을 "서브셋"으로 만들면 사용하지 않는 문자가 제거되어 파일 크기가 더욱 줄어듭니다.
font-display: swap사용: 이렇게 하면 사용자 정의 글꼴을 불러오는 동안 시스템 글꼴을 사용하여 텍스트가 즉시 보이도록 보장합니다.
자주 묻는 질문 (FAQ)
Q: 온라인에서 .ttf를 .woff2로 변환할 수 있나요?
A: 네! 데스크톱 .ttf 또는 .otf 파일을 가져와 웹용 .woff2 파일로 압축해 주는 무료 도구가 많이 있습니다.
Q: WOFF2는 OTF의 모든 기능을 지원하나요?
A: 네. WOFF2는 본질적으로 매우 효율적인 압축 레이어로 감싸인 OTF 또는 TTF 파일입니다. 원래 파일의 모든 타이포그래피 기능(예: 합자)을 유지합니다.
Q: 웹사이트 아이콘에 SVG를 사용해야 하나요?
A: 일반적으로 그렇습니다. SVG는 선명하고 투명도를 지원하며 CSS로 스타일을 지정할 수 있습니다. 복잡한 아이콘 세트의 경우 일부 개발자는 "아이콘 글꼴"(.woff2 파일 사용)을 선호하기도 하지만, 인라인 SVG가 현대의 베스트 프랙티스로 간주됩니다.
Tool3M 관련 도구
- 단위 변환기: 픽셀(Pixels), EM, REM 간의 글꼴 크기를 계산하세요.
- 이미지를 Base64로: 작은 SVG 아이콘을 CSS나 HTML에 직접 삽입하세요.