웹 타이포그래피는 사용자 경험과 브랜드 아이덴티티를 형성하는 데 중요한 요소입니다.
Django 또는 정적 웹 프로젝트를 만들다 보면 .ttf
와 .woff2
같은 다양한 폰트 포맷을 접하게 됩니다.
이 글에서는 .ttf
와 .woff2
의 차이점, 왜 웹 개발자들이 .woff2
를 선호하는지,
그리고 Ubuntu에서 .ttf
를 .woff2
로 변환하는 방법을 설명합니다.
또한 변환 작업을 자동화할 수 있는 Bash 스크립트도 함께 제공합니다.
1. TTF란?
TTF (TrueType Font)는 Apple과 Microsoft가 공동 개발한 범용 글꼴 포맷입니다.
인쇄 및 화면 출력 모두를 지원하며, 다양한 운영체제에서 폭넓게 사용됩니다.
- ✅ 장점:
- 모든 운영체제에서 널리 지원됨
-
이미지 렌더링이나 데스크탑 앱에서 적합
-
❌ 단점 (웹 기준):
- 파일 용량이 큼
- 웹 최적화가 되어 있지 않음
- 로딩 속도 느림
2. WOFF2란?
WOFF2 (Web Open Font Format 2)는 웹 전용으로 설계된 최신 압축 폰트 포맷입니다.
- ✅ 장점:
- 매우 높은 압축률 (TTF 대비 최대 30% 작음)
- 빠른 로딩, 네트워크 최적화
-
모든 최신 브라우저 완벽 지원
-
❌ 단점:
- 데스크탑 앱이나 일부 이미지 렌더링에는 부적합
.ttf
또는.otf
로부터 별도 변환 필요
3. 왜 웹 개발자들은 WOFF2를 써야 할까?
항목 | TTF | WOFF2 |
---|---|---|
파일 크기 | ❌ 큼 | ✅ 작음 |
웹 성능 | ❌ 낮음 | ✅ 최적화 |
브라우저 호환성 | ✅ 좋음 | ✅ 매우 좋음 |
웹폰트 적합성 | ⚠️ 조건부 | ✅ 강력 추천 |
웹 성능과 사용자 경험을 고려할 때, 특별한 이유가 없다면 항상 WOFF2를 사용하는 것이 좋습니다.
4. Ubuntu에서 TTF → WOFF2 변환하기
필요한 패키지 설치
sudo apt update
sudo apt install woff2
설치되면 woff2_compress
라는 명령어로 변환이 가능합니다.
수동 변환 명령어
woff2_compress Poppins-Regular.ttf
같은 디렉토리에 Poppins-Regular.woff2
파일이 생성됩니다.
5. 보너스: 자동 변환 Bash 스크립트
아래 스크립트를 사용하면 .ttf
파일들을 한 번에 변환할 수 있습니다. bash script에 익숙하신 분들은 복사하여 사용하세요.
convert-ttf-to-woff2.sh
#!/bin/bash
# 변환 대상 디렉토리
FONT_DIR="./"
OUTPUT_DIR="$FONT_DIR/woff2"
# woff2_compress 명령어 확인
if ! command -v woff2_compress &> /dev/null; then
echo "❌ 'woff2_compress' 명령어를 찾을 수 없습니다."
echo "다음 명령어로 설치하세요:"
echo " sudo apt install woff2"
exit 1
fi
# 결과 디렉토리 생성
mkdir -p "$OUTPUT_DIR"
echo "📁 변환 결과 디렉토리: $OUTPUT_DIR"
# 변환 실행
echo "🔄 TTF → WOFF2 변환 중..."
find "$FONT_DIR" -maxdepth 1 -type f -name "*.ttf" | while read -r ttf_file; do
filename=$(basename "$ttf_file")
base="${filename%.ttf}"
output_file="$OUTPUT_DIR/$base.woff2"
if [[ -f "$output_file" ]]; then
echo "⚠️ 이미 존재함: $output_file (건너뜀)"
continue
fi
woff2_compress "$ttf_file"
mv "${ttf_file}.woff2" "$output_file"
echo "✅ 변환 완료: $output_file"
done
echo "🎉 변환이 모두 완료되었습니다!"
✅ 요약
.woff2
는 웹 전용으로 설계된 최신 포맷이며, 성능과 용량 면에서 뛰어납니다..ttf
는 웹에서는 비효율적이지만 이미지 렌더링 등 다른 용도에는 유용합니다.- 자동 변환 스크립트를 활용하면 프로젝트의 폰트 관리를 훨씬 효율적으로 할 수 있습니다.
여러분의 웹 프로젝트 폰트 성능 향상에 도움이 되길 바랍니다!
Add a New Comment