# Card-Based Design — 디자인 스타일 가이드
## 기본 정보
- **ID**: card-design
- **카테고리**: ui-pattern
- **연도**: 2013
## 설명
정보를 카드 형태로 구조화하여 스캔과 소비가 용이하도록 합니다.
## 핵심 원칙
- 정보 그룹화
- 스캔 용이성
- 유연성
## 주요 특징
- 독립적인 컨테이너
- 명확한 경계
- 일관된 크기
- 그리드 레이아웃
- 쉬운 재배치
## 사용 사례
- 소셜 미디어 피드
- 이커머스 상품 목록
- 뉴스·블로그 목록
- 대시보드 위젯
## 추천 프로젝트 유형
- 피드형 서비스
- 이커머스
- 대시보드
- 콘텐츠 큐레이션
## 장점
- 반응형 레이아웃 구현이 자연스러움
- 정보 스캔 속도 향상
- 순서·개수 변경이 유연
- 모바일·데스크톱 모두 잘 어울림
## 단점·한계
- 카드가 많아지면 시각적 피로
- 정보 밀도가 낮아질 수 있음
- 깊이 있는 콘텐츠 표현에 한계
## 실제 사용 제품·서비스
- Pinterest
- Google Now
- Trello
- Airbnb 검색 결과
## 관련 스타일
- [bento-grid](https://ui.buildersgate.com/styles/bento-grid)
- [mobile-first](https://ui.buildersgate.com/styles/mobile-first)
- [material-design](https://ui.buildersgate.com/styles/material-design)
## 디자인 토큰
### 색상
- primary: #9C27B0
- secondary: #7B1FA2
- accent: #E040FB
- background: #F3E5F5
- surface: #FFFFFF
- text: #1A1A2E
- textSecondary: #6B7280
- border: #E1BEE7
### 헤더
- background: linear-gradient(135deg, #9C27B0 0%, #6A1B9A 100%)
- textColor: #FFFFFF
- accentColor: #E040FB
### 타이포그래피
- fontFamily: Inter, 'Noto Sans KR', sans-serif
- headingWeight: 600
- bodyWeight: 400
- letterSpacing: 0em
### 스페이싱
- unit: 8px
- scale: 1
### 그림자 (Shadows)
- sm: 0 2px 6px rgba(156,39,176,0.10)
- md: 0 6px 16px rgba(156,39,176,0.15)
- lg: 0 12px 28px rgba(156,39,176,0.18)
- xl: 0 20px 48px rgba(156,39,176,0.22)
### Border Radius
- none: 0
- sm: 8px
- md: 12px
- lg: 20px
- full: 9999px
### 테두리 (Borders)
- width: 1px
- style: solid
- color: #E1BEE7
### 이펙트
- blur: 0px
- opacity: 1
- transition: all 0.25s ease
### 애니메이션
- duration: 250ms
- easing: ease-out
### 컴포넌트 토큰
- 버튼: shape=rounded / hoverEffect=lift / textTransform=none
- 카드: style=elevated / hoverEffect=lift
- 인풋: style=outlined / focusEffect=glow
- 배지: shape=pill / style=subtle
- 아이콘: package=lucide / strokeWidth=1.5 / defaultSize=24
### 레이아웃
- containerStyle: boxed
- sectionSpacing: normal
### 특수 효과
- glassmorphism: false
- gradientText: false
- animatedBackground: false
- scanlines: false
- noise: false
## API 엔드포인트
- 스타일 상세: https://ui.buildersgate.com/api/styles?id=card-design
- 디자인 토큰: https://ui.buildersgate.com/api/themes?id=card-design&merged=true
Card-Based Design
정보를 카드 형태로 구조화하여 스캔과 소비가 용이하도록 합니다.
주요 특징
- 독립적인 컨테이너
- 명확한 경계
- 일관된 크기
- 그리드 레이아웃
- 쉬운 재배치
장단점
장점
- +반응형 레이아웃 구현이 자연스러움
- +정보 스캔 속도 향상
- +순서·개수 변경이 유연
- +모바일·데스크톱 모두 잘 어울림
단점 / 한계
- −카드가 많아지면 시각적 피로
- −정보 밀도가 낮아질 수 있음
- −깊이 있는 콘텐츠 표현에 한계
적합한 사용처
사용 사례
- 소셜 미디어 피드
- 이커머스 상품 목록
- 뉴스·블로그 목록
- 대시보드 위젯
이런 프로젝트에 추천
피드형 서비스이커머스대시보드콘텐츠 큐레이션
실제 사용 예시
PinterestGoogle NowTrelloAirbnb 검색 결과
UI 컴포넌트 예제
이 디자인 스타일의 특징을 반영한 실제 UI 컴포넌트들입니다.
Basic Card Layout
기본적인 카드 그리드 레이아웃
Fast
빠른 성능으로 최적의 사용자 경험을 제공합니다.
Secure
강력한 보안으로 데이터를 안전하게 보호합니다.
Flexible
유연한 디자인으로 다양한 요구를 충족합니다.
Beautiful Design
카드 디자인은 콘텐츠를 명확하게 구분하고 정보를 효과적으로 전달합니다.
Modern Layout
독립적인 컨테이너로 정보를 그룹화하여 스캔하기 쉽게 만듭니다.
Horizontal Cards
가로형 카드 레이아웃
Horizontal Layout
가로형 카드는 더 많은 콘텐츠를 효율적으로 배치할 수 있습니다.
Flexible Design
다양한 화면 크기에서도 일관된 사용자 경험을 제공합니다.
Pricing Cards
가격 정보를 표시하는 카드
Enterprise
$99/month
- Everything in Pro
- Priority Support