UX
컬렉션을 사용해 정리하기
내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.

Tier 2 — 대형 화면에 최적화
사용자에게 사용자 인터페이스는 앱입니다. UI는 사용자 경험을 결정하며, 이는 사용자 만족도, 앱 사용, 앱 구매, 고객 유지율을 결정합니다.
대형 화면은 작은 화면에서는 재현할 수 없는 UX를 제공하는 혁신적이고 적응형 UI를 위한 넓은 디스플레이 공간을 제공합니다.
다음 UI 요소를 포함하여 대형 화면에 맞게 앱을 최적화하세요.
- 탐색 레일 또는 탐색 창
- 큰 터치 영역
- 적절한 위치에 배치된 메뉴 및 대화상자
- 다중 창 레이아웃
적응형 레이아웃
크고 작은 화면에서 앱의 UI를 최적화하는 적응형 레이아웃을 만듭니다.
여러 폼 팩터를 동시에 설계하고 빌드합니다. 새 기기 유형에 맞게 앱을 미래에 대비합니다.
표준 레이아웃
검증된 대형 화면 레이아웃을 활용하여 앱 UX를 탁월하게 만드세요.
목록 세부정보, 지원 창 또는 피드 레이아웃을 만들어 더 많은 콘텐츠를 더 효율적이고 즐겁게 관리하세요.
반응형 UI
화면 크기에 따라 UI 요소의 형식을 지정합니다. 작은 화면에서 전체 너비로 되어 있는 버튼, 카드, 텍스트 필드의 너비를 대형 화면에서 기능상 적절한 크기로 제한합니다. 대화상자나 다른 모달 창으로 전체 화면이 채워지지 않도록 하세요. 위치 컨텍스트 메뉴와 기타 요소 관련 팝업은 사용자가 선택한 요소 옆(화면 중앙 아님)에 표시되도록 합니다.
활동 삽입
대형 화면에서 다중 창 레이아웃으로 활동 기반 기존 앱을 업데이트합니다. 코드 리팩터링이 필요하지 않습니다. XML 또는 몇 개의 Jetpack WindowManager API 호출로 레이아웃을 구성합니다.
다음 단계
최적화된 UX를 위한 UI 개발에 관해 알아보려면 다음 개발자 가이드를 참고하세요.
이 페이지에 나와 있는 콘텐츠와 코드 샘플에는 콘텐츠 라이선스에서 설명하는 라이선스가 적용됩니다. 자바 및 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,["# UX\n\nTIER 2 --- Large screen optimized\n| **Objective:** Make your app [large screen\n| optimized](/docs/quality-guidelines/large-screen-app-quality#large_screen_optimized) by meeting the [LS-U1](/docs/quality-guidelines/large-screen-app-quality#LS-U1) through [LS-U4](/docs/quality-guidelines/large-screen-app-quality#LS-U4) user interface requirements of the [Large screen app\n| quality](/docs/quality-guidelines/large-screen-app-quality) guidelines.\n\nTo users, the user interface is the app. The UI determines the user experience,\nwhich determines user satisfaction, app usage, app purchases, customer\nretention.\n\nLarge screens offer expansive display space for innovative, accommodative UIs\nthat provide a UX small screens can't replicate.\n\nOptimize your app for large screens by including the following UI elements:\n\n- Navigation rail or navigation drawer\n- Large touch targets\n- Well-placed menus and dialogs\n- Multipane layouts\n\nAdaptive layouts\n----------------\n\nCreate adaptive layouts that optimize your app's UI on screens large and small.\nDesign and build for multiple form factors simultaneously. Future-proof your app\nfor new device types.\n\nCanonical layouts\n-----------------\n\nTake advantage of proven large screen layouts to make your app UX exceptional.\nCreate a list‑detail, supporting pane, or feed layout to make more content\nmore manageable and more enjoyable.\n\nResponsive UI\n-------------\n\nFormat UI elements based on screen size. Constrain the width of buttons, cards,\nand text fields that are full width on small screens to a functionally\nappropriate size on large screens. Don't let dialog boxes and other modal\nwindows fill the entire screen. Position context menus and other\nelement‑related pop‑up displays adjacent to the element the user\nselected, not centered on screen.\n\nActivity embedding\n------------------\n\nUpdate your activity‑based legacy apps with multipane layouts on large\nscreens. No code refactoring required. Configure your layouts in XML or with a\nfew Jetpack WindowManager API calls.\n\nNext steps\n----------\n\nTo learn about UI development for optimized UX, see the following developer\nguides:\n\n- [About adaptive layouts](/develop/ui/compose/layouts/adaptive)\n- [Canonical layouts](/develop/ui/compose/layouts/adaptive/canonical-layouts)\n- [Build responsive navigation](/develop/ui/views/layout/build-responsive-navigation)\n- [Activity embedding](/develop/ui/views/layout/activity-embedding)"]]