앱 레이아웃
컬렉션을 사용해 정리하기
내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
Wear OS용 앱을 디자인할 때는 어떤 레이아웃을 위한 것인지 신중하게 선택하세요.
경험해 볼 수 있습니다 Wear OS는 원형 디스플레이에서 실행되며 클리핑이 더 많기 때문입니다.
표준 레이아웃에는 두 가지 카테고리가 있습니다.
고려해야 합니다.
스크롤되지 않은 레이아웃은 한눈에 확인할 수 있는 정보에 초점을 맞추고 다음과 같이 사용자에게 가치를 제공합니다.
발생할 수 있습니다 그렇기 때문에 Google Cloud의
다음 레이아웃에 넣을 수 있습니다.
- 언어, 글꼴 크기 조정, 기기, 변수를 조합하여 테스트
있습니다.
- 콘텐츠가 알려졌거나 제어되는 경우에만 스크롤할 수 없는 레이아웃 사용
특정 디자인을 사용해야 하는 경우에 대비할 수 있습니다.
- 레이아웃에 권장되는 상단, 하단, 측면 여백을 적용합니다.
- 콘텐츠가 표시되지 않을 수 있는 위치에는 백분율로 여백을 정의합니다.
잘리지 않습니다.
- 요소를 정렬하여
여러 기기 크기 간에 균형을 유지합니다.
한 화면에 모두 표시할 수 있는 것보다 더 많은 정보가 포함된 페이지의 경우
보다 길고 몰입도 높은 여정을 지원하는 데 필요한 경우 스크롤 없이 볼 수 있는 부분인
합니다.
- 권장되는 상단, 하단, 측면 여백을 적용합니다.
- 바깥쪽 여백을 백분율 값으로 정의하여
스크롤 가능한 컨테이너의 시작과 끝을 나타냅니다.
- UI 요소 사이의 고정된 DP 값에 여백을 적용합니다.
반응형 디자인 방식을 사용하는 스크롤 뷰는 일반적으로
화면 크기 그러나 일부 특별한 경우에는 중단점을 사용하여
추가 옵션을 표시하고 크기를 재정의하고 레이아웃을 보강하여
콘텐츠를 화면에 더 잘 표시할 수 있습니다. 다음 예를 참고하세요.
큰 화면에서 아래쪽의 두 버튼이 넓어지는 방식을 보여줍니다.
Figma 디자인 키트
디자인 키트 다운로드 페이지를 방문하여
다양한 앱과 카드를 만들기 위한 구성요소, 옵션, 추천
설계하는 것이 중요합니다
이 페이지에 나와 있는 콘텐츠와 코드 샘플에는 콘텐츠 라이선스에서 설명하는 라이선스가 적용됩니다. 자바 및 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,["# App layouts\n\nWhen designing apps for Wear OS, be intentional about the layouts you choose for\neach experience. Because Wear OS runs on circular displays and clipping is more\ncommon than on handheld devices, there are two categories of canonical layouts\nthat you should consider when designing your app.\n\nNon-scrolling app layouts\n-------------------------\n\nNon-scrolling layouts focus on glanceable information and offer users value with\nlittle or no interaction. Because of that, it can be challenging to build\nresponsive behavior into these layouts:\n\n### Build for responsive non-scrolling views\n\n- Test on a combination of languages, font scaling, devices, and variable content.\n- Use non-scrollable layouts only when the content is known or controlled ahead of time, or if you must use a specific design.\n- Apply the [recommended top, bottom, and side margins](/design/ui/wear/guides/components/dialogs#adaptive-layouts) to the layout.\n- Define margins in percentage values in places where content might otherwise be clipped.\n- Arrange elements to make the best possible use of the space within the screen and maintain balance across different device sizes.\n\nScrolling app layouts\n---------------------\n\nFor pages that contain more information than can fit on a single screen, or\nwhich are required to support longer and more immersive journeys, use a scroll\nview.\n\n### Build for responsive scroll views\n\n- Apply the [recommended top, bottom, and side margins](/design/ui/wear/guides/components/dialogs#adaptive-layouts).\n- Define outer margins in percentage values to prevent clipping at the beginning and end of the scrollable container.\n- Apply margins in fixed DP values between UI elements.\n\n### How to build for adaptive scroll views using a screen size breakpoint\n\nScroll views that use responsive design practices usually adapt to a range of\nscreen sizes. However, in some special cases, you can use a breakpoint to\noverride dimensions and augment layouts which show additional options, improve\nglanceability, or make content fit better on screen. The following example\nshows how, on larger screens, the bottom two buttons are widened:\n\nFigma design kits\n-----------------\n\n[Visit the design kit downloads page](/design/ui/wear/guides/foundations/download) to explore design layouts with built-in\ncomponents, options, and recommendations to create different app and tile\ndesigns that follow best practices."]]
