언제라도 집에서 대형 화면을 통해 좋아하는 영화, TV 프로그램, 음악 등을 원활하게 즐기세요.
리소스
유형 | 링크 | 상태 |
---|---|---|
디자인 | 디자인 소스 (Figma) | 사용 가능 |
인터 (Google Fonts) | 사용 가능 | |
구현 | Jetpack Compose (GitHub) | 사용 가능 |
테마
색상 테마
색상 테마는 Material Design 3 테마 생성기를 사용하여 생성됩니다.

서체
JetStream의 서체 스케일은 인터페이스 서체를 사용하여 TV 화면의 디자인을 간단하고 명확하게 만듭니다.

도형
카드와 버튼에 미세한 반지름이 적용되어 가장자리를 친근하고 접근하기 쉽게 만듭니다.

포커스
윤곽선 색상이 있는 3dp 윤곽선이 JetStream에서 사용됩니다.

홈
홈
JetStream 앱의 방문 페이지

추천 캐러셀
카드 스타일 레이아웃이 있는 캐러셀입니다.

콘텐츠 행
JetStream은 5열 레이아웃에서 2:3 가로세로 비율의 표준 카드 스타일을 사용합니다.

몰입형 목록
몰입형 목록 구성요소를 사용하여 상위 10개 인기 영화와 같은 앱의 특별한 콘텐츠를 강조 표시합니다.

카테고리
카테고리
카테고리 페이지에는 쉽게 탐색하고 액세스할 수 있도록 장르가 그리드 형식으로 표시됩니다.

카테고리 카드

카테고리 세부정보
헤더가 있는 2:3 카드 그리드를 사용하여 카테고리 세부정보 페이지를 만듭니다.

미디어
영화
상단에는 16:9 추천 카드가 있고 하단에는 콘텐츠 그리드가 있는 표준 영화 탭입니다.

TV 프로그램

보관함
즐겨찾기
즐겨찾기 탭의 화면 상단에 필터 칩이 있어 빠르게 콘텐츠를 검색할 수 있습니다.

검색
검색 방문 페이지
검색 페이지에는 최근 검색어를 기반으로 추천 검색어가 포함된 검색창이 표시됩니다.

활성 검색
사용자가 검색창에 포커스를 맞추면 키보드가 팝업되고 사용자가 입력할 때 아래의 결과가 동적으로 업데이트됩니다.

항목 세부정보
세부정보 방문 페이지
세부정보 페이지에는 간단한 줄거리 요약과 영화를 볼 수 있는 눈에 띄는 클릭 유도 문구 버튼이 포함된 영화 형식의 뷰가 표시됩니다.

출연진 및 제작진
출연진 및 제작진 섹션에는 제목과 설명이 있는 클래식 카드가 한 줄씩 표시되며, 각 카드에는 2:3 이미지 확장 소재가 함께 표시됩니다.

평점
평점 섹션에는 추가 정보가 포함된 맞춤 클래식 와이드 카드가 표시됩니다.

재생
동영상 플레이어
권장사항이 포함된 표준 동영상 플레이어입니다.

동영상 플레이어 설정
동영상 플레이어의 자막 팝오버입니다.

설정
계정 설정
계정 페이지 레이아웃은 왼쪽에 목록 구성요소가 있고 오른쪽에 맞춤 카드 구성요소가 그리드 형식으로 정렬된 2열 디자인으로 구성되어 있습니다.

계정 삭제 대화상자
이 대화상자는 배경화면이 다른 화면과 구분되도록 디자인되었습니다. 대화상자에 있는 두 개의 버튼이 왼쪽에 정렬되어 깔끔하게 정리되어 있습니다.

정보
정보 섹션에는 오른쪽 패널에 스크롤 가능한 텍스트 뷰가 있습니다.

자막 설정
목록 구성요소는 부제목 아래에 다양한 설정을 표시하는 데 사용되며 스위치 또는 라벨과 같은 작업을 사용합니다.

내역
검색 기록에서는 이전에 검색한 검색어 목록을 모든 검색 기록을 지우는 옵션과 함께 표시하는 레이아웃을 사용합니다.

도움말
도움말 및 지원 섹션에서는 맞춤 목록 구성요소를 사용하여 연락처 정보와 FAQ를 포함한 다양한 옵션을 표시합니다.
