Flutter의 폰트 커스터마이징(Font Customization) 사용법

앱의 디자인과 사용자 경험을 향상시키는 중요한 요소 중 하나는 폰트입니다. Flutter에서는 폰트를 쉽게 커스터마이징하여 앱의 분위기를 바꾸고, 브랜드 일관성을 유지할 수 있습니다. 이번 글에서는 Flutter에서 사용자 정의 폰트를 사용하는 방법과 폰트를 커스터마이징하는 방법을 단계별로 설명하겠습니다.

1. 사용자 정의 폰트 파일 추가

폰트 커스터마이징을 위해서는 먼저 사용할 폰트 파일을 프로젝트에 추가해야 합니다. TrueType(.ttf) 또는 OpenType(.otf) 형식의 폰트를 사용할 수 있습니다.

1.1 폰트 파일 다운로드 및 프로젝트에 추가

먼저, 원하는 폰트 파일을 다운로드합니다. 예를 들어, 구글 폰트에서 다운로드한 Roboto 폰트를 프로젝트에 추가할 수 있습니다.

1. 폰트 파일 다운로드: 구글 폰트(Google Fonts)에서 원하는 폰트 파일을 다운로드합니다.
2. assets/fonts 폴더 생성: Flutter 프로젝트의 assets 폴더 아래에 fonts 폴더를 생성하고, 다운로드한 폰트 파일을 fonts 폴더에 추가합니다. 폴더 구조는 다음과 같습니다.

lib/
assets/
  fonts/
    Roboto-Regular.ttf
    Roboto-Bold.ttf
    Roboto-Italic.ttf

 

2. pubspec.yaml 파일에 폰트 등록

폰트 파일을 프로젝트에 추가한 후, pubspec.yaml 파일에서 폰트를 등록해야 합니다.

2.1 pubspec.yaml 파일 수정

 

flutter:
  fonts:
    - family: Roboto  # 폰트 패밀리 이름
      fonts:
        - asset: assets/fonts/Roboto-Regular.ttf  # 폰트 파일 경로
        - asset: assets/fonts/Roboto-Bold.ttf
          weight: 700  # 굵기 설정
        - asset: assets/fonts/Roboto-Italic.ttf
          style: italic  # 이탤릭체 설정

 

위 설정에서는 Roboto 폰트 패밀리를 정의하고, 해당 패밀리의 다양한 스타일과 굵기를 지정했습니다. 이제 이 폰트를 앱 전반에서 사용할 수 있게 됩니다.

3. 폰트 적용 방법

폰트를 정의한 후에는 Flutter 위젯에서 폰트를 적용할 수 있습니다. Flutter에서 폰트를 적용하는 두 가지 주요 방법은 TextStyle 위젯을 통해 개별 요소에 적용하는 방법과 ThemeData를 사용해 앱 전체에 적용하는 방법입니다.

 

3.1 개별 텍스트에 폰트 적용

TextStyle 위젯을 사용하여 특정 텍스트에 폰트를 적용할 수 있습니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Custom Font Example')),
        body: Center(
          child: Text(
            'Hello, Flutter!',
            style: TextStyle(
              fontFamily: 'Roboto',  // 등록한 폰트 패밀리 사용
              fontSize: 24,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      ),
    );
  }
}

 

위 코드에서는 Text 위젯에 TextStyle을 사용해 Roboto 폰트를 적용했습니다. fontFamily 속성을 통해 pubspec.yaml 파일에 정의한 폰트 패밀리를 참조합니다.

 

반응형

 

3.2 앱 전체에 폰트 적용 (글로벌 폰트 설정)

앱 전체에 동일한 폰트를 적용하려면, ThemeData를 사용하여 기본 텍스트 스타일을 설정할 수 있습니다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        textTheme: TextTheme(
          bodyText1: TextStyle(fontFamily: 'Roboto', fontSize: 16),
          headline1: TextStyle(fontFamily: 'Roboto', fontSize: 32, fontWeight: FontWeight.bold),
        ),
      ),
      home: Scaffold(
        appBar: AppBar(title: Text('Global Font Example')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('This is body text', style: Theme.of(context).textTheme.bodyText1),
              Text('This is headline text', style: Theme.of(context).textTheme.headline1),
            ],
          ),
        ),
      ),
    );
  }
}

 

위 코드에서는 ThemeData의 textTheme을 통해 앱 전체에 Roboto 폰트를 기본 텍스트 스타일로 설정했습니다. 이를 통해, 앱의 각 부분에서 텍스트 스타일을 일관되게 유지할 수 있습니다.

4. 다양한 스타일 적용

Flutter에서는 폰트의 굵기와 이탤릭체 등 다양한 스타일을 손쉽게 적용할 수 있습니다. fontWeight와 fontStyle 속성을 사용하여 폰트의 스타일을 설정할 수 있습니다.

 

4.1 굵기와 이탤릭체 설정

Text(
  'Bold and Italic Text',
  style: TextStyle(
    fontFamily: 'Roboto',
    fontWeight: FontWeight.bold,  // 굵기 설정
    fontStyle: FontStyle.italic,  // 이탤릭체 설정
    fontSize: 24,
  ),
)

 

위 코드에서는 fontWeight: FontWeight.bold로 굵기를 설정하고, fontStyle: FontStyle.italic을 사용해 이탤릭체로 적용합니다.

 

728x90

 

4.2 다른 굵기 사용

폰트의 다양한 굵기를 적용하기 위해서는 weight 값을 추가하여 설정할 수 있습니다.

 

flutter:
  fonts:
    - family: Roboto
      fonts:
        - asset: assets/fonts/Roboto-Regular.ttf
        - asset: assets/fonts/Roboto-Bold.ttf
          weight: 700
        - asset: assets/fonts/Roboto-Light.ttf
          weight: 300

 

위 설정에서는 Roboto 폰트의 굵기를 300 (Light), 700 (Bold)으로 지정하였습니다.

텍스트에서 이를 적용할 때는 fontWeight를 설정하여 사용합니다.

 

Text(
  'Light Text',
  style: TextStyle(
    fontFamily: 'Roboto',
    fontWeight: FontWeight.w300,  // 가벼운 텍스트 (Light)
    fontSize: 24,
  ),
),
Text(
  'Bold Text',
  style: TextStyle(
    fontFamily: 'Roboto',
    fontWeight: FontWeight.w700,  // 굵은 텍스트 (Bold)
    fontSize: 24,
  ),
),

 

5. 시스템 폰트 사용

Flutter에서는 별도의 폰트를 추가하지 않고, 기본적으로 제공되는 시스템 폰트를 사용할 수

 

Text(
  'System Font Text',
  style: TextStyle(
    fontSize: 20,  // 시스템 폰트 사용
  ),
)

 

 

기본 폰트를 사용함으로써 앱의 크기를 줄일 수 있지만, 사용자 정의가 필요한 경우에는 커스텀 폰트를 사용하는 것이 좋습니다.

6. 폰트 로드 확인

사용자 정의 폰트를 제대로 적용했는지 확인하려면, 에뮬레이터나 실제 기기에서 앱을 실행하고 텍스트가 기대한 대로 표시되는지 확인해야 합니다. 폰트가 제대로 적용되지 않으면, 폰트 파일 경로나 pubspec.yaml 설정을 확인하는 것이 중요합니다.

결론

Flutter에서 폰트를 커스터마이징하는 방법을 사용하면, 앱의 디자인과 사용자 경험을 한층 더 향상시킬 수 있습니다. TextStyle과 ThemeData를 활용해 개별 텍스트나 전체 앱에 폰트를 적용할 수 있으며, 다양한 굵기와 스타일을 손쉽게 설정할 수 있습니다. 이번 글에서 설명한 방법을 활용하여 Flutter 애플리케이션에서 폰트를 자유롭게 커스터마이징해보세요. 앱의 브랜드 일관성과 디자인 품질을 높이는 데 큰 도움이 될 것입니다.