오른쪽에서 왼쪽(RTL) 레이아웃 지원

아랍어와 히브리어 같은 언어를 위한 레이아웃 조정

문제

애플리케이션의 레이아웃은 margin-left와 padding-right와 같은 CSS 속성으로 구축되어 있으며, 이는 왼쪽에서 오른쪽(LTR)으로의 텍스트 방향을 가정합니다. 애플리케이션이 아랍어나 히브리어와 같은 RTL(오른쪽에서 왼쪽) 언어로 번역될 때, 전체 레이아웃이 거꾸로 나타나 콘텐츠가 잘못 정렬되고 읽기 어려워집니다.

해결책

방향성 CSS 속성(left/right)에서 현대적이고 방향에 구애받지 않는 논리적 등가물(start/end)로 전환하세요. 현재 언어에 따라 <html> 요소에 dir 속성을 설정하면 브라우저가 자동으로 레이아웃을 올바르게 뒤집습니다.

단계

1. RTL 언어 정의하기

먼저, 지원하는 언어 중 어떤 것이 RTL인지 알 수 있는 방법이 필요합니다.

이 정보를 저장하기 위해 새 파일 app/i18n-config.ts를 생성하거나 기존 파일을 업데이트하세요.

// i18n-config.ts

export const locales = ['en', 'es', 'ar', 'he']; // ar=아랍어, he=히브리어
export const defaultLocale = 'en';
export const localeCookieName = 'NEXT_LOCALE';

export const rtlLocales = ['ar', 'he'];

2. 루트 레이아웃에 dir 속성 설정하기

조건부로 <html> 태그에 dir(방향) 속성을 추가하도록 app/[lang]/layout.tsx를 수정하세요.

// app/[lang]/layout.tsx
import { rtlLocales } from '@/i18n-config';

export async function generateStaticParams() {
  return [{ lang: 'en' }, { lang: 'es' }, { lang: 'ar' }, { lang: 'he' }];
}

export default async function RootLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: { lang: string };
}) {
  // 현재 언어가 RTL인지 확인
  const isRtl = rtlLocales.includes(params.lang);

  return (
    <html lang={params.lang} dir={isRtl ? 'rtl' : 'ltr'}>
      <body>
        {/* ...프로바이더와 콘텐츠... */}
        {children}
      </body>
    </html>
  );
}

<html> 태그에 dir="rtl"을 추가함으로써, 이 페이지에 대해 전체 문서 흐름이 오른쪽에서 왼쪽으로 되어야 한다고 브라우저에 알려주는 것입니다.

3. 논리적 속성을 사용하도록 CSS 업데이트

전역 CSS와 컴포넌트 스타일을 검토하세요. 모든 방향성 속성을 논리적 속성으로 대체하세요.

  • margin-left는 margin-inline-start로 변경
  • margin-right는 margin-inline-end로 변경
  • padding-left는 padding-inline-start로 변경
  • padding-right는 padding-inline-end로 변경
  • left(위치 지정 시)는 inset-inline-start로 변경
  • right(위치 지정 시)는 inset-inline-end로 변경
  • text-align: left는 text-align: start로 변경
  • text-align: right는 text-align: end로 변경

예시:

변경 전(방향성):

.card {
  padding-left: 16px;
  border-left: 4px solid blue;
}
.title {
  text-align: left;
}

변경 후(논리적):

.card {
  padding-inline-start: 16px;
  border-inline-start: 4px solid blue;
}
.title {
  text-align: start;
}

사용자가 /en(dir="ltr")을 방문할 때, padding-inline-start는 왼쪽에 적용됩니다. 사용자가 /ar(dir="rtl")을 방문할 때, 브라우저는 자동으로 padding-inline-start를 오른쪽에 적용하여 컴포넌트 레이아웃을 올바르게 반전시킵니다.