# Card-Based Design — 디자인 스타일 가이드
## 기본 정보
- **ID**: card-design
- **카테고리**: ui-pattern
- **연도**: 2013
## 설명
정보를 카드 형태로 구조화하여 스캔과 소비가 용이하도록 합니다.
## 핵심 원칙
- 정보 그룹화
- 스캔 용이성
- 유연성
## 주요 특징
- 독립적인 컨테이너
- 명확한 경계
- 일관된 크기
- 그리드 레이아웃
- 쉬운 재배치
## 컬러 시스템 가이드
카드 배경과 페이지 배경의 명도 차이가 핵심. elevation으로 시각 계층 표현
### 색상 역할
- page-background: 가장 어둡거나 중립적인 배경
- card-surface: page-background보다 밝게 — 분리감 제공
- card-header: 선택적 강조 색 헤더
- text: 카드 내 주 텍스트
### 색상 제약 조건
- 카드와 배경 명도 차이 충분히 — 구분 안 되면 카드 의미 없음
- 카드 내부 color 과다 사용 금지 — 카드는 콘텐츠 컨테이너
### 다크모드 전략
배경 어둡게, 카드는 약간 더 밝게 유지 — elevation 방향 동일
### 대비 요구사항
카드 내 텍스트 대비 WCAG AA
## 타이포그래피 가이드
- **폰트 성격**: 읽기 쉬운 중립적 산세리프
- **권장 폰트 수**: 최대 2개
- **타입 스케일**: 1.25 (Major Third)
### 타이포그래피 제약
- 카드 제목과 본문 명확한 크기 차이
- 카드 내 텍스트 overflow는 ellipsis 처리
## 하면 안 되는 것 (안티패턴)
- 카드 없이 정보 나열 금지 — 모든 정보 단위가 카드로 그룹화
- 카드 내부에 또 다른 카드 중첩 지양
## 반드시 포함해야 하는 것
- 일관된 카드 padding (16px 이상)
- hover 상태 (elevation 증가 또는 border highlight)
- 카드 간 일관된 spacing
## 모션 가이드
hover 시 box-shadow 증가 + translateY(-2px). 200ms ease-out.
## 사용 사례
- 소셜 미디어 피드
- 이커머스 상품 목록
- 뉴스·블로그 목록
- 대시보드 위젯
## 추천 프로젝트 유형
- 피드형 서비스
- 이커머스
- 대시보드
- 콘텐츠 큐레이션
## 장점
- 반응형 레이아웃 구현이 자연스러움
- 정보 스캔 속도 향상
- 순서·개수 변경이 유연
- 모바일·데스크톱 모두 잘 어울림
## 단점·한계
- 카드가 많아지면 시각적 피로
- 정보 밀도가 낮아질 수 있음
- 깊이 있는 콘텐츠 표현에 한계
## 실제 사용 제품·서비스
- 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
## 자주 묻는 질문 (FAQ)
### Q: Card-Based Design이란 무엇인가요?
A: 정보를 카드 형태로 구조화하여 스캔과 소비가 용이하도록 합니다.
### Q: Card-Based Design의 핵심 디자인 원칙은 무엇인가요?
A: Card-Based Design의 핵심 원칙은 정보 그룹화, 스캔 용이성, 유연성입니다.
### Q: Card-Based Design은 어떤 프로젝트에 적합한가요?
A: Card-Based Design은 소셜 미디어 피드, 이커머스 상품 목록, 뉴스·블로그 목록, 대시보드 위젯, 피드형 서비스, 이커머스, 대시보드, 콘텐츠 큐레이션 등의 프로젝트에 적합합니다.
### Q: Card-Based Design의 장단점은 무엇인가요?
A: 장점으로는 반응형 레이아웃 구현이 자연스러움, 정보 스캔 속도 향상, 순서·개수 변경이 유연, 모바일·데스크톱 모두 잘 어울림이 있습니다. 단점으로는 카드가 많아지면 시각적 피로, 정보 밀도가 낮아질 수 있음, 깊이 있는 콘텐츠 표현에 한계이 있습니다.
### Q: Card-Based Design에서 색상은 어떻게 사용하나요?
A: 카드 배경과 페이지 배경의 명도 차이가 핵심. elevation으로 시각 계층 표현 색상 역할은 page-background: 가장 어둡거나 중립적인 배경, card-surface: page-background보다 밝게 — 분리감 제공, card-header: 선택적 강조 색 헤더입니다. 주의사항: 카드와 배경 명도 차이 충분히 — 구분 안 되면 카드 의미 없음, 카드 내부 color 과다 사용 금지 — 카드는 콘텐츠 컨테이너.
### Q: Card-Based Design에 어울리는 폰트 스타일은 무엇인가요?
A: Card-Based Design에는 읽기 쉬운 중립적 산세리프 폰트가 적합합니다. 최대 2개 폰트 패밀리 사용을 권장합니다. 제약 사항: 카드 제목과 본문 명확한 크기 차이, 카드 내 텍스트 overflow는 ellipsis 처리.
### Q: Card-Based Design 디자인에서 하면 안 되는 것은 무엇인가요?
A: Card-Based Design에서 피해야 할 것: 카드 없이 정보 나열 금지 — 모든 정보 단위가 카드로 그룹화, 카드 내부에 또 다른 카드 중첩 지양.
### Q: Card-Based Design을 사용하는 실제 서비스나 제품은 무엇이 있나요?
A: Card-Based Design을 적용한 대표적인 제품·서비스로는 Pinterest, Google Now, Trello, Airbnb 검색 결과 등이 있습니다.
## API 엔드포인트
- 스타일 상세: https://ui.buildersgate.com/api/styles?id=card-design
- 디자인 토큰: https://ui.buildersgate.com/api/themes?id=card-design&merged=true
Card-Based Design은 소셜 미디어 피드, 이커머스 상품 목록, 뉴스·블로그 목록, 대시보드 위젯, 피드형 서비스, 이커머스, 대시보드, 콘텐츠 큐레이션 등의 프로젝트에 적합합니다.
Card-Based Design의 장단점은 무엇인가요?
장점으로는 반응형 레이아웃 구현이 자연스러움, 정보 스캔 속도 향상, 순서·개수 변경이 유연, 모바일·데스크톱 모두 잘 어울림이 있습니다. 단점으로는 카드가 많아지면 시각적 피로, 정보 밀도가 낮아질 수 있음, 깊이 있는 콘텐츠 표현에 한계이 있습니다.
Card-Based Design에서 색상은 어떻게 사용하나요?
카드 배경과 페이지 배경의 명도 차이가 핵심. elevation으로 시각 계층 표현 색상 역할은 page-background: 가장 어둡거나 중립적인 배경, card-surface: page-background보다 밝게 — 분리감 제공, card-header: 선택적 강조 색 헤더입니다. 주의사항: 카드와 배경 명도 차이 충분히 — 구분 안 되면 카드 의미 없음, 카드 내부 color 과다 사용 금지 — 카드는 콘텐츠 컨테이너.
Card-Based Design에 어울리는 폰트 스타일은 무엇인가요?
Card-Based Design에는 읽기 쉬운 중립적 산세리프 폰트가 적합합니다. 최대 2개 폰트 패밀리 사용을 권장합니다. 제약 사항: 카드 제목과 본문 명확한 크기 차이, 카드 내 텍스트 overflow는 ellipsis 처리.
Card-Based Design 디자인에서 하면 안 되는 것은 무엇인가요?
Card-Based Design에서 피해야 할 것: 카드 없이 정보 나열 금지 — 모든 정보 단위가 카드로 그룹화, 카드 내부에 또 다른 카드 중첩 지양.
Card-Based Design을 사용하는 실제 서비스나 제품은 무엇이 있나요?
Card-Based Design을 적용한 대표적인 제품·서비스로는 Pinterest, Google Now, Trello, Airbnb 검색 결과 등이 있습니다.