대형 화면에 최적화
컬렉션을 사용해 정리하기
내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
TIER 2: 대형 및 소형 디스플레이에 맞게 앱을 준비하는 대형 화면 앱 품질 가이드라인
대형 화면에 최적화된 앱은 대형 화면 기기의 넓은 디스플레이를 활용하여 생산적이고 몰입도 높은 사용자 환경을 제공합니다.
최적화된 앱은 세로 모드 방향과 가로 모드 방향, 멀티 윈도우 모드, 접힌 기기 상태와 펼쳐진 기기 상태를 준수하는 반응형/적응형 레이아웃으로 빌드됩니다. 탐색 레일과 창은 최적의 사용자 환경을 위해 버튼, 텍스트 필드, 대화상자와 같은 요소의 형식을 동적으로 지정하고 배치하는 사용자 인터페이스를 개선합니다.
대형 화면에 최적화된 앱은 키보드 탐색, 단축키, 마우스 및 트랙패드 확대/축소, '마우스 오른쪽 버튼 클릭', 마우스 오버 동작을 지원합니다.
권장사항과 금지사항
- 창이 두 개인 레이아웃을 만듭니다.
- 그리드 및 열 레이아웃을 사용합니다.
- 탐색 메뉴를 탐색 레일 및 창으로 대체합니다.
- 기존의 다중 활동 앱에서 활동 삽입을 사용합니다.
- 고급 키보드, 마우스, 트랙패드 기능을 지원합니다.
- UI 요소(텍스트 필드, 버튼, 대화상자)를 늘려 추가 공간을 채웁니다.
- 이미지를 늘리거나 자릅니다.
- 패널이나 시트를 전체 너비로 설정합니다.
가이드라인
Tier 2 가이드라인에 따라 대형 화면에 맞게 앱을 최적화하세요.
최적의 사용자 환경을 제공하는 반응형/적응형 레이아웃으로 모든 종류의 기기에서 모든 크기의 화면을 지원합니다.
가이드라인 LS-U1~LS-U4
내용
앱 레이아웃이 대형 화면 크기를 따릅니다. 앱 UI에는 다음이 포함됩니다.
- 선행 가장자리 탐색 레일 및 창
- 창 크기 변경을 수용하는 그리드 레이아웃
- 열 레이아웃
- 대형 화면에서 기본적으로 열리는 후행 가장자리 패널
창이 두 개인 레이아웃은 대형 화면 공간을 활용합니다. 다중 활동 앱은 활동 삽입을 구현하여 활동의 다중 창 레이아웃을 나란히 만듭니다.
터치 영역이 크고 도달 가능합니다. 대화형 드로어블은 포커스 가능합니다.
이유
대형 화면 기기에는 태블릿, 폴더블, ChromeOS 기기를 비롯한 다양한 폼 팩터가 포함됩니다. 디스플레이 크기는 다양합니다. 기기는 주로 가로 모드 방향으로 사용됩니다.
외부 하드웨어 입력 장치를 지원하여 앱 사용성과 사용자 만족도를 높입니다.
가이드라인 LS-I3~LS-I9
내용
앱이 키보드, 마우스, 트랙패드 입력 지원을 개선합니다. 마우스 및 트랙패드 오른쪽 버튼 클릭(보조 마우스 버튼 또는 보조 탭) 동작으로 옵션 메뉴에 액세스할 수 있습니다. 마우스 스크롤 휠과 트랙패드 손가락 모으기 동작을 사용하여 앱 콘텐츠를 확대/축소할 수 있습니다. UI 요소에는 마우스 오버 상태가 있습니다.
이유
키보드, 마우스, 트랙패드와 같은 주변기기는 대형 화면 기기에 연결되는 경우가 많습니다. ChromeOS 기기에는 일반적으로 키보드와 트랙패드가 내장되어 있습니다. 사용자는 단축키, 여러 마우스 버튼, 마우스 스크롤 휠, 트랙패드 동작을 익숙하게 사용합니다.
이 페이지에 나와 있는 콘텐츠와 코드 샘플에는 콘텐츠 라이선스에서 설명하는 라이선스가 적용됩니다. 자바 및 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,["# Large screen optimized\n\nTIER 2 --- [Large screen app\nquality](/docs/quality-guidelines/large-screen-app-quality) guidelines that\nprepare your app for displays large and small.\n\nAPPS OPTIMIZED FOR LARGE SCREENS take advantage of the expansive displays of\nlarge screen devices to provide a productive, engaging user experience.\n\nOptimized apps are built with responsive/adaptive layouts that conform to\nportrait and landscape orientations, multi‑window mode, and folded and\nunfolded device states. Navigation rails and drawers enhance a user interface\nthat dynamically formats and positions elements such as buttons, text fields,\nand dialogs for an optimal user experience.\n\nApps optimized for large screens provide support for keyboard navigation,\nkeyboard shortcuts, and mouse and trackpad zoom, \"right‑click,\" and hover\nbehavior.\n\nDo's and don'ts\n---------------\n\ncheck_circle\n\n### Do\n\n- Create two-pane layouts\n- Use grid and column layouts\n- Replace navigation bars with navigation rails and drawers\n- Use activity embedding in legacy, multi-activity apps\n- Support advanced keyboard, mouse, and trackpad functionality \ncancel\n\n### Don't\n\n- Stretch UI elements (text fields, buttons, dialogs) to fill extra space\n- Stretch or crop images\n- Make panels or sheets full width\n\nGuidelines\n----------\n\nFollow the Tier 2 guidelines to optimize your apps for large screens. \n\n### [UX](/docs/quality-guidelines/large-screen-app-quality#t2_ux)\n\nSupport screens of all sizes on devices of all kinds with responsive/adaptive layouts that provide an optimal user experience.\n\nGuidelines [LS-U1](/docs/quality-guidelines/large-screen-app-quality#LS-U1) through [LS-U4](/docs/quality-guidelines/large-screen-app-quality#LS-U4) \n\n#### What\n\nApp layouts conform to large screen dimensions. App UI includes:\n\n- Leading-edge navigation rails and drawers\n- Grid layouts that accommodate window size changes\n- Column layouts\n- Trailing-edge panels that are open by default on large screens\n\nTwo-pane layouts take advantage of large screen space. Multi‑activity apps implement activity embedding to create multi‑pane layouts of activities side by side.\n\nTouch targets are large and reachable. Interactive drawables are focusable. \n\n#### Why\n\nLarge screen devices encompass a variety of form factors, including tablets, foldables, and ChromeOS devices. Display sizes vary. Devices are often---sometimes primarily---used in landscape orientation. \n\n#### How\n\nSee the [UX](/guide/topics/large-screens/ux) overview. \n\n### [Keyboard, mouse, and trackpad](/docs/quality-guidelines/large-screen-app-quality#t2_keyboard_mouse_trackpad)\n\nSupport external hardware input devices to increase app usability and user satisfaction.\n\nGuidelines [LS-I3](/docs/quality-guidelines/large-screen-app-quality#LS-I3) through [LS-I9](/docs/quality-guidelines/large-screen-app-quality#LS-I9) \n\n#### What\n\nApp provides enhanced support for keyboard, mouse, and trackpad input. Options menus are accessible by mouse and trackpad right‑click (secondary mouse button or secondary tap) behavior. App content can be zoomed using the mouse scroll wheel and trackpad pinch gestures. UI elements have hover states. \n\n#### Why\n\nPeripherals such as keyboards, mice, and trackpads are often connected to large screen devices. ChromeOS devices typically have a built‑in keyboard and trackpad. Users are accustomed to using keyboard shortcuts, multiple mouse buttons, mouse scroll wheel, and trackpad gestures. \n\n#### How\n\nSee the [Keyboard, mouse, and trackpad](/guide/topics/large-screens/keyboard-mouse-and-trackpad-tier-2) overview."]]
