Day 18) 접근성을 고려하여 컨텐츠를 국제화하기
🎄 A11y Advent Calendar (번역) 18일차입니다. 전체 목록을 보고싶으시면 여기로 이동해주세요 :)
접근성이 모든 사람에게 동등한 기회를 제공하는 것을 목표로 한다면, 컨텐츠의 국제화 역시 중요한 요소입니다. 사용자가 이해할 수 없는 언어로 제공되는 컨텐츠는 접근성을 크게 저해합니다.
Localisation과 국제화(각각 l10n과 i18n)는 많은 지식과 노력이 필요한 광범위한 주제입니다. 대기업에서는 이 작업을 전담하는 팀이 있을 정도로 시간과 자원이 요구됩니다. 그럼에도 불구하고 이를 위해 고려해야 할 주요 사항들을 간략하게 설명하겠습니다
1. HTML lang 속성 설정
모든 HTML 요소에 lang 속성을 지정해야 합니다(예: lang="en", lang="ko"). 이 속성은 검색 엔진 색인화뿐만 아니라 화면 리더가 올바른 악센트와 발음으로 텍스트를 읽을 수 있도록 돕습니다. 만약 영어 페이지에 아랍어 문장이 포함되어 있다면 해당 요소에 lang="ar" 속성을 추가해야 합니다.
2. hreflang 속성 사용
페이지가 다른 언어로 된 리소스를 가리키는 경우 링크에 hreflang 속성을 설정해야 합니다. 예를 들어, 러시아어 페이지로 연결되는 링크에는 hreflang="ru"를 사용합니다. 이를 통해 검색 엔진은 사용자에게 적절한 언어 리소스를 제공할 수 있습니다.
3. 국기 사용에 대한 주의
국기는 국가를 나타내는 데 사용해야 하며 언어를 표시하는 용도로 사용해서는 안 됩니다. 예를 들어, 프랑스어는 프랑스뿐만 아니라 캐나다와 콩고 등 다양한 지역에서 사용됩니다. 시각적 정체성을 위해 국기를 사용해야 한다면, 국가명을 국기와 함께 표시하고 언어를 별도로 나열하는 방식(예: “🇨🇦 Canada(영어)”, “🇨🇦 Canada(프랑스어 캐나다어)”)을 고려하세요.
4. 날짜 및 통화 형식
날짜와 통화 형식은 해당 페이지 언어에 맞게 작성하는 것이 이상적입니다.
- 미국식 영어 컨텐츠: MM-DD-YYYY
- 독일어 컨텐츠: DD.MM.YYYY
- 프랑스어 컨텐츠: 금액과 기호 사이에 공백을 두어 42 €와 같은 형식 사용
이를 쉽게 처리하기 위해 Intl, Luxon, accounting.js 등의 라이브러리를 활용할 수 있습니다.
5. 이름과 문화적 다양성 고려
이름의 구조는 국가와 문화에 따라 다양합니다. 이름과 성이 하나로 고정된 서양식 구조만 고려하면 안 됩니다. 전 세계에는 중간 이름, 이니셜, 이름이 없는 경우, 한 글자 이름 등 다양한 형태가 존재합니다. 이름에 대한 편견을 줄이기 위해 구조를 유연하게 설계해야 합니다.
프로그래머가 이름에 대해 믿는 잘못된 상식을 한 번도 읽어보지 않으셨다면 이 책을 추천하고 싶습니다.
국제화는 단번에 완벽하게 이루어지기 어렵습니다. 실수가 발생할 수 있으며, 지속적인 개선이 필요합니다. 오늘날처럼 서로 연결된 세상에서는 누구나 접근 가능한 컨텐츠와 시스템을 제공하기 위해 편견을 없애고 포괄적인 설계를 추구해야 합니다.