전송 버튼
컬렉션을 사용해 정리하기
내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
전송 버튼을 누르면 웹 수신기에 연결, 제어, 연결 해제할 수 있는 대화상자가 열립니다.
전송 아이콘에서 전송 버튼 템플릿을 다운로드하세요.
전송 버튼은 Google Cast에만 해당하지 않으며 웹 수신기와 비웹 수신기 (예: 블루투스 헤드셋)를 모두 나타낼 수 있습니다. 웹 수신기는 항상 전송 대화상자 아래에 표시되어야 하며 다른 대화상자, 메뉴 또는 컨트롤 아래에 표시되어서는 안 됩니다.
전송 버튼을 소개하면 기존 사용자가 이제 발신기 앱에서 전송 기능을 사용할 수 있다는 것을 알 수 있으며 Google Cast를 처음 접하는 사용자도 지원할 수 있습니다.
필수
A 웹 수신기를 처음 사용할 수 있을 때 전송 소개 화면을 표시합니다. iOS 발신자의 경우 전송 버튼이 처음 표시될 때 전송 소개 화면을 표시합니다.
B 버튼을 동그라미로 표시하여 Cast 버튼을 시각적으로 강조합니다.
C Cast 버튼의 작동 방식을 설명합니다 (예: '터치하여 TV로 동영상을 전송하세요'와 같은 메시지 표시).
Android
Cast 소개
홈 화면 전송
iOS
Cast 소개
홈 화면 전송
Chrome
Cast 소개
홈 화면 전송
필수
A 전송 버튼은 재생 가능한 콘텐츠가 있는 모든 화면에서 표시되어야 하며 콘텐츠를 탐색하거나 재생하는 동안 일관된 위치에 있어야 합니다. 전역 제어를 위해 Chrome 헤더에도 표시됩니다.
B Chrome에서는 웹 수신기를 사용할 수 없는 경우 전송 버튼이 숨겨질 수 있습니다. Android 및 iOS 전송기의 경우 기기가 Wi-Fi에 연결되어 있을 때 항상 Cast 버튼이 표시되어야 합니다. 그래야 사용자가 로컬 네트워크 액세스를 사용 중지하여 기기를 검색할 수 없게 된 경우 적절한 도움말을 제공할 수 있습니다(자세한 내용은 iOS 권한 및 검색 참고).
C 모바일 앱에서 전송 버튼은 오른쪽에 있어야 합니다.
D Chrome에서 전송 버튼은 콘텐츠 미디어 컨트롤의 오른쪽에 있어야 합니다 (예: 삽입된 동영상 참고). 미디어 컨트롤에 전체 화면 버튼이 포함된 경우 전송 버튼을 전체 화면 버튼의 왼쪽에 배치합니다.
참고
Google Cast는 멀티태스킹 모델을 사용하므로 사용자는 전송하는 동안 발신기 앱과 다른 앱을 탐색할 수 있습니다. 전송 버튼은 재생 가능한 콘텐츠가 있는 모든 화면에서 표시되어야 하므로 사용자가 TV에서 재생되는 콘텐츠를 일시중지하거나 중지할 위치를 찾기 위해 헤매지 않아도 됩니다.
Android
발신자가 연결을 끊음
홈 화면 전송
iOS
발신자가 연결을 끊음
홈 화면 전송
Chrome
발신자가 연결을 끊음
홈 화면 전송
필수
A 연결 해제됨: 웹 수신기를 사용할 수 있는 경우 전송 버튼이 표시됩니다.
B 연결 중: 웹 수신기가 연결 중인 경우 전송 버튼이 아이콘의 물결을 점진적으로 애니메이션 처리합니다 (자세한 내용은 아래 참고사항 참고).
C 연결됨: 이 앱이 Cast 웹 수신기에 연결된 경우 전송 버튼이 채워진 프레임 모양으로 표시됩니다.
권장사항
각 버튼 상태에 앱의 다른 UI 요소 스타일과 일치하는 색상을 사용하세요. ON / 연결됨 상태에 고유한 강조 색상 (예: 노란색)을 사용하는 것은 선택사항입니다.
참고
- 전송 아이콘은 Chrome, Android, iOS에 표시되어 전송 기기 사용 가능 여부와 관계없이 전송 확장 프로그램에 액세스할 수 있도록 합니다.
- 연결 (애니메이션) 상태는 Cast API에 대한 연결이 예상보다 오래 걸릴 때 표시됩니다 (Android 및 Chrome SDK는 Cast 아이콘을 자동으로 애니메이션 처리함). 연결되면 웹 수신기 앱이 실행됩니다.
- Cast 아이콘의 ON / 연결됨 상태가 업데이트되어 이제 아이콘 프레임 내에서 단색 채우기를 사용합니다. 새 전송 아이콘과 아이콘 템플릿은
여기에서 확인할 수 있습니다.
Android
발신자, 전송 연결 해제됨
홈 화면 전송
발신기, Cast 연결 중
홈 화면 전송
발신자, 전송 연결됨
Web Receiver 앱 로드
발신자, 전송 연결됨
웹 수신기 앱 로드됨 / 유휴 상태
iOS
발신자, Cast를 사용할 수 없음
홈 화면 전송
발신자, 전송 연결 해제됨
홈 화면 전송
발신기, Cast 연결 중
홈 화면 전송
발신자, 전송 연결됨
Web Receiver 앱 로드
발신자, 전송 연결됨
웹 수신기 앱 로드됨 / 유휴 상태
Chrome
발신자, Cast를 사용할 수 없음
연결 상태와 관계없이 Chrome에 전송 확장 프로그램에 액세스할 수 있는 전송 아이콘이 표시됩니다.
홈 화면 전송
발신자, 전송 연결 해제됨
홈 화면 전송
발신기, Cast 연결 중
홈 화면 전송
발신자, 전송 연결됨
Web Receiver 앱 로드
발신자, 전송 연결됨
웹 수신기 앱 로드됨 / 유휴 상태
이 설계 가이드에 사용된 이미지는 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
달리 명시되지 않는 한 이 페이지의 콘텐츠에는 Creative Commons Attribution 4.0 라이선스에 따라 라이선스가 부여되며, 코드 샘플에는 Apache 2.0 라이선스에 따라 라이선스가 부여됩니다. 자세한 내용은 Google Developers 사이트 정책을 참조하세요. 자바는 Oracle 및/또는 Oracle 계열사의 등록 상표입니다.
최종 업데이트: 2025-07-26(UTC)
[null,null,["최종 업데이트: 2025-07-26(UTC)"],[[["\u003cp\u003eThe Cast button, used for connecting to Web Receivers and other devices, should be visible on every screen with playable content.\u003c/p\u003e\n"],["\u003cp\u003eUsers should be introduced to the Cast button's functionality with a highlight and explanatory message, especially on first use.\u003c/p\u003e\n"],["\u003cp\u003eThe Cast button has distinct visual states (Disconnected, Connecting, Connected) to indicate the connection status.\u003c/p\u003e\n"],["\u003cp\u003eThe Cast button should be consistently positioned, typically on the right side of the UI in mobile apps and Chrome's content media controls.\u003c/p\u003e\n"],["\u003cp\u003eGoogle Cast allows for multitasking, enabling users to browse other apps while casting content.\u003c/p\u003e\n"]]],["The Cast button facilitates connections to Web Receivers, allowing users to control and disconnect. It should be consistently visible on all screens with playable content, positioned on the right in mobile apps and to the left of the fullscreen button in Chrome media controls. The button has distinct states: disconnected, connecting (animated), and connected (filled frame). Users should receive an introduction to the Cast feature, including visual highlights and explanatory messages.\n"],null,["# Cast Button\n\nThe Cast button opens a dialog to connect, control, and disconnect from Web Receivers.\n\nSee [Cast icons](/cast/docs/get-started#download_cast_icons_optional) to download the Cast button templates.\n\nNote that the Cast button is not specific to Google Cast; it can be used to represent both Web\nand non-Web Receivers (like Bluetooth headsets). Web Receivers should always appear under the\nCast dialog, and never under another dialog, menu, or control.\n\n### [Introduce Cast to users](#prompting)\n\nIntroducing the Cast button helps existing users know that the sender app now supports Casting\nand also helps users new to Google Cast.\n\n\n**Required**\n\n\nA Show a Cast introduction screen the first time\nWeb Receivers are available. For iOS senders, show a Cast introduction\nscreen the first time the Cast button appears.\n\n\nB Visually highlight the Cast button by circling the\nbutton)\n\n\nC Explain how the Cast button works (for example,\ndisplaying a message such as \"Touch to cast videos to your TV\") \n\n### Android\n\nCast introduction \nCast home screen \n\n### iOS\n\nCast introduction \nCast home screen \n\n### Chrome\n\nCast introduction \nCast home screen \n\n### [Cast button availability](#sender-cast-icon-available)\n\n\n**Required**\n\n\nA The Cast button must\nbe visible from every screen where there is playable content, and located in a consistent position\nwhile browsing or playing content. It will also appear in Chrome's header for global control.\n\n\nB In Chrome, the Cast button can be hidden\nwhen Web Receivers aren't available. For Android and iOS senders,\nthe Cast button should always display when the device is on Wi-Fi, so proper help can be given\nif the user has turned off local network access and devices become undiscoverable as a result\n(see [iOS Permissions and Discovery](/cast/docs/ios_sender/permissions_and_discovery)\nfor more details).\n\n\nC In mobile apps, the Cast button should be on the right\nside.\n\n\nD In Chrome, the Cast button should be on the right side in\nthe content media controls (for example, see embedded video). If the media controls contain a fullscreen\nbutton, place the Cast button to the left of it.\n\n**Note**\n\nGoogle Cast employs a multi-tasking model, which allows users to browse the sender app and\nother apps while casting. The Cast button must be visible from every screen where there is\nplayable content, so the user doesn't have to hunt to find where to pause or stop the content\nplaying on TV. \n\n### Android\n\nSender disconnected \nCast home screen \n\n### iOS\n\nSender disconnected \nCast home screen \n\n### Chrome\n\nSender disconnected \nCast home screen \n\n### [Cast button states](#sender-cast-icon-states)\n\n\n**Required**\n\n\nA Disconnected: When Web Receivers are available, the\nCast button appears\n\n\nB Connecting: When the Web Receiver is connecting, the\nCast button animates the waves in the icon progressively (for details, see note below)\n\n\nC Connected: When this app is connected to the Cast\nWeb Receiver, its Cast button appears with a filled frame shape\n\n\n**Best practices**\n\n\nFor each of the button states, use colors that match the style of other UI\nelements of your app. Using a distinct highlight color (such as yellow) for the ON / Connected\nstate is optional.\n\n\n**Notes**\n\n- The Cast icon displays on Chrome, Android, and iOS to provide access to the Cast extension regardless of the availability of Cast devices.\n- The Connecting (animated) state appears when the connection to the Cast API takes longer than expected (the Android and Chrome SDK's will automatically animate the Cast icon). Once connected, the Web Receiver app launches.\n- The ON / Connected state of the Cast icon has been updated and now uses a solid fill within the icon frame. The new Cast icon and icon templates are available [here](/cast/docs/get-started#download_cast_icons_optional).\n\n\u003cbr /\u003e\n\n### Android\n\nSender, Cast disconnected \nCast home screen \nSender, Cast connecting \nCast home screen \nSender, Cast connected \nWeb Receiver app loading \nSender, Cast connected \nWeb Receiver app loaded / idle \n\n### iOS\n\nSender, Cast unavailable \nCast home screen \nSender, Cast disconnected \nCast home screen \nSender, Cast connecting \nCast home screen \nSender, Cast connected \nWeb Receiver app loading \nSender, Cast connected \nWeb Receiver app loaded / idle \n\n### Chrome\n\nSender, Cast unavailable\n\nThe Cast icon displays in Chrome to provide access to the Cast extension regardless of the connection state. \nCast home screen \nSender, Cast disconnected \nCast home screen \nSender, Cast connecting \nCast home screen \nSender, Cast connected \nWeb Receiver app loading \nSender, Cast connected \nWeb Receiver app loaded / idle \n\n**Images used in this design guide**\nare courtesy of the Blender Foundation, shared under copyright or Creative Commons license.\n\n- Elephant's Dream: (c) copyright 2006, Blender Foundation / Netherlands Media Art Institute / www.elephantsdream.org\n- Sintel: (c) copyright Blender Foundation \\| www.sintel.org\n- Tears of Steel: (CC) Blender Foundation \\| mango.blender.org\n- Big Buck Bunny: (c) copyright 2008, Blender Foundation / www.bigbuckbunny.org"]]
