MakeFrog / TechTalk

AI 면접관과 함께하는 개발자 면접 준비
40 stars 14 forks source link

[공통] 앱 내부에 Localization 도입 (다국어 지원) #103

Closed Xim-ya closed 1 month ago

Xim-ya commented 2 months ago

🚀 기능

앱에 영어와 한국어를 호환하는 로컬라이제이션(Localization) 기능을 추가합니다.

📄 기능 명세


👷 작업자

@yundal8755 , @Yellowtoast, @Xim-ya


💬 기타

먼저 각자 간단한 보일러플레이트 프로젝트를 만들어 다국어 처리 기능 로직을 적용해봐도 좋을 것 같아요.

Localization은 고려해야 할 부분이 많고 하드코딩 작업이 많아서 피로도가 높지만, 초반에 잘 만들어 놓으면 매우 유용할 것 같습니다. 보통 Localization을 적용할 때 여러 패키지를 도입하는데, 관련해서 각자 리서치를 해보면 좋을 것 같습니다. 제가 이전에 리서치한 패키지는 아래와 같습니다.

참고로, 제가 이전 프로젝트에 Localization을 적용했을 때 아래 블로그에서 마지막으로 제시하는 방법을 사용했습니다. [Flutter] Localizations 완전 정복 하기

잘 정리되어 있으니 참고하시면 좋을 것 같아요!

yundal8755 commented 1 month ago

<요약>

자세한 내용은 하단의 노션 링크 참고해주세요! https://www.notion.so/1-c3d1df54a62f46109b5f4a728290e851?pvs=21

Yellowtoast commented 1 month ago

flutter_localization + intl

import 'package:intl/intl.dart';
Text(Intl.message('appName'))

easy_localization

easy_localization 선택 이유

  1. 단순하게 사용할 수 있는 플러그인으로 빠르게
  2. 적용하기 쉬워야 함
  3. 자동 제너레이션 기능을 통해 text가 추가될때마다 휴먼에러 줄일 수 있음

키값 자동 제너레이션 방법

Command line arguments

Arguments Short Default Description
--help -h   Help info
--source-dir -S resources/langs Folder containing localization files
--source-file -s First file File to use for localization
--output-dir -O lib/generated Output folder stores for the generated file
--output-file -o codegen_loader.g.dart Output file name
--format -f json Support json or keys formats
--[no-]skip-unnecessary-keys -u false Ignores keys defining nested object except for pluarl(), gender() keywords.

키값 자동 제너레이션 방법

  1. json 형태로 json 파일 내부에 localization 텍스트 선언

    스크린샷 2024-07-14 오후 4.15.56.png

  2. 키값 dart 파일의 생성을 원하는 폴더와, json 파일이 있는 폴더 경로를 사용하여 자동 코드 생성 명령어 입력
    flutter pub run easy_localization:generate -O lib/app/localization -f keys -o locale_keys.g.dart --source-dir ./assets/translations

Xim-ya commented 1 month ago

정리

  1. Easy Localization 패키지를 이용하여 en ko 다국어 지원 기능 도입

    • 각 en ko json 파일의 json key값이 서로 다르거나 누락되는 경우 오류가 발생. 즉 휴먼에러 발생 위험이 높음. 관련해서 각 json 파일의 싱크를 어떻게 맞출 수 있을지에 대한 고민이 필요
  2. Db Localization 구조로 변환

    • @yundal8755 윤수님이 제안해주신 구조로 변환 완료.
    • Firestore API READ 횟수를 최소화하고 기존 운영앱에 영향을 미치지 않은 범위내에서 DB 구조를 성공적으로 변경함.