다국어 콘텐츠 표시하기

문제

페이지가 영어로 올바르게 식별되었지만, 외국어 인용문, 이름 또는 용어(예: 프랑스어 책 제목)가 포함되어 있습니다. 스크린 리더는 이 텍스트를 잘못 발음하고, 브라우저는 모든 콘텐츠가 영어라고 가정하여 잘못된 타이포그래피나 맞춤법 검사를 적용할 수 있습니다.

해결 방법

외국어 텍스트를 <span>와 같은 인라인 HTML 요소로 감싸고, 적절한 언어 코드와 함께 lang 속성을 추가하세요. 이는 브라우저와 보조 기술에 페이지의 주 언어에 영향을 주지 않으면서 해당 특정 부분에 사용할 정확한 언어를 알려줍니다.

단계

1. 다국어 콘텐츠 식별

먼저 외국어 구문이 포함된 텍스트를 표시하는 컴포넌트를 생성하거나 식별합니다. 이 예시에서는 영어 페이지에 프랑스어 구문이 포함되어 있습니다.

// app/components/ArticleText.tsx

export default function ArticleText() {
  return (
    <article>
      <p>
        The chef looked at the meal and, with a sigh, said, 
        "C'est la vie."
      </p>
    </article>
  );
}

변경 사항이 없으면 스크린 리더는 "C'est la vie"를 영어 발음 규칙으로 읽으려고 시도하여 부정확하게 들립니다.

2. 외국어 텍스트를 요소로 감싸기

특정 구문을 <span> 요소로 감싸도록 컴포넌트를 수정하세요. 이렇게 하면 텍스트를 분리하여 속성을 적용할 수 있습니다.

// app/components/ArticleText.tsx

export default function ArticleText() {
  return (
    <article>
      <p>
        The chef looked at the meal and, with a sigh, said, 
        <span>"C'est la vie."</span>
      </p>
    </article>
  );
}

3. `lang` 속성 추가

해당 구문에 맞는 언어 코드와 함께 <span>에 lang 속성을 추가하세요. 이 경우 프랑스어 코드는 fr입니다.

// app/components/ArticleText.tsx

export default function ArticleText() {
  return (
    <article>
      <p>
        The chef looked at the meal and, with a sigh, said, 
        <span lang="fr">"C'est la vie."</span>
      </p>
    </article>
  );
}

4. 페이지에서 컴포넌트 사용

이제 페이지에서 이 컴포넌트를 사용할 수 있습니다.

// app/[lang]/page.tsx
import ArticleText from '@/app/components/ArticleText';

export default function Home() {
  return (
    <div>
      <h1>My Blog Post</h1>
      <ArticleText />
    </div>
  );
}

스크린 리더가 lang="fr" 속성을 만나면 프랑스어 음성으로 전환하여 구문을 올바르게 발음합니다. 브라우저는 이 힌트를 사용하여 프랑스어 특유의 타이포그래피(올바른 따옴표 등)를 적용하거나 영어 맞춤법 검사에서 해당 구문을 제외할 수도 있습니다.