언제라도 집에서 대형 화면을 통해 좋아하는 영화, TV 프로그램, 음악 등을 원활하게 즐기세요.
리소스
유형 | 링크 | 상태 |
---|---|---|
디자인 | 디자인 소스 (Figma) | 사용 가능 |
인터 (Google Fonts) | 사용 가능 | |
구현 | Jetpack Compose (GitHub) | 사용 가능 |
테마
색상 테마
색상 테마는 Material Design 3 테마 생성기를 사용하여 생성됩니다.
![색상 테마](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/color.webp?authuser=0000&hl=ko)
서체
JetStream의 서체 스케일은 인터페이스 서체를 사용하여 TV 화면의 디자인을 간단하고 명확하게 만듭니다.
![서체](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/typography.webp?authuser=0000&hl=ko)
도형
카드와 버튼에 미세한 반지름이 적용되어 가장자리를 친근하고 접근하기 쉽게 만듭니다.
![모양](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/shape.webp?authuser=0000&hl=ko)
포커스
윤곽선 색상이 있는 3dp 윤곽선이 JetStream에서 사용됩니다.
![초점](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/focus-theme.webp?authuser=0000&hl=ko)
홈
홈
JetStream 앱의 방문 페이지
![홈](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/home.webp?authuser=0000&hl=ko)
추천 캐러셀
카드 스타일 레이아웃이 있는 캐러셀입니다.
![추천 캐러셀](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/home-fc-focused.webp?authuser=0000&hl=ko)
콘텐츠 행
JetStream은 5열 레이아웃에서 2:3 가로세로 비율의 표준 카드 스타일을 사용합니다.
![콘텐츠 행](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/home-trending-focused.webp?authuser=0000&hl=ko)
몰입형 목록
몰입형 목록 구성요소를 사용하여 상위 10개 인기 영화와 같은 앱의 특별한 콘텐츠를 강조 표시합니다.
![몰입형 목록](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/home-top-10.webp?authuser=0000&hl=ko)
카테고리
카테고리
카테고리 페이지에는 쉽게 탐색하고 액세스할 수 있도록 장르가 그리드 형식으로 표시됩니다.
![카테고리](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/categories.webp?authuser=0000&hl=ko)
카테고리 카드
![카테고리 카드](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/categories-action.webp?authuser=0000&hl=ko)
카테고리 세부정보
헤더가 있는 2:3 카드 그리드를 사용하여 카테고리 세부정보 페이지를 만듭니다.
![카테고리 세부정보](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/categories-details.webp?authuser=0000&hl=ko)
미디어
영화
상단에는 16:9 추천 카드가 있고 하단에는 콘텐츠 그리드가 있는 표준 영화 탭입니다.
![영화](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/movies.webp?authuser=0000&hl=ko)
TV 프로그램
![TV 프로그램](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/shows.webp?authuser=0000&hl=ko)
보관함
즐겨찾기
즐겨찾기 탭의 화면 상단에 필터 칩이 있어 빠르게 콘텐츠를 검색할 수 있습니다.
![즐겨찾기](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/favorities.webp?authuser=0000&hl=ko)
검색
검색 방문 페이지
검색 페이지에는 최근 검색어를 기반으로 추천 검색어가 포함된 검색창이 표시됩니다.
![검색 방문 페이지](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/search-default.webp?authuser=0000&hl=ko)
활성 검색
사용자가 검색창에 포커스를 맞추면 키보드가 팝업되고 사용자가 입력할 때 아래의 결과가 동적으로 업데이트됩니다.
![활성 검색](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/search-active.webp?authuser=0000&hl=ko)
항목 세부정보
세부정보 방문 페이지
세부정보 페이지에는 간단한 줄거리 요약과 영화를 볼 수 있는 눈에 띄는 클릭 유도 문구 버튼이 포함된 영화 형식의 뷰가 표시됩니다.
![세부정보 방문 페이지](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/details.webp?authuser=0000&hl=ko)
출연진 및 제작진
출연진 및 제작진 섹션에는 제목과 설명이 있는 클래식 카드가 한 줄씩 표시되며, 각 카드에는 2:3 이미지 확장 소재가 함께 표시됩니다.
![출연진 및 제작진](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/cast-crew.webp?authuser=0000&hl=ko)
평점
평점 섹션에는 추가 정보가 포함된 맞춤 클래식 와이드 카드가 표시됩니다.
![평점](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/ratings.webp?authuser=0000&hl=ko)
재생
동영상 플레이어
권장사항이 포함된 표준 동영상 플레이어입니다.
![동영상 플레이어](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/player.webp?authuser=0000&hl=ko)
동영상 플레이어 설정
동영상 플레이어의 자막 팝오버입니다.
![동영상 플레이어 설정](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/player-closed-captions.webp?authuser=0000&hl=ko)
설정
계정 설정
계정 페이지 레이아웃은 왼쪽에 목록 구성요소가 있고 오른쪽에 맞춤 카드 구성요소가 그리드 형식으로 정렬된 2열 디자인으로 구성되어 있습니다.
![계정 설정](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/settings-account.webp?authuser=0000&hl=ko)
계정 삭제 대화상자
이 대화상자는 배경화면이 다른 화면과 구분되도록 디자인되었습니다. 대화상자에 있는 두 개의 버튼이 왼쪽에 정렬되어 깔끔하게 정리되어 있습니다.
![계정 삭제 대화상자](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/settings-delete-account.webp?authuser=0000&hl=ko)
정보
정보 섹션에는 오른쪽 패널에 스크롤 가능한 텍스트 뷰가 있습니다.
![정보](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/settings-about.webp?authuser=0000&hl=ko)
자막 설정
목록 구성요소는 부제목 아래에 다양한 설정을 표시하는 데 사용되며 스위치 또는 라벨과 같은 작업을 사용합니다.
![자막 설정](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/settings-subtitles.webp?authuser=0000&hl=ko)
내역
검색 기록에서는 이전에 검색한 검색어 목록을 모든 검색 기록을 지우는 옵션과 함께 표시하는 레이아웃을 사용합니다.
![기록](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/settings-history.webp?authuser=0000&hl=ko)
도움말
도움말 및 지원 섹션에서는 맞춤 목록 구성요소를 사용하여 연락처 정보와 FAQ를 포함한 다양한 옵션을 표시합니다.
![도움말](https://developer.android.google.cn/static/design/ui/tv/samples/images/jet-stream/settings-help.webp?authuser=0000&hl=ko)