Flutter Android에서 Pretendard Variable 폰트 흐림 현상 해결하기

승제·2025년 8월 7일

🚨 문제 상황

Flutter 앱에서 Pretendard Variable 폰트를 사용했는데, Android에서만 텍스트가 흐릿하게 렌더링되는 문제가 발생했습니다.

# 문제가 있던 설정
fonts:
  - family: Pretendard
    fonts:
      - asset: assets/fonts/PretendardVariable.ttf

!Before

🔍 원인 분석

Variable 폰트(.ttf)는 하나의 파일에 여러 weight를 포함하고 있어 편리하지만, Android의 폰트 렌더링 엔진에서 최적화 문제를 일으킬 수 있습니다.

  • iOS: Variable 폰트 렌더링 ✅
  • Android: Variable 폰트 렌더링 ❌ (흐림 현상)

✅ 해결 방법

1. Static 폰트 파일 다운로드

Pretendard GitHub에서 Static 폰트들을 다운로드합니다.

# assets/fonts/ 폴더에 다운로드
curl -L -o "Pretendard-Light.otf" "https://github.com/orioncactus/pretendard/raw/main/packages/pretendard/dist/otf/Pretendard-Light.otf"
curl -L -o "Pretendard-Regular.otf" "https://github.com/orioncactus/pretendard/raw/main/packages/pretendard/dist/otf/Pretendard-Regular.otf"
curl -L -o "Pretendard-Medium.otf" "https://github.com/orioncactus/pretendard/raw/main/packages/pretendard/dist/otf/Pretendard-Medium.otf"
curl -L -o "Pretendard-SemiBold.otf" "https://github.com/orioncactus/pretendard/raw/main/packages/pretendard/dist/otf/Pretendard-SemiBold.otf"

2. pubspec.yaml 수정

fonts:
  - family: Pretendard
    fonts:
      - asset: assets/fonts/Pretendard-Light.otf
        weight: 300
      - asset: assets/fonts/Pretendard-Regular.otf
        weight: 400
      - asset: assets/fonts/Pretendard-Medium.otf
        weight: 500
      - asset: assets/fonts/Pretendard-SemiBold.otf
        weight: 600

3. 프로젝트 클린 빌드

flutter clean
flutter pub get
flutter run

🎯 결과

!After

Android에서도 선명하고 깔끔한 Pretendard 폰트 렌더링이 가능해졌습니다!

💡 핵심 포인트

Variable vs Static 폰트 선택 기준

플랫폼Variable 폰트Static 폰트
✅ 권장 (용량 효율)⚠️ 여러 파일 필요
Flutter Mobile❌ 렌더링 이슈✅ 권장 (안정성)

추가 최적화 팁

// 텍스트 렌더링 최적화
Text(
  '텍스트 내용',
  style: TextStyle(
    fontFamily: 'Pretendard',
    fontSize: 20.sp,
    fontWeight: FontWeight.w600,
    letterSpacing: -0.5, // 한글 최적화
  ),
  textScaleFactor: 1.0, // 시스템 폰트 크기 무시
)

🔗 참고 자료


profile
[⚙️ + 💡] 효율 속에서 창의성을 실험합니다.

0개의 댓글