카드 뷰

카드 뷰 (Card view)

카드 뷰는 탐색을 촉진하기 위해 갤러리 형태로 카드를 그리드로 배치한 것이에요. 카드 뷰는 보통 데이터셋 요약을 제시하는 데 사용되며, 사용자가 어떤 카드든 드릴다운해 더 자세한 콘텐츠를 볼 수 있어요.

출처: 문서

본문

용도 (Usage)

다음과 같은 경우 카드 뷰를 사용하세요.

그래픽이나 다른 시각적 표현으로 가장 잘 식별되는 데이터셋의 항목을 표시할 때.
정보를 더 쉽게 시각화하고 비교할 수 있게 할 때.
같은 페이지 안에서 많은 수의 객체를 한 번에 요약할 때.

대량의 텍스트 기반 콘텐츠를 스캔하기 쉽게 만들기 위해 카드 뷰를 사용하지 마세요. 대신 테이블이나 목록 뷰를 사용하세요.

카드 뷰의 배경색 (Background colors for card views)

카드 뷰는 사용 사례에 따라 흰색 또는 회색 배경에 배치할 수 있어요.

콘텐츠 뷰가 변경될 수 있다면 흰색 배경을 사용하세요. 예를 들어:

오른쪽에 확장 가능한 패널을 여는 카드가 있을 때.
테이블이나 목록 뷰로 토글되는 카드 뷰가 있을 때.

콘텐츠 뷰의 유일한 목적이 카드를 표시하는 것이라면 회색 배경을 사용하세요.

참고: 카드가 회색 배경에 놓일 때만 기본 테두리 처리(드롭 섀도우가 있는 카드)를 사용하세요. 흰색 배경에 카드를 놓을 때는 플랫(flat) 카드를 사용해야 해요.

모바일에서의 카드 뷰 (Card views on mobile)

카드는 내장된 CSS 반응형 동작에 따라 적절히 크기가 줄어들어요. 대부분의 경우 그리드 레이아웃을 따라 특정 브레이크포인트에서 확장되거나 압축됩니다. 가장 작은 모바일 크기에서는 화면 너비의 거의 전체를 차지해요.

카드 뷰 액션 (Card view actions)

카드 액션을 몇 가지 방식으로 커스터마이즈할 수 있어요. 사용 사례에 따라 카드 뷰 안에서 인라인 액션, 여러 인라인 액션, 전역 액션, 또는 액션 카드를 커스터마이즈하는 것을 고려하세요.

인라인 액션 (Inline actions)

하나의 카드에만 수행할 수 있는 액션이 있다면, 카드 본문이나 푸터에 해당 액션을 배치하세요.

단일 액션이 있는 카드가 몇 개뿐이라면 secondary button 스타일을 사용하세요.
단일 액션이 있는 카드가 많다면 link button을 사용하세요.

여러 인라인 액션 (Multiple inline actions)

단일 카드에서 여러 액션을 수행할 수 있다면, 해당 액션을 케밥(kebab)에 배치하세요. 케밥은 카드 헤더의 오른쪽 위에 놓으세요.

전역 액션 (Global actions)

여러 카드에 전역적으로 수행할 수 있는 액션이 있거나, 동시에 여러 콘텐츠로 이어지는 액션이 있다면, 카드 뷰 위의 툴바에 액션을 배치하세요. 카드 오른쪽 위에 체크박스를 추가해 사용자가 하나 이상의 항목을 선택할 수 있게 하세요.

액션 카드 (Action card)

카드 안에 초소형(extra-small) 빈 상태를 사용해 사용자에게 기존 카드 뷰에 카드를 더 추가하는 또 다른 방법을 제시할 수 있어요. 툴바의 primary button에 더해 이 기능을 사용해, 사용자가 카드 뷰의 어떤 페이지에서든 액션을 여전히 수행할 수 있도록 보장하는 걸 권장해요. 액션 카드는 새 카드가 추가될 위치, 아마도 카드 뷰의 가장 처음 또는 마지막 카드에 배치하세요.

모두 확장 액션 (Expand all action)

카드가 확장 가능한 경우, 페이지 왼쪽 위의 구분선 아래에 "모두 확장(expand all)" 액션을 포함하세요.

확장된 후에는 액션 텍스트가 "expand all"에서 "collapse all"로 변경됩니다.

하단 페이지네이션 (Bottom pagination)

카드 뷰에 여러 페이지가 있다면 페이지네이션이 있는 푸터를 추가하세요.