안드로이드 가이드라인(6)

UI_UX Design/UI Design 개론

jsBae 2024. 12. 3. 14:26

학습목표
카드(Card)가 머티리얼 디자인에서 정보를 그룹화하고 시각적으로 정리하는 역할을 학습한다.

Cards – Material Design 3

Cards contain content and actions about a single subject.

m3.material.io

1 카드의 특징

카드Card는 단일 주제에 대한 내용과 동작을 표시하며, 관련성 있고 실행 가능한 정보를 쉽게 스캔할 수 있도록 한다.

모든 콘텐츠는 카드 컨테이너에 담으며, 카드 레이아웃은 콘텐츠 유형에 따라 다양하게 구성할 수 있으며,
구체적인 정보를 담은 이미지와 텍스트를 포함한 작은 사각형으로 사진이나 캡션의 길이가 다른 콘텐츠 요소를 지원하는데 사용된다.
주로 콘텐츠와 콘텐츠 사이에 일정한 간격을 두어 구분하는데, 각 카드의 넓이는 같지만 높이는 정보의 양에 따라 달라질 수 있으며,카드 UI는 미리보기와 같은 성격을 가지고 전체 내용을 간략하게 보여주는 용도로 자주 업데이트되는 콘텐츠에 적합하다.
카드는 다양한 요소로 구성된 콘텐츠를 표시할 수 있는 편리한 수단으로, 제목, 하위 헤드라인, 요약, 테스트, 멀티미디어, 이미지, 비디오, 그래프, 설명 등의 구성 요소를 포함할 수 있다.
구성 요소가 하나의 카드 안에 배치될 수 있는 것은 물론, 다양한 방법으로 카드 조작이 가능하다.
예를 들어 , 카드를 뒤집어서 더 많은 콘텐츠의 내용을 보거나, 요약을 위해 접거나 펼치고, 공간 절약을 위해 쌓아 두는 것도 가능하다. 또한, 카드 내부에 다양한 제스처 컨트롤 버튼을 추가하는 것도 흥미로운 패턴 중 하나이다.

카드는 앞서 언급하였듯이 어떠한 정보의 요약을 그룹화해서 보여주는데요.

즉, 구성 요소들을 하나의 덩어리로 만드는 역할을 한다.
이때는 미디어 유형이 각각 영상, 그래프, 텍스트 등으로 다르더라도 서로 관련되어 있어야하고, 카드 안에서 정보를 모두 보여주지 않아도 되며, 그 경우 세부 정보를 볼 수 있도록 링크를 제공할 수 있어야 합니다.
링크는 카드 전체에 걸 수도 있고, 포함된 요소별로 걸 수도 있다. 여러 개의 카드를 함께 사용하는 경우, 각 카드는 동일한 페이지에 있어도 완전히 다른 세부 정보를 표시할수 있으며,
디자인적으로는 배경색과 다른 배경색을 사용해 개별 카드로 구분하고, 그림자를 적용해 깊이감을 표현한다.
또한 카드와 카드 사이에는 일정 간격의 그리드를 배치해 그룹별로 더 잘 구분되게 한다.
카드의 기본 액션 영역은 카드 컨테이너 그 자체이다,
그리고 카드내에 개별 보조 액션 영역을 추가할 수 있으며 이러한 버튼은 하단에 배치됩니다.
모바일에서 카드의 기본 고도는 1dp이며, 카드가 이동할 때는 고도를 높여야 하는데 이때 상승 고도는 8dp이다.

카드 컬렉션Card Collection은 카드가 여러 개인 경우에 하나 이상의 컬렉션으로 그룹화하는 것을 말한다.

카드 컬렉션은 핀터레스트Pinterest에서와 같이 크기가 균일하지 않은 카드들이 정보의 양에 따라 빈자리를 채우며 배치되는 특징이 있다.
보통 각 카드의 넓이는 화면이 가로 방향인지 세로 방향인지에 따라 두 개 또는 세계가 같은 넓이에 일정한 간격으로 배치되며, 세로방향의 길이는 콘텐츠의 양에 따라 유동적이다.
타임라인이 표시되지는 않지만 검색하면 정확도나 시간 등의 필터링 옵션에 의해 자동으로 정렬된다.
카드에는 대개 비디오, 그래픽 이미지 등의 시각적 요소가 포함되며, 텍스트는 이미지 하단에 배치되는 경우가 많다.
이미지 내부에 텍스트를 배치하지 않는 경우, 하위 헤드라인이나 요약 텍스트를 함께 배치해 콘텐츠에 대한 보충 설명을 제공하는 것이 바람직하다.
카드 컬렉션을 빠르게 훑어볼 수 있게 하려면 [그림 6-75]와 같이 일관된 패턴으로 배치해야 한다.
여러 주제 및 기능을 표시하기 위해 대시보드 스타일의 카드 컬렉션을 사용할 수 있다.
각 카드의 개성, 스타일, 독창성 등을 강조하기 위해 [그림 6-77]과 같이 비대칭 그리드가 있는 카드 컬렉션을 사용할 수도 있다

728x90