Shadcn UI로 나만의 Card 만들기: 디자인 커스터마이징 팁

Shadcn UI는 기본적으로 깔끔한 스타일을 제공하지만,
실무에서는 각 브랜드나 프로젝트 톤앤매너에 맞게 커스터마이징이 필요하죠.

이번 글에서는 Card 컴포넌트를 중심으로 Tailwind CSS와 함께
그림자, 라운드 처리, 호버 인터랙션, 텍스트 스타일 등을 어떻게 조합해 커스터마이징할 수 있는지 알아봅니다.

---

🧱 기본 Card 구조

Shadcn UI에서 제공하는 기본 Card 구조는 다음과 같습니다:

import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";

export function BasicCard() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>제목입니다</CardTitle>
      </CardHeader>
      <CardContent>
        <p>카드 내용이 들어갑니다.</p>
      </CardContent>
    </Card>
  );
}

간결하고 명확하죠. 하지만 이렇게만 쓰기엔 심심하고, 실무에서는 디자인이 중요한 요소입니다.

🎨 커스터마이징 1: 그림자와 라운드

<Card className="shadow-xl rounded-2xl">

• shadow-xl: 카드에 입체감을 부여해 시각적 계층 구조를 강조
• rounded-2xl: 더 부드럽고 트렌디한 인상을 주는 둥근 모서리

💡 팁: 디자인 시스템에서 사용하는 그림자 단계(shadow-md, shadow-lg)와 조화롭게 사용하세요.

🌈 커스터마이징 2: 호버 효과 추가

<Card className="transition-all duration-300 hover:scale-105 hover:shadow-2xl">

• transition-all duration-300: 애니메이션이 부드럽게 적용
• hover:scale-105: 살짝 확대되는 효과
• hover:shadow-2xl: 마우스 오버 시 그림자 강화

사용자의 마우스 인터랙션에 따라 자연스러운 반응을 주는 것이 UI 퀄리티를 높이는 핵심입니다.

🧩 커스터마이징 3: 내부 텍스트 스타일 조정

<Card className="p-6 bg-white">
  <CardHeader className="pb-2">
    <CardTitle className="text-xl font-bold text-primary">제목</CardTitle>
  </CardHeader>
  <CardContent className="text-sm text-muted-foreground">
    카드 내용입니다. 브랜드 스타일에 맞게 텍스트 스타일을 조절할 수 있습니다.
  </CardContent>
</Card>

• text-primary, text-muted-foreground: Tailwind CSS의 유틸리티 클래스를 활용해 색상 시스템과 연결
• font-bold, text-xl: 폰트 강조 및 계층적 정보 전달

✅ 실무에서는 이렇게 활용돼요

이런 커스터마이징은 다음과 같은 상황에서 유용합니다

• 마케팅 랜딩 페이지의 카드형 콘텐츠
• 대시보드 내 정보 요약 패널
• CTA(Call To Action) 버튼 포함형 카드

디자인 시스템을 쓰는 팀이라면, 커스터마이징된 Card를 공통 컴포넌트로 만들어 공통화하는 것이 유지보수에도 매우 효과적입니다.

🧭 마무리

Shadcn UI는 UI 구성 요소를 빠르게 구성할 수 있는 강력한 도구입니다. Tailwind CSS와의 조합으로 브랜드 톤에 맞는 디자인 커스터마이징까지 가능하죠.

이번 포스팅에서는 Card 컴포넌트를 중심으로 살펴봤지만, Button, Dialog, Tabs 같은 다른 컴포넌트에서도 같은 방식으로 확장할 수 있습니다.