더 나은 RTL (오른쪽에서 왼쪽) 웹 디자인을 위한 7가지 전문가 팁

오른쪽에서 왼쪽(RTL) 언어를 사용하는 웹사이트 방문자를 타겟팅하시나요?

그런 다음 웹사이트를 이러한 언어로 번역해야 할 뿐만 아니라 RTL 형식에 맞게 디자인도 조정해야 합니다. 말할 필요도 없이 이러한 작업은 표준 LTR(왼쪽에서 오른쪽으로) 번역 프로젝트보다 더 큰 도전이 될 것입니다.

적절한 RTL 서식에는 미묘한 차이가 있기 때문입니다. 우선, 모든 텍스트를 강조 표시하고 오른쪽 맞춤 아이콘을 선택하여 텍스트를 오른쪽으로 정렬한 다음 하루를 끝낼 수는 없습니다. 일부 요소는 뒤집어야 하는(또는 "미러링") 요소도 있지만 그렇지 않은 요소도 있습니다. RTL 언어를 모국어로 사용하는 사람이라면 누구나 오류를 즉시 발견할 수 있습니다. 좋은 인상을 남기는 최선의 방법은 아닙니다.

그 외에도 검색 엔진이 RTL 언어 사용자에게 RTL 웹 페이지를 제공하도록 지원하여 양질의 오가닉 트래픽(및 전환)을 확보할 수 있습니다.

RTL 언어를 사용하는 고객을 위해 웹사이트를 가장 효율적인 방식으로 최적화하는 데 도움이 되는 7가지 전문가 팁을 계속 읽어보세요.

RTL 웹 디자인이란 무엇인가요?

RTL은 '오른쪽에서 왼쪽'의 줄임말로, 페이지의 오른쪽에서 왼쪽으로 스크립트가 작성되는 언어를 말합니다. RTL 언어에는 다음이 포함됩니다:

• 우르두어
• 히브리어
• 페르시아어
• 아랍어

주류 웹 디자인 관행은 주로 LTR 언어에 맞춰져 있습니다. 따라서 RTL 언어 콘텐츠로 웹사이트를 디자인하는 경우 RTL 웹 디자인, 즉 RTL 언어 콘텐츠에 대한 쾌적한 보기 환경을 제공하는 웹 디자인 관행을 사용해야 합니다.

예를 들어 제목, 버튼 및 기타 페이지 요소를 오른쪽에서 왼쪽으로 표시하려면 미러링이 필요할 수 있습니다. "미러링"에는 다음이 포함될 수 있습니다:

• 텍스트를 왼쪽에서 오른쪽이 아닌 오른쪽에서 왼쪽으로 정렬합니다.
• 요소를 가로로 뒤집는 것(예: 앞으로 화살표를 기존의 LTR 모양인 "→" 대신 "←"로 표시하는 것).

(미러링에 대해서는 나중에 자세히 설명합니다!)

RTL 웹사이트의 장점은 무엇인가요?

RTL 웹사이트를 운영하면 RTL 언어로 소통하는 웹사이트 방문자의 요구를 충족시킬 수 있습니다. 이는 전 세계 웹사이트 방문자 중 적지 않은 비중을 차지하며 시간이 지날수록 그 수가 증가하고 있습니다.

예를 들어, Statista가 조사한 온라인 플랫폼 판매자들은 2020년에 이커머스 활동이 평균 26% 증가했다고 답한 아랍에미리트연합(UAE)을 살펴보십시오. 아랍어는 아랍에미리트의 공식 언어이자 RTL 언어이므로 아랍에미리트 시장을 노린다면 웹사이트를 RTL 형식으로 표시하는 것이 좋습니다.

그런 다음 RTL 지원을 염두에 두고 웹사이트를 디자인하면 성공할 수 있습니다:

• 브랜드에 대한 고객의 호감도를 높이세요: 누구나 RTL 언어 사용자에게 제품과 서비스를 제공할 수 있지만, 누구나 고객을 호감으로 만들 수는 없습니다. 웹사이트에 RTL 디자인을 통합하고 웹사이트 콘텐츠를 번역 및 로컬라이즈하면 RTL 언어 사용자가 귀사의 제품과 혜택을 이해하도록 도울 수 있습니다. 시간이 지남에 따라 이들은 브랜드를 신뢰하고 후원할 가치가 있는 평판이 좋은 브랜드로 간주할 수 있습니다.
• 더 많은 전환을 경험하세요: RTL 언어를 사용하는 타겟 고객이 판매 제품을 이해하고, 브랜드를 좋아하고 신뢰하며, RTL 웹사이트에서 원활한 사용자 경험을 할 수 있다면 제품과 서비스를 구매할 가능성이 높아집니다.
• 검색 엔진 순위 향상: 검색 엔진은 검색자의 요구에 가장 적합한 콘텐츠를 제공하기 위해 노력합니다. 검색 엔진은 RTL 언어로 제공되는 콘텐츠가 있는 웹사이트가 LTR 언어로 제공되는 다른 웹사이트보다 RTL 언어 사용자에게 더 관련성이 높다고 판단하여 RTL 콘텐츠가 있는 웹사이트의 순위를 더 높게 매길 수 있습니다.

더 나은 RTL 웹 디자인을 위한 7가지 팁

RTL 웹 개발 및 디자인을 수행하려면 이를 올바르게 수행하기 위한 몇 가지 전문가 팁을 알고 싶을 것입니다. 이 글에서는 한두 가지가 아니라 일곱 가지 팁을 공유해 드리겠습니다!

그런 다음 이 팁을 Weglot. 당사의 웹 사이트 번역 솔루션은 번역 측면을 처리할 뿐만 아니라 웹 사이트에 대한 RTL 웹 디자인을 구현할 때 최상의 결과를 얻을 수 있도록 도와줍니다.

1. 미러링 이해 및 미러링이 필요한 경우

앞서 언급했듯이 미러링은 LTR 웹사이트를 RTL 형식으로 변환하는 데 필수적인 요소입니다. 단어, 제목, 아이콘, 버튼과 같은 페이지 요소를 가로로 뒤집어 오른쪽에서 왼쪽으로 읽을 수 있도록 하는 작업이 포함됩니다.

미러링할 수 있는 요소는 다음과 같습니다:

• 뒤로 가기 버튼이나 화살표, 차트 및 그래프와 같이 특정 방향을 가리키거나 움직임을 나타내는 아이콘입니다.
• 탐색 버튼과 로고는 일반적으로 LTR 웹사이트의 왼쪽 상단에 표시됩니다. RTL 웹 디자인을 위해서는 오른쪽 상단으로 이동해야 합니다. (단, 로고 자체는 가로로 뒤집어서는 안 됩니다).
• 양식 제목은 일반적으로 양식 필드의 왼쪽 상단에 표시되며, 대신 오른쪽 상단에 정렬해야 합니다.
• 맨 오른쪽에 요일의 첫 번째 요일을, 맨 왼쪽에 요일의 마지막 요일을 표시하는 달력 열입니다.
• 테이블 열.

하지만 모든 LTR 언어 요소를 RTL에 미러링해야 하는 것은 아닙니다. 미러링할 필요가 없는 요소의 예는 다음과 같습니다:

• '다운로드' 버튼이나 휴지통 아이콘과 같이 특정 방향이 없는 아이콘.
• 로마 알파벳 및 구두점과 같은 외국어 텍스트가 있는 아이콘 (대신 현지화해야 함).
• 비디오 및 오디오 플레이어 컨트롤.
• 날짜는 표준 국제 날짜 형식인 "YYYY-MM-DD"로 표시됩니다.
• "구글" 또는 "크리넥스"와 같이 RTL 텍스트에 의도적으로 포함된 LTR 언어 단어입니다.
• 숫자 (및 숫자 순서)를 입력합니다.

2. RTL 웹 디자인의 문화적 측면 고려하기

정확한 RTL 웹 디자인에는 단순히 아이콘과 텍스트를 뒤집는 것 이상의 의미가 있습니다. 우선, 서구 문화에 존재하는 특정 개념은 RTL 언어를 사용하는 사회의 문화에 잘 번역되지 않습니다. 웹사이트 텍스트나 그래픽에 이러한 개념이나 이미지가 포함되어 있다면 문화적으로 더 적합한 대안으로 대체하세요.

예를 들어, 무슬림이 다수인 국가에서 주로 사용되는 아랍어로 웹사이트를 제작하는 경우 돼지 저금통 이미지를 표시하는 것은 부적절해 보일 수 있습니다. 이슬람에서 돼지는 부정한 동물로 간주되기 때문입니다. 따라서 예를 들어 돼지 저금통 이미지를 표시하여 돈을 용기에 저장한다는 아이디어를 전달하는 대신 문화적으로 중립적인 동전 항아리 이미지로 대체할 수 있습니다.

또한 아랍어는 모든 아랍 국가에서 동일한 방식으로 표기되거나 표시되지 않는다는 점에 유의하세요. 숫자를 예로 들면, 일부 국가에서는 서양 아라비아 숫자(서양에서 일반적으로 사용되는 0~9 숫자)를 사용합니다. 반면에 다른 국가에서는 동양 아라비아 숫자를 사용합니다. 따라서 RTL 웹사이트를 디자인할 때는 일반적인 RTL 언어뿐만 아니라 특정 대상 국가의 문화에 맞게 콘텐츠를 로컬라이즈해야 합니다!

3. 적절한 글꼴 사용

모든 글꼴이 RTL 언어와 호환되는 것은 아니며 특정 RTL 언어 문자를 렌더링할 수 없는 경우 '두부'로 알려진 세로 흰색 직사각형이 표시될 수 있습니다. 이러한 상황을 방지하려면 여러 언어(RTL 언어 포함)를 지원하도록 설계된 다국어 글꼴을 사용하세요. Google Noto는 일반적으로 사용되는 다국어 글꼴 중 하나입니다.

또는 서로 다른 글꼴로 언어를 표시하도록 웹사이트를 설정할 수도 있습니다. 영어 콘텐츠는 한 글꼴로 표시하고 RTL 언어 콘텐츠는 해당 문자 체계에 특화된 다른 글꼴로 표시할 수 있습니다.

또한 다른 언어에서는 영어와 같은 방식으로 텍스트를 굵게 표시하거나 이탤릭체로 표시하지 않을 수 있다는 점에 유의하세요. 약어도 사용할 수 없습니다. 따라서 RTL 콘텐츠에 적합한 글꼴을 선택한 후에는 콘텐츠가 적절하게 표시되고 형식이 지정되었는지 확인하세요. 또한 RTL 웹사이트 텍스트의 가독성을 테스트하고 필요에 따라 글꼴 크기와 줄 높이를 조정해야 합니다.

4. Hreflang 태그 구현

Hreflang 태그는 특정 언어 및 지역 설정이 있는 사용자에게 웹 페이지의 어떤 언어 버전을 표시해야 하는지 검색 엔진에 알려주는 HTML 코드 스니펫입니다. 웹페이지의 언어 버전이 지역별로 다른 경우 웹사이트에 이를 구현하는 것이 좋습니다. 그런 다음 hreflang 태그가 올바르게 구현되었는지 확인해야 합니다.

예를 들어 미국 영어 사용자를 위한 URL이 "http://www.example.com/us/"인 웹 페이지가 있는 경우 해당 페이지에 이 hreflang 태그가 포함되어야 합니다:

<link rel=“alternate” hreflang=“en-us” href=“http://www.example.com/us/” />

또한 이집트에서 아랍어를 사용하는 사용자를 위해 동일한 웹 페이지의 아랍어 버전에 "http://www.example.com/ar/" URL이 있는 경우 해당 페이지에 이 hreflang 태그가 포함되어야 합니다:

<link rel=“alternate” hreflang=“ar-eg” href=“http://www.example.com/eg/” />

Hreflang 태그는 수동으로 구현하는 것이 지루할 수 있지만, 웹 사이트 콘텐츠를 번역하는 데 사용하는 경우 Weglot 웹 페이지에 자동으로 hreflang 태그를 추가합니다.

5. 링크 서식을 확인하세요!

특정 문자 아래에 점이 있는 아랍어 문자의 경우, 일반적으로 영어 하이퍼링크에 밑줄을 긋는 것처럼 하이퍼링크에 밑줄을 긋는 것은 점의 가시성을 떨어뜨릴 수 있습니다. 이는 결국 텍스트의 가독성에 영향을 미치므로 하이퍼링크를 일반 텍스트와 다른 방식으로 구분해야 합니다.

예를 들어 하이퍼링크된 텍스트 아래에 반투명 상자 그림자를 표시하는 사용자 정의 CSS(Cascading Style Sheets) 규칙을 작성할 수 있습니다. CSS를 사용하여 브라우저에서 중앙 부분 아래에 점이 있는 아랍어 알파벳의 밑줄을 생략하도록 할 수도 있습니다.

6. 웹사이트 번역 프로세스 자동화 고려하기

LTR 웹사이트를 RTL 형식으로 변환할 때 (LTR) 웹사이트 콘텐츠도 번역해야 할 수 있습니다. 이러한 콘텐츠를 수동으로 번역하는 것도 한 가지 방법이지만 시간이 많이 소요될 수 있습니다.

더 빠르고 효율적인 접근 방식은 Weglot 같은 솔루션을 사용하여 웹사이트 번역 프로세스를 자동화하는 것입니다. 웹사이트에 Weglot 추가하면 자동 워크플로우가 시작되어 모든 웹사이트 콘텐츠를 식별합니다. 그런 다음 기계 학습 기술을 사용하여 이러한 콘텐츠를 지정된 RTL 언어로 즉시 번역합니다.

Weglot 웹사이트에 추가하는 모든 새 콘텐츠를 자동으로 감지하여 번역하므로 웹 페이지의 번역 버전을 즉시 생성하는 데 유용합니다. 일관된 LTR에서 RTL 언어 번역을 위해 Weglot 내에서 용어집 규칙을 설정하여 특정 단어는 항상 특정 방식으로 번역하고 다른 단어는 번역하지 않도록 할 수도 있습니다.

7. 웹사이트를 출시하기 전에 철저히 테스트하기

다른 웹사이트 수정과 마찬가지로 공개적으로 액세스할 수 있도록 하기 전에 RTL 웹사이트에 대한 철저한 테스트를 수행하세요. 할 수 있습니다:

• 원어민과 로컬라이제이션 전문가가 가독성과 문법 정확성을 위해 RTL 웹사이트 콘텐츠를 검토합니다.
• 크롬, 파이어폭스 및 기타 인기 웹사이트 브라우저에서 웹사이트가 어떻게 렌더링되는지 확인하세요.
• 데스크톱 및 모바일 디바이스 (iOS 및 Android 디바이스 모두 포함)에서 웹사이트의 접근성을 테스트합니다.

테스트에서 문제가 발생하면 RTL 웹사이트를 라이브로 만들기 전에 문제를 해결하세요!

Weglot RTL 웹 디자인에 어떤 도움을 줄 수 있나요?

앞서 언급했듯이 Weglot 텍스트의 고품질 RTL 번역을 신속하게 얻을 수 있는 편리한 솔루션을 제공합니다. 하지만 웹 사이트 콘텐츠를 RTL 언어로 대규모로 번역하는 것 이상을 도와드릴 수 있습니다!

Weglot 사용하면 이렇게 할 수도 있습니다:

• 사용자 지정 CSS 규칙을 추가하여 브랜드의 필요에 따라 RTL 웹사이트 콘텐츠의 표시를 맞춤 설정할 수 있습니다.
• 웹사이트 콘텐츠의 주요 부분에 대해 Weglot 대시보드에서 전문 번역을 주문하세요 .
• 검색 엔진이 검색자에게 적합한 언어 버전의 웹페이지를 제공할 수 있도록 hreflang 태그를 자동으로 구현합니다.
• Weglot내장된 미디어 번역 기능으로 이미지, 동영상 및 기타 미디어를 적절하게 대체할 수 있습니다.
• 동일한 목적으로 여러 플랫폼에 로그인하는 대신 중앙 Weglot 대시보드에서 모든 텍스트 및 미디어 번역을 관리하세요.

Weglot Rtl 웹 디자인 및 개발 번역 및 로컬라이제이션 시작하기

RTL 언어를 주로 사용하는 국가의 웹사이트 방문자를 타겟팅할 계획이라면 웹사이트에 RTL 지원을 추가하는 것이 필수입니다. 콘텐츠 번역 및 로컬라이제이션은 프로세스의 큰 부분을 차지하지만 성공적인 RTL 웹 디자인에는 그 이상의 것이 있습니다. 필요한 페이지 요소를 미러링하고, 현지화된 콘텐츠를 적절한 글꼴로 표시하고, 흐레플랑 태그를 구현하는 등의 작업도 포함됩니다.

따라서 Weglot RTL 웹 개발 및 디자인을 수행하는 데 유용한 도구입니다. 여기에는 웹 사이트 콘텐츠의 고품질 RTL 번역을 얻고, 미디어를 번역하고, 각 대상 고객에 맞게 웹 사이트 흐레플랑 태그를 구현하는 데 필요한 기능이 포함되어 있습니다. 또한 사용자 지정 CSS 규칙을 추가하여 RTL 웹사이트의 모양을 완벽하게 미세 조정할 수 있습니다.

Weglot 실제로 작동하는지 확인하는 가장 좋은 방법은 웹사이트에서 14일 동안 체험해 보는 것이며, 여기에서 계정을 생성하면 무료로 체험해 볼 수 있습니다.