TV 기기는 앱에 제한된 탐색 컨트롤 세트를 제공합니다.
TV UI에 효과적인 탐색 스키마를 만들려면 이러한 제한된 컨트롤과 사용자가 터치 스크린 대신 리모컨 버튼을 사용하여 탐색하는 방식을 고려하세요.
하이라이트
컨트롤러는 제한된 탐색 기능(위, 아래, 왼쪽, 오른쪽)을 제공하므로 앱의 UI 디자인에 미치는 영향을 고려하세요.
탐색은 자연스럽고 친숙해야 합니다.
리모컨의 뒤로 버튼으로 간단한 탐색 환경을 만듭니다.
사용자가 컨트롤로 이동할 수 있는 직선 경로가 없는 경우 컨트롤을 재배치하는 것이 좋습니다.
원칙
목표는 사용자 인터페이스를 지배하거나 콘텐츠에서 사용자의 주의를 분산시키지 않으면서 자연스럽고 친숙한 느낌을 주는 탐색을 제공하는 것입니다. 다음 원칙은 TV 앱 전반에서 일관되고 직관적인 사용자 환경의 기준을 설정하는 데 도움이 됩니다.
효율적
콘텐츠에 빠르고 쉽게 액세스할 수 있도록 합니다. 사용자는 최소한의 클릭으로 콘텐츠에 빠르게 액세스하기를 원합니다. 화면이 가장 적게 필요한 방식으로 정보를 구성합니다.
예측 가능
권장사항에 따라 사용자가 탐색을 예측할 수 있도록 합니다. 탐색 패턴을 불필요하게 재창조하지 마세요. 혼란과 예측 불가능성을 초래합니다.
직관적
널리 사용되는 사용자 동작을 원활하게 지원할 만큼 간단하게 탐색을 만드세요. 불필요한 탐색 레이어를 추가하여 과도하게 복잡하게 만들지 마세요.
컨트롤러
컨트롤러는 미니멀한 리모컨부터 복잡한 게임 컨트롤러까지 다양한 스타일로 제공됩니다. 모든 컨트롤러에는 방향 패드 (D패드)와 선택, 홈, 뒤로 버튼이 포함되어 있습니다. 다른 버튼은 모델에 따라 다릅니다.
방향 패드 (D패드) - TV의 기본 탐색 방법은 D패드를 사용하는 것입니다. D패드에는 위, 아래, 왼쪽, 오른쪽 방향 하드웨어 버튼이 있습니다.
선택 버튼 - 포커스가 있는 화면의 항목을 선택합니다.
길게 누르면 더 많은 옵션을 표시할 수 있습니다.
홈 버튼 - 사용자를 시스템 홈 화면으로 이동합니다.
뒤로 버튼: 사용자에게 이전 뷰로 돌아가는 방법을 제공합니다.
마이크 버튼 - Google 어시스턴트 또는 음성 입력을 호출합니다.
D패드 탐색
TV 기기에서는 사용자가 4방향 D패드(위, 아래, 왼쪽, 오른쪽)를 사용하여 탐색합니다.
최적의 TV 앱을 빌드하려면 사용자가 네 개의 화살표 키로 앱을 사용하는 방법을 빠르게 배울 수 있는 탐색 스키마를 설계하세요. D-패드는 한 요소에서 해당 방향의 가장 가까운 요소로 포커스를 이동합니다.
앱의 탐색이 TV 기기의 D패드로 잘 작동하는지 테스트하려면 다음 사항을 고려하세요.
사용자가 화면에서 포커스를 설정할 수 있는 모든 요소로 이동할 수 있는지 확인합니다.
탐색 방향이 간단하고 예측 가능해야 합니다.
스크롤 목록의 경우 D패드 위/아래 버튼으로 전체 목록을 스크롤하고 각 목록 항목을 선택할 수 있어야 합니다.
홈 버튼
홈 버튼을 누르면 항상 Google TV 홈 또는 런처로 돌아갑니다. 현재 앱은 기본적으로 백그라운드에서 정지됩니다.
홈 버튼을 길게 누르면 Google TV에는 시스템 대시보드가, Android TV에는 앱 그리드가 표시됩니다. 기본 동작은 제조업체에 따라 다를 수 있습니다.
뒤로 버튼
플랫폼의 여러 앱에서 일관성을 유지하려면 뒤로 버튼의 동작이 이 가이드라인을 따르는지 확인하세요.
예측 가능한 뒤로 버튼 동작 사용
예측 가능한 탐색 환경을 만들려면 사용자가 리모컨의 뒤로 버튼을 누르면 이전 대상으로 이동합니다.
궁극적으로 사용자가 뒤로 버튼을 계속 누르면 Google TV 홈 또는 런처로 이동해야 합니다.
상단 탐색이 있는 앱
사용자가 빠르게 스크롤하여 페이지 상단으로 돌아가고 메뉴에 초점을 활성화합니다.
왼쪽 탐색이 있는 앱
왼쪽 메뉴가 활성화되고 사용자의 포커스가 활성 메뉴 항목으로 이동합니다.
뒤로 버튼이 확인 화면으로 제한되거나 무한 루프의 일부가 아닌지 확인합니다.
cancel
금지사항
종료 게이트를 피합니다. 사용자는 확인 없이 앱을 종료할 수 있어야 합니다.
뒤로 버튼 표시 안함
휴대기기와 달리 리모컨의 뒤로 버튼은 TV에서 뒤로 이동하는 데 사용됩니다. 화면에 가상 뒤로 버튼을 표시할 필요는 없습니다.
cancel
금지사항
화면에 뒤로 버튼을 표시하지 마세요. 사용자는 리모컨의 뒤로 버튼을 사용할 수 있습니다.
필요한 경우 취소 버튼 표시
표시되는 작업이 확인, 파괴, 구매 작업뿐인 경우 이전 대상으로 돌아가는 취소 버튼을 사용하는 것이 좋습니다.
check_circle
권장사항
필요한 경우 사용자가 이전 페이지로 다시 이동할 수 있도록 취소 버튼을 표시합니다.
탐색 아키텍처
고정 시작 대상
사용자가 런처에서 앱을 실행할 때 처음으로 표시되는 화면은 뒤로 버튼을 누른 후 런처로 돌아올 때 마지막으로 표시되는 화면이기도 합니다.
수동 탐색을 시뮬레이션하는 딥 링크
딥 링크를 사용하든 특정 대상으로 수동으로 이동하든 사용자는 뒤로 버튼을 사용하여 앱의 어느 위치에서든 시작 대상으로 이동할 수 있습니다.
다른 앱에서 앱으로 딥 링크하면 수동 탐색이 시뮬레이션됩니다. 예를 들어 사용자가 Google TV에서 Moviestar 앱의 세부정보 페이지로 바로 이동한 다음 뒤로 버튼을 누르면 Moviestar 앱의 홈페이지로 이동합니다.
포커스를 설정할 수 있는 모든 요소의 경로 지우기
사용자가 명확한 방향으로 UI를 탐색할 수 있도록 합니다. 컨트롤로 이동하는 직선 경로가 없는 경우 컨트롤을 재배치하는 것이 좋습니다.
check_circle
권장사항
검색 작업과 같은 컨트롤을 다른 클릭 가능한 요소와 겹치지 않는 위치에 배치합니다.
cancel
금지사항
도달하기 어려운 위치에 컨트롤이 포함된 레이아웃은 피하세요. 여기에 표시된 검색 작업에 D패드로 쉽게 도달할 수 없습니다.
축
가로 및 세로 축을 활용하도록 레이아웃을 디자인합니다.
대규모 계층 구조를 빠르게 탐색할 수 있도록 각 방향에 특정 기능을 지정합니다.
check_circle
권장사항
카테고리는 세로축에서 탐색할 수 있으며 각 카테고리 내 항목은 가로축에서 탐색할 수 있습니다.
이 페이지에 나와 있는 콘텐츠와 코드 샘플에는 콘텐츠 라이선스에서 설명하는 라이선스가 적용됩니다. 자바 및 OpenJDK는 Oracle 및 Oracle 계열사의 상표 또는 등록 상표입니다.
최종 업데이트: 2025-07-27(UTC)
[[["이해하기 쉬움","easyToUnderstand","thumb-up"],["문제가 해결됨","solvedMyProblem","thumb-up"],["기타","otherUp","thumb-up"]],[["필요한 정보가 없음","missingTheInformationINeed","thumb-down"],["너무 복잡함/단계 수가 너무 많음","tooComplicatedTooManySteps","thumb-down"],["오래됨","outOfDate","thumb-down"],["번역 문제","translationIssue","thumb-down"],["샘플/코드 문제","samplesCodeIssue","thumb-down"],["기타","otherDown","thumb-down"]],["최종 업데이트: 2025-07-27(UTC)"],[],[],null,["# Navigation on TV\n\nTV devices provide a limited set of navigation controls for apps.\nTo create an effective navigation scheme for your TV UI, consider these\nlimited controls and how the user navigates using remote control buttons\ninstead of a touch screen. \n\nHighlights\n----------\n\n- The controller offers limited navigation capabilities -- up-down-left-right -- so pay attention to how this can shape your app's UI design.\n- Navigation should feel natural and familiar.\n- Create a simple navigation experience with the remote's back button.\n- If a user doesn't have a straight path to get to a control, consider relocating it.\n\nPrinciples\n----------\n\nThe goal is for navigation to feel natural and familiar without dominating\nthe user interface or diverting attention from content. The following\nprinciples help set a baseline for a consistent and intuitive user\nexperience across TV apps.\n\n\n### Efficient\n\nMake it fast and simple to get to content. Users want to access content quickly,\nusing a minimal number of clicks. Organize your information in a way that\nrequires the fewest screens. \n\n### Predictable\n\nFollow best practices and recommendations to make navigation predictable to\nusers. Don't reinvent navigation patterns unnecessarily, as this leads to\nconfusion and unpredictability. \n\n### Intuitive\n\nMake navigation simple enough to seamlessly support widely adopted user\nbehaviors. Don't over-complicate by adding unnecessary layers of navigation.\n\n\u003cbr /\u003e\n\nController\n----------\n\nControllers come in a variety of styles, from a minimalist remote control\nto complex game controllers. All controllers include a directional pad (D-pad)\nplus select, home, and back buttons. Other buttons vary by model.\n\n- Directional pad (D-pad) - The primary navigation method on TV is through the D-pad, which includes up, down, left, and right directional hardware buttons.\n- Select button - Selects the on-screen item with focus. Press and hold can be used to show more options.\n- Home button - Takes the user to the system Home screen.\n- Back button - Gives users a way to return to the previous view.\n- Microphone button - Invokes either Google Assistant or voice input.\n\n| **Note:** The remote control shown here is for reference only. There are many layouts and styles of remotes and controllers, though all of them have the basic functionality described here. For more information, see [Manage TV controllers](/training/tv/start/controllers).\n\n### D-pad navigation\n\nOn a TV device, users navigate using a 4-way D-pad: up, down, left, and right.\nTo build an optimal TV app, design a navigation scheme where the user\ncan quickly learn how to use your app with the four arrow keys. The\nD-pad moves focus from one element to the nearest element in\nthe corresponding direction.\n\nTo test your app's navigation works well with a D-pad on a TV device,\nconsider the following:\n\n- Ensure a user can navigate to all focusable elements on the screen.\n- Ensure that the navigation direction is straightforward and predictable.\n- For scrolling lists, make sure the D-pad up and down buttons scroll the whole list and each list item can be selected.\n\n### Home button\n\nPressing the home button always takes the user back to the Google\nTV Home or Launcher. The current app would suspend in the background\nby default.\n\nLong pressing on the home button displays the system dashboard on Google\nTV and apps grid on Android TV. Default behavior may vary according\nto manufacturer.\n\n### Back button\n\nFor consistency across apps on the platform, ensure the\nbehavior of the back button follows these guidelines.\n\n#### Use predictable back button behavior\n\nTo create a predictable navigation experience, when the user\npresses the remote's back button, take them to the previous destination.\nUltimately, the user should land on the Google TV Home or Launcher\nif they keep pressing the back button.\n\n\n**App with top navigation**\n\nUser is taken back to the top of the page by scrolling quickly and activates the\nfocus to the menu.\n\n**App with left navigation**\n\nThe left side menu is activated and the user's focus is taken to the active menu\nitem.\n\n\u003cbr /\u003e\n\nEnsure that the back button isn't gated by confirmation screens or part\nof an infinite loop. \ncancel\n\n### Don't\n\nAvoid exit gating. Users should be able to exit out of the app without any confirmation.\n\n#### Don't display a back button\n\nUnlike on handheld devices, the back button on the remote is used to\nnavigate backward on a TV. It's not necessary to show a virtual back\nbutton on the screen. \ncancel\n\n### Don't\n\nAvoid showing a back button on the screen. Users can use the back button on the remote.\n\n#### Show cancel button, if necessary\n\nIf the only visible actions are confirming, destructive, or purchase actions,\nit's good practice to have a Cancel button that returns to the previous\ndestination. \ncheck_circle\n\n### Do\n\nDisplay a cancel button -- when needed -- to let the user navigate back to the previous page.\n\nNavigation architecture\n-----------------------\n\n### Fixed start destination\n\nThe first screen the user sees when they launch the app from the\nlauncher is also the last screen the user sees when they return to\nthe launcher after pressing the back button.\n| **Note:** Some apps display a splash screen while preparing the main app UI. Don't include a splash screen in the backwards navigation.\n\n### Deep linking simulates manual navigation\n\nWhether deep linking or manually navigating to a specific destination,\nusers can use the back button to navigate from anywhere in the app to\nthe start destination.\n\n\nDeep linking into an app from another app simulates manual navigation. For\nexample, if the user goes directly to a details page on the Moviestar app from\nGoogle TV and then presses the back button, they are taken to the home page of\nthe Moviestar app.\n\n\u003cbr /\u003e\n\n| **Note:** This does not apply when launching from the Live Tab for direct playback. See the Live Tab navigation section for details.\n\n### Clear path to all focusable elements\n\nLet users navigate your UI with a clear direction. If there isn't a\nstraight path to get to a control, consider relocating it. \ncheck_circle\n\n### Do\n\nPlace controls, like the search action, in locations that don't overlap with other clickable elements. \ncancel\n\n### Don't\n\nAvoid layouts that contain controls in hard-to-reach places. Reaching the search action shown here is not easy to manage with the D-pad.\n\n### Axis\n\nDesign your layout to take advantage of horizontal and vertical axes.\nGive each direction a specific function to make it fast to navigate\nlarge hierarchies. \ncheck_circle\n\n### Do\n\nCategories can be traversed on the vertical axis, and items within each category can be browsed on the horizontal axis. \ncancel\n\n### Don't\n\nAvoid complex and nested layout hierarchies."]]
