스타일링 비교: Tailwind vs CSS Modules vs styled

| 측면 | Tailwind | CSS Modules | styled-components |
|---|---|---|---|
| 학습 곡선 | ⭐⭐ | ⭐ | ⭐⭐⭐ |
| 번들 크기 | 작음 (purge) | 중 | 중 |
| 런타임 비용 | 0 | 0 | 있음 |
| 동적 스타일 | ⭐⭐ | ⭐ | ⭐⭐⭐ |
| 디자인 시스템 | ⭐⭐⭐ | ⭐⭐ | ⭐⭐ |
| 적합 | 중대규모·디자인 시스템 | 단순 + CSS 친숙 | JS 친숙 + 동적 |

function ProductCard({ product, isFeatured }: Props) {
  return (
    <div className={`
      p-4 rounded-lg shadow-md transition
      ${isFeatured ? 'bg-amber-50 border-2 border-amber-500' : 'bg-white border'}
      hover:shadow-xl hover:scale-105
    `}>
      <h3 className="text-xl font-bold text-gray-900">{product.name}</h3>
      <p className="text-gray-600 mt-2">{product.description}</p>
      <div className="flex justify-between items-center mt-4">
        <span className="text-2xl font-bold text-indigo-600">
          ₩{product.price.toLocaleString()}
        </span>
        <button className="px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700">
          담기
        </button>
      </div>
    </div>
  );
}

/* ProductCard.module.css */
.card {
  padding: 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: all 0.2s;
}

.card:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.featured {
  background: #fef3c7;
  border: 2px solid #f59e0b;
}

.title {
  font-size: 1.25rem;
  font-weight: bold;
  color: #111827;
}

.price {
  font-size: 1.5rem;
  font-weight: bold;
  color: #4f46e5;
}

import styles from './ProductCard.module.css';

function ProductCard({ product, isFeatured }: Props) {
  return (
    <div className={`${styles.card} ${isFeatured ? styles.featured : ''}`}>
      <h3 className={styles.title}>{product.name}</h3>
      <span className={styles.price}>₩{product.price.toLocaleString()}</span>
    </div>
  );
}

import styled from 'styled-components';

const Card = styled.div<{ isFeatured?: boolean }>`
  padding: 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: all 0.2s;
  background: ${p => p.isFeatured ? '#fef3c7' : '#fff'};
  border: ${p => p.isFeatured ? '2px solid #f59e0b' : '1px solid #e5e7eb'};

  &:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
  }
`;

const Title = styled.h3`
  font-size: 1.25rem;
  font-weight: bold;
  color: #111827;
`;

const Price = styled.span`
  font-size: 1.5rem;
  font-weight: bold;
  color: #4f46e5;
`;


function ProductCard({ product, isFeatured }: Props) {
  return (
    <Card isFeatured={isFeatured}>
      <Title>{product.name}</Title>
      <Price>₩{product.price.toLocaleString()}</Price>
    </Card>
  );
}

2026년 한국 프론트 트렌드:
1. Tailwind: 60% (압도적, 빠른 개발)
2. CSS Modules: 25% (Next.js 친화)
3. styled-components: 10% (감소 중 — Server Components 비호환)
4. Emotion / Vanilla Extract: 5% (특수 용도)


빅테크 채택:
- 토스: Tailwind + 자체 디자인 시스템
- 쿠팡: Tailwind
- 당근: Tailwind + CSS Modules
- 네이버: 자체 시스템 (구) + Tailwind (신규)