본 글은 애플이 WWDC20에서 발표한 'Build Localiztion-Friendly Layout Using Xcode' 영상을 참고/번역하여 만들었습니다.
Xcode를 활용한 localization을 하기에 앞서 가장 먼저 앱을 localization-friendly 하게 만들기 위해 따라야 할 몇 가지 디자인 패턴들을 살펴보자.
이 디자인 패턴들은 내가 어떤 플랫폼을(iOS, macOS 등) 개발하든, 혹은 매뉴얼 레이아웃과 오토 레이아웃, 또는 SwiftUI를 이용하든 상관없이 모든 것들에게 해당된다.
애플은 총 네 가지 디자인 패턴을 강조한다.
1. Avoid fixed widths or frames
첫번째는 고정된 길이와 프레임을 피하는 것이다.
이는 매뉴얼 레이아웃에서 sizeToFit을 적용하고 오토 레이아웃에서 fixed width constraints를 피하는 것을 의미한다.
위 사진은 macOS에서의 오토 레이아웃이 적용된 버튼이다. 왼쪽의 영어로 쓰인 버튼은 정상적으로 보이지만, 이를 그리스어로 번역하면 오른쪽 버튼과 같이 된다. 같은 단어에 더 많은 문자가 필요하기 때문에 중간에 있는 문자만을 가져온 뒤 생략 부호가 완전히 사라진다.
이 문제점은 고정된 넓이를 제거하거나 텍스트를 완전히 보여주기 위해 greater than or equal to constraint로 바꿔주면 해결된다.
2. Avoid fixed spacing
두 번째는 거리가 떨어져 있는 두 개의 오브젝트 사이에 fixed spacing을 피하는 것이다.
위 사진에서 영어로 쓰인 버튼은 정상적으로 보이지만, 이를 그리스어로 번역하면 문자가 더 길어지기 때문에 동시에 전체 window도 함께 커진다.
이 문제점은 stacks나 greater than or equal to constraints로 바꿔주면 해결할 수 있다.
3. Allow multiple lines of wrapped text
세 번째는 텍스트를 한 줄이 아닌 여러 줄로 허용하는 것이다. (wrapped text)
만약 위의 사진처럼 특정 언어로 번역 시 문장이 길어지면 생략 부호와 함께 한 줄로 나타난다.
하지만 number of lines를 0으로 설정한다면 텍스트를 적절히 여러 줄로 wrap 할 수 있다.
4. Do not place too many controls in a fixed space
마지막은 너무 많은 버튼이나 레이블 등을 고정된 장소에 배치하지 않는 것이다.
위 사진처럼 double string mode에서는 텍스트들이 더 이상 single line에 맞지 않고, truncating(문자 길이 줄이기) 되지 않는다.
이를 해결하기 위해 Xcode에서는 여러 유용한 tools를 제공한다.
1. Document Preview
Xcode에서 Document Preview를 활성화시키면 빌드하지 않고 실제 기기에서의 화면을 빠르게 확인할 수 있다.
우측 하단에서 언어를 설정할 수 있는데, Double-Length Psedolanguage를 선택한다.
그러면 앱을 localize 할 때 UI가 어떻게 보이는지 미리 확인할 수 있다.
그러나 현재 화면에서의 레이블은 텍스트가 한 줄로만 보인다.
레이블을 선택 후 Attributes inspector에서 Lines를 0으로 조절해주면 위 사진과 같이 두 줄로 wrap 되는 것을 확인할 수 있다.
이제 레이블을 클릭하고 Identity inspector에서 Localizer Hint에 도움이 될 만한 코멘트를 작성한다.
이렇게 레이블의 레이아웃은 모두 잘 구성되었다. 그러나 버튼은 아직 그대로인데, 이를 해결하기 위해 버튼들의 레이아웃을 수평에서 수직으로 변경해준다. 버튼이 가로로 여러 개 위치해 있어 자리가 모자라기 때문이다.
이는 버튼들을 horizontal stack view에 넣음으로써 가능해진다.
버튼들의 Stack View를 미리 만들어둔 ReadjustingStackView 커스텀 클래스와 연결하고, Constraints의 Readjusting Leading을 Stack View와 연결한다.
ReadjustingStackView는 본 글 맨 위의 링크에서 프로젝트 파일을 다운받아 사용할 수 있다.
이건 code change이기 때문에 효과를 preview에서 확인할 수 없으므로, 빌드 후 앱을 실행하여 확인한다.
영어로 실행한 결과, Interface Builder에서 정의한 것들에서 변경이 되지 않을 것을 확인할 수 있다.
2. Scheme Options
이제 Scheme Editor의 Options에서 App Language를 Double-Length Pseudolanguage로 변경한다.
그리고 다시 앱을 실행하면 다음과 같은 결과가 나온다.
레이블들이 모두 우리가 만든 대로 wrap 되었고, stack view가 수평에서 수직으로 변경되었다.
언어를 다시 영어로 바뀐 뒤 아이폰 SE로 앱을 실행하면 다음과 같은 결과가 나온다.
수직 view가 아닌 수평 view로 버튼이 정렬되는 것을 확인할 수 있다.
3. Dynamic Type Settings
따라서 Developer Tool의 Accessibility Inspector의 설정에서 Dynamic type을 조절하여 우리가 원하던 수직 view로 변경할 수 있다.
이는 Xcode의 Environment Overrides에서도 똑같이 설정할 수 있다.
지금까지 보았듯 Xcode에서는 우리의 앱을 다른 언어에서도 쉽게 테스트할 수 있게 해주는 tool들을 제공한다.
1. Document Preview : 앱을 빌드하고 실행하지 않고 UI를 확인할 수 있다.
2. Scheme Options : 특정 언어들로 앱을 직접 실행해볼 수 있다.
3. Dynamic Type Settings : Dynamic Type 설정을 빠르게 바꾸면서 앱에 잘 적용되는지 확인할 수 있다.
위의 세 가지 툴들 외에도 부가적인 유용한 툴들이 있는데 macOS 앱을 통해 살펴보자.
4. Auto Layout fix-its
좌측 상단의 document sidebar에서 경고 아이콘이 보인다.
아이콘을 클릭하면 몇 가지 constraints가 빠졌다는 localization issues들을 확인할 수 있다.
Document Preview를 설정한다.
언어를 Double-Length Pseudolanguage로 변경해보면 긴 텍스트에 반응하지 못하는 것을 확인할 수 있다.
앱을 빌드 후 실행해보면 아랍어에서 UI가 뒤집히지 않는다.
Canvas의 우측 하단에서 Auto Layout Options을 열어보면 Add Missing Constraints 기능이 있다.
클릭하면 이제 모든 controls들은 constraints를 갖는다. 하지만 아직 몇 가지 localization 경고가 뜬다.
Fixed width는 필요가 없지만, 버튼이 content size보다 약간 커졌기 때문에 추가되었다. 따라서 노란 삼각형을 눌러 Remove Constraint fix-it을 선택한다.
다음은 OK 버튼이다. 어떤 언어에서는 OK가 더 길 수 있다. 그러나 영어 같은 언어에서는 OK는 매우 짧지만 OK 버튼만 매우 작아서는 안 된다. fix-it 기능은 해당 문제를 해결하는 옵션을 제공한다. 바로 'Set Constraint to Greather Than Or Equal To A Minimum Width'를 선택하면 된다.
계속해서, Cancel 버튼과 Publish 버튼은 서로 멀어지면 안 된다. 따라서 Trailing constraint is missing이라는 경고문에서 'Fixed Leading and Resizing Trailing Constraints' 옵션을 선택한다.
이제 모든 문제가 해결되었기 때문에 canvas 우측 하단의 update frames 버튼을 누른다.
그럼 이제 단 3개의 Localization Issue만이 남았다.
5. Embed in
이미지뷰와 레이블 등의 레이아웃을 구성에 맞게 잡아준 뒤, 모든 텍스트 필드와 체크박스를 선택 후 우측 하단의 Embed-in을 클릭하여 Grid View에 넣어준다.
이제 controls의 레이아웃은 Grid View에 의해 관리된다. Grid View의 top, leading, trailing edges, bottom space에 알맞은 constraints를 적용한다.
OK 버튼은 Grid View에 control-click으로 드래그한 뒤 trailing을 선택한다.
Grid View 안의 cell들을 구성에 맞게 서로 정렬하고 합쳐준다.
이제 Document Preview를 열어 다양한 언어로 확인한다.
모두 완벽하게 localization 되었다.
부가적인 툴들을 정리하면 다음과 같다.
4. Auto Layout fix-its : 오토 레이아웃을 사용할 때 sub-optimal이나 빠진 constraints 같은 문제들을 해결한다.
5. Embed in : Stack View나 Grid View 같은 컨테이너 뷰들을 적용하고, 자동으로 올바른 constraints를 제공한다.
'iOS 개발 > WWDC' 카테고리의 다른 글
| [iOS] Xcode13에서 디버깅하기 (0) | 2021.10.09 |
|---|---|
| [iOS] iOS15에서 새로워진 UIKit button 알아보기 (0) | 2021.10.03 |
