RTL은 오른쪽에서 왼쪽(right to left)을 의미합니다. 전 세계에서 RTL 텍스트 방향을 사용하는 언어는 소수에 불과하지만, 10억 명 이상의 사람들이 이 언어들을 사용합니다. 테마에 RTL 지원을 추가하는 것은 간단하며 시장을 크게 넓힐 수 있습니다.
다음은 RTL 방향과 LTR(일반) 방향의 두 페이지입니다:
| 영어 – LTR | 히브리어 – RTL |
|---|---|
 |
 |
RTL 페이지의 모든 요소가 가로로 “뒤집혀” 나타나는 것을 볼 수 있습니다. 마치 “일반적인” LTR 페이지를 거울을 통해 보는 것과 같습니다. 이러한 거울 이미지를 만드는 것은 사실 꽤 쉽습니다. CSS의 ‘dir’ 방향 속성이 대부분의 작업을 수행하므로 몇 군데만 수정하면 됩니다.
RTL 언어용 다른 CSS 파일 로드
WordPress는 어떤 언어가 RTL 흐름을 가지는지 알고 있으므로 레이아웃을 쉽게 사용자 정의할 수 있습니다. 새 rtl.css 파일을 생성하여 테마의 루트 디렉토리에 넣으세요.
WordPress는 일반적인 styles.css를 로드한 후 rtl.css 파일을 로드하므로, RTL CSS 파일은 변경해야 할 속성만 재정의하면 됩니다. 즉, 대부분의 테마에서 rtl.css 파일의 크기는 보통 꽤 작습니다.
페이지 방향을 RTL로 설정
CSS의 ‘direction’ 속성은 브라우저에 페이지의 방향을 알려줍니다. RTL 언어의 경우 이를 ‘rtl’로 설정해야 합니다. 올바른 RTL 표시를 위해 설정해야 하는 또 다른 “마법의” 속성이 있습니다. 바로 ‘unicode-bidi’입니다. 이 “마법의” 속성은 RTL 작성에 익숙하다면 이해하기 매우 쉽습니다. 이 속성은 줄 안에서 문자가 표시되는 방식을 제어합니다.
올바른 RTL 표시를 위해 .body 선택자에 다음을 추가하세요:
{
direction:rtl;
unicode-bidi:embed;
}
이제 끝났습니다! 테마가 이제 RTL로 표시됩니다. 거의 완료되었습니다. 이 두 구문만으로도 페이지의 대부분이 올바르게 보일 것입니다. 이제 예외 사항을 처리해야 합니다.
텍스트 방향, float 및 clear 뒤집기
CSS에서 텍스트 방향과 float 요소를 설정한 모든 곳은 수동으로 확인해야 합니다.
text-align, float 및 clear에 대한 모든 선택자를 찾으세요. 이 중 방향을 지정하는 항목이 있다면 ‘right’를 ‘left’로, 또는 그 반대로 뒤집으세요. 우리가 구현하려는 거울 이미지를 기억하면 이 변환을 더 쉽게 이해할 수 있습니다.
방향을 암시하는 그래픽
주의해야 할 또 다른 사항은 “방향”의 의미가 있는 그래픽입니다. 예를 들어 슬라이드쇼를 만드는 경우 다음 및 이전 항목에 대한 화살표가 있을 수 있습니다. RTL 언어에서는 사이트가 거울을 통해 나타나므로 방향 그래픽도 뒤집어야 한다는 점을 기억하세요. LTR에서 “다음”을 의미하는 오른쪽 화살표를 사용한다면, RTL에서는 “다음”을 의미하는 왼쪽 화살표를 제공해야 합니다.
사용자 정의 글꼴 선택
RTL 언어는 LTR 언어와 동일한 글꼴을 사용하지 않습니다. 화려한 글꼴을 사용하고 테마의 레이아웃이 해당 글꼴에 의존하는 경우, 이러한 언어에 대한 대체 글꼴을 찾아야 합니다. RTL 언어에 존재하지 않는 글꼴을 선택하면 브라우저는 자체적으로 알고 있는 기본 글꼴로 되돌아갑니다. 마음에 드는 기존 대체 글꼴을 지정하는 것이 좋습니다.
표준 웹 글꼴을 사용한다면 괜찮습니다.
RTL에서 테마를 테스트하는 방법
RTL CSS 파일을 개발할 때는 항상 작업 중인 내용을 테스트하는 것이 좋습니다.
- wp-config.php 파일에서 언어를 해당 언어로 변경하세요. WPML을 사용하는 경우 사이트에 RTL 언어를 추가하기만 하면 됩니다.
RTL 언어 추가 - 테마의 하드코딩된 텍스트(최소한 프런트엔드에 있는 텍스트)를 해당 언어로 번역하세요. WPML에서는 문자열 번역 모듈을 사용하여 이 작업을 수행할 수 있습니다.
테마 텍스트 번역 - 해당 언어로 된 샘플 콘텐츠를 준비하세요. WordPress 관리 화면에서 RTL로 쉽게 편집하려면 프로필로 이동하여 관리자 언어 설정으로 스크롤한 다음, 언어를 편집 언어와 동일하게 설정하세요.
RTL 모드에서 콘텐츠 편집
RTL 언어를 모르시나요? 그냥 Google 번역을 사용하세요. 번역 결과가 대부분 말이 안 되겠지만, CSS 개발 목적이라면 괜찮습니다.
이제 사이트의 다양한 콘텐츠 유형을 살펴보세요. 글, 페이지, 홈페이지 및 생성한 모든 사용자 정의 콘텐츠를 반드시 포함하세요.
최상의 결과를 얻으려면 해당 언어를 구사하는 사람을 찾아 정상 작동 여부를 확인해 달라고 요청하세요. RTL 언어를 구사하는 친구가 놓치기 쉬운 나머지 5%의 문제를 찾아낼 것입니다. 이는 “있으면 좋은” 정도이므로, 테스트를 도와줄 사람을 모른다고 해서 RTL 지원 작업을 중단하지는 마세요. 테마의 RTL 지원 버전을 출시하자마자 고객사로부터 많은 피드백을 받게 될 것입니다. 여러분이 95%의 노력을 기울인다면, 그들은 나머지 5%를 수정하는 데 기꺼이 기여할 것입니다.
보너스 자료 – RTL 언어로 된 테마 관리 화면
RTL 호환 테마의 기본 요구 사항은 프런트엔드(공개 콘텐츠)가 RTL 언어에서 올바르게 표시되는 것입니다. 이것은 가장 기본적인 사항으로, 이것이 없으면 아무도 여러분의 테마를 사용하여 RTL 언어로 사이트를 구축할 수 없습니다.
이 외에도 많은 사용자가 WordPress 관리 화면을 자신의 언어로 사용하고 싶어 할 것입니다. 이는 테마의 관리 화면도 RTL 방향으로 본다는 것을 의미합니다.
테마 관리 화면에서 이러한 RTL 호환성을 쉽게 달성하는 방법은 GUI 요소에 표준 WordPress CSS 클래스를 사용하는 것입니다. 물론 이 경우 화려한 CSS 효과를 사용하여 GUI를 꾸밀 수는 없습니다. 하지만 이는 GUI가 WordPress 관리 화면에 완벽하게 어우러지며 LTR/RTL에서 올바르게 표시된다는 것을 의미하기도 합니다.
관리 화면에 사용자 정의 CSS를 사용해야 한다면 RTL 언어에서 어떻게 보이는지 확인하세요. 프런트엔드 CSS에 따르는 동일한 규칙이 백엔드에도 적용됩니다. align, float 및 clear를 뒤집고 절대 위치 지정을 피하며 이미지에 주의하세요.
훌륭한 참고 자료 – 기본 WordPress 테마
참고로 기본 WordPress 테마는 모두 RTL 언어에 완벽하게 적응되어 있습니다. 기본 테마를 열고 rtl.css 파일을 찾아보세요. 기본 테마의 CSS에 어떤 변경 사항이 적용되었는지 확인할 수 있습니다. 보통 이러한 변경 사항은 꽤 작고 따라 하기 쉽습니다.