AI 코딩 에이전트가 RTL(우측-좌측) 언어를 위한 CSS 규칙을 전혀 학습하지 못하는 문제를 RTLify CLI로 해결해 8개의 구체적 규칙 자동 적용

Context

AI 코딩 에이전트(Claude Code, Cursor, Windsurf 등)는 LTR(좌측-우측) 기반 학습 데이터만 가지고 있어서 히브리어, 아랍어, 페르시아어 사용자를 위한 RTL 컴포넌트 생성 시 동일한 6개 버그 패턴을 반복해서 만든다. 개발자가 매번 수동으로 같은 RTL 레이아웃 버그를 수정해야 했다.

Technical Solution

• Markdown 기반 규칙 파일(.rtlify-rules.md) 생성: 물리적 CSS(margin-left) 대신 논리적 CSS(margin-inline-start) 사용, Tailwind 20+ 클래스 매핑(ml-4 → ms-4), BDI 태그 사용(다국어 숫자 보호), 아이콘 방향 전환(rtl:-scale-x-100), Intl.NumberFormat/DateTimeFormat 사용, React Native I18nManager 조건 처리를 문서화
• 에디터 설정 파일 연동: CLAUDE.md, .cursorrules, .windsurfrules 등에 3줄 포인터 추가로 AI가 매 대화 시작 시 RTL 규칙 자동 읽음
• 정적 분석 린터 제공: npx rtlify-ai check 명령으로 기존 코드의 RTL 위반 사항 스캔 및 CI 파이프라인 통합(종료 코드 1 반환)
• 자동 수정 프롬프트 생성: npx rtlify-ai fix 명령으로 AI 에디터에 붙여넣을 수정 명령어 자동 생성 및 클립보드 복사
• Claude Code 전용 슬래시 명령어(/rtlify): 프로젝트 전체 스캔, 수정, 검증을 한 번에 실행

Key Takeaway

AI 에이전트의 학습 데이터 편향을 극복하기 위해 작은 규칙 문서를 프롬프트 체인에 주입하는 방식으로 반복적 수동 작업을 완전히 제거할 수 있으며, 이는 국제화가 필요한 모든 언어 쌍(LTR-RTL, 통화 포맷, 날짜 형식 등)에 확대 적용 가능한 패턴이다.