Card-Based Design
정보를 카드 형태로 구조화하여 스캔과 소비가 용이하도록 합니다.
- YEAR
- 2013
#9C27B0
- 둥근 모서리
- 가는 테두리
- 가는 아이콘 선
표본
이 스타일의 규칙을 그대로 적용한 UI 컴포넌트입니다.
Basic Card Layout
기본적인 카드 그리드 레이아웃
Fast
빠른 성능으로 최적의 사용자 경험을 제공합니다.
Secure
강력한 보안으로 데이터를 안전하게 보호합니다.
Flexible
유연한 디자인으로 다양한 요구를 충족합니다.
Image Cards
이미지가 포함된 카드
Beautiful Design
카드 디자인은 콘텐츠를 명확하게 구분하고 정보를 효과적으로 전달합니다.
Modern Layout
독립적인 컨테이너로 정보를 그룹화하여 스캔하기 쉽게 만듭니다.
Horizontal Cards
가로형 카드 레이아웃
Horizontal Layout
가로형 카드는 더 많은 콘텐츠를 효율적으로 배치할 수 있습니다.
Flexible Design
다양한 화면 크기에서도 일관된 사용자 경험을 제공합니다.
Pricing Cards
가격 정보를 표시하는 카드
Basic
- 10 Projects
- 5GB Storage
Pro
- Unlimited Projects
- 50GB Storage
Enterprise
- Everything in Pro
- Priority Support
이웃 스타일
어디에 쓰나
실제로 쓰는 곳
- Google Now
- Trello
- Airbnb 검색 결과
사용 사례
- 소셜 미디어 피드
- 이커머스 상품 목록
- 뉴스·블로그 목록
- 대시보드 위젯
이런 프로젝트에 맞습니다
- 피드형 서비스
- 이커머스
- 대시보드
- 콘텐츠 큐레이션
더 읽기
원칙·제약·역사처럼 적용할 때 필요한 내용입니다. 필요한 항목만 펼쳐 보세요.
핵심 원칙
- 정보 그룹화
- 스캔 용이성
- 유연성
주요 특징
- 독립적인 컨테이너
- 명확한 경계
- 일관된 크기
- 그리드 레이아웃
- 쉬운 재배치
장점과 한계
장점
- 반응형 레이아웃 구현이 자연스러움
- 정보 스캔 속도 향상
- 순서·개수 변경이 유연
- 모바일·데스크톱 모두 잘 어울림
한계
- 카드가 많아지면 시각적 피로
- 정보 밀도가 낮아질 수 있음
- 깊이 있는 콘텐츠 표현에 한계
컬러 시스템
카드 배경과 페이지 배경의 명도 차이가 핵심. 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.
자주 묻는 질문
Card-Based Design이란 무엇인가요?
정보를 카드 형태로 구조화하여 스캔과 소비가 용이하도록 합니다.
Card-Based Design의 핵심 디자인 원칙은 무엇인가요?
Card-Based Design의 핵심 원칙은 정보 그룹화, 스캔 용이성, 유연성입니다.
Card-Based Design은 어떤 프로젝트에 적합한가요?
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 검색 결과 등이 있습니다.