몰입형 목록

몰입형 목록은 콘텐츠 행과 선택한 항목의 미리보기의 조합입니다. 더 큰 표시 영역에 콘텐츠를 표시합니다.

커버

리소스

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

하이라이트

  • 동적 콘텐츠 미리보기 사용자가 콘텐츠 행을 탐색하면 미리보기 영역이 자동으로 업데이트되어 현재 포커스가 설정된 항목을 표시합니다.
  • 몰입형 목록 구성요소는 콘텐츠 표시를 위한 더 큰 표시 영역을 제공하므로 사용자가 포커스가 설정된 항목의 시각적 세부정보를 더 쉽게 보고 파악할 수 있습니다.
  • 몰입형 목록은 포커스가 맞춰진 항목에 관한 상황별 정보를 제공하여 사용자가 탐색 환경을 떠나지 않고도 충분한 정보를 바탕으로 결정을 내릴 수 있도록 합니다.
  • 몰입형 목록 구성요소는 점진적인 공개를 통해 사용자가 탐색할 때 콘텐츠에 관한 세부정보를 추가로 표시하여 인지 부하를 줄이고 사용자 참여를 유지합니다.
  • 몰입형 목록 구성요소는 앱 전체에서 일관된 상호작용을 보장하여 사용자에게 친숙하고 예측 가능한 환경을 제공합니다.

분석

분석

  1. 이미지 배경
  2. 콘텐츠 블록
  3. 포커스에 있는 카드
  4. 콘텐츠 그리드

이미지 구성

  1. 시네마틱 스크림
  2. 포스터
  3. 배경 색상

사양

사양

동작

몰입형 목록에서 카드 간에 이동할 때 선택한 카드의 세부정보가 백그라운드에서 점진적으로 표시됩니다.

몰입형 목록에 포커스가 있으면 다음 동영상과 같이 높이가 높아져 배경 제목 및 설명과 같은 추가 정보가 표시됩니다.

사용

신작, 인기 프로그램, 독점 제목과 같은 추천 콘텐츠 또는 프로모션 콘텐츠에 관심을 유도하려면 몰입형 캐러셀을 사용하세요. 더 큰 표시 영역과 동적 미리보기를 사용하면 우선순위가 높은 항목을 효과적으로 표시할 수 있습니다.

이미지 표시

사양

  1. 카드 포커스: 사용자가 캐러셀을 탐색할 때 포커스가 지정된 카드가 시각적으로 강조됩니다. 즉, 테두리를 사용하여 카드의 크기를 1.1로 조정하고 다른 시각적 신호는 고도로 표시하여 선택되었음을 나타냅니다. 포커스가 맞춰진 카드의 썸네일에 있는 콘텐츠 제목이 명확하게 표시되고 읽기 쉬워야 합니다.
  2. 배경 이미지: 카드에 포커스가 있으면 상응하는 배경 이미지가 더 큰 표시 영역에 표시됩니다. 이 배경 이미지는 콘텐츠에 몰입도 높고 눈길을 끄는 배경을 제공하므로 품질이 높고 시각적으로 매력적인 이미지인 것이 좋습니다.

음악작품

피사체의 크기를 오른쪽 상단으로 조정해 영화 같은 경험을 연출합니다.
전체 화면 자르기를 사용하지 않습니다. 그렇게 하면 콘텐츠 아래에 있는 피사체가 잘립니다.

몰입형 목록 구성요소의 배경으로 사용된 이미지가 제대로 표시되도록 하려면 이미지가 흐리거나 왜곡되지 않도록 적절한 크기로 조정해야 합니다.

가로세로 비율

가능하면 항상 16:9 비율의 백그라운드 이미지를 사용하여 시각적으로 매력적이고 일관된 레이아웃을 보장합니다.

사양