topic★★★★★난이도
Card
명함/카드에서 유래한 독립된 정보 컨테이너.
#card#카드#컨테이너
Card(카드)는 말 그대로 명함(business card)이나 트레이딩 카드에서 왔다. 한 장의 카드에 사진, 이름, 간략한 정보가 담기듯, UI 카드도 하나의 독립된 콘텐츠 단위를 사각형 컨테이너에 담는다. Google이 2014년 Material Design에서 카드를 핵심 패턴으로 공식화하면서 웹/앱 전체로 퍼졌다.
| 실제 사물 | UI 패턴 |
|---|---|
| 명함 한 장 = 한 사람의 정보 | 카드 하나 = 한 콘텐츠의 정보 |
| 카드를 모으면 카드 덱 | 카드를 모으면 그리드 레이아웃 |
| 뒤집으면 추가 정보 | 클릭하면 상세 페이지 |
사용 가이드라인: 동일한 유형의 콘텐츠를 반복 나열할 때(상품 목록, 게시물 피드) 적합하다. 카드 안에 너무 많은 정보를 넣으면 본래의 '한눈에 훑기' 장점이 사라진다. 카드 하나에 행동 유도(CTA) 버튼은 1~2개로 제한한다.