RTL

서비스 국가에 따라 텍스트 또는 UI배치가 좌우 반전이 되야할 때도 있다.

 

아랍문화권의 국가는 글을 작성할 때 좌에서 우로(Left-to-Right) 작성하는 것이 아닌 우에서 좌로(Right-to-Left) 작성하는데 

 

이에 따라 앱에서도 좌우반전을 시켜줘야 하는것이다. 해당 국가로 서비스를 하려면 당연히..!

 

우리나라도 100년 전까지만 해도 RTL방식으로 글을 작성하고 있었다고 한다.

 

https://hyperconnect.github.io/2020/05/30/MENA-service-cautions-part1.html

MENA(중동 및 북아프리카) 지역 서비스 개발 시 고려해야 할 문화 차이

 

위 링크의 내용중 첨부된 그림을 보면

 

 

독립신문 창간호

 

글자가 우측에서 부터 왼쪽으로 읽어야 문장이 완성이 되는것을 볼 수 있다.

광복 이후 대한민국에 큰 영향을 끼친 미국의 영향으로 인해 현대 대한민국의 대부분 표준이 미국에서 채용되었다고 한다.

 

서론은 이쯤 하고 ,

IB에서 쉽게 해결해보자.

 

 

 

 

그림과 같이 스토리보드를 이용해 UILabel과 UIStack뷰를 올리고 그 안에 순서대로 1,2,3이 표시되게끔 하였다.

 

"안녕하세요." 라고 적혀 있는 Label에 RTL을 적용하려면 Label을 선택하고 Inspector 영역의 Sematic을 변경해주면 된다.

 

 

 

Default는 Unspecified인데 메뉴를 선택해서 펼쳐보면

 

 

 

Force Right-to-Left 메뉴가 나온다.

이 설정을 주게 되면 강제로 RTL을 적용시키는 것이다. 

휴대폰 언어설정이 아랍이면 강제로 해줄 필요 없이 자동으로 설정이 되긴하지만, 현재 IB상태에서 바로 변경된 UI를 보려면 이 방법을 써야한다.

 

 

 

 

 

 

 

 

UIStackView은 SubView로 붙여진 요소들의 배치 순서가 반전이 되면 된다.

1,2,3 -> 3,2,1 의 순서로 나오면 되는데 이 또한 UIStackView를 선택하고 Semantic 설정을 Force Right-to-Left로 설정 해주면 반전되는것을 볼 수 있다.

 

 

 

코드로 위와 같은 결과물을 보려면 아래와 같이 UIView 속성인 semanticContentAttribute를 사용하면 된다.

 

 

 

---

이런 설정들은 자주 사용할 일이 없는 설정인것 같다. 그래서 그런지 사용사례 검색을 해도 짤막한 설명들이 대부분이고 자세히 나와있는 페이지를 찾지 못했다.

 

일단 RTL방식으로 글이 표시되어야 한다면 앱의 UI설계 단계부터 세밀하게 체크해야할 부분들이 많은것으로 보인다. 이 게시물에는 Label, UIStackView만 사용했지만 입력을 받아야하는 TextField도 적용되야할 내용으로 보인다.

 

일반적인 AutoLayout제약으로는 RTL을 커버할 수 없다. 좌우 반전을 발생시킬수 있는 Semantic옵션이 정상적으로 동작해야하는데 아직까지는 UIStackView가 이것에 가장 적합한 UI로 보인다.

 

Object들의 배치를 적용하기 전에 UIStackView를 활용하여 배치할 수 있도록 보는눈을 기르는게 좋을것같다.