🪵 6. 효율적인 UI 컴포넌트 스타일링: Tailwind CSS cn.ts

프론트엔드 개발에서는 비즈니스 로직과 UI를 분리해 재사용 가능하고 유연한 컴포넌트를 설계하는 동시에 UI 부분에서의 일관된 디자인 시스템을 효율적으로 구현하고 관리하는 것이 핵심 과제가 될 수 있습니다. 그래서 좋은 컴포넌트란 무엇인가? + Headless Pattern에서 살펴본 것처럼 Headless 패턴을 따르는 경우가 더러 있습니다.

이런 경우는 동적인 UI를 구현하기 위해 Emotion 같은 라이브러리를 사용하는게 일반적이지만, 우리는 빠른 퍼블리싱 구축을 위해 Tailwind CSS를 선택했습니다.

Tailwind CSS는 유틸리티 전용 클래스를 사용하는 CSS 라이브러리로서 Zero Runtime + 문자열 기반의 클래스 조작 기반의 라이브러리여서 성능이 강력하면서 편하다는 장점이 있습니다.

하지만 테일윈드 특성상 분리 가능하고, 재사용 가능한 UI 컴포넌트에 스타일을 적용할 때, 아래와 같은 애로사항이 있습니다.

1. 조건부 클래스 적용의 어려움
2. 클래스 충돌 문제
3. 클래스명 병합의 복잡성

즉, 테일윈드는 동적으로 컴포넌트를 만들기 어렵습니다.(물론 복잡하게 join, filter 등을 쓰면 가능하지만요.)

이러한 문제들을 해결하고 더 효율적인 UI 컴포넌트 개발을 위해, 우리는 몇 가지 핵심 라이브러리들을 조합한 cn.ts 유틸리티를 구축했습니다.

1. clsx

조건부 클래스를 직관적으로 결합할 수 있게 해주는 작은 유틸리티 라이브러리

clsx('base-class', isActive && 'active-class')
// -> isActive가 true면 'base-class active-class'
// -> false면 'base-class'

2. tailwind-merge

Tailwind 클래스 간의 충돌을 CSS스럽게 해결해주는 라이브러리

twMerge('px-2 py-1', 'p-3') // -> 'p-3'
twMerge('text-red-500', 'text-blue-500') // -> 'text-blue-500'

3. class-variance-authority (cva)

컴포넌트의 variant별 클래스를 타입 안전하게 관리할 수 있게 해주는 라이브러리

const buttonVariants = cva('base-button-styles', {
  variants: {
    variant: {
      primary: 'bg-blue-500',
      secondary: 'bg-gray-500'
    },
    size: {
      sm: 'text-sm',
      lg: 'text-lg'
    }
  }
});

이 세 라이브러리를 cn.ts 유틸리티로 통합해 사용합니다.

import { clsx, type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

import { cva, type VariantProps } from 'class-variance-authority';
import { cn } from '@/utils/cn';

const buttonVariants = cva(
  'inline-flex items-center justify-center gap-2 whitespace-nowrap ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
  {
    variants: {
      variant: {
        proimary: 'bg-violet-500 border-2 border-violet-950 hover:bg-violet-600',
        secondary: 'bg-eastbay-900 border-2 border-violet-950 hover:bg-eastbay-950',
      },
      size: {
        sm: 'h-11 w-full text-2xl font-medium text-stroke-md',
        lg: 'h-14 rounded-2xl w-full text-2xl font-medium text-stroke-md',
        icon: 'h-10 w-10',
      },
    },
    defaultVariants: {
      variant: 'proimary',
      size: 'lg',
    },
  },
);

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
  asChild?: boolean;
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(({ className, variant, size, ...props }, ref) => {
  return <button className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
});
Button.displayName = 'Button';

export { Button, buttonVariants };

이런 식으로 사용하면 됩니다.

결론 및 이점

cn.ts 유틸리티를 활용한 UI 컴포넌트 스타일링 시스템은 아래와 같은 핵심적인 이점을 줄 수 있습니다.

1. 체계적인 디자인 시스템 구현
   • 일관된 클래스 처리 패턴으로 컴포넌트 스타일링
   • 프로젝트 전반의 디자인 일관성 확보
   • 코드 스타일의 규격화 달성
2. 자동화된 스타일 관리
   • 컴포넌트 내부/외부 스타일 우선순위 자동 조정
   • 클래스 충돌 없는 안전한 스타일 확장
   • 조건부 스타일링의 간소화
3. 개발 생산성 향상
   • 타입 시스템을 통한 props 자동 완성
   • 컴포넌트 variants와 size 등의 타입 안전성
   • 빌드 타임 최적화로 런타임 성능 보장
4. 확장 가능한 컴포넌트 아키텍처
   • 스타일 변형의 재사용성 확보
   • 기존 컴포넌트의 유연한 확장
   • 새로운 디자인 요구사항에 빠른 대응

이렇게 만든 Tailwind CSS 기반의 UI 컴포넌트 시스템은 재사용 가능하면서도 유연한 디자인 시스템을 효율적으로 구현하고 관리할 수 있게 해줍니다.