카드

카드는 TV 앱의 기본 구성요소입니다.

카드의 커버 이미지

리소스

유형 링크 상태
디자인 디자인 소스 (Figma) 사용 가능
구현 Jetpack Compose 사용 가능

하이라이트

  • 카드를 사용하여 단일 주제에 관한 콘텐츠를 표시합니다.
  • 카드는 이미지에서부터 광고 제목에 이르기까지 무엇이든 담을 수 있으며 텍스트, 버튼, 목록, 기타 UI 요소를 지원합니다.
  • 카드를 다른 카드와 병합하거나 여러 카드로 나눌 수 없습니다.
  • 카드에는 표준, 클래식, 컴팩트, 인셋, 와이드 표준, 와이드 클래식의 6가지 변형이 있습니다.

변형

카드에는 5가지 유형이 있으며 각각 사용 사례가 서로 다릅니다.

  1. 표준
  2. 명작
  3. 작게
  4. 넓은 표준
  5. 와이드 클래식
표준 카드 클래식 카드 컴팩트 카드
와이드 표준 카드 와이드 클래식 카드

콘텐츠 블록

카드 콘텐츠는 고유한 블록으로 배열됩니다. 강조를 포함한 카드의 시각적 디자인은 계층 구조를 나타냅니다. 카드 자체의 레이아웃은 카드에 포함된 콘텐츠 유형을 수용합니다.

분석

콘텐츠
  1. 제목
  2. 부제
  3. 설명
  4. 추가 텍스트

사양

콘텐츠 블록 사양

표준 카드

분석

표준 카드 사양

  1. 이미지
  2. 콘텐츠 블록

상태

표준 카드 상태

사양

표준 카드 사양

클래식 카드

분석

클래식 카드 사양

  1. 이미지
  2. 콘텐츠 블록

상태

클래식 카드 상태

사양

클래식 카드 사양

컴팩트 카드

분석

컴팩트 카드 사양

  1. 이미지
  2. 콘텐츠 블록

상태

컴팩트 카드 상태

사양

컴팩트 카드 사양

넓은 표준 카드

분석

폭넓은 표준 카드 사양

  1. 이미지
  2. 콘텐츠 블록

상태

넓은 표준 카드 상태

사양

폭넓은 표준 카드 사양

와이드 클래식 카드

분석

넓은 클래식 카드 사양

  1. 이미지
  2. 콘텐츠 블록

상태

넓은 클래식 카드 상태

사양

폭넓은 클래식 카드 사양

사용

카드는 시각적으로 매력적이고 사용자 친화적인 방식으로 다양한 콘텐츠를 표시하는 데 사용할 수 있는 다목적 디자인 요소입니다. 다음 섹션에서는 카드의 디자인 고려사항을 살펴봅니다.

가로세로 비율

카드의 일반적인 가로세로 비율은 16:9, 1:1, 2:3 3가지입니다. 각 가로세로 비율에는 고유한 장점이 있으므로 구체적인 요구사항에 따라 가장 적합한 것을 선택하는 것이 좋습니다.

  • 카드에서 가장 일반적인 가로세로 비율은 16:9입니다. 이미지와 동영상을 표시하는 데 적합한 넓은 가로세로 비율입니다.
  • 1:1은 정사각형 가로세로 비율이며 출연진 및 제작진, 채널 로고 또는 팀 로고와 같이 시각적 균형이 필요한 카드에 적합합니다.
  • 2:3은 가로세로 비율이 더 높습니다. 그리드를 분할하여 강조를 강조하고 싶을 때 유용합니다

궁극적으로 카드의 가로세로 비율을 선택하는 가장 좋은 방법은 다양한 옵션을 실험하여 어떤 옵션이 가장 적합한지 확인하는 것입니다.

가로세로 비율

다음은 다양한 가로세로 비율의 사용 예입니다.

1:1

출연진 및 제작진

가로세로 비율 1:1, 출연진 및 제작진

스포츠 팀 로고

가로세로 비율 1:1, 스포츠 로고

2:3

인기 급상승 도서

가로세로 비율 2:3, 인기 급상승 도서

16:9

영화 카드

가로세로 비율 16:9, 모션 카드

레이아웃 및 간격

20dp 간격으로 적절한 피킹을 구현하면 화면에 표시되는 카드 수에 따라 카드 너비를 변경할 수 있습니다.

1개 카드 레이아웃

카드 너비 — 844dp

카드 레이아웃 1개

2개 카드 레이아웃

카드 너비 — 412dp

2개 카드 레이아웃

3개 카드 레이아웃

카드 너비 — 268dp

3개 카드 레이아웃

4개 카드 레이아웃

카드 너비 — 196dp

4개 카드 레이아웃

5개 카드 레이아웃

카드 너비 — 124dp

5개 카드 레이아웃

콘텐츠 블록

카드의 콘텐츠 블록 너비는 이미지 썸네일과 너비가 동일해야 합니다. 콘텐츠 블록에 더 많은 텍스트를 표시해야 한다면 넓은 카드 변형을 사용하세요.

넓은 카드를 사용하여 간단한 설명을 표시하세요. 단, 꼭 필요한 경우에만 사용합니다. 설명의 길이는 몇 단어로 해야 합니다.
세로로 쌓인 카드에는 긴 설명을 사용하지 않습니다.

컴팩트 카드

컴팩트한 카드는 간결하고 읽기 쉬워야 합니다. 배경 이미지 앞에 있는 콘텐츠는 간단명료해야 합니다. 긴 제목, 부제목, 설명은 피하세요. 이렇게 하면 카드가 시각적으로 더 매력적이며 더 쉽게 스캔할 수 있습니다.

이미지에서 텍스트를 더 쉽게 읽을 수 있도록 하려면 반투명 검은색 그라데이션 오버레이를 추가합니다. 이렇게 하면 이미지를 너무 가리지 않고 배경이 어두워져 텍스트를 더 쉽게 볼 수 있습니다.

이미지 배경 위에 스크림을 사용하는 작은 카드입니다.
배경 이미지 위에 스크림이 없는 소형 카드를 사용하지 마세요.