Flutter 웹 빌드 시 한글 폰트 깨짐 문제 해결

문제 상황

사내 관리자 페이지를 Flutter 웹으로 전환하는 작업을 진행 중이었다. 로컬 개발 환경에서는 한글이 잘 보였는데, flutter build web 후 배포하니 한글이 모두 □□□ 형태로 깨져서 표시되었다.

원因 분석

Flutter 웹은 기본적으로 Roboto 폰트를 사용하는데, 이 폰트에 한글 글리프가 포함되어 있지 않았다. 로컬에서는 시스템 폰트로 폴백되어 문제가 없었지만, 실제 배포 환경에서는 폰트를 명시적으로 제공해야 했다.

해결 방법

1. 폰트 파일 추가

Noto Sans KR 폰트를 다운로드해서 프로젝트에 추가했다.

# pubspec.yaml
flutter:
  fonts:
    - family: NotoSansKR
      fonts:
        - asset: assets/fonts/NotoSansKR-Regular.otf
        - asset: assets/fonts/NotoSansKR-Bold.otf
          weight: 700

2. 기본 폰트 설정

// main.dart
MaterialApp(
  theme: ThemeData(
    fontFamily: 'NotoSansKR',
  ),
  // ...
)

3. 빌드 사이즈 최적화

폰트 파일이 무거워서 초기 로딩이 느려졌다. Regular와 Bold만 포함하고, 서브셋 폰트를 사용하는 것을 고려 중이다.

결과

한글이 정상적으로 표시되었고, 빌드 사이즈는 약 2MB 증가했다. 향후 폰트 서브셋팅을 적용하면 1MB 이하로 줄일 수 있을 것 같다.