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

Card 구성요소에는 단일 주제에 관한 콘텐츠와 작업이 포함되어 있습니다.
분석
카드 구성요소에는 슬롯이 하나만 있습니다. 카드는 아이콘이나 이미지, 라벨을 포함할 수 있으며 맞춤설정할 수 있습니다.
기본적으로 카드는 둥근 모서리와 그라데이션 배경이 적용된 직사각형입니다. 원형 디스플레이는 화면의 상단과 하단을 최대 20%까지 자를 수 있으므로 카드의 최대 높이를 60%로 설정하여 화면에 전체가 표시되도록 합니다.
제목 카드
타이틀 카드를 사용하여 애플리케이션 내에서 메시지와 같은 정보를 표시하세요. 타이틀 카드에는 제목, 시간 필드(선택사항), 관련 콘텐츠(이미지 또는 텍스트)를 포함하는 3개의 슬롯 레이아웃이 있습니다.
앱 카드
앱 카드를 사용하여 여러 애플리케이션의 양방향 요소를 표시합니다. 앱 카드에는 애플리케이션 아이콘, 애플리케이션 이름, 활동이 발생한 시간, 일종의 제목, 관련 콘텐츠(이미지 또는 텍스트)가 포함된 슬롯 5개 레이아웃이 있습니다.
카드 그라데이션
카드 그라데이션
상단/왼쪽 + 왼쪽으로부터 68dp 패딩 = 100% 표면
하단/오른쪽 = 표면 0%
이미지 카드 오버레이
T/L의 상단/왼쪽 + 56dp 패딩 = 100% 표면
하단/오른쪽 + B/R의 24dp 패딩 = 0% 표면
(이미지 배경의 그라데이션 오버레이)
크기
카드 너비
카드는 컨테이너의 최대 너비로 기본 설정됩니다.
카드 높이
카드 높이는 유연합니다. 구성요소의 콘텐츠에 따라 결정됩니다.
원형 시계 화면에서는 화면 높이의 60% 보다 큰 카드가 잘립니다.
사용

적응형 레이아웃

제목 카드
대형 화면에서는 본문 문구를 위한 추가 텍스트 줄이 허용됩니다. 이미지를 더 많이 표시하려면 확대된 24dp 패딩을 하단에 추가합니다.

인라인 이미지가 포함된 TitleCard (본문 문구 슬롯 대체)
큰 화면에서는 이미지의 가로세로 비율이 변경되지 않으며 카드의 높이를 너무 크지 않도록 오른쪽에 패딩이 있습니다.

추가 맞춤설정이 포함된 카드
이미지 배경이 있는 카드
이 레이아웃을 사용하려면 맞춤설정이 필요합니다.
이미지 카드는 단일 주제와 관련된 콘텐츠를 배경 이미지와 함께 표시합니다. 이미지 카드에는 독립형 이미지도 표시될 수 있습니다.
위에 텍스트 없이 배경 이미지를 더 많이 표시하려면 하단 패딩을 24dp로 늘리는 것이 좋습니다.

이 페이지에 나와 있는 콘텐츠와 코드 샘플에는 콘텐츠 라이선스에서 설명하는 라이선스가 적용됩니다. 자바 및 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,["# Cards\n\nThe [Card](/reference/kotlin/androidx/wear/compose/material/package-summary#Card(kotlin.Function0,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.painter.Painter,androidx.compose.ui.graphics.Color,kotlin.Boolean,androidx.compose.foundation.layout.PaddingValues,androidx.compose.ui.graphics.Shape,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.semantics.Role,kotlin.Function1)) component contains content and actions about a single subject.\n\nAnatomy\n-------\n\nA card component only has a single slot. Cards can contain icons, images or labels, are customizable.\n\nBy default, cards are rectangular with rounded corners and a gradient background. Set the maximum height of your card to 60% to ensure that it's fully displayed on the screen because circular displays can clip up to 20% of the top and bottom of the screen.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Title Card**\n\nUse [Title cards](/reference/kotlin/androidx/wear/compose/material/package-summary#TitleCard(kotlin.Function0,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function1,androidx.compose.ui.graphics.painter.Painter,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function1)) to show information within an application, such as a message. Title cards have a three-slot layout which includes a title, an optional time field, and the relevant content, which is either an image or text. \n**App Card**\n\nUse [App cards](/reference/kotlin/androidx/wear/compose/material/package-summary#AppCard(kotlin.Function0,kotlin.Function1,kotlin.Function1,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function1,androidx.compose.ui.graphics.painter.Painter,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,androidx.compose.ui.graphics.Color,kotlin.Function1)) to show interactive elements from multiple applications. App cards have a five-slot layout that includes an application icon, the application name, the time that the activity occurred, a title of some sort and the relevant content, which is either an image or text.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nCards gradient\n--------------\n\n**Card Gradient**\n\nTop/Left + 68dp padding from Left = 100% Surface \n\nBottom/Right = 0% Surface\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\n**Image Card Overlay**\n\nTop/Left + 56 dp padding from T/L = 100% Surface \n\nBottom/Right + 24 dp padding from B/R = 0% Surface \n\n(Gradient overlays on a image background)\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nSizes\n-----\n\n**Card width**\n\nCards default to the maximum width of the container.\n\n\u003cbr /\u003e\n\n**Card height**\n\n\u003cbr /\u003e\n\nCard height is flexible. It is determined by the components' content.\n\nOn round watch faces, cards that are taller than 60% of the height of the screens are clipped.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nUsage\n-----\n\nAdaptive layouts\n----------------\n\n**TitleCard**\n\nOn larger screens we allow an extra line of text for body copy. And in order to display more of the image, add an enlarged 24 dp padding at the bottom.\n\n**TitleCard with in-line image (replacing the body copy slot)**\n\nOn larger screens, the image doesn't change its aspect ratio and has the padding on the right in order to not make the height of the card too big.\n\n### Cards with additional customization\n\n**Card with an image background** \nIn order to achieve this layout you will need customization. \n\n\nImage cards display content relating to a single topic with a background image. Image cards can also display standalone images. \n\n\nIt is recommended that the bottom padding is increased to 24 dp in order to display more of the background image without text over it.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e"]]