Flutter의 다중 언어 지원(Internationalization) 방법과 적용

Flutter의 다중 언어 지원(Internationalization) 방법과 적용

Flutter에서 다중 언어 지원(Internationalization, i18n)을 적용하면 다양한 지역의 사용자에게 맞춤형 언어 환경을 제공할 수 있습니다. 특히 글로벌 앱을 개발할 경우 다국어 지원은 필수적인 기능입니다.

이 글에서는 Flutter에서 다중 언어를 지원하는 방법과 구체적인 적용 방법을 설명하겠습니다.

---

1. Flutter 다중 언어 지원이 필요한 이유

다국어 지원을 적용하면 다음과 같은 이점이 있습니다.

• 글로벌 사용자 확보: 다양한 국가의 사용자들에게 앱을 제공할 수 있음
• 사용자 경험 개선: 현지 언어로 앱을 제공하여 사용자 만족도 증가
• 지역별 맞춤 콘텐츠 제공: 국가별 규격에 맞춰 유동적인 정보 제공 가능

Flutter에서는 flutter_localizations 패키지를 활용하여 다국어를 쉽게 지원할 수 있습니다.

---

2. Flutter 다중 언어 지원 설정

Flutter에서 다국어 지원을 적용하려면 다음 단계를 따릅니다.

1. 패키지 설치: flutter_localizations 및 intl 패키지 추가
2. 앱 설정: 다국어 지원을 위한 설정 적용
3. 로컬라이제이션 파일 생성: 언어별 번역 파일 추가
4. 다국어 변경 기능 구현: 사용자가 언어를 변경할 수 있도록 설정

---

3. 패키지 설치

Flutter에서 다중 언어 지원을 위해 flutter_localizations과 intl 패키지를 추가해야 합니다.

(1) pubspec.yaml 파일 수정

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  intl: ^0.18.0

(2) 패키지 설치

flutter pub get

이제 Flutter 프로젝트에서 다국어 지원을 설정할 준비가 완료되었습니다.

---

4. 다국어 지원 설정

MaterialApp에서 flutter_localizations을 설정하여 다국어를 활성화할 수 있습니다.

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:intl/intl.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter 다국어 지원',
      supportedLocales: [
        Locale('en', 'US'),
        Locale('ko', 'KR'),
        Locale('es', 'ES'),
      ],
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Flutter 다국어 지원")),
      body: Center(
        child: Text("Hello World"),
      ),
    );
  }
}

설명:

• supportedLocales: 지원할 언어 목록 지정
• localizationsDelegates: 글로벌 로컬라이제이션 지원 추가

---

5. 언어별 번역 파일 생성

Flutter에서 다국어를 적용하려면 언어별 번역 파일을 생성해야 합니다.

(1) lib/l10n/intl_en.arb (영어 번역 파일)

{
  "hello": "Hello!",
  "welcome": "Welcome to Flutter!"
}

(2) lib/l10n/intl_ko.arb (한국어 번역 파일)

{
  "hello": "안녕하세요!",
  "welcome": "Flutter에 오신 것을 환영합니다!"
}

(3) lib/l10n/intl_es.arb (스페인어 번역 파일)

{
  "hello": "¡Hola!",
  "welcome": "¡Bienvenido a Flutter!"
}

이제 Flutter에서 번역된 문자열을 사용할 수 있도록 설정해야 합니다.

---

6. 다국어 적용 코드

(1) app_localizations.dart 파일 생성

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

class AppLocalizations {
  static Future<AppLocalizations> load(Locale locale) async {
    return AppLocalizations();
  }

  static AppLocalizations of(BuildContext context) {
    return Localizations.of<AppLocalizations>(context, AppLocalizations)!;
  }

  String get hello => Intl.message("Hello!", name: "hello");
  String get welcome => Intl.message("Welcome to Flutter!", name: "welcome");
}

class AppLocalizationsDelegate extends LocalizationsDelegate<AppLocalizations> {
  const AppLocalizationsDelegate();

  @override
  bool isSupported(Locale locale) => ["en", "ko", "es"].contains(locale.languageCode);

  @override
  Future<AppLocalizations> load(Locale locale) => AppLocalizations.load(locale);

  @override
  bool shouldReload(AppLocalizationsDelegate old) => false;
}

(2) MaterialApp에서 로컬라이제이션 적용

import 'package:flutter/material.dart';
import 'app_localizations.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      supportedLocales: [
        Locale('en', 'US'),
        Locale('ko', 'KR'),
        Locale('es', 'ES'),
      ],
      localizationsDelegates: [
        AppLocalizationsDelegate(),
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(AppLocalizations.of(context).hello)),
      body: Center(
        child: Text(AppLocalizations.of(context).welcome),
      ),
    );
  }
}

이제 앱의 언어 설정이 ko이면 한국어, en이면 영어, es이면 스페인어로 자동 번역됩니다.

---

결론

Flutter에서 다중 언어 지원을 추가하면 글로벌 사용자들에게 더욱 친숙한 앱을 제공할 수 있습니다.

• flutter_localizations와 intl 패키지를 활용하여 다국어 적용
• ARB 파일을 이용한 번역 관리
• 사용자 설정에 따라 언어 자동 변경

이제 다국어 지원을 적용하여 더욱 글로벌한 Flutter 앱을 개발해 보세요!