Card
Card (카드)
카드는 문서나 연락처처럼 하나의 개념이나 대상과 관련된 정보와 동작을 담는 컨테이너예요. 정보에 눈에 띄는 위치를 부여하고 예측 가능한 패턴을 만들 수 있죠.
출처: 문서
본문
카드는 문서나 연락처처럼 하나의 개념이나 대상과 관련된 정보와 동작을 담는 컨테이너예요. 카드는 정보에 구별되는 위치를 부여하고 예측 가능한 패턴을 만들어요. 아주 유연하지만, 다양한 경험에서 특정 사용 사례에 맞게 일관되게 사용하는 것이 중요해요.
Layout (레이아웃)
구조(Anatomy)
카드 구조는 카드의 필요에 따라 유연해요. CardPreview, CardHeader, CardFooter 컴포넌트를 사용해 카드 안의 이미지, 제목, 본문 콘텐츠, 동작을 정리하세요.
카드 안의 정보 계층을 고려하고, 그것을 섹션으로 어떻게 나눌지 생각하세요. 예를 들어 이름과 제목은 헤더에, 동작은 푸터에 두는 식이죠.
정렬(Alignment)
카드는 세로 또는 가로로 정렬할 수 있어요. 세로 카드는 헤더, 본문, 푸터를 위한 슬롯으로 구성돼요. 가로 카드는 헤더와 본문을 가질 수 있고, 왼쪽에서 오른쪽으로 나타나요. 모든 슬롯은 선택 사항이에요.
크기(Size)
카드 크기는 다양한 콘텐츠 필요를 수용하도록 가변적이에요. 다양한 상황에 적응할 수 있게 다음 크기 동작들이 카드에 내장되어 있어요.
Behavior (동작)
카드 상호작용(Card interactions)
카드는 여러 방식으로 사람들에게 상호작용을 제공할 수 있어요. 사용 가능한 동작이 여러 개라면, 카드는 버튼과 링크를 담을 수 있어요.
명확한 동작이 하나뿐이라면 카드 표면 전체가 버튼처럼 동작할 수 있어요.
카드는 체크박스나 라디오 그룹처럼 사람들이 선택을 하도록 하는 데도 사용할 수 있어요.
기본적으로 카드가 선택 가능하다는 표시는 없지만, 호버나 포커스 같은 상호작용 상태가 선택 가능성을 암시할 수 있어요. 더 강한 신호를 주려면 floatingAction prop을 사용해 추가 단서를 만들 수 있어요.
Accessibility (접근성)
Aria 라벨(Aria labels)
필요할 때마다, 특히 선택 가능한 카드에서는 의미 있는 aria-label, aria-describedby, aria-labelledby를 제공하세요.
카드의 포커스 순서(Focus order)
카드는 각 경험의 필요에 맞게 포커스를 다르게 처리할 수 있어요. focusMode prop을 사용하면 카드의 포커스 동작과 카드가 담은 동작들을 지정할 수 있어요.
- 카드 안의 동작은 포커스 가능하지만 카드 컨테이너 자체는 포커스를 받거나 관리하지 않아요.
- 카드는 포커스 가능해지고 카드 안에 포커스를 가두어요. Tab은 카드 동작을 순환하고, ESC는 카드를 벗어나요.
Content (콘텐츠)
카드 안의 콘텐츠 종류와 무관하게, 카드는 사람들이 먼저 알아야 하는 작은 단위의 정보(bite-sized)를 제공해야 해요. 그 정보가 카드에서 바로 동작을 취하도록 유도하거나, 더 많은 정보를 위해 클릭해 들어가도록 해야 해요.
공간이 제한적이므로 카드 콘텐츠는 간결하게, 그리고 동작 중심으로 유지하세요.