TanStack Start v1에서 혼합 언어 콘텐츠를 표시하는 방법

문제

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

이러한 문제는 시각 장애가 있는 사용자에게 장벽을 만들고 보조 기술을 사용하는 모든 사용자가 콘텐츠를 이해하기 어렵게 만듭니다. 외국어 용어가 자주 나타나거나 콘텐츠에 다른 언어로 된 더 긴 구절이 포함되어 있을 때 문제는 더욱 복잡해집니다.

해결책

각 외국어 텍스트에 올바른 언어를 식별하는 HTML lang 속성을 표시하여 보조 기술이 일시적으로 발음 엔진을 전환하도록 지시합니다. 외국어 콘텐츠를 둘러싸는 요소에 언어 속성을 추가하여 다르게 스타일을 지정하거나 처리할 수 있습니다. 이러한 분리를 통해 스크린 리더가 각 언어를 올바르게 발음하고 브라우저가 각 세그먼트에 적절한 타이포그래피 및 맞춤법 검사 규칙을 적용할 수 있습니다.

단계

1. 외국어 텍스트를 표시하는 컴포넌트 만들기

외국어 텍스트를 lang 속성이 있는 요소로 감싸세요. 일부 스크린 리더는 span의 lang 속성을 무시하기 때문에 span 대신 관용적인 텍스트 요소를 사용하세요.

interface ForeignTextProps {
  lang: string;
  children: React.ReactNode;
}

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

i 요소는 다른 언어의 용어를 포함하여 대체 음성이나 분위기의 텍스트를 나타내며, 스크린 리더가 언어 속성을 존중하도록 합니다.

2. 인라인 외국어 구문을 표시하기 위해 컴포넌트 사용하기

콘텐츠 내의 외국어 단어나 구문에 적절한 언어 코드를 지정하여 컴포넌트를 적용하세요.

import { ForeignText } from "~/components/ForeignText";

export default function ArticlePage() {
  return (
    <article>
      <p>
        <ForeignText lang="es">Cien años de soledad</ForeignText> 책은
        마술적 리얼리즘의 걸작으로 간주됩니다.
      </p>
      <p>
        그녀는 <ForeignText lang="fr">c'est la vie</ForeignText>라고 말하고
        걸어갔습니다.
      </p>
    </article>
  );
}

적절한 요소에 lang 속성을 사용하면 보조 기술이 일시적으로 언어를 전환하도록 지시하여 정확한 발음을 보장합니다.

3. 더 긴 외국어 구절 표시하기

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

export default function QuotePage() {
  return (
    <article>
      <p>원문 독일어 텍스트는 다음과 같습니다:</p>
      <blockquote lang="de">
        <p>Die Grenzen meiner Sprache bedeuten die Grenzen meiner Welt.</p>
      </blockquote>
      <p>
        이는 다음과 같이 번역됩니다: 내 언어의 한계는 내 세계의 한계를 의미한다.
      </p>
    </article>
  );
}

lang 속성은 거의 모든 HTML 요소와 함께 사용할 수 있어, blockquote와 같은 요소에 속성을 추가하여 페이지 내에서 언어를 쉽게 변경할 수 있습니다.

4. 콘텐츠에 맞는 언어 코드 찾기

IANA 언어 서브태그 레지스트리의 언어 태그를 사용하세요. 비공식 언어 서브태그 조회 도구를 사용하여 찾을 수 있습니다.

export default function MultilingualPage() {
  return (
    <div>
      <p>
        일반적인 예시: <ForeignText lang="fr">bonjour</ForeignText> (프랑스어),
        <ForeignText lang="de">Gesundheit</ForeignText> (독일어),
        <ForeignText lang="ja">ありがとう</ForeignText> (일본어),
        <ForeignText lang="ar">شكرا</ForeignText> (아랍어)
      </p>
    </div>
  );
}

모든 언어에 대해 두 글자 코드가 있으면 그것을 사용하고, 다른 코드가 없는 경우에만 세 글자 코드를 사용하세요.