월드 와이드 웹은 전 세계 누구나 사용할 수 있습니다. 바로 그 이름 그대로입니다! 즉, 사용자의 위치, 사용 중인 기기, 사용 언어에 관계없이 인터넷에 액세스할 수 있는 모든 사용자가 웹사이트를 사용할 수 있습니다.
반응형 디자인의 목표는 모든 사용자가 콘텐츠를 이용할 수 있도록 하는 것입니다. 인간의 언어에도 이 철학을 적용하는 것이 국제화의 원동력이며, 이는 전 세계 시청자를 위해 콘텐츠와 디자인을 준비하는 것입니다.
논리 특성
영어는 왼쪽에서 오른쪽, 위에서 아래로 작성하지만 모든 언어가 이러한 방식으로 작성되는 것은 아닙니다. 아랍어나 히브리어 같은 일부 언어는 오른쪽에서 왼쪽으로 읽습니다. 일부 일본어 글꼴은 가로가 아닌 세로로 읽습니다. 이러한 쓰기 모드를 수용하기 위해 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는 'left'에 상응하고 inline-end는 'right'에 해당합니다.
마찬가지로 텍스트를 위에서 아래로 작성하는 영어와 같은 언어에서 block-start는 'top'에 해당하고 block-end는 'bottom'에 해당합니다.
CSS에서 논리적 속성을 사용하는 경우 페이지 번역에 동일한 스타일시트를 사용할 수 있습니다. 페이지가 오른쪽에서 왼쪽 또는 아래에서 위로 작성된 언어로 번역되더라도 디자인은 그에 따라 조정됩니다. 언어마다 별도의 디자인을 만들 필요는 없습니다. 논리적 속성을 사용하여 디자인이 모든 쓰기 모드에 반응합니다. 즉, 언어마다 별도의 디자인을 만드는 시간을 들이지 않고도 더 많은 사용자에게 도달할 수 있습니다.
그리드 및 flexbox와 같은 최신 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이제 페이지 수준 레이아웃(매크로 레이아웃이라고도 함)에 접근하는 방법을 알아보겠습니다.