웹은 전 세계 모든 사람이 사용할 수 있습니다. 이름에 나와 있듯이 말이죠. 즉, 웹사이트는 인터넷에 액세스할 수 있는 모든 사람이 거주 지역, 사용 중인 기기, 사용하는 언어와 관계없이 잠재적으로 사용할 수 있습니다.
반응형 디자인의 목표는 모든 사람이 콘텐츠를 사용할 수 있도록 하는 것입니다. 인간 언어에 동일한 철학을 적용하는 것이 국제화의 원동력입니다. 즉, 전 세계 사용자를 위해 콘텐츠와 디자인을 준비하는 것입니다.
논리적 속성
영어는 왼쪽에서 오른쪽, 위에서 아래로 작성되지만 모든 언어가 이런 방식으로 작성되는 것은 아닙니다. 아랍어와 히브리어와 같은 일부 언어는 오른쪽에서 왼쪽으로 읽고 일부 일본어 서체는 가로가 아닌 세로로 읽습니다. 이러한 쓰기 모드를 수용하기 위해 CSS에 논리적 속성이 도입되었습니다.
CSS를 작성하는 경우 '왼쪽', '오른쪽', '위', '아래'와 같은 방향 키워드를 사용했을 수 있습니다. 이러한 키워드는 사용자 기기의 실제 레이아웃을 나타냅니다.
논리적 속성은 반면에 콘텐츠 흐름과 관련된 상자의 가장자리를 나타냅니다. 쓰기 모드가 변경되면 논리적 속성으로 작성된 CSS가 그에 따라 업데이트됩니다. 방향 속성의 경우에는 그렇지 않습니다.
방향 속성 margin-left는 항상 콘텐츠 상자의 왼쪽 여백을 나타내는 반면 논리적 속성 margin-inline-start는 왼쪽에서 오른쪽으로 쓰는 언어의 콘텐츠 상자 왼쪽 여백과 오른쪽에서 왼쪽으로 쓰는 언어의 콘텐츠 상자 오른쪽 여백을 나타냅니다.
디자인이 다양한 쓰기 모드에 맞게 조정되도록 하려면 방향 속성을 사용하지 마세요. 대신 논리적 속성을 사용하세요.
.byline { text-align: right; }
.byline { text-align: end; }
CSS에 left 또는 right와 같은 특정 방향 값이 있는 경우 상응하는 논리적 속성이 있습니다. 이전에는 margin-left가 있었지만 이제 margin-inline-start도 있습니다.
텍스트가 왼쪽에서 오른쪽으로 흐르는 영어와 같은 언어에서 inline-start는 '왼쪽'에 해당하고 inline-end는 '오른쪽'에 해당합니다.
마찬가지로 텍스트가 위에서 아래로 작성되는 영어와 같은 언어에서 block-start는 '위'에 해당하고 block-end는 '아래'에 해당합니다.
CSS에서 논리적 속성을 사용하는 경우 페이지 번역에 동일한 스타일시트를 사용할 수 있습니다. 페이지가 오른쪽에서 왼쪽 또는 아래에서 위로 작성되는 언어로 번역되더라도 디자인은 그에 따라 조정됩니다. 각 언어에 대해 별도의 디자인을 만들 필요가 없습니다. 논리적 속성을 사용하면 디자인이 모든 쓰기 모드에 반응합니다. 즉, 각 언어에 대해 별도의 디자인을 만드는 데 시간을 할애하지 않고도 디자인이 더 많은 사용자에게 도달할 수 있습니다.
그리드및 플렉스박스와 같은 최신 CSS 레이아웃 기술은 기본적으로 논리적 속성을 사용합니다.
left 및 top 대신 inline-start 및 block-start를 기준으로 생각하면 이러한 최신 기술을 더 쉽게 이해할 수 있습니다.
일부 텍스트 옆에 있는 아이콘 또는 양식 필드 옆에 있는 라벨과 같은 일반적인 패턴을 예로 들어 보겠습니다. '라벨에 오른쪽에 여백이 있어야 한다'고 생각하는 대신 '라벨에 인라인 축의 끝에 여백이 있어야 한다'고 생각하세요.
label { margin-right: 0.5em; }
label { margin-inline-end: 0.5em; }
페이지가 오른쪽에서 왼쪽으로 쓰는 언어로 번역되더라도 스타일을 업데이트할 필요가 없습니다.
`html` 요소에서 `dir` 속성을 사용하여 오른쪽에서 왼쪽으로 쓰는 언어로 페이지를 보는 효과를 모방할 수 있습니다.
ltr 값은 '왼쪽에서 오른쪽'을 의미합니다. 'rtl' 값은 '오른쪽에서 왼쪽'을 의미합니다.
문서 방향 (블록 축) 및 쓰기 모드 (인라인 축)의 모든 순열을 실험해 보려면 대화형 데모를 참고하세요.
페이지 언어 식별
html 요소에서 lang 속성을 사용하여 페이지의 언어를 식별하는 것이 좋습니다.
<html lang="en">
이 예는 영어 페이지에 관한 것입니다. 더 구체적으로 지정할 수도 있습니다. 페이지에서 미국 영어를 사용한다고 선언하는 방법은 다음과 같습니다.
<html lang="en-us">
문서의 언어를 선언하는 것은 검색엔진에 유용합니다. 스크린 리더 및 음성 지원과 같은 보조 기술에도 유용합니다. 언어 메타데이터를 제공하면 이러한 종류의 음성 합성기가 콘텐츠를 올바르게 발음하는 데 도움이 됩니다.
lang 속성은 html뿐만 아니라 모든 HTML 요소에 사용할 수 있습니다. 웹페이지에서 언어를 전환하는 경우 변경사항을 표시하세요.
이 경우 한 단어가 독일어로 되어 있습니다.
<p>I felt some <span lang="de">schadenfreude</span>.</p>
연결된 문서의 언어 식별
링크에서 사용할 수 있는 hreflang라는 다른 속성이 있습니다.
hreflang는 lang 속성과 동일한 언어 코드 표기법을 사용하고 연결된 문서의 언어를 설명합니다.
전체 페이지의 독일어 번역이 있는 경우 다음과 같이 연결합니다.
<a href="/path/to/german/version" hreflang="de">German version</a>
독일어 텍스트를 사용하여 독일어 버전의 링크를 설명하는 경우 hreflang와 lang를 모두 사용하세요.
여기서 'Deutsche Version' 텍스트는 독일어로 표시되고 대상 링크도 독일어로 표시됩니다.
<a href="/path/to/german/version" hreflang="de" lang="de">Deutsche Version</a>
link 요소에서 hreflang 속성을 사용할 수도 있습니다. 이 속성은 문서의 head에 있습니다.
<link href="/path/to/german/version" rel="alternate" hreflang="de">
하지만 모든 요소에 사용할 수 있는 lang 속성과 달리 hreflang는 a 및 link 요소에만 적용할 수 있습니다.
디자인에서 국제화 고려
다른 언어와 쓰기 모드로 번역될 웹사이트를 디자인할 때는 다음 요소를 고려하세요.
- 독일어와 같은 일부 언어에는 일반적으로 사용되는 긴 단어가 있습니다. 인터페이스가 이러한 단어에 맞게 조정되어야 하므로 좁은 열을 디자인하지 마세요. CSS를 사용하여 하이픈을 도입할 수도 있습니다.
line-height값이 악센트 및 기타 발음 구별 기호와 같은 문자를 수용할 수 있는지 확인하세요. 영어에서는 괜찮아 보이는 텍스트 줄이 다른 언어에서는 겹칠 수 있습니다.- 웹 글꼴을 사용하는 경우 번역할 언어를 포괄할 수 있을 만큼 광범위한 문자 범위가 있는지 확인하세요.
- 텍스트가 포함된 이미지를 만들지 마세요. 만드는 경우 각 언어에 대해 별도의 이미지를 만들어야 합니다. 대신 텍스트와 이미지를 분리하고 CSS를 사용하여 이미지에 텍스트를 오버레이하세요.
글로벌 마인드 갖추기
lang 및 hreflang와 같은 속성은 HTML을 국제화에 더 의미 있게 만듭니다.
마찬가지로 논리적 속성은 CSS를 더 적응력 있게 만듭니다.
top, bottom, left, right를 기준으로 생각하는 데 익숙한 경우 block start, block end, inline start, inline end를 기준으로 생각하기 시작하는 것이 어려울 수 있습니다.
하지만 그만한 가치가 있습니다. 논리적 속성은 진정한 반응형 레이아웃을 만드는 데 핵심입니다.
이해도 테스트
국제화에 관한 지식을 테스트해 보세요.
영어에서 상자의 실제 right 측면은 논리적으로 어느 측면인가요?
block-starttop입니다.block-endbottom입니다.inline-startleft입니다.inline-end국제화에 더 의미 있게 만들려면 HTML에 어떤 속성을 추가해야 할까요?
englishlanglanguagei18n다음으로 매크로 레이아웃이라고도 하는 페이지 수준 레이아웃에 접근하는 방법을 알아봅니다.