Tailwind CSS로 복잡한 반응형 대시보드 만들기

Tailwind CSS 대시보드 레이아웃 전략

관리자 대시보드는 다양한 위젯과 차트, 테이블이 혼합된 복잡한 레이아웃을 요구합니다. Tailwind CSS의 유틸리티 클래스를 활용하면 CSS 파일 없이도 정교한 반응형 대시보드를 만들 수 있습니다.

기본 대시보드 그리드 구조

<!-- 메인 대시보드 레이아웃 -->
<div class="min-h-screen bg-gray-100">
  <!-- 사이드바 + 콘텐츠 -->
  <div class="flex">
    <aside class="hidden lg:block w-64 bg-white shadow-sm min-h-screen">
      <nav class="p-4 space-y-2">
        <a href="#" class="flex items-center gap-3 px-3 py-2 rounded-lg
           bg-blue-50 text-blue-700 font-medium">
          <svg class="w-5 h-5" ...></svg>
          대시보드
        </a>
      </nav>
    </aside>

    <main class="flex-1 p-4 lg:p-8">
      <!-- 통계 카드 그리드 -->
      <div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4 mb-8">
        <div class="bg-white rounded-xl p-6 shadow-sm">
          <p class="text-sm text-gray-500">총 매출</p>
          <p class="text-2xl font-bold mt-1">₩12,450,000</p>
          <p class="text-green-600 text-sm mt-2">+12.5%</p>
        </div>
      </div>

      <!-- 차트 + 사이드 패널 -->
      <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
        <div class="lg:col-span-2 bg-white rounded-xl p-6 shadow-sm">
          <!-- 메인 차트 영역 -->
        </div>
        <div class="bg-white rounded-xl p-6 shadow-sm">
          <!-- 사이드 위젯 -->
        </div>
      </div>
    </main>
  </div>
</div>

반응형 브레이크포인트 전략

커스텀 대시보드 컴포넌트

// tailwind.config.js 커스텀 설정
module.exports = {
  theme: {
    extend: {
      gridTemplateColumns: {
        'dashboard': '250px 1fr',
        'dashboard-wide': '300px 1fr 300px',
      },
      gridTemplateRows: {
        'dashboard': 'auto 1fr auto',
      },
    },
  },
  plugins: [
    // 커스텀 대시보드 유틸리티
    function({ addUtilities }) {
      addUtilities({
        '.scrollbar-thin': {
          'scrollbar-width': 'thin',
        },
        '.scrollbar-hide': {
          '-ms-overflow-style': 'none',
          'scrollbar-width': 'none',
          '&::-webkit-scrollbar': { display: 'none' },
        },
      });
    },
  ],
};

데이터 테이블 반응형 처리

<!-- 반응형 테이블 -->
<div class="overflow-x-auto rounded-lg border border-gray-200">
  <table class="min-w-full divide-y divide-gray-200">
    <thead class="bg-gray-50">
      <tr>
        <th class="px-6 py-3 text-left text-xs font-medium
            text-gray-500 uppercase tracking-wider">
          사용자
        </th>
        <th class="hidden md:table-cell px-6 py-3 text-left
            text-xs font-medium text-gray-500 uppercase">
          이메일
        </th>
        <th class="px-6 py-3 text-right text-xs font-medium
            text-gray-500 uppercase">
          상태
        </th>
      </tr>
    </thead>
    <tbody class="bg-white divide-y divide-gray-200">
      <tr class="hover:bg-gray-50 transition-colors">
        <td class="px-6 py-4 whitespace-nowrap">
          <div class="flex items-center">
            <div class="w-8 h-8 rounded-full bg-blue-100
                flex items-center justify-center">
              <span class="text-blue-700 text-sm font-medium">김</span>
            </div>
            <span class="ml-3 font-medium">김영삼</span>
          </div>
        </td>
        <td class="hidden md:table-cell px-6 py-4 text-gray-500">
          user@example.com
        </td>
        <td class="px-6 py-4 text-right">
          <span class="inline-flex px-2 py-1 text-xs font-semibold
              rounded-full bg-green-100 text-green-800">활성</span>
        </td>
      </tr>
    </tbody>
  </table>
</div>

다크 모드 대응

• dark: 접두사로 모든 색상을 오버라이드할 수 있습니다
• CSS 변수와 결합하면 테마 전환이 매끄럽습니다
• class 전략 사용 시 JavaScript로 토글 제어가 가능합니다
• 시스템 설정 연동: @media (prefers-color-scheme: dark)

Tailwind CSS의 유틸리티 퍼스트 접근법은 대시보드처럼 반복적인 패턴이 많은 UI에서 특히 생산성이 높습니다. 컴포넌트 추출과 함께 사용하면 유지보수성도 확보할 수 있습니다.