웹 서비스를 글로벌하게 운영하려면 아랍어, 히브리어처럼 **RTL(오른쪽 → 왼쪽)** 언어를 지원해야 합니다. 이번 글에서는 **CSS Logical Properties**를 활용한 RTL 대응 전략을 정리합니다. --- ## 1. HTML 기본 세팅 ```html ... ``` - `lang="ar"`: 브라우저가 아랍어 폰트, 줄바꿈, 스크린리더를 올바르게 처리 - `dir="rtl"`: 레이아웃 방향을 RTL로 전환 - `dir="auto"`: 댓글 같은 UGC에서는 텍스트 방향을 자동 감지 --- ## 2. 논리 속성(Logical Properties) 활용 물리 속성(`left`, `right`) 대신 **논리 속성(`inline-start`, `inline-end`)**을 사용하면 LTR/RTL 모두 자동 대응됩니다. ```css /* bad */ .card { margin-left: 16px; padding-right: 12px; border-left: 4px solid #ccc; } /* good */ .card { margin-inline-start: 16px; padding-inline-end: 12px; border-inline-start: 4px solid #ccc; } .title { text-align: start; } /* LTR=left, RTL=right */ ``` ### 주요 매핑 | 기존 속성 | 논리 속성 | |------------------|----------------------| | `width` | `inline-size` | | `height` | `block-size` | | `margin-left` | `margin-inline-start`| | `padding-right` | `padding-inline-end` | | `border-left` | `border-inline-start`| | `text-align: left` | `text-align: start` | --- ## 3. RTL 타깃팅 셀렉터 ```css :dir(rtl) .nav { float: inline-start; } [dir="rtl"] .nav { float: inline-start; } ``` - 최신 브라우저: `:dir(rtl)` 사용 - 구형 브라우저: `[dir="rtl"]` 폴백 적용 --- ## 4. BiDi(양방향) 텍스트 처리 아랍어 텍스트에 숫자/영문이 섞이면 흐트러질 수 있습니다. ```html

السعر USD 1,299 فقط

``` ```css .code-snippet { direction: ltr; unicode-bidi: isolate; } ``` - ``: 방향성을 격리해 섞임 방지 - `unicode-bidi: isolate`: LTR 코드 블록 고정 --- ## 5. 아이콘·이미지 방향 반전 ```css html[dir="rtl"] .icon-arrow { transform: scaleX(-1); } ``` - 화살표, 진행 아이콘 등은 RTL에서 좌우 반전이 필요 - SVG는 `transform`으로 처리하거나 RTL 전용 애셋 제공 --- ## 6. Grid/Flex 활용 시 - `justify-content: start/end` → 방향에 맞게 자동 정렬 - `gap` 속성은 LTR/RTL에 무관하게 적용 - `grid-template` 네이밍은 물리적(left/right) 대신 논리적(start/end) 사용 권장 --- ## 7. 폰트 & 타이포그래피 - 아랍어 지원 폰트 예시: *Noto Naskh Arabic*, *Noto Kufi Arabic* - HTML에 `lang="ar"`를 지정하면 브라우저가 폰트 선택과 자간 처리에 도움 --- ## 8. 단계적 도입 전략 1. HTML에 `lang`/`dir` 지정 2. CSS 전면 논리 속성화 (`margin-inline-*`, `text-align: start`) 3. 선택자 이중화 (`:dir(rtl)` + `[dir="rtl"]`) 4. BiDi 격리(``, `unicode-bidi`) 5. 아이콘 미러링 규칙 정의 6. 필요 시 `postcss-logical`로 구형 브라우저 대응 --- ## 9. 스켈레톤 예시 ```html

سماعات لاسلكية

السعر USD 129

``` --- ## 10. React에서 RTL 적용하기 ### (1) HTML에 기본 적용 CRA/Next.js `public/index.html` 또는 `layout.tsx`에 `dir="rtl"` 추가 ```html

``` --- ### (2) React 컴포넌트에서 동적 전환 ```tsx import React, { useEffect } from "react"; function App() { useEffect(() => { const lang = navigator.language; // ex: "ar", "en-US" document.documentElement.lang = lang; document.documentElement.dir = lang.startsWith("ar") ? "rtl" : "ltr"; }, []); return (

مرحبا بالعالم

Hello World

); } export default App; ``` --- ### (3) styled-components / emotion 활용 ```tsx import styled from "styled-components"; const Box = styled.div` padding-inline-start: 20px; border-inline-start: 3px solid tomato; text-align: start; `; function Component() { return محتوى (Content); } ``` --- ### (4) i18next 연동 시 ```tsx import { useEffect } from "react"; import { useTranslation } from "react-i18next"; export default function Layout({ children }) { const { i18n } = useTranslation(); useEffect(() => { document.documentElement.lang = i18n.language; document.documentElement.dir = i18n.language === "ar" ? "rtl" : "ltr"; }, [i18n.language]); return <>{children}; } ``` --- ### (5) Material-UI (MUI) 설정 예시 ```tsx import { createTheme } from "@mui/material/styles"; import { ThemeProvider } from "@mui/material"; import { CacheProvider } from "@emotion/react"; import createCache from "@emotion/cache"; import rtlPlugin from "stylis-plugin-rtl"; const cacheRtl = createCache({ key: "muirtl", stylisPlugins: [rtlPlugin()], }); const theme = createTheme({ direction: "rtl", }); export default function App() { return (

مرحبا

); } ``` --- ## 참고 자료 - [MDN – CSS Logical Properties](https://developer.mozilla.org/docs/Web/CSS/CSS_logical_properties_and_values) - [MDN – dir 전역 속성](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/dir) - [MDN – bdi 요소](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/bdi) - [MDN – unicode-bidi](https://developer.mozilla.org/en-US/docs/Web/CSS/unicode-bidi) - [PostCSS Logical Plugin](https://github.com/csstools/postcss-logical) - [MUI RTL 가이드](https://mui.com/material-ui/guides/right-to-left/) --- 👉 **결론:** - HTML에서 `dir` 속성 설정 - CSS 논리 속성 적극 활용 - React에서는 `document.documentElement.dir`을 동적으로 제어 - UI 라이브러리는 별도 RTL 설정 필요

아랍어(RTL) 대응 CSS 완벽 가이드

아랍어(RTL) 대응 CSS 완벽 가이드