카드 권장사항
컬렉션을 사용해 정리하기
내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
검은색 바탕에 디자인
Wear OS에서는 다음과 같은 두 가지 중요한 이유로 검은색 배경에서 디자인하는 것이 중요합니다.
- 배터리 효율: 화면에 표시되는 각 픽셀은 전력을 소모합니다. 검은색 배경을 사용하면 활성 픽셀 수를 최소화하여 배터리 수명을 연장할 수 있습니다.
- 원활한 미적 요소: 검은색 배경은 시계 베젤을 시각적으로 최소화하여 기기 가장자리까지 연속된 표면의 환상을 만들어 줍니다. 이 공간 내에 UI 요소를 포함하면 이 효과가 더욱 향상됩니다.
check_circle
좋은 예
배경 색상을 항상 검은색으로 설정합니다.
cancel
나쁜 예
배경을 풀 블리드 이미지 또는 블록 색상으로 설정하지 마세요.
필요한 요소만 포함
선택한 경우 (예: ProtoLayout Material3 PrimaryLayout 사용) Wear OS는 영구 앱 아이콘을 자동으로 표시하며, 이 아이콘은 사용자가 카드 캐러셀을 스크롤할 때 자동으로 표시됩니다. 앱 아이콘은 카드의 일부로 설계 및 추가해서는 안 됩니다.
카드에 동적 테마 설정이 적용된 경우 제공된 앱 아이콘이 흑백인지 확인합니다. 브랜드의 앱 아이콘을 만드는 방법에 관한 Android 제품 아이콘 가이드라인을 확인하세요.
check_circle
좋은 예
Wear OS는 사용자가 카드 캐러셀을 스크롤할 때 앱 아이콘을 자동으로 표시할 수 있습니다. 카드 디자인에 앱 아이콘을 배치할 필요는 없습니다.
cancel
나쁜 예
카드 디자인에 앱 아이콘을 추가하지 마세요. 시스템 수준에서도 표시되는 경우 두 번 표시되거나 겹쳐질 수 있습니다.
최소 탭 타겟을 보장하기 위해 앱 제목 숨기기
작은 화면에서 양방향 요소를 위한 충분한 공간을 확보하기 위해 카드가 두 행 (및 하단 섹션)을 사용하는 경우 앱 제목이 숨겨질 수 있습니다. 이렇게 하면 행의 높이가 충분히 확보됩니다 (최소 48dp). 제목은 더 큰 화면 (225dp 이상)에서 다시 표시될 수 있습니다.
check_circle
좋은 예
작은 화면에서는 두 행의 최소 높이와 탭 타겟이 48dp가 되도록 앱 제목이 숨겨집니다.
cancel
나쁜 예
소형 화면에서 앱 제목을 숨기지 않고 행이 두 개인 경우 구성요소의 높이가 접근성 표준을 준수하지 않으며 최소 탭 타겟 크기보다 작습니다.
이 예시에서 버튼의 공간이 48dp보다 작으므로 잘립니다.
강조 표시할 기본 사용 사례를 하나 선택합니다.
사용자가 앱 열기, 활동 시작, 자세히 알아보기 등 각 카드로 할 수 있는 작업을 알 수 있도록 하려면 레이아웃에 상호작용 요소를 하나 이상 포함해야 합니다.
check_circle
좋은 예
이 카드는 몇 가지 옵션을 제공한 후 더 많은 옵션을 볼 수 있는 기능을 제공하므로 효과적입니다.
cancel
나쁜 예
이 솔루션은 제공되는 옵션이 너무 많아 결정 장애가 발생하기 때문에 사용자에게 도움이 되지 않습니다.
컨테이너를 1개 이상 포함
앱의 각 카드에는 하나 이상의 컨테이너 요소가 포함되어야 하며 완전히 탭할 수 있어야 하며 앱 내 해당 화면으로 연결되어야 합니다. 카드의 정보는 컨테이너 내에 포함되어 있든 별도로 표시되든 연결된 콘텐츠 또는 사용 가능한 작업을 명확하게 전달해야 합니다.
버튼을 사용하는 경우 표준 디자인 규칙을 준수하고 기능을 명확하게 표시해야 합니다.
check_circle
좋은 예
이 카드는 사용자가 제공된 각 기능에 대해 명확한 탭 어포던스를 통해 작업을 수행할 수 있으므로 효과적입니다.
cancel
나쁜 예
사용자가 콘텐츠를 탭하여 추가 정보를 볼 수 있다는 점이 명확하지 않아 이 카드는 효과가 떨어집니다.
작업을 즉시 이해할 수 있도록 만들기
시계의 환경은 의미를 전달할 수 있는 충분한 공간이 없으므로 가장 효과적인 카드에는 쉽게 예측 가능한 양방향 구성요소가 있습니다.
check_circle
좋은 예
효과적인 카드는 사용 가능한 공간을 최대한 활용하여 각 작업의 결과를 명확하게 전달합니다.
cancel
나쁜 예
이 카드의 작업이 명확하지 않습니다. 앨범 아트가 있는 컨테이너가 사용자를 어디로 연결하며 '재생' 버튼과 다른가요?
시각적으로 작업 우선순위 지정
사용자가 카드에서 가장 중요한 작업을 이해할 수 있도록 상호작용 컨테이너의 시각적 우선순위를 지정해야 합니다.
- 기본 작업 버튼에는 기본 색상을 사용하세요.
- 보조 작업에 보조/3차 색상 사용
check_circle
좋은 예
이 카드는 색조 채우기 스타일을 사용하여 채워진 (기본 및 보조 색상 역할 포함) 카드와 투명한 3차 하단 버튼 역할을 조합하여 사용합니다.
cancel
나쁜 예
이 카드에는 채워진 스타일 버튼이 너무 많이 사용되어 있으며 모두 기본 색상 역할을 사용합니다.
더 적은 수의 컨테이너로 단순화
카드는 특정 작업을 트리거하기 위해 두 개 이상의 양방향 구성요소를 사용하지 말고 대신 전체 레이아웃을 더 적은 수의 컨테이너로 단순화해야 합니다.
check_circle
좋은 예
이 카드는 여러 개의 컨테이너를 사용하며 각 컨테이너는 타이머 시작 또는 새 타이머 만들기와 같은 특정 작업을 실행하는 버튼 역할을 합니다.
cancel
나쁜 예
여기서는 모든 정보가 동일한 위치로 이동하므로 4개의 컨테이너를 사용할 필요가 없습니다.
기능적 목적으로 컨테이너 사용
사용자가 카드 내 각 구성요소의 작동을 예상할 수 있도록 하려면 장식용 또는 구조적 목적으로 컨테이너를 사용하지 않는 것이 좋습니다. 아무것도 실행하지 않는 탭을 방지할 수 있기 때문입니다.
check_circle
좋은 예
이 솔루션은 카드의 유일한 작업이 생성 흐름이고 다른 모든 콘텐츠가 검은색 배경에 플로팅되어 있기 때문에 작동합니다.
cancel
나쁜 예
이 카드는 사용자가 모든 컨테이너와 상호작용할 수 있는 것처럼 보이므로 더 혼란스럽습니다.
한눈에 확인할 수 있는 그래프 및 차트 표시
한눈에 볼 수 있는 디자인은 Wear OS 디자인의 핵심입니다. 화면 시간 (약 7초)이 제한적이므로 한눈에 쉽게 이해할 수 있는 명확한 형식으로 필수 정보를 우선적으로 제공하세요.
시계는 휴대전화 환경을 보완하여 주요 세부정보에 빠르게 액세스할 수 있도록 지원합니다.
check_circle
좋은 예
숫자 또는 통계 정보를 한눈에 빠르게 파악할 수 있도록 표시하고 필요한 경우 사용자가 탭하여 앱에서 자세한 정보를 볼 수 있도록 합니다.
cancel
나쁜 예
카드에 자세한 숫자 또는 통계 정보 표시
이 페이지에 나와 있는 콘텐츠와 코드 샘플에는 콘텐츠 라이선스에서 설명하는 라이선스가 적용됩니다. 자바 및 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,["# Best practices for tiles\n\nDesign on black\n---------------\n\nDesigning on a black background is crucial for Wear OS for two key reasons:\n\n- **Battery efficiency:** Each pixel illuminated on the screen consumes power. By using a black background, you minimize the number of active pixels, extending battery life.\n- **Seamless aesthetics:** A black background helps to visually minimize the watch bezel, creating the illusion of a continuous surface that extends to the edge of the device. Containing UI elements within this space further enhances this effect.\n\n\u003cbr /\u003e\n\ncheck_circle\n\n### Do this\n\nAlways set the background color to black. \ncancel\n\n### Don't do this\n\nDon't set the background as a full bleed image or block color.\n\nInclude only necessary elements\n-------------------------------\n\nWhen opt-ed in (for example, using ProtoLayout Material3 PrimaryLayout), Wear OS will automatically display the permanent app icon, which will automatically display as the user scrolls through the Tile carousel. The app icon should not be designed and added as part of the Tile.\n\nEnsure the app icon provided is monochrome if you are having dynamic theming on your tile. Check Android product icon guidelines about how to create the app icon for your brand. \ncheck_circle\n\n### Do this\n\nWear OS may display the app icon automatically as the user scrolls through the Tile carousel. There is no need to put the app icon in the Tile design. \ncancel\n\n### Don't do this\n\nDo not add the app icon in the Tile design as it may appear twice/overlapped if also displayed at the system level.\n\nHide app titles to ensure minimum tap targets\n---------------------------------------------\n\nTo ensure enough space for interactive elements on smaller screens, the app title can be hidden when a Tile uses two rows (and a bottom section). This ensures the rows are tall enough (at least 48dp). The title can reappear on larger screens (225dp+). \ncheck_circle\n\n### Do this\n\nOn small screens, the app title is hidden to ensure the two rows have a minimum height and tap target of 48dp. \ncancel\n\n### Don't do this\n\nIf you do not hide the app title on small screen, and have two rows, the height of the components will not adhere to our accessibility standards, and be less than the minimum tap target size. In this example the space for the buttons is smaller than 48dp, so it clips.\n\nChoose a single primary use-case to highlight\n---------------------------------------------\n\nTo make sure users know what to do with each Tile - whether it's opening an app, starting an activity, or learning more - we need them to include at least one interactive element in their layout. \ncheck_circle\n\n### Do this\n\nThis specific Tile is effective because it provides a small collection of options, and then the ability to see more \ncancel\n\n### Don't do this\n\nThis solution is less helpful to user because it introduces decision paralysis because of too many provided options\n\nInclude (at least) one container\n--------------------------------\n\nEach tile in the app must contain at least one container element and be fully tappable, linking to a corresponding screen within the app. The Tile's information, whether contained within the container or presented separately, must clearly communicate the linked content or available action.\n\nIf buttons are used, they should adhere to standard design conventions and provide a clear indication of their function. \ncheck_circle\n\n### Do this\n\nThis Tile works well because the user can take action on each of the provided capabilities since they have clear tap affordances \ncancel\n\n### Don't do this\n\nThis Tile is less effective because it doesn't make it clear that the user can tap on the content to see additional information\n\nMake actions instantly understandable\n-------------------------------------\n\nExperiences on the watch don't have the luxury of having ample space to communicate their meaning, so the most effective Tiles have easily predictable interactive components. \ncheck_circle\n\n### Do this\n\nA successful TIle takes full advantage the space available to clearly communicate the outcome of each action \ncancel\n\n### Don't do this\n\nThe actions in this Tile are unclear---where does the container with the album art take the user, and is that different from the \"Play\" button?\n\nVisually prioritize actions\n---------------------------\n\nTo help users understand the most important action on a Tile, interactive containers should be visually prioritized.\n\n- Use primary colors on primary action buttons.\n- Use secondary/tertiary colors on secondary actions\n\ncheck_circle\n\n### Do this\n\nThis Tile uses a combination of filled (with primary and secondary color roles) with a clear tertiary bottom button role, using the tonal-fill style \ncancel\n\n### Don't do this\n\nThis Tile contains too many uses of filled style buttons, additionally all using the primary color role\n\nSimplify into fewer containers\n------------------------------\n\nTiles should seek to refrain from using more than one interactive component to trigger a specific action, and instead attempt to simplify the overall layout into fewer containers. \ncheck_circle\n\n### Do this\n\nThis tile is using several containers and each container acts as a button to perform a specific action like starting a timer or creating a new one \ncancel\n\n### Don't do this\n\nThe use of 4 containers here is unnecessary since all the information will navigate to the same location\n\nUse containers for functional purposes\n--------------------------------------\n\nTo ensure users can anticipate what each component within a Tile will do, we don't recommend using containers for decorative or structural purposes to avoid taps that don't do anything. \ncheck_circle\n\n### Do this\n\nThis solution works because the sole action of the Tile is a creation flow, and all other content is floating on the black background \ncancel\n\n### Don't do this\n\nThis Tile is more confusing because it seems like the user would be able to interact with all the containers\n\nShow glanceable representations of graphs and charts\n----------------------------------------------------\n\nGlanceability is key for Wear OS design. With limited screen time (around 7 seconds), prioritize essential information in a clear format, that's easy to understand at a glance.\n\nRemember, the watch complements the phone experience, providing quick access to key details. \ncheck_circle\n\n### Do this\n\nShow quick, glanceable representations of numerical or statistical information and allow the user to tap to see more in an app if needed \ncancel\n\n### Don't do this\n\nShow detailed numerical or statistical information on the Tile"]]
