수신기가 콘텐츠를 재생하고 상태를 사용자에게 반영합니다. 수신자는 발신기 앱의 작업에 즉시 응답해야 합니다 . 예를 들어 수신기에서 콘텐츠가 일시중지되면 일시중지 아이콘이 표시되고 사용자가 발신기 앱에서 재생을 누르면 수신기에서 콘텐츠 재생을 시작하고 일시중지 아이콘을 삭제합니다.
수신기 UI 의견의 예:
- 재생 중
- 일시중지됨
- 재생 위치 / 탐색
- 버퍼링
수신기 UI
필수
A 대부분의 UI 요소를 화면의 하단 1/4 내에 배치하고 다른 UX와 일관되게 유지합니다.
B 요소를 대화형 컨트롤로 표시해서는 안 됩니다. 예를 들어 수신자 UI에서 발신자 UI를 재현하지 마세요.
권장사항
- 전환 (페이드), 투명도 및 뉘앙스를 사용하여 시각 효과를 부드럽게 합니다.
- 사용자가 최대한 많은 콘텐츠를 보고 싶어한다는 점을 고려하세요. 사용자는 검사 목적으로 콘텐츠를 일시중지하는 경우가 많으므로 가능하면 불필요한 UI는 삭제합니다.
Android
발신자 UI
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-persistent-control2.png?authuser=1&hl=ko)
수신기 UI
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-elements1_a.png?authuser=1&hl=ko)
iOS
발신자 UI
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-persistent-control2.png?authuser=1&hl=ko)
수신기 UI
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-elements1_a.png?authuser=1&hl=ko)
Chrome
발신자 UI
![발신자 UI](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-persistent-control2.png?authuser=1&hl=ko)
수신기 UI
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-elements1_a.png?authuser=1&hl=ko)
수신 앱이 유휴 상태임
수신기가 발신기에 연결되어 있지만 전송 중이지 않은 경우 유휴 화면이 수신기에 표시됩니다.
필수
A 로드된 수신기 앱 확인
권장사항
- 유휴 화면을 사용하여 발신기 앱의 콘텐츠나 기능을 홍보합니다.
- 30~60초마다 콘텐츠를 변경하여 더 많이 표시하고 화면 번짐을 방지하세요.
- 수신기 앱의 연결을 해제하고 5분 동안 유휴 상태이면 실행을 중지합니다. 중지하면 수신기 홈 화면이 나타나고 화면 번짐을 방지하는 데 도움이 됩니다.
Android
전송 대화상자, 연결되었지만 전송하지 않음
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-cast-menu-connected1.png?authuser=1&hl=ko)
수신기 앱이 로드됨 / 유휴 상태임
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-idle1_a.png?authuser=1&hl=ko)
iOS
전송 대화상자, 연결되었지만 전송하지 않음
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-cast-menu-connected1.png?authuser=1&hl=ko)
수신기 앱이 로드됨 / 유휴 상태임
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-idle1_a.png?authuser=1&hl=ko)
수신기 앱 로드
사용자가 수신기에 연결되면 먼저 수신기 앱을 로드해야 앱 유휴 상태를 표시하거나 콘텐츠 재생을 시작할 수 있습니다.
필수
A 앱 로고를 표시하여 로드 중인 수신기 앱을 확인합니다.
B 애니메이션 로드 스피너를 표시하여 수신기 앱이 로드 중인지 확인합니다.
Android
발신자 연결 중
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-cast-icon-states4.png?authuser=1&hl=ko)
수신기 앱 로드 중
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-player-loading1_a.gif?authuser=1&hl=ko)
iOS
발신자 연결 중
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-cast-icon-states4.png?authuser=1&hl=ko)
수신기 앱 로드 중
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-player-loading1_a.gif?authuser=1&hl=ko)
Chrome
발신자 연결 중
![발신자 연결 중](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-cast-icon-states4.png?authuser=1&hl=ko)
수신기 앱 로드 중
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-player-loading1_a.gif?authuser=1&hl=ko)
수신자 콘텐츠 로드
수신기 앱이 로드되면 콘텐츠가 수신기로 스트리밍을 시작할 수 있습니다.
필수
A 콘텐츠 제목이나 아트워크를 표시하여 로드 중인 콘텐츠를 확인합니다.
B 애니메이션 로드 스피너를 표시하여 콘텐츠가 로드 중임을 확인합니다.
권장사항
일시중지된 콘텐츠를 다시 시작할 때, 발신기에서 수신자로 전환하는 동안 시청자가 놓치는 부분이 없도록 재생을 5~10초 되감습니다.
Android
발신자 콘텐츠 로드 중
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-control-elements1.gif?authuser=1&hl=ko)
수신자 콘텐츠 로드 중
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-content-loading1_a.gif?authuser=1&hl=ko)
iOS
발신자 콘텐츠 로드 중
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-control-elements1.gif?authuser=1&hl=ko)
수신자 콘텐츠 로드 중
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-content-loading1_a.gif?authuser=1&hl=ko)
Chrome
발신자 콘텐츠 로드 중
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-control-elements1.gif?authuser=1&hl=ko)
수신자 콘텐츠 로드 중
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-content-loading1_a.gif?authuser=1&hl=ko)
리시버 재생
필수
A 콘텐츠 시작 시 재생 중인 항목 식별
B 위치가 조정될 때 재생 위치 식별
C 재생 위치가 변경되었지만 아직 재생되지 않을 때 수신기가 콘텐츠를 찾고 있는지 확인
Android
재생 위치를 조정하는 보낸사람
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-control-elements3.gif?authuser=1&hl=ko)
수신자 콘텐츠 탐색
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-seek1_a.gif?authuser=1&hl=ko)
iOS
재생 위치를 조정하는 보낸사람
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-control-elements3.gif?authuser=1&hl=ko)
수신자 콘텐츠 탐색
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-seek1_a.gif?authuser=1&hl=ko)
Chrome
재생 위치를 조정하는 보낸사람
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-control-elements3.gif?authuser=1&hl=ko)
수신자 콘텐츠 탐색
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-seek1_a.gif?authuser=1&hl=ko)
수신자가 일시중지됨
필수
A 일시중지된 아이콘과 재생 위치를 표시하여 콘텐츠가 일시중지되었음을
확인합니다.
B 콘텐츠 제목 또는 아트워크를 표시하여 일시중지할 콘텐츠를 확인합니다.
C 앱 로고를 표시하여 로드되는 수신기 앱을 확인합니다.
권장사항
- 사용자는 검토를 위해 콘텐츠를 일시중지하는 경우가 많으므로 몇 초 동안 일시중지되면 불필요한 UI가 사라지도록 일시중지 아이콘을 표시합니다.
- 재개 또는 대기열의 항목 건너뛰기와 같이 사용자가 재생을 시작하라는 명시적인 요청이 없는 한 수신기 앱에서 콘텐츠 재생을 계속하면 안 됩니다.
- 수신기 앱에서 연결을 해제하고 20분 동안 유휴 상태이면 실행을 중지합니다. 중지하면 수신기 홈 화면이 나타나고 화면 번짐을 방지하는 데 도움이 됩니다. 사용자가 나중에 해당 지점에서 재생을 다시 시작할 수 있도록 일시중지된 위치를 저장합니다.
Android
발신자가 일시중지됨
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-persistent-control2.png?authuser=1&hl=ko)
수신기 콘텐츠가 일시중지됨
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-pause1_a.png?authuser=1&hl=ko)
발신자가 일시중지됨
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-persistent-control2.png?authuser=1&hl=ko)
수신기가 5초 후에 일시중지됨
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-pause2.png?authuser=1&hl=ko)
iOS
발신자가 일시중지됨
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-persistent-control2.png?authuser=1&hl=ko)
수신기 콘텐츠가 일시중지됨
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-pause1_a.png?authuser=1&hl=ko)
발신자가 일시중지됨
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-persistent-control2.png?authuser=1&hl=ko)
수신기가 5초 후에 일시중지됨
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-pause2.png?authuser=1&hl=ko)
Chrome
발신자가 일시중지됨
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-persistent-control2.jpg?authuser=1&hl=ko)
수신기 콘텐츠가 일시중지됨
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-pause1_a.png?authuser=1&hl=ko)
발신자가 일시중지됨
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-persistent-control2.jpg?authuser=1&hl=ko)
수신기가 5초 후에 일시중지됨
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-pause2.png?authuser=1&hl=ko)
수신자 버퍼링
네트워크 지연 시간 또는 기타 요인으로 인해 재생이 지연되는 경우 수신기의 버퍼링이 발생합니다.
필수
A 버퍼링 스피너를 표시하여
수신기가 몇 초 후 버퍼링 중인지 확인합니다. 버퍼링이 있음을 나타내기 위해 몇 초 동안 기다리면 네트워크 상태가 좋지 않을 때 버퍼링 스피너가 너무 자주 표시되지 않습니다.
권장사항
5초 후에도 버퍼링이 계속되는 경우 어떤 콘텐츠가 버퍼링되는지 확인합니다.
Android
발신자가 수신자 버퍼링을 나타냄
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-control-elements3.gif?authuser=1&hl=ko)
수신기 콘텐츠 버퍼링
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-buffer1_a.gif?authuser=1&hl=ko)
iOS
발신자가 수신자 버퍼링을 나타냄
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-control-elements3.gif?authuser=1&hl=ko)
수신기 콘텐츠 버퍼링
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-buffer1_a.gif?authuser=1&hl=ko)
Chrome
발신자가 수신자 버퍼링을 나타냄
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-control-elements3.gif?authuser=1&hl=ko)
수신기 콘텐츠 버퍼링
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-buffer1_a.gif?authuser=1&hl=ko)
수신자가 전송을 중지함
재생이 중지되거나 타임아웃되면 수신기 UI가 발신기 앱에서 사용할 수 있는 다른 콘텐츠나 기능을 홍보해야 합니다.
필수
A 앱 로고를 표시하여 로드되었거나 유휴 상태인 수신기 앱을 식별합니다.
권장사항
- 재생 후 유휴 화면을 사용하여 방금 전송된 콘텐츠를 기반으로 발신기 앱의 콘텐츠나 기능을 추천합니다.
- 화면 번짐을 방지하기 위해 유휴 화면의 콘텐츠를 30~60초마다 변경합니다.
- 수신기 앱의 연결을 해제하고 5분 동안 유휴 상태이면 실행을 중지합니다. 중지하면 수신기 홈 화면이 나타나고 화면 번짐을 방지하는 데 도움이 됩니다.
Android
발신자 앱이 유휴 상태임
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-cast-icon-states4.png?authuser=1&hl=ko)
수신기 앱이 유휴 상태임
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-complete1_a.png?authuser=1&hl=ko)
발신자 연결 해제됨
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/a/sender-cast-icon-states2.png?authuser=1&hl=ko)
홈 화면 전송
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=1&hl=ko)
iOS
발신자 앱이 유휴 상태임
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-cast-icon-states4.png?authuser=1&hl=ko)
수신기 앱이 유휴 상태임
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-complete1_a.png?authuser=1&hl=ko)
발신자 연결 해제됨
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/i/sender-cast-icon-states2.png?authuser=1&hl=ko)
홈 화면 전송
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=1&hl=ko)
Chrome
발신자 앱이 유휴 상태임
![발신자 앱이 유휴 상태임](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-cast-icon-states4.png?authuser=1&hl=ko)
수신기 앱이 유휴 상태임
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-ui-complete1_a.png?authuser=1&hl=ko)
발신자 연결 해제됨
![발신자 연결 해제됨](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/w/sender-cast-icon-states2.png?authuser=1&hl=ko)
홈 화면 전송
![](https://developers-dot-devsite-v2-prod.appspot.com/static/cast/images/r/receiver-home2.png?authuser=1&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