2011년 9월 11일 일요일
세계 시장에 진출하려면 웹사이트도 세계화해야 합니다. 텍스트를 번역하기만 하면 간단하게 해결될까요? 그렇지 않을 가능성이 높습니다. Google 웹마스터팀은 흔히 40개 이상의 언어로 현지화된 사이트를 구축합니다. 저희가 사이트 페이지를 다른 지역에서 다른 언어로 공개할 때 고려하는 사항을 소개합니다.
(콘텐츠를 영어로만 제공하므로 이러한 문제와는 관계가 없다고 생각하실 수 있습니다. 그러나 비영어권 방문자가 Google 번역과 같은 도구를 사용하여 모국어로 콘텐츠를 볼 수도 있습니다. 이런 트래픽이 애널리틱스 대시보드에 표시되므로 얼마나 많은 방문자가 사이트를 제작 의도와 다른 방식으로 보고 있는지 파악할 수 있습니다.)
더 많은 언어 = 더 많은 HTML 템플릿
가장 중요한 권장사항입니다. 모든 언어 버전에 같은 템플릿을 반복해서 사용하고 템플릿의 HTML을 항상 간결하게 유지하려고 노력하세요.
모든 언어에서 동일한 HTML 코드를 사용하면 유지보수 측면에서 유리합니다. 버그를 수정하기 위해 언어별로 HTML 코드를 조작하는 방법은 활용 폭이 좁습니다. 페이지 코드를 최대한 깔끔하게 유지하고 스타일 문제가 있으면 CSS로 처리하세요. 깔끔한 코드의 이점 한 가지를 말씀드리자면, 번역 도구는 대부분 HTML 문서에서 번역 가능한 콘텐츠 문자열을 파싱하는데 HTML이 잘 구조화되고 유효한 상태라면 파싱 작업이 훨씬 쉬워집니다.
한 줄의 길이는 얼마나 되나요?
고정 크기 요소로 멋지게 재생되는 텍스트를 디자인에 사용한 경우, 텍스트를 번역하면 혼란이 발생할 수 있습니다. 예를 들어 왼쪽에 표시되는 탐색 메뉴 텍스트를 여러 언어로 번역하면 길이가 훨씬 길어질 수 있습니다. 같은 콘텐츠의 영어와 네덜란드어 탐색 메뉴를 비교해서 문자열의 길이 차이를 확인해 보세요. 두 줄 이상으로 줄바꿈될 수 있는 탐색 메뉴 제목은 긴 문자열이 들어갈 수 있는지 줄 높이를 파악하여 미리 대비하세요. 탐색 메뉴 텍스트를 영어로 작성할 때 처음부터 고려하는 것도 좋습니다.
단어 길이가 가변형이면 양식 라벨과 컨트롤에서 특정 문제를 일으킵니다. 예를 들어 양식 레이아웃에서 라벨을 왼쪽에 표시하고 필드를 오른쪽에 표시하는 경우 긴 텍스트 문자열은 두 줄로 줄바꿈될 수 있지만 짧은 텍스트 문자열은 양식 입력란과 연결되지 않은 것처럼 보입니다. 두 시나리오 모두 디자인이 손상되고 양식의 가독성이 떨어집니다. 오른쪽에서 왼쪽으로 표시되는(RTL) 레이아웃에 필요한 추가 스타일도 고려하세요(나중에 자세히 다룸). 이러한 이유로 Google에서는 여러 언어로 번역되어도 문제가 없도록 필드 위에 라벨이 오게 양식을 디자인하여 가독성을 높이고 스타일을 적용하기 쉽게 만듭니다.
고정 높이 열도 사용하면 안 됩니다. 높이가 일치하는 상자 배경으로 레이아웃을 정리하려고 하는 경우, 텍스트가 번역되면 영어 콘텐츠가 들어갈 정도의 높이로 된 영역을 벗어날 가능성이 있습니다. 디자인에 사용하려는 UI 요소가 텍스트가 많거나 적을 때(예: 가로 탭과 세로 탭)에도 잘 작동할지 생각해 보세요.
또 다른 문제
양방향 HTML의 소스 수정은 문제가 될 수 있습니다. 유니코드 양방향 알고리즘을 지원하도록 빌드되지 않은 편집기가 많기 때문입니다(관련 문제와 해법에 관한 추가 연구 참조). 간단히 말해 마크업 표시 방식이 왜곡될 수 있습니다.
<p>
ابةتث
<img src="foo.jpg" alt=" جحخد" />
< ذرزسش!
</p>
Google에서 일상적으로 사용해 본 결과, 현재 양방향 수정 시 뛰어난 해법을 제공하는 편집기는 특히 Coda와 Dreamweaver, IntelliJ IDEA, JEditX입니다.
RTL 언어용으로 디자인하는 경우 필요한 대부분의 지원을 핵심 CSS에 빌드하고 이전 버전과의 호환성을 위해 html 요소의 방향 속성을 body 요소의 클래스와 함께 사용할 수 있습니다. 언제나 그렇듯이 모든 스타일을 핵심 스타일시트 하나에 유지하면 유지보수가 더 쉬워집니다.
주의해야 할 주요 스타일 지정 문제를 말씀드립니다. 오른쪽의 플로팅 요소를 왼쪽에 플로팅해야 하고 반대의 경우도 마찬가지입니다. 요소의 한쪽에 적용된 추가 패딩 또는 여백 너비는 재정의하고 전환해야 하며 모든 텍스트 정렬 속성은 반대로 해야 합니다.
Google에서는 일반적으로 html[dir=rtl] CSS 선택자 대신 본문 태그에 클래스를 사용하는 등 다음과 같은 접근 방식을 사용합니다. 이전 버전의 브라우저와 호환되기 때문입니다.
요소:
<body class="rtl">
<h1>
<a href="https://www.blogger.com/">
<img alt="Google" src="https://www.google.com/images/logos/google_logo.png" />
</a> Heading
</h1>
왼쪽에서 오른쪽(기본) 스타일 지정:
h1 {
height: 55px;
line-height: 2.05;
margin: 0 0 25px;
overflow: hidden;
}
h1 img {
float: left;
margin: 0 43px 0 0;
position: relative;
}
오른쪽에서 왼쪽 스타일 지정:
body.rtl {
direction: rtl;
}
body.rtl h1 img {
float: right;
margin: 0 0 0 43px;
}
이 주제에 관한 마지막 참고사항: 오른쪽에서 왼쪽으로 쓰는 언어 페이지를 대상으로 하는 콘텐츠는 대부분 완전히 RTL이 아닌 양방향입니다. 일부 문자열에서 LTR 방향을 유지해야 할 수 있기 때문입니다. 라틴어 스크립트의 회사 이름 또는 전화번호를 예로 들 수 있습니다. 브라우저가 RTL 기준으로 작성된 문서에서 이를 올바르게 처리하도록 하는 방법은 다음과 같이 방향 설정 속성을 사용하여 삽입된 텍스트 문자열을 인라인 요소로 래핑하는 것입니다.
<h2>עוד ב- <span dir="ltr">Google</span></h2>
제목 요소 또는 자바스크립트로 생성된 메시지 프롬프트용 소스 코드와 같이 dir 속성을 연결할 HTML 컨테이너가 없는 경우 다음을 사용하여 방향을 설정할 수 있습니다. 여기서 ‫ 및 ‬는 오른쪽에서 왼쪽 삽입을 위한 유니코드 제어 문자입니다.
<title>‫הפוך את Google לדף הבית שלך‬</title>
자바스크립트 코드에서의 사용 예:
var ffError = '\u202B' +'כדי להגדיר את Google כדף הבית שלך ב\x2DFirefox, לחץ על הקישור \x22הפוך את Google לדף הבית שלי\x22, וגרור אותו אל סמל ה\x22בית\x22 בדפדפן שלך.'+ '\u202C';
자세한 내용은 아랍어와 히브리어, 기타 오른쪽에서 왼쪽 스크립트용 HTML 만들기 및 오른쪽에서 왼쪽 스크립트 작성에 관한 W3C 도움말을 참고하세요.
너무 어려워요
이전에 라틴어가 아닌 문자 집합(키릴 문자, 그리스어, 수많은 아시아 및 인도어)을 사용해 본 적이 없다면 편집기와 브라우저 모두에서 콘텐츠가 생각대로 표시되지 않을 수 있습니다.
편집기와 브라우저 인코딩이 UTF-8(권장)로 설정되어 있는지 확인하고
브라우저가 페이지를 렌더링할 때 예상되는 결과를 알 수 있도록 <span> 요소와 html 요소의 lang 속성을
HTML 템플릿에 추가해 보세요. 이렇게 하면 모든 유니코드 문자가 올바르게 표시되는 이점도 있어서 é (é)와 같은 HTML 항목을 사용하지 않아도 되므로 소중한 용량이 절약됩니다. 문제가 있는 경우 W3C의 문자 인코딩 튜토리얼을 참고하세요. 문제에 관한 자세한 설명이 나와 있습니다.
이름 지정에 관한 도움말
마지막으로 여러 언어 버전을 만들 때의 이름 지정 규칙에 관한 실용적인 도움말을 전해 드립니다. ISO 639-1 언어 코드와 같은 표준을 이름 지정에 사용하면 같은 문서의 여러 언어 버전을 처리할 때 도움이 됩니다.
기존 표준을 사용하면 사용자가 사이트의 구조를 파악할 수 있을 뿐만 아니라 사이트를 개발하는 모든 웹마스터가 사이트를 더 쉽게 유지보수할 수 있으며, 다른 사이트 애셋(로고 이미지, PDF 문서)에 언어 코드를 사용하면 파일을 빠르게 식별할 수 있어 편리합니다.
다지역 웹사이트 사용 및 다국어 웹사이트 사용 관련 URL 구조와 기타 문제에 관한 도움말은 이전 웹마스터 센터 게시물을 참고하세요.
지금까지 저희가 매일 고민하는 주요 문제를 요약해서 말씀드렸습니다. 그러나 잘 구조화된 HTML과 탄탄한 CSS를 얻기 위해 미리 계획하고 준비하면 현지화 과정에서 결실을 얻게 된다고 보장할 수 있습니다.