전 세계인들이 사랑받는 앱 만들기 - 현지화하기

[OneMoreThink]

다들 안녕하신지요? 아임 파인입니다.
MC3 프로젝트 출시 준비하면서 Localization 필요성을 느끼고 이를 적용하는 과정 속에서
한번 정리해두면 좋겠다고 생각해서 전체적인 흐름과 함께 관련된 용어들을 한 데 모았습니다..
다들 소중한 앱이 전 세계적으로 많은 이들에게 사랑받는데 조금이나마 도움이 되었으면 좋겠습니다.🌎
글 중에 잘못된 내용이 있는 경우 댓글로 피드백 주시고, 추가로 공유해주시고 싶은 사항이 있다면 함께 이야기 나눠주시면 좋겠습니다. 👍

Localization 관련 설정

Project > Info

Localization 섹션

Use Base Internationalization 옵션 사용 과정

• Use Base Internationalization 를 선택하면 개발시 사용한 문자열을 기초로해서 Localization 파일을 구성할 수 있습니다.
• 다음과 같이 여러 View에서 사용한 String 문자열들에 대하여 Localization을 하기 위해서는
  

1. 먼저 String Catalog를 만들어야합니다.

String Catalog 란? : 각 String에 대해서 각 언어별 번역을 제공하는 File 입니다.

• XCode의 Navigator 에서 Command + N (or 우클릭 + New File)

• String Catalog 선택
  

• Localizable을 처음 만들었을 때는 아래와 같이 비어 있지만
  

• 한번 Build를 하면 (왼쪽 상단 재생 버튼 누르면)

• 아래와 같이 현재 프로젝트에서 사용된 String을 base로 key 값을 자동으로 생성해줍니다.
  

• 이제 각 key에 맞는 번역을 추가해주면 됩니다.
  

번역이 적용되었는지 확인하는 방법

시뮬레이터 상에서

• Target의 Build 설정을 관리하는 섹션(가운데 상단)을 누르면
• 현재 Project에 추가된 Target들이 드롭다운 형태로 나타납니다.
• Edit Scheme을 클릭
  

Scheme가 뭐지?

Xcode에서 Scheme은 특정 타겟의 빌드 및 실행 설정을 관리하는 구성 요소입니다. Scheme은 앱의 빌드, 실행, 테스트, 프로파일링, 아카이빙 등을 어떻게 수행할지에 대한 설정을 관리할 수 있습니다.

• Run Section에서 App Language를 확인하고자하는 언어로 변경합니다.

• 그리고 시뮬레이터에서 앱을 켜보면

• 앞서 String Catalog에서 English에 대해 Value로 넣었던 값들로 변환된것을 확인할 수 있습니다.
• 그럼 귀찮게 여러 언어 설정을 확인하고 싶을 때마다 Scheme을 바꾸고 시뮬레이터를 돌려야되나?

Preview에서 확인하기

• Preview를 사용해서도 현재 번역이 잘 적용되고 있는지 확인해 볼 수 있습니다.
• 확인하고자하는 언어 설정을 위한 Preview를 하나 만듭니다.

Preview 섹션 상단에서 원하는 Preview를 선택해 확인할 수 있습니다.

• Preview("Preview 이름") 를 이용해 새로 만든 Preview에 이름을 지정해 줄 수 있습니다.
• environment(\.locale, Locale(identifier: "언어 식별자")) 를 이용하면 Preview에서 원하는 언어 설정에 대한 View를 볼 수 있습니다.
  

언어 추가하기

• String Catalog에 들어가서

• 왼쪽 하단에 + 버튼 클릭

• 원하는 언어 선택 및 선택한 언어에 대한 번역
  
  

• Preview에서 확인하기
  

String Catalog 속성 알아보기

State State: 현재 문자열의 번역 상태를 나타냅니다.

NEW : 새로 추가된 문자열로 아직 번역되지 않음

✅ : 번역이 완료된 상태

NEEDS REVIEW : 번역은 되었지만, 검토가 필요한 상태

• State 위에서 우클릭을 통해 마크해놓을 수 있습니다.
  
  

STALE : 원본 문자열이 변경되어 번역 업데이트가 필요한 상태

• Code에서 "안녕하세요" -> "안녕히가세요"로 바꾸면서, 원본 문자열이 변경되어
• 기존에 "안녕하세요"에 대한 번역이 Stale이 되고 새롭게 "안녕히가세요"에 대한 key가 추가되었습니다.
  

Vary by Device : 각 Platform 별로 각기 다른 번역을 제공가능

Comment : 번역자나 개발자에게 추가 정보를 제공하는 필드

• 컨텍스트 제공: 문자열이 사용되는 상황이나 맥락을 설명합니다.
• 변수 설명: 문자열 내의 변수나 포맷 지정자에 대한 정보를 제공합니다.
• 길이 제한: UI 공간 제약으로 인한 문자 수 제한을 알립니다.
• 특별 지침: 특정 단어나 문구의 사용에 대한 지침을 제공합니다.

Comment를 활용해 해당 텍스트가 사용된 맥락이나 각 문화적 특성, UI 적 제약을 설명하여 각 언어의 특성에 알맞는 번역을 제공할 수 있습니다.

View를 컴포넌트화했을때 번역 제공

• 아래와 같이 재사용되는 뷰를 하나의 컴포넌트로 추려 냈을 때

• 해당 컴포넌트의 프로퍼티 인자로 전해지는 Text의 경우 어떻게 번역을 제공할 수 있을까요?
  

• String Catalog에 들어가서 왼쪽 상단의 + 버튼을 눌러 원하는 String에 대한 key와 해당 key에 대한 value를 추가합니다.
  

• String(localized: "key_") 앞서 설정한 key 값을 넣어주면 언어 설정에 맞는 번역이 제공됩니다.
  

Enum과 함께 활용

• 다음과 같이 enum을 활용해서 각 case에 대응하며 특성을 설명하는 String을 연산 프로퍼티 형태로 활용하는 경우

• 각 case에 대응하는 String에 번역을 제공하고 싶다면
  

• String을 LocalizedStringResource 타입으로 바꾸고 빌드를 하면 각 case가 반환하고 있는 문자열이 key가 되어 String Catalog에 추가 됩니다.
  

• 추가된 key에 대해 각 언어에 대해 번역을 제공하면 각 case에 대응하는 String에 대한 번역을 제공할 수 있습니다.
  
  

[moonkey48]

좋은 공유 너무 감사해요 파인!! 🥹🥹🥹

[yeniful]

우와 파인 감사해요!!!! :-D

[Yeggggi]

Localization이 궁금했는데 이렇게 사용하는군요! 공유해주셔서 감사해요!!

[frankwon11]

최고입니다:) 아임파인 땡큐앤유

[thinkySide]

매크로 프로젝트 내 로컬라이징 진행에 많은 도움이 되었습니다, 감사합니다!

[OneMoreThink]

도움이 되었다니 기쁩니다. 😃