카드

카드에는 텍스트, 아이콘, 이미지, Gemini 대답, 작업 등 다양한 정보가 포함될 수 있습니다.

원칙

일관성: 카드는 관련 정보와 작업을 이해하기 쉬운 단일 단위로 그룹화합니다.

명확함: 콘텐츠를 명확하고 체계적으로 표시하여 가독성을 높입니다.

다양한 용도: 카드는 간단한 텍스트 블러브부터 여러 요소가 포함된 복잡한 요약까지 다양한 콘텐츠를 표시하도록 적응할 수 있습니다.

모듈식: 글래스용 Jetpack Compose Glimmer 인터페이스의 여러 부분에서 모듈식으로 재사용할 수 있도록 설계되었습니다.

사용 및 배치

카드에는 텍스트, 아이콘, 이미지, 작업, Gemini 대답과 같은 다양한 정보가 포함될 수 있습니다.

다양한 변형이 제공되고 처음부터 글래스 디자인 원칙을 따르도록 최적화된 Jetpack Compose Glimmer 카드 템플릿을 콘텐츠에 사용하세요.

분석

카드는 사전 설정된 슬롯 템플릿으로 빌드됩니다.

1. 헤더: 이미지를 포함하도록 설계된 카드 상단 섹션입니다. 

2. 제목 및 부제목: 카드에 기본 라벨과 보조 라벨을 제공하는 텍스트 필드입니다. 

3. 선행 아이콘: 카드 콘텐츠 영역의 시작 부분에 표시되는 선택적 아이콘입니다.

4. 후행 아이콘: 카드 콘텐츠 영역 끝에 표시되는 선택적 아이콘입니다.

5. 작업: 버튼과 같은 기본 상호작용 요소용 슬롯입니다. 이를 통해 사용자는 카드에서 직접 작업을 실행할 수 있습니다. 슬롯은 카드 컴포저블의 별도 오버로드에서 사용할 수 있습니다. 

6. 기본 콘텐츠: 기본 텍스트 또는 기타 콘텐츠를 배치하는 카드 본문입니다.

포커스

기본 목적이 특정 대화형 요소 (예: 작업의 버튼)를 포함하는 카드인 경우 포커스는 카드 컨테이너가 아닌 해당 요소로 바로 이동해야 합니다. 카드가 목록의 항목과 같이 탐색 가능한 단일 항목을 나타내는 경우 포커스 가능해집니다. 이렇게 하면 더 직접적이고 접근성 높은 사용자 환경을 제공할 수 있습니다.

포커스가 목록 항목으로 있는 카드

카드 내 버튼에 실행 가능한 요소로 포커스가 지정됩니다.

맞춤설정

속성	맞춤설정	기본값
도형	예	보통
패딩	예	24 dp, 24 dp
테두리	예	2 dp, #606460
텍스트	예	Body Small
앞부분 아이콘	예	56 dp
후행 아이콘	예	56 dp