RTLCSS는 CSS를 좌측에서 우측(LTR)에서 우측에서 좌측(RTL)으로 변환하는 강력한 도구입니다. 이 문서에서는 RTLCSS의 다양한 설정 옵션을 설명하고, 효과적인 RTL 스타일 처리 방법을 안내합니다.

주요 설정 파라미터

RTLCSS는 사용자가 CSS 변환 과정을 세밀하게 제어할 수 있도록 여러 설정 값을 제공합니다.

autoRename: 방향 관련 클래스 자동 변경

autoRename 속성(기본값: false)은 'left' 접두사를 포함한 클래스 이름을 자동으로 'right'로 변경합니다. 예를 들어 .align-left는 .align-right로 변환됩니다.

{
  "options": {
    "autoRename": true
  }
}

stringMap: 사용자 정의 문자열 매핑

stringMap을 통해 특정 문자열 패턴에 대한 치환 규칙을 직접 지정할 수 있습니다. 기본적으로 "left-right", "ltr-rtl" 규칙이 포함되어 있으며, 필요시 새로운 규칙을 추가하거나 기존 규칙을 수정할 수 있습니다.

processUrls: URL 경로 조정

processUrls(기본값: false) 옵션은 CSS 내 이미지 경로 등의 URL을 RTL 레이아웃에 맞게 조정합니다. 이 기능을 활성화하면 배경 이미지가 올바르게 표시됩니다.

설정 파일 관리

RTLCSS는 다양한 형식의 설정 파일을 지원하여 프로젝트 구조에 맞는 유연한 구성이 가능합니다.

지원되는 설정 파일 형식

다음 순서대로 설정 파일을 탐색합니다:

• package.json 내 "rtlcssConfig" 항목
• .rtlcssrc 파일
• .rtlcss.json 파일

설정 로딩 우선순위

설정 적용 시 다음 순서로 우선권을 부여합니다:

1. 명시적으로 지정된 설정 파일 경로
2. 현재 작업 디렉토리의 설정 파일
3. 사용자 홈 디렉토리의 전역 설정

실제 활용 예제

실무에서 바로 사용 가능한 몇 가지 설정 예제입니다.

기본 설정 예시

{
  "options": {
    "autoRename": true,
    "processUrls": true,
    "greedy": true
  }
}

커스텀 문자열 매핑

{
  "options": {
    "stringMap": [
      {
        "name": "navigation-order",
        "priority": 100,
        "search": ["previous", "next"],
        "replace": ["next", "previous"],
        "options": { "scope": "*", "ignoreCase": false }
      }
    ]
  }
}

고급 활용법

훅(Hook) 함수 활용

변환 전후에 실행되는 pre, post 훅을 이용해 복잡한 스타일 조작 로직을 삽입할 수 있습니다.

플러그인 시스템

커스텀 플러그인을 개발하거나 커뮤니티 플러그인을 활용하여 RTLCSS의 기능을 확장할 수 있습니다.

효율적인 RTLCSS 설정을 통해 다국어 웹사이트 개발 생산성을 크게 향상시킬 수 있습니다. 간단한 클래스명 변경부터 복잡한 문자열 대체까지 다양한 요구사항을 충족할 수 있습니다.

git clone https://github.com/MohammadYounes/rtlcss.git

위 명령어로 공식 저장소를 클론하여 RTLCSS의 모든 기능을 직접 경험해보세요.