React Router v7에서 다국어 혼합 콘텐츠를 표시하는 방법

문제

페이지에 여러 언어의 텍스트가 포함되어 있을 때, 브라우저와 보조 기술은 모든 콘텐츠가 페이지에 선언된 언어를 사용한다고 가정합니다. 영어로 구성된 스크린 리더는 프랑스어 구문, 스페인어 책 제목 또는 독일어 이름을 영어 발음 규칙으로 읽으려고 시도하여 오디오에 의존하는 사용자에게 이해할 수 없는 출력을 생성합니다. 브라우저는 페이지 언어를 기반으로 맞춤법 검사 및 타이포그래피 규칙을 적용하여 외국어 단어를 오류로 잘못 표시하고 언어별 구두점을 잘못 처리합니다. 검색 엔진과 번역 도구는 명시적인 언어 마커 없이 다국어 혼합 콘텐츠를 정확하게 처리할 수 없습니다.

이는 스크린 리더 사용자뿐만 아니라 자동 번역, 텍스트 음성 변환, 읽기 모드를 포함한 언어 감지에 의존하는 브라우저 기능을 사용하는 모든 사람에게 영향을 미칩니다.

해결 방법

HTML 요소에 외국어 텍스트를 감싸고 lang 속성을 올바른 언어 코드로 설정하세요. lang 속성은 브라우저와 보조 기술에 해당 콘텐츠에 대한 언어 규칙을 전환하도록 지시하여 스크린 리더의 정확한 발음과 브라우저의 적절한 맞춤법 검사 및 타이포그래피를 보장합니다.

인라인 외국어 텍스트를 레이아웃을 방해하지 않고 감싸려면 <span> 또는 <i>와 같은 시맨틱 HTML 요소를 사용하세요. lang 속성은 ISO 639-1 언어 코드(예: 프랑스어의 경우 fr, 스페인어의 경우 es)와 방언별 처리를 위한 선택적 지역 코드를 허용합니다.

단계

1. 외국어 텍스트 표시를 위한 컴포넌트 생성

적절한 lang 속성을 가진 span 요소로 텍스트를 감싸는 재사용 가능한 컴포넌트를 구축하세요.

type ForeignTextProps = {
  lang: string;
  children: React.ReactNode;
};

export function ForeignText({ lang, children }: ForeignTextProps) {
  return <span lang={lang}>{children}</span>;
}

이 컴포넌트는 언어 코드를 받아 자식 요소를 lang 속성이 있는 span로 감싸서 스크린 리더가 포함된 텍스트에 대한 발음 규칙을 전환할 수 있도록 합니다.

2. 컴포넌트를 사용하여 인라인 외국어 텍스트 표시

ForeignText 컴포넌트를 사용하여 콘텐츠 내의 외국어 단어나 구문을 감싸세요.

export default function ArticlePage() {
  return (
    <article>
      <h1>International Cuisine</h1>
      <p>
        The restaurant's signature dish is{" "}
        <ForeignText lang="fr">coq au vin</ForeignText>, a classic French
        preparation that pairs perfectly with their house wine.
      </p>
      <p>
        Their dessert menu features{" "}
        <ForeignText lang="es">tres leches</ForeignText> and{" "}
        <ForeignText lang="it">tiramisu</ForeignText>.
      </p>
    </article>
  );
}

이제 스크린 리더는 "coq au vin"을 프랑스어 발음으로, "tres leches"를 스페인어 발음으로, "tiramisu"를 이탈리아어 발음으로 읽으며, 주변의 영어 텍스트는 영어 발음을 사용합니다.

3. 긴 외국어 구절 표시

여러 문장으로 된 외국어 콘텐츠의 경우 블록 레벨 요소에 lang 속성을 직접 적용하세요.

export default function QuotePage() {
  return (
    <article>
      <h1>Universal Declaration of Human Rights</h1>
      <h2>Article 1</h2>
      <blockquote lang="fr">
        <p>
          Tous les êtres humains naissent libres et égaux en dignité et en
          droits. Ils sont doués de raison et de conscience et doivent agir les
          uns envers les autres dans un esprit de fraternité.
        </p>
      </blockquote>
    </article>
  );
}

blockquote 요소에 lang를 적용하면 전체 인용문이 프랑스어로 표시되어 전체 구절에 대한 정확한 발음과 타이포그래피가 보장됩니다.

4. 번역된 UI 텍스트와 결합

번역된 인터페이스 텍스트와 함께 외국어 콘텐츠를 표시할 때는 UI 요소에 react-intl을 사용하고 사용자 생성 또는 인용 콘텐츠에 lang 속성을 사용하세요.

import { FormattedMessage } from "react-intl";
import { ForeignText } from "~/components/ForeignText";

export default function BookReview() {
  return (
    <article>
      <h1>
        <FormattedMessage id="review.title" defaultMessage="Book Review" />
      </h1>
      <p>
        <FormattedMessage
          id="review.intro"
          defaultMessage="The novel {title} explores themes of identity and belonging."
          values={{
            title: <ForeignText lang="de">Der Steppenwolf</ForeignText>,
          }}
        />
      </p>
    </article>
  );
}

인터페이스 텍스트는 react-intl을 통해 사용자의 로케일에 맞게 조정되며, 책 제목은 접근성을 위한 적절한 언어 표시와 함께 원래의 독일어를 유지합니다.