RTL
오른쪽에서 왼쪽으로 쓰는 언어 대응
CSS logical properties로 LTR(좌→우, 한국어/영어/일본어) ↔ RTL(우→좌, 아랍어/히브리어) 자동 분기. 컴포넌트 spec의 padding-left/right 같은 physical property를 padding-inline-start/end 로 일괄 치환하는 패턴.
핵심 — Logical property 매핑
| Physical (LTR 가정) | Logical (방향 자동) | 의미 |
|---|---|---|
margin-left | margin-inline-start | 시작 측 (LTR=왼쪽, RTL=오른쪽) |
margin-right | margin-inline-end | 끝 측 (LTR=오른쪽, RTL=왼쪽) |
padding-left | padding-inline-start | 동일 |
padding-right | padding-inline-end | 동일 |
border-left | border-inline-start | 동일 (예: Banner stripe) |
border-right | border-inline-end | 동일 |
border-top-left-radius | border-start-start-radius | 시작-시작 (LTR=좌상단, RTL=우상단) |
border-top-right-radius | border-start-end-radius | 시작-끝 |
border-bottom-left-radius | border-end-start-radius | 끝-시작 |
border-bottom-right-radius | border-end-end-radius | 끝-끝 |
left: 0 | inset-inline-start: 0 | 시작 측 위치 |
right: 0 | inset-inline-end: 0 | 끝 측 위치 |
text-align: left | text-align: start | 시작 측 정렬 |
text-align: right | text-align: end | 끝 측 정렬 |
width | inline-size | 가로 (writing-mode 종속, 가로쓰기에선 동일) |
height | block-size | 세로 |
max-width | max-inline-size | 동일 |
block 축(세로)은 padding-block-start/padding-block-end 등 — RTL과 무관(가로쓰기 기준 위/아래는 그대로). 하지만 일관성을 위해 모든 physical property를 logical로 통일하는 것을 권장.
dir="rtl" HTML 속성
<html lang="ar" dir="rtl">
<!-- 또는 부분 영역 -->
<div dir="rtl">아랍어 콘텐츠 영역</div>CSS logical property 사용 시 자동 mirror — 추가 CSS 작성 불필요. JS는 document.dir 또는 getComputedStyle(el).direction으로 감지 가능.
Direction-specific 처리
| 처리 | 패턴 |
|---|---|
| drawer left/right | LTR slide-in-left (왼쪽에서) → RTL 자동 slide-in-right (오른쪽에서). keyframe translateX 부호 반대로 — :dir(rtl) .drawer { animation-name: slide-in-right; } |
| chevron / arrow icon | > (forward), < (back) — RTL 시 transform: scaleX(-1) 또는 별도 RTL icon set |
| breadcrumb separator | (2026-10-04 Breadcrumb 를 걷었다 — 기록) / 그대로 (방향성 없음) — > 사용 시 mirror 필요 |
| progress bar fill | width: 50% + inset-inline-start: 0 — 자동 mirror |
| 숫자 / 통화 | RTL 환경에서도 LTR로 표시 (<bdi> 또는 unicode-bidi: embed) — 1,234.56 같은 숫자는 항상 LTR |
| 이메일 / URL | LTR 강제 — direction: ltr + unicode-bidi: bidi-override |
컴포넌트별 RTL 가이드
| 컴포넌트 | RTL 처리 |
|---|---|
| Button (icon + text) | icon margin-inline-end — auto mirror |
| Input (icon prefix) | icon inset-inline-start: 8px — auto mirror |
| Dropdown (chevron) | chevron transform mirror 또는 dir="ltr" 영역 강제 |
| Tabs | text-align start, indent inline-start |
| Drawer right (LTR 우측 등장) | RTL 시 좌측에서 등장 (slide-in-left keyframe → :dir(rtl) ... slide-in-right) |
| Breadcrumb | (2026-10-04 걷었다 — 기록) separator 자체가 방향성 없는 / 권장. > 사용 시 RTL은 < 또는 mirror |
| Toast bottom-right | RTL 시 bottom-left (inset-inline-end: 16px → inset-inline-end 그대로 두면 자동) |
| Banner stripe | border-inline-start: 4px solid info — auto mirror |
| Calendar | weekday 헤더 / day cell layout direction 자동 |
Tailwind v4 RTL utility
Tailwind v4는 me-*/ms-* (margin-end/start), pe-*/ps-*, text-start/text-end, start-0/end-0 등 logical utility 기본 제공. v4 export에서 자동 활성. 변종 rtl: (예: rtl:rotate-180) 사용 가능.
추가 이유
- Groo는 한국어 우선이지만 향후 글로벌 확장 시 RTL 지원 vendor 이중 작업 회피.
- logical property는 추가 비용 거의 0 — physical과 동일 syntax, 브라우저 호환(Chrome 87+, Safari 15+, Firefox 66+ 모두 지원).
- 컴포넌트 spec 작성 시 처음부터 logical property 사용 → 향후 RTL 추가 시 spec 자체 수정 불필요.
- 새 토큰 0, 새 yaml 컴포넌트 0 — prose-only 가이드.
Migration 가이드 (기존 spec 점진 변환)
- 기존 컴포넌트 spec에서
padding-left/right,margin-left/right,text-align: left/right,border-radius4-corner notation 사용 시 단계적으로 logical로 변환 권장. - 이번 v76엔 spec 변환 미시행 — RTL 문서만 명시. 향후 컴포넌트 추가/수정 시점에 logical 우선 작성.
WCAG / 자동 검증
- 1.4.10 Reflow: logical property는 reflow 친화 (writing-mode 변경에도 의도 유지).
- 1.4.8 Visual Presentation: text-align start/end는 사용자 설정 언어 방향 자동 존중.
- 자동 lint 비대상(prose-only). 시각 검토 — 향후
dir="rtl"환경 preview 추가 가능.
HR / Desk 듀얼 브랜드
- direction은 brand-neutral. HR(B2B) / Desk(B2C) 모두 동일 logical property 가이드.
- Groo 1차 시장 한국어(LTR), RTL은 향후 확장 옵션. 현 시점 active 사용 사례 0.