Tailwind CSS로 반응형 카드 UI 구현하기
유틸리티 클래스로 만드는 모던하고 세련된 디자인
왜 Tailwind CSS인가?
처음에는 Bootstrap이나 직접 CSS를 작성하는 것을 고려했습니다. 하지만 Tailwind CSS를 선택한 이유는 명확했습니다:
- 빠른 개발 속도: HTML을 떠나지 않고 스타일링 가능
- 일관성: 디자인 시스템이 내장되어 있음
- 반응형: 모바일 퍼스트 접근 방식
- 커스터마이징: 필요한 만큼만 사용
- 유지보수: CSS 파일이 방대해지지 않음
CDN으로 빠르게 시작하기
프로토타이핑 단계에서는 CDN을 사용하면 빠르게 시작할 수 있습니다.
<!-- index.html -->
<script src="https://cdn.tailwindcss.com"></script>주의: 프로덕션 환경에서는 빌드 과정을 거쳐 최적화된 CSS를 사용하는 것이 좋습니다. 하지만 MVP나 프로토타입을 빠르게 만들 때는 CDN이 최적의 선택입니다.
기본 카드 구조 만들기
심리 테스트 카드의 기본 구조부터 시작했습니다. Tailwind의 유틸리티 클래스를 조합하여 원하는 디자인을 만들어갑니다.
<div class="bg-white rounded-2xl shadow-lg overflow-hidden">
<div class="p-6">
<span class="text-6xl">🧬</span>
<h3 class="text-xl font-bold text-gray-800 mt-4">
초정밀 MBTI 검사
</h3>
<p class="text-gray-600 mt-2">
90문항으로 분석하는 내 안의 진짜 성격 유형
</p>
</div>
</div>각 클래스의 의미:
bg-white: 흰색 배경rounded-2xl: 큰 모서리 둥글게 (16px)shadow-lg: 큰 그림자 효과overflow-hidden: 내용이 넘치지 않도록p-6: 패딩 24px (모든 방향)
그라데이션 배경 추가하기
Tailwind의 그라데이션 클래스를 사용하면 코드 한 줄로 아름다운 배경을 만들 수 있습니다.
<!-- 전체 페이지 배경 -->
<body class="bg-gradient-to-br from-purple-50 via-pink-50 to-blue-50">
<!-- 카드 배경 -->
<div class="bg-gradient-to-br from-purple-50 to-indigo-50">
<!-- 버튼 그라데이션 -->
<button class="bg-gradient-to-r from-purple-500 to-indigo-600">
시작하기
</button>그라데이션 방향:
to-r: 왼쪽에서 오른쪽to-br: 왼쪽 위에서 오른쪽 아래to-b: 위에서 아래to-tr: 왼쪽 아래에서 오른쪽 위
호버 효과와 애니메이션
사용자 인터랙션을 위한 호버 효과는 필수입니다.
Tailwind는 hover: 접두사로 간단하게 구현할 수 있습니다.
<div class="transform hover:scale-105 hover:shadow-2xl transition-all duration-300">
<!-- 카드 내용 -->
</div>
하지만 더 복잡한 애니메이션은 커스텀 CSS가 필요합니다.
저는 styles.css 파일을 만들어 추가 스타일을 정의했습니다.
/* styles.css */
.test-card {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
}
.test-card:hover {
transform: translateY(-8px);
}
.test-icon {
transition: transform 0.3s ease;
display: inline-block;
}
.test-card:hover .test-icon {
transform: scale(1.2) rotate(5deg);
}반응형 디자인
Tailwind의 가장 큰 장점 중 하나는 반응형 디자인이 쉽다는 것입니다. 모바일 퍼스트 접근 방식으로, 기본은 모바일이고 큰 화면용 스타일을 추가합니다.
<!-- 그리드 레이아웃: 모바일 1열, 태블릿 2열, 데스크톱 4열 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
<!-- 카드들 -->
</div>
<!-- 텍스트 크기: 모바일 작게, 데스크톱 크게 -->
<h1 class="text-2xl md:text-4xl font-bold">
심리 테스트 허브
</h1>
<!-- 숨기기/보이기 -->
<p class="hidden md:block">
데스크톱에서만 보이는 설명
</p>브레이크포인트:
sm:640px 이상md:768px 이상lg:1024px 이상xl:1280px 이상2xl:1536px 이상
backdrop-blur로 모던한 느낌 주기
반투명 배경에 블러 효과를 주면 매우 세련된 느낌을 줄 수 있습니다.
<header class="bg-white/80 backdrop-blur-md">
<!-- 헤더 내용 -->
</header>
bg-white/80은 80% 투명도의 흰색 배경을 의미하고,
backdrop-blur-md는 뒤의 내용을 블러 처리합니다.
실전 예제: 완성된 카드 컴포넌트
이제 모든 요소를 조합하여 완성된 카드를 만들어봅시다.
<div class="test-card bg-white rounded-2xl shadow-lg overflow-hidden bg-gradient-to-br from-purple-50 to-indigo-50 border border-gray-100">
<div class="p-6 relative">
<!-- 우선순위 배지 -->
<div class="absolute top-4 right-4">
<span class="bg-gradient-to-r from-purple-600 to-pink-600 text-white text-xs font-bold px-3 py-1 rounded-full">
#01
</span>
</div>
<!-- 아이콘 -->
<div class="mb-4">
<span class="test-icon text-6xl">🧬</span>
</div>
<!-- 카테고리 -->
<span class="inline-block bg-white/80 text-gray-700 text-xs font-semibold px-3 py-1 rounded-full border border-gray-200">
메인
</span>
<!-- 제목 -->
<h3 class="text-xl font-bold text-gray-800 mb-3 mt-3">
초정밀 MBTI 검사
</h3>
<!-- 설명 -->
<p class="text-gray-600 text-sm mb-4">
90문항으로 분석하는 내 안의 진짜 성격 유형
</p>
<!-- 구분선 -->
<div class="border-t border-gray-200 my-4"></div>
<!-- 기대 효과 -->
<div class="flex items-center space-x-2">
<svg class="w-4 h-4 text-purple-500" fill="currentColor">
<!-- SVG 경로 -->
</svg>
<span class="text-xs text-gray-500">유입 및 바이럴 핵심</span>
</div>
<!-- 버튼 -->
<button class="mt-5 w-full bg-gradient-to-r from-purple-500 to-indigo-600 text-white font-semibold py-3 px-6 rounded-xl hover:shadow-lg transition-all duration-300 transform hover:scale-105">
검사 시작하기
</button>
</div>
</div>성능 고려사항
Tailwind CSS를 사용할 때 주의할 점이 있습니다:
1. CDN 사용 시 파일 크기
CDN 버전은 모든 클래스를 포함하고 있어 파일 크기가 큽니다 (약 3MB). 프로덕션에서는 PurgeCSS를 사용하여 사용하지 않는 클래스를 제거해야 합니다.
2. JIT 모드
Tailwind 3.0부터는 JIT(Just-In-Time) 모드가 기본입니다. 필요한 클래스만 실시간으로 생성하여 개발 속도와 빌드 크기를 모두 개선합니다.
3. 커스텀 클래스 최소화
가능한 한 Tailwind의 유틸리티 클래스를 사용하고, 정말 필요한 경우에만 커스텀 CSS를 작성합니다.
디자인 시스템 일관성
Tailwind의 내장 디자인 시스템을 활용하면 일관된 디자인을 유지할 수 있습니다:
- 간격: 4px 단위 (1 = 4px, 2 = 8px, 4 = 16px...)
- 색상: 50~900 단계의 색상 팔레트
- 타이포그래피: 정의된 폰트 크기와 두께
- 그림자: sm, md, lg, xl, 2xl 단계
"Tailwind CSS는 디자인 시스템을 코드로 표현하는 가장 효율적인 방법입니다."
💡 핵심 요약
- 유틸리티 클래스로 빠르게 스타일링
- 반응형 디자인이 기본으로 지원됨
- hover:, focus: 등으로 상태별 스타일 적용
- 복잡한 애니메이션은 커스텀 CSS 사용
- 프로덕션에서는 PurgeCSS 필수