전송 버튼을 누르면 대화상자가 열리고 웹 수신기를 연결, 제어, 연결 해제할 수 있습니다.
전송 버튼 템플릿을 다운로드하려면 전송 아이콘을 참조하세요.
전송 버튼은 Google Cast에만 사용되는 것이 아니며 웹 및 웹 이외의 수신기 (예: 블루투스 헤드셋)를 모두 나타내는 데 사용할 수 있습니다. 웹 수신기는 항상 전송 대화상자 아래에 표시되어야 하고 다른 대화상자, 메뉴 또는 컨트롤 아래에 표시되면 안 됩니다.
사용자에게 Cast 소개
전송 버튼을 도입하면 기존 사용자는 발신기 앱에서 이제 전송을 지원한다는 사실을 알 수 있으며 Google Cast를 처음 사용하는 사용자도 활용할 수 있습니다.
필수
A 웹 수신기를 처음 사용할 수 있을 때 전송 소개 화면을 표시합니다. iOS 발신기의 경우 전송 버튼이 처음 표시될 때 전송 소개 화면을 표시합니다.
B 버튼을 원을 그리며 전송 버튼을 시각적으로 강조 표시)
C 전송 버튼의 작동 방식을 설명합니다 (예: '터치하여 TV로 동영상 전송'과 같은 메시지 표시).
Android
출연진 소개
![출연진 소개](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/prompting1_a.png?authuser=0000&hl=ko)
홈 화면 전송
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=0000&hl=ko)
iOS
출연진 소개
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/prompting1_a.png?authuser=0000&hl=ko)
홈 화면 전송
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=0000&hl=ko)
Chrome
출연진 소개
![출연진 소개](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/prompting1_a.png?authuser=0000&hl=ko)
홈 화면 전송
![홈 화면 전송](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=0000&hl=ko)
전송 버튼 사용 가능 여부
필수
A 전송 버튼은 재생 가능한 콘텐츠가 있는 모든 화면에서 표시되어야 하며 콘텐츠를 탐색하거나 재생하는 동안 일관된 위치에 있어야 합니다. 전체 제어를 위해 Chrome 헤더에도 표시됩니다.
B Chrome에서 웹 수신기를 사용할 수 없는 경우 전송 버튼을 숨길 수 있습니다. Android 및 iOS 발신기의 경우 기기가 Wi-Fi에 연결되어 있을 때 전송 버튼이 항상 표시되어야 하므로 사용자가 로컬 네트워크 액세스를 사용 중지하여 기기를 검색할 수 없는 경우 적절한 도움을 받을 수 있습니다(자세한 내용은 iOS 권한 및 검색 참조).
C 모바일 앱에서는 전송 버튼이 오른쪽에 있어야 합니다.
D Chrome에서 전송 버튼은 콘텐츠 미디어 컨트롤 (예: 삽입된 동영상 보기)의 오른쪽에 있어야 합니다. 미디어 컨트롤에 전체 화면 버튼이 포함되어 있으면 전송 버튼을 왼쪽에 배치합니다.
참고
Google Cast는 멀티태스킹 모델을 사용하므로 사용자가 전송 중에 발신기 앱 및 기타 앱을 둘러볼 수 있습니다. 전송 버튼은 재생 가능한 콘텐츠가 있는 모든 화면에 표시되어야 하므로 사용자는 TV에서 재생 중인 콘텐츠를 일시중지하거나 중지할 위치를 찾지 않아도 됩니다.
Android
발신자 연결 해제됨
![발신자 연결 해제됨](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-cast-icon-states-1-122023.png?authuser=0000&hl=ko)
홈 화면 전송
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=0000&hl=ko)
iOS
발신자 연결 해제됨
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-cast-icon-available1_a.png?authuser=0000&hl=ko)
홈 화면 전송
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=0000&hl=ko)
Chrome
발신자 연결 해제됨
![발신자 연결 해제됨](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-cast-icon-available1_a.png?authuser=0000&hl=ko)
홈 화면 전송
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=0000&hl=ko)
전송 버튼 상태
필수
A 연결 해제됨: 웹 수신기를 사용할 수 있으면 전송 버튼이 표시됩니다.
B 연결 중: 웹 수신기가 연결되면 전송 버튼이 아이콘의 물결에 점진적으로 애니메이션됩니다 (자세한 내용은 아래 참고 참조).
C 연결됨: 이 앱이 전송 도형 웹 수신기에 채워진 상태로 표시되면 전송 도형 웹 수신기에 연결된 것으로 표시됩니다.
권장사항
각 버튼 상태에 앱의 다른 UI 요소 스타일과 일치하는 색상을 사용하세요. 켜기 / 연결됨 상태에 고유한 강조표시 색상 (예: 노란색)을 사용하는 것은 선택사항입니다.
참고
- Cast 기기의 사용 가능 여부와 관계없이 Cast 확장 프로그램에 액세스할 수 있도록 Chrome, Android, iOS에 전송 아이콘이 표시됩니다.
- Cast API에 연결하는 데 예상보다 시간이 더 오래 걸리면 연결 (애니메이션) 상태가 표시됩니다 (Android 및 Chrome SDK에서 전송 아이콘에 자동으로 애니메이션을 적용함). 연결되면 웹 수신기 앱이 실행됩니다.
- 전송 아이콘의 켜기 / 연결됨 상태가 업데이트되어 이제 아이콘 프레임 내에 단색 채우기가 사용됩니다. 새로운 전송 아이콘 및 아이콘 템플릿은 여기에서 이용할 수 있습니다.
Android
발신자, 전송 연결 해제됨
![발신자, 전송 연결 해제됨](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-cast-icon-states-1-122023.png?authuser=0000&hl=ko)
홈 화면 전송
![홈 화면 전송](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=0000&hl=ko)
발신기, Cast 연결 중
![발신기, Cast 연결 중](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-cast-icon-states-2-122023.png?authuser=0000&hl=ko)
홈 화면 전송
![홈 화면 전송](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=0000&hl=ko)
발신기, Cast 연결됨
![발신기, Cast 연결됨](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-cast-icon-states-3-122023.png?authuser=0000&hl=ko)
웹 수신기 앱 로드 중
![웹 수신기 앱 로드 중](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-player-loading1.png?authuser=0000&hl=ko)
발신기, Cast 연결됨
![발신기, Cast 연결됨](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-cast-icon-states-3-122023.png?authuser=0000&hl=ko)
웹 수신기 앱이 로드됨 / 유휴 상태임
![웹 수신기 앱이 로드됨 / 유휴 상태임](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-idle1.png?authuser=0000&hl=ko)
iOS
발신자, 전송 불가
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-cast-icon-states1_a.png?authuser=0000&hl=ko)
홈 화면 전송
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=0000&hl=ko)
발신자, 전송 연결 해제됨
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-cast-icon-states2_a.png?authuser=0000&hl=ko)
홈 화면 전송
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=0000&hl=ko)
발신기, Cast 연결 중
![발신기, Cast 연결 중](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-cast-icon-states3_a.png?authuser=0000&hl=ko)
홈 화면 전송
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=0000&hl=ko)
발신기, Cast 연결됨
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-cast-icon-states4_a.png?authuser=0000&hl=ko)
웹 수신기 앱 로드 중
![웹 수신기 앱 로드 중](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-player-loading1.png?authuser=0000&hl=ko)
발신기, Cast 연결됨
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-cast-icon-states4_a.png?authuser=0000&hl=ko)
웹 수신기 앱이 로드됨 / 유휴 상태임
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-idle1.png?authuser=0000&hl=ko)
Chrome
발신자, 전송 불가
![발신자, 전송 불가](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-cast-icon-states1_a.png?authuser=0000&hl=ko)
연결 상태와 관계없이 Cast 확장 프로그램에 액세스할 수 있도록 Chrome에 전송 아이콘이 표시됩니다.
홈 화면 전송
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=0000&hl=ko)
발신자, 전송 연결 해제됨
![발신자, 전송 연결 해제됨](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-cast-icon-states2_a.png?authuser=0000&hl=ko)
홈 화면 전송
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=0000&hl=ko)
발신기, Cast 연결 중
![발신기, Cast 연결 중](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-cast-icon-states3_a.png?authuser=0000&hl=ko)
홈 화면 전송
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=0000&hl=ko)
발신기, Cast 연결됨
![발신기, Cast 연결됨](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-cast-icon-states4_a.png?authuser=0000&hl=ko)
웹 수신기 앱 로드 중
![웹 수신기 앱 로드 중](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-player-loading1.png?authuser=0000&hl=ko)
발신기, Cast 연결됨
![발신기, Cast 연결됨](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-cast-icon-states4_a.png?authuser=0000&hl=ko)
웹 수신기 앱이 로드됨 / 유휴 상태임
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-idle1.png?authuser=0000&hl=ko)
이 디자인 가이드에 사용된 이미지는 저작권 또는 크리에이티브 커먼즈 라이선스에 따라 공유된 Blender Foundation에서 제공한 것입니다.
- Elephant's Dream: (c) copyright 2006, Blender Foundation / Netherlands Media Art Institute / www.elephantsdream.org
- Sintel: (c) copyright Blender Foundation | www.sintel.org
- Tears of Steel: (CC) Blender Foundation | mango.blender.org
- Big Buck Bunny: (c) copyright 2008, Blender Foundation / www.bigbuckbunny.org