M

MLOG

한국어

동적 클래스 이름 생성, 프로덕션 최적화, 스타일시트 보호를 위한 모범 사례를 다루는 Tailwind CSS Safelisting 종합 가이드.

Tailwind CSS Safelisting: 프로덕션을 위한 동적 클래스 이름 보호

Tailwind CSS는 웹 애플리케이션의 스타일링을 위한 방대한 사전 정의 클래스를 제공하는 유틸리티 우선 CSS 프레임워크입니다. 유틸리티 우선 접근 방식은 개발에 있어 탁월한 유연성과 속도를 제공하지만, 제대로 관리되지 않으면 프로덕션 환경에서 큰 CSS 파일을 초래할 수 있습니다. 바로 이 지점에서 세이프리스팅(safelisting, 화이트리스팅이라고도 함)이 필요합니다. 세이프리스팅은 프로젝트에서 사용하려는 클래스 이름을 Tailwind CSS에 명시적으로 알려주어 빌드 과정에서 사용되지 않는 모든 다른 클래스를 제거하도록 하는 과정입니다. 이는 CSS 파일 크기를 극적으로 줄여 페이지 로드 시간을 단축하고 성능을 향상시킵니다.

Safelisting의 필요성 이해하기

Tailwind CSS는 기본적으로 수천 개의 CSS 클래스를 생성합니다. 만약 이 모든 클래스를 극히 일부만 사용하더라도 프로덕션 빌드에 포함시킨다면, CSS 파일은 불필요하게 커질 것입니다. 이는 여러 가지 방식으로 웹사이트 성능에 영향을 미칩니다:

Safelisting은 실제로 사용하는 클래스만 선택적으로 포함하여 이러한 문제를 해결함으로써 훨씬 작고 효율적인 CSS 파일을 만듭니다. 현대 웹 개발 관행은 간결하고 최적화된 코드를 요구합니다. Tailwind CSS에서의 Safelisting은 단순히 모범 사례가 아니라, 성능이 뛰어난 웹 애플리케이션을 제공하기 위한 필수 요소입니다.

동적 클래스 이름의 어려움

Safelisting이 중요하지만, 동적 클래스 이름을 사용할 때는 어려움이 따릅니다. 동적 클래스 이름은 런타임에 생성되거나 수정되는 클래스로, 종종 사용자 입력, API에서 가져온 데이터 또는 JavaScript 코드 내의 조건부 로직에 기반합니다. 이러한 클래스들은 초기 Tailwind CSS 빌드 과정에서 예측하기 어렵습니다. 왜냐하면 빌드 도구가 해당 클래스가 필요하게 될 것이라는 사실을 "볼" 수 없기 때문입니다.

예를 들어, 사용자 선호도에 따라 동적으로 배경색을 적용하는 시나리오를 생각해 봅시다. 여러 색상 옵션(예: `bg-red-500`, `bg-green-500`, `bg-blue-500`)이 있고, 사용자의 선택에 따라 JavaScript를 사용하여 적절한 클래스를 적용할 수 있습니다. 이 경우, 명시적으로 safelist에 추가하지 않는 한 Tailwind CSS는 최종 CSS 파일에 이러한 클래스를 포함하지 않을 수 있습니다.

또 다른 일반적인 예는 연관된 스타일을 가진 동적으로 생성된 콘텐츠입니다. 각각의 타입이나 데이터 소스에 따라 고유한 스타일을 가진 다양한 위젯을 표시하는 대시보드를 구축한다고 상상해 보십시오. 각 위젯에 적용되는 특정 Tailwind CSS 클래스는 표시되는 데이터에 따라 달라질 수 있으므로 사전에 safelist에 추가하기 어렵습니다. 이는 또한 최종 사용자가 일부 CSS 클래스를 사용하기를 원하는 컴포넌트 라이브러리에도 적용됩니다.

동적 클래스 이름 Safelisting 방법

Tailwind CSS에서 동적 클래스 이름을 safelist에 추가하는 데는 여러 전략이 있습니다. 최상의 접근 방식은 프로젝트의 복잡성과 동적인 정도에 따라 달라집니다.

1. `tailwind.config.js`에서 `safelist` 옵션 사용하기

가장 간단한 방법은 `tailwind.config.js` 파일에서 `safelist` 옵션을 사용하는 것입니다. 이 옵션을 사용하면 최종 CSS 파일에 항상 포함되어야 하는 클래스 이름을 명시적으로 지정할 수 있습니다.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  safelist: [
    'bg-red-500',
    'bg-green-500',
    'bg-blue-500',
    'text-xl',
    'font-bold',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

장점:

단점:

2. `safelist`에서 정규 표현식 사용하기

더 복잡한 시나리오의 경우, `safelist` 옵션 내에서 정규 표현식을 사용할 수 있습니다. 이를 통해 각 클래스 이름을 명시적으로 나열하는 대신 클래스 이름의 패턴을 일치시킬 수 있습니다.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  safelist: [
    /^bg-.*-500$/,
    /^text-./, // 모든 텍스트 클래스와 일치하는 예시
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

이 예에서 정규 표현식 `/^bg-.*-500$/`은 `bg-`로 시작하고, 그 뒤에 어떤 문자든(`.*`) 오고, `-500`으로 끝나는 모든 클래스 이름과 일치합니다. 여기에는 `bg-red-500`, `bg-green-500`, `bg-blue-500`뿐만 아니라 `bg-mycustomcolor-500`과 같은 클래스도 포함됩니다.

장점:

단점:

3. 빌드 시 동적 Safelist 생성하기

클래스 이름을 예측하기 어려운 매우 동적인 시나리오의 경우, 빌드 과정 중에 동적 safelist를 생성할 수 있습니다. 여기에는 코드를 분석하여 동적 클래스 이름을 식별한 다음, Tailwind CSS가 실행되기 전에 이를 `safelist` 옵션에 추가하는 과정이 포함됩니다.

이 접근 방식은 일반적으로 빌드 스크립트(예: Node.js 스크립트)를 사용하여 다음을 수행합니다:

  1. JavaScript, TypeScript 또는 기타 코드 파일을 파싱합니다.
  2. 잠재적인 동적 클래스 이름을 식별합니다(예: 문자열 보간이나 클래스 이름을 생성하는 조건부 로직 검색).
  3. 식별된 클래스 이름을 포함하는 `safelist` 배열을 생성합니다.
  4. 생성된 `safelist` 배열로 `tailwind.config.js` 파일을 업데이트합니다.
  5. Tailwind CSS 빌드 프로세스를 실행합니다.

이는 가장 복잡한 접근 방식이지만, 매우 동적인 클래스 이름을 처리하는 데 있어 최고의 유연성과 정확성을 제공합니다. 이 목적을 위해 `esprima`나 `acorn`과 같은 도구(JavaScript 파서)를 사용할 수 있습니다. 이 접근 방식에 대해서는 좋은 테스트 커버리지를 확보하는 것이 중요합니다.

이를 구현할 수 있는 간단한 예는 다음과 같습니다:

// build-safelist.js
const fs = require('fs');
const glob = require('glob');

// 문자열에서 잠재적인 Tailwind 클래스를 추출하는 함수 (매우 기본적인 예시)
function extractClasses(content) {
  const classRegex = /(?:class(?:Name)?=["'])([^"']*)(?:["'])/g;  // 개선된 정규식
  let match;
  const classes = new Set();
  while ((match = classRegex.exec(content)) !== null) {
    const classList = match[1].split(/\s+/);
    classList.forEach(cls => {
      // 클래스가 Tailwind 클래스처럼 *보이는지* 확인하기 위해 이 부분을 더 구체화하세요
      if (cls.startsWith('bg-') || cls.startsWith('text-') || cls.startsWith('font-')) {  // 단순화된 Tailwind 클래스 확인
        classes.add(cls);
      }
    });
  }
  return Array.from(classes);
}


const files = glob.sync('./src/**/*.{js,jsx,ts,tsx}'); // 파일과 일치하도록 glob 패턴을 조정하세요

let allClasses = [];
files.forEach(file => {
  const content = fs.readFileSync(file, 'utf-8');
  const extractedClasses = extractClasses(content);
   allClasses = allClasses.concat(extractedClasses);
});

const uniqueClasses = [...new Set( allClasses)];

// Tailwind 설정 읽기
const tailwindConfigPath = './tailwind.config.js';
const tailwindConfig = require(tailwindConfigPath);

// safelist 업데이트
tailwindConfig.safelist = tailwindConfig.safelist || []; // safelist가 존재하는지 확인
tailwindConfig.safelist = tailwindConfig.safelist.concat(uniqueClasses);

// 업데이트된 설정을 파일에 다시 쓰기
fs.writeFileSync(tailwindConfigPath, `module.exports = ${JSON.stringify(tailwindConfig, null, 2)}`);

console.log('Tailwind 설정 safelist가 성공적으로 업데이트되었습니다!');

그리고 빌드 단계 전에 이를 실행하도록 `package.json`을 수정하세요:

{"scripts": {
  "build": "node build-safelist.js && next build",  // 또는 여러분의 빌드 명령어
  ...
}}

코드 파싱 시 중요 고려사항:

장점:

단점:

4. 최후의 수단으로 인라인 스타일 사용하기 (일반적으로 권장되지 않음)

위의 방법들로 쉽게 safelist에 추가할 수 없는 매우 동적인 스타일이 있는 경우, 최후의 수단으로 인라인 스타일을 사용하는 것을 고려할 수 있습니다. 그러나 이 접근 방식은 Tailwind CSS와 같은 CSS 프레임워크를 사용하는 목적에 어긋나므로 일반적으로 권장되지 않습니다.

인라인 스타일은 CSS 파일에 정의되는 대신 HTML 요소에 직접 적용됩니다. 이는 여러 문제를 야기할 수 있습니다:

인라인 스타일을 사용해야 한다면, 가장 동적이고 예측 불가능한 스타일에만 사용을 제한하도록 노력하세요. React의 `style` prop이나 Vue.js의 `:style` 바인딩과 같이 인라인 스타일을 더 효과적으로 관리하는 데 도움이 되는 JavaScript 라이브러리를 사용하는 것을 고려해 보세요.

예시 (React):

function MyComponent({ backgroundColor }) {
  return (
    

      {/* ... */}
    

  );
}

Tailwind CSS Safelisting 모범 사례

Tailwind CSS safelisting 전략이 효과적이고 유지보수 가능하도록 하려면 다음 모범 사례를 따르십시오:

국제화 관련 예시 시나리오

국제화(i18n) 및 현지화(l10n) 기능이 있는 애플리케이션을 고려할 때 Safelisting은 더욱 중요해집니다.

오른쪽에서 왼쪽으로 쓰는(RTL) 언어

아랍어, 히브리어, 페르시아어와 같은 언어에서는 텍스트가 오른쪽에서 왼쪽으로 흐릅니다. Tailwind CSS는 `rtl:text-right` 및 `ltr:text-left`와 같이 RTL 레이아웃을 처리하기 위한 유틸리티를 제공합니다. 그러나 이러한 유틸리티는 명시적으로 safelist에 추가되거나 소스 코드에서 감지된 경우에만 최종 CSS 파일에 포함됩니다.

애플리케이션이 RTL 언어를 지원하는 경우, RTL 환경에서 레이아웃이 올바르게 표시되도록 관련 RTL 유틸리티를 safelist에 추가해야 합니다. 예를 들어, `/^(rtl:|ltr:)/`와 같은 정규 표현식을 사용하여 모든 RTL 및 LTR 유틸리티를 safelist에 추가할 수 있습니다.

다양한 글꼴 계열

언어마다 문자를 올바르게 표시하기 위해 다른 글꼴 계열이 필요합니다. 예를 들어, 중국어, 일본어, 한국어는 CJK 문자를 지원하는 글꼴이 필요합니다. 마찬가지로, 악센트 부호가 있는 문자를 사용하는 언어는 해당 문자를 포함하는 글꼴이 필요할 수 있습니다.

애플리케이션이 여러 언어를 지원하는 경우, 언어별로 다른 글꼴 계열을 사용해야 할 수 있습니다. CSS의 `@font-face` 규칙을 사용하여 사용자 정의 글꼴 계열을 정의한 다음, Tailwind CSS를 사용하여 특정 요소에 적용할 수 있습니다. CSS에서 사용하는 글꼴 계열 이름이 최종 CSS 파일에 포함되도록 safelist에 추가해야 합니다.

예시:

/* 전역 CSS 파일에서 */
@font-face {
  font-family: 'Noto Sans SC';
  src: url('/fonts/NotoSansSC-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Noto Sans SC';
  src: url('/fonts/NotoSansSC-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}

/* tailwind.config.js 파일에서 */
module.exports = {
  // ...
  theme: {
    extend: {
      fontFamily: {
        'sans': ['Noto Sans SC', ...],
      },
    },
  },
  safelist: [
    'font-sans', // font-sans가 항상 포함되도록 보장
  ],
};

스타일링의 문화적 차이

경우에 따라 스타일링 선호도는 문화에 따라 다를 수 있습니다. 예를 들어, 색상 연상은 문화권마다 크게 다를 수 있습니다. 마찬가지로, 공백과 타이포그래피의 사용도 문화적 규범의 영향을 받을 수 있습니다.

애플리케이션이 전 세계 고객을 대상으로 하는 경우, 이러한 문화적 차이를 염두에 두고 그에 맞게 스타일링을 조정해야 합니다. 여기에는 지역별로 다른 CSS 클래스를 사용하거나 사용자가 자신의 스타일링 선호도를 사용자 정의할 수 있도록 하는 것이 포함될 수 있습니다.

결론

Tailwind CSS Safelisting은 프로덕션 환경을 위한 중요한 최적화 기술입니다. 최종 CSS 파일에 포함되어야 할 클래스 이름을 명시적으로 지정함으로써 파일 크기를 크게 줄여 페이지 로드 시간을 단축하고 성능을 향상시킬 수 있습니다. 동적 클래스 이름이 어려운 과제이긴 하지만, 간단한 명시적 목록 작성부터 더 복잡한 동적 safelist 생성에 이르기까지 이를 처리하기 위한 여러 전략이 있습니다. 이 가이드에 설명된 모범 사례를 따르면 Tailwind CSS safelisting 전략이 효과적이고 유지보수 가능하며 프로젝트의 고유한 요구에 적응할 수 있도록 보장할 수 있습니다.

웹 개발 프로젝트에서 사용자 경험과 성능을 우선시하는 것을 기억하십시오. Tailwind CSS를 사용한 Safelisting은 이러한 목표를 달성하기 위한 강력한 도구입니다.