[flutter] 플러터 intl을 활용한 앱 개발 시 번역 사전을 어떻게 구축하나요?

플러터는 다국어 지원을 위해 intl 패키지를 제공합니다. intl 패키지를 사용하면 앱의 텍스트를 다국어로 번역할 수 있는 사전을 구축할 수 있습니다.

번역 사전을 구축하는 기본적인 단계는 다음과 같습니다:

  1. pubspec.yaml 파일에서 intl 패키지를 추가합니다. 이를 위해 아래의 코드를 dependencies 항목에 추가해주세요:

    dependencies:
      flutter:
        sdk: flutter
    
      flutter_localizations:
        sdk: flutter
    
      intl: <version>
    
  2. main.dart 파일에서 MaterialApp 위젯의 localizationsDelegates 항목에 GlobalMaterialLocalizations.delegateGlobalWidgetsLocalizations.delegate를 추가합니다. 코드는 아래와 같습니다:

    import 'package:intl/intl.dart';
    import 'package:flutter_localizations/flutter_localizations.dart';
    
    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'My App',
          localizationsDelegates: [
            GlobalMaterialLocalizations.delegate,
            GlobalWidgetsLocalizations.delegate,
          ],
          supportedLocales: [
            const Locale('en'), // 영어
            const Locale('ko'), // 한국어
            // 다른 언어도 필요한 경우 여기에 추가해주세요
          ],
          // ...
        );
      }
    }
    
  3. arb 파일을 생성하여 각 언어 별로 텍스트를 번역합니다. arb 파일은 JSON 형식으로 되어있으며, 다음과 같은 형태로 번역된 텍스트를 기록할 수 있습니다:

    {
      "@@locale": "en",
      "hello": "Hello",
      "welcome": "Welcome to my app"
    }
    

    이때 @@locale 키워드는 해당 언어의 코드를 기록하는 역할을 합니다. 위의 예시에서는 영어(en)로 번역을 하고 있습니다.

  4. ArbConverter 플러그인을 사용하여 arb 파일을 dart 파일로 변환합니다. 이를 위해 터미널에서 아래의 커맨드를 실행합니다:

    flutter pub run intl_translation:generate_from_arb --output-dir=lib/l10n --generated-file-prefix=app_ --no-use-deferred-loading lib/localizations.dart lib/l10n/intl_*.arb
    

    이 커맨드를 실행하면 lib/l10n 경로에 intl_messages.dart 파일과 app_*.dart 파일들이 생성됩니다. 이 중 app_*.dart 파일들이 각 언어 별로 번역된 텍스트를 제공합니다.

  5. 번역된 텍스트를 사용하려면 l10n/generated 폴더에 있는 messages_*.dart 파일을 import 하여 사용합니다.

    import 'l10n/generated/messages_<language_code>.dart';
    
  6. messages_*.dart 파일을 사용하여 번역된 텍스트를 렌더링합니다.

    Intl.message(
      'Hello',
      name: 'hello',
      desc: 'Greeting',
    )
    

이렇게 구축한 번역 사전을 사용하면 앱 내에서 텍스트를 다국어로 번역하여 제공할 수 있습니다. 추가적으로 다른 언어를 지원하려면 supportedLocales에 해당 언어의 Locale 객체를 추가하는 것만으로도 가능합니다.

더 자세한 내용은 intl 패키지의 공식 문서를 참고해주세요.