오른쪽에서 왼쪽(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=Arabic, he=Hebrew
export const defaultLocale = 'en';
export const localeCookieName = 'NEXT_LOCALE';

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

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

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

// 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 };
}) {
  // Determine if the current language is RTL
  const isRtl = rtlLocales.includes(params.lang);

  return (
    <html lang={params.lang} dir={isRtl ? 'rtl' : 'ltr'}>
      <body>
        {/* ...your providers and content... */}
        {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을(를) 오른쪽에 적용하여 컴포넌트 레이아웃을 올바르게 뒤집어줍니다.