카드 디자인 시스템
컬렉션을 사용해 정리하기
내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
카드 기본 요소를 이해합니다. 카드 템플릿, 레이아웃, 구성요소를 사용하여 앱의 고유한 카드를 디자인하고 만드세요.
기본 요소
비율 패딩
상단, 하단, 측면 여백은 모두 고정 여백 금액이 아닌 비율을 사용하여 비례적으로 조정됩니다.
디자인 영역
각 유형의 카드 템플릿에는 기본 콘텐츠 영역 내에 자체 규칙이 있습니다. 자세한 내용은 레이아웃 안내를 참고하세요.
하단 소형 칩
카드에서 보조 작업을 사용 설정할 때 중요합니다. 페이지 하단 6.3% 위에 일관되게 배치
하단 소형 칩
버튼에는 짧지만 특정 작업이나 대상과 관련된 단어를 사용합니다. 클릭 유도 문구 텍스트의 번역은 글자 수 제한을 준수해야 합니다. 기본 또는 대체 값으로 'More'를 사용할 수 있습니다. 사용할 수 있습니다.
배치
- 여백: 하단으로부터 2.1%
- 내부 패딩: 위아래 8dp
버튼 사양
측면 내부 패딩/여백
권장 글자 수 제한 < 225dp
- 최대 행 수: 1개
- 최대 글자 수 제한: 8자
- 권장 글자 수 제한: 6자
- 생략: 아니요
권장 문자 한도 > 225dp
- 최대 줄: 1개
- 최대 글자 수 제한: 9자
- 권장 글자 수 제한: 7자
- 생략: 아니요
색상
브랜드 테마 적용
다양한 브랜드 색상 중에서 선택할 수 있습니다. 앱의 디자인과 분위기에 맞게 맞춤설정하고 변경할 수도 있습니다.
Material 테마 도구 및 안내를 사용하여 기본 색상을 소스 색상으로 사용하여 적절한 색상 대비 수준을 갖는 색상을 생성합니다. 생성된 팔레트를 사용하여 Figma 팔레트의 기본, 기본 변형, 표면, 표면 색상을 대체하고 타일 테마를 올바르게 지정합니다. 다른 모든 색상은 맞춤설정이 불가능하여 타일 간에 일관성을 유지할 수 없습니다.
기타 Material 테마 빌드 도구:
컬러 적용
배경색은 항상 검은색으로 설정합니다.
배경을 풀 블리드 이미지나 블록 색상으로 설정하지 마세요.
서체
Roboto는 Wear OS에서 사용되는 기본 글꼴입니다. 기본 글꼴 크기 및 가장 작은 글꼴 크기로 본문 2를 사용하는 것이 좋으며, Display 2는 카드에 사용할 수 있는 가장 큰 서체 스타일입니다.
기본 라벨
기본 라벨 텍스트는 항상 상단 가장자리에서 16.64% 떨어져 있고 내부 패딩은 6.3%입니다. 색상과 글꼴도 전체적으로 일관되게 유지됩니다.
내부 패딩
상단 여백: 16.64%
측면 여백: 6.3%
색상
배경의 변형 (회색 300)
유형
Tiles3P (Roboto) / 버튼 - 15S 굵게
글꼴, 두께, 크기 지정에 관한 자세한 내용은 서체를 참고하세요.
구성요소
앱의 카드를 빌드하는 데 사용할 수 있는 구성요소는 몇 가지가 있습니다. 이러한 구성요소는 Material Design에 부합합니다.
옵션: 버튼 또는 전환 버튼
크기: 표준, XS, S, L
유형: 채움, 색조 채움, 이미지
최대 7개 옵션 나열
텍스트 버튼
옵션: 버튼 또는 전환 버튼
크기: 표준, XS, S, L
유형: 채움 및 색조 채움
최대 7개 옵션 나열
표준 칩
옵션: 아이콘, 보조 라벨, 텍스트 정렬
최대 2개의 옵션을 나열하세요.
제목 칩 (기본 채우기만 해당)
가운데 정렬된 텍스트
눈에 잘 띄는 하나의 CTA를 만듭니다.
컴팩트 칩
유형: 채워짐 및 색조가 채워짐
옵션: 아이콘 또는 아이콘 없음
하단 버튼 슬롯에 사용합니다.
진행 상태 표시기
유형: 맞춤설정 가능한 획 너비
(기본 크기: 8dp 및 5dp)
옵션: 하단 또는 전체의 간격
진행 상황과 작업 완료를 나타냅니다.
Figma 디자인 키트
Wear OS에서 카드를 다운로드하여 내장된 구성요소, 옵션, 권장사항이 포함된 카드 디자인 레이아웃을 사용하여 ProtoLayout 템플릿의 가이드라인을 따르면서 필요에 맞는 다양한 레이아웃을 만들 수 있습니다.
이 페이지에 나와 있는 콘텐츠와 코드 샘플에는 콘텐츠 라이선스에서 설명하는 라이선스가 적용됩니다. 자바 및 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,["# Tiles design system\n\nUnderstand tile fundamental elements. Use tile templates, layouts, and components to design and build unique tiles for your apps.\n\n**Fundamental elements**\n------------------------\n\n**Percentage padding**\n\nTop, bottom, and side margins all use percentages, rather than fixed margin amounts, to achieve proportional scaling. \n\n**Design areas**\n\nEach type of tile template has its own rules within the primary content area. Refer to the [layout guidance](/design/ui/wear/guides/surfaces/tiles-layouts) for more information. \n\n**Bottom compact chip**\n\nImportant for enabling secondary actions on the tile. Consistently placed 6.3% above the bottom.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nBottom compact chip\n-------------------\n\nWithin the button, use a word that's short but specific to a particular action or destination. The translation of this call-to-action text must accommodate the character count limits. As a default or fallback value, you can use \"More\" as the call-to-action text. \n\n**Placement**\n\n- Margin: 2.1% from the bottom\n- Internal padding: 8 dp above and below \n\n**Button spec**\n\n- Internal padding: 12 dp on both sides \n\n**Side internal padding/margins**\n\n- 16.64%\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Recommended character limit \\\u003c 225 dp**\n\n- Max lines: 1\n- Max character limit: 8\n- Recommended character limit: 6\n- Truncation: No \n**Recommended c** **haracter limits \\\u003e 225 dp**\n\n- Max lines: 1\n- Max character limit: 9\n- Recommended character limit: 7\n- Truncation: No\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nColor\n-----\n\n### **Apply your brand's theme**\n\nThere are several brand colors to choose from. They can also be customized and changed to fit your app's look and feel. \n\nUse the [Material theme tools and guidance](https://m3.material.io/styles/color/system/overview) to generate colors that have adequate color contrast levels, using your primary color as a source color Use the generated palette to replace the primary, primary-variant, on-primary, surface, and on-surface colors in your palette in Figma to theme your tile correctly. All other colors are not customizable to create consistency across tiles.\n\n**Other Material theme building tools:**\n\n- [Material Theme Builder Web](https://material-foundation.github.io/material-theme-builder/)\n- [Material Theme Builder Figma plugin](https://www.figma.com/community/plugin/1034969338659738588/material-theme-builder)\n\n### **Color application**\n\nAlways set the background color to black. \ncheck_circle\n\n### Do\n\nDon't set the background as a full bleed image or block color. \ncancel\n\n### Don't\n\nTypography\n----------\n\nRoboto is the primary font used in Wear OS. Body 2 is recommended as the default and the smallest font size, while Display 2 is the largest type style that's available for tiles.\n\n### **Primary label**\n\nPrimary label text is always 16.64% from the top edge and have an internal padding of 6.3%. Color and font also remain consistent throughout. \n\n**Internal padding**\n\nTop margins: 16.64% \nSide margin: 6.3% \n\n**Color**\n\nOn-Background-Variant (Gray 300) \n\n**Type**\n\nTiles3P (Roboto) / Button - 15S Bold\n\nFor more information about font, weight, and sizing, see [Typography](/design/ui/wear/guides/styles/typography).\n\n**Components**\n--------------\n\nThere are several components available to build your app's tiles. These components are aligned with Material Design.\n\n### Icon button\n\nOptions: Button or Toggle Button \nSizes: Standard, XS, S, L \nTypes: Filled, tonal-filled, and image\n\nList up to 7 options.\n\n### Text button\n\nOptions: Button or Toggle Button \nSizes: Standard, XS, S, L \nTypes: Filled and tonal-filled\n\nList up to 7 options.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n### Standard chip\n\nOptions: Icon, secondary label, and text alignment\n\nList up to 2 options.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n### Title chip (primary-fill only)\n\nCenter-aligned text \n\n\nCreate a single, prominent CTA.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n### Compact chip\n\nTypes: Filled and tonal-filled \nOptions: Icon or no icon \n\nUse in the bottom button slot.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n### Progress indicator\n\nTypes: Customizable stroke width \n(Default sizes: 8 dp and 5 dp) \nOptions: Gap at the bottom or full\n\nIndicate progress and task completion.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nFigma design kit\n----------------\n\n[Download the Tiles on Wear OS design kit](/design/ui/wear/guides/foundations/download#tiles-design-kit) to start using the tile design layouts with built-in components, options, and recommendations to create different layouts that suit your needs, while following the guidelines in the ProtoLayout templates."]]
