다양한 화면 크기에 맞게 개발

앱은 모든 크기의 Wear OS 기기에서 원활하게 작동해야 하며, 사용 가능한 경우 추가 공간을 활용하고 작은 화면에서도 보기 좋게 표시되어야 합니다. 이 가이드에서는 이러한 사용자 환경을 구현하기 위한 권장사항을 제공합니다.

적응형 레이아웃의 디자인 원칙에 관한 자세한 내용은 디자인 안내를 참고하세요.

Material 3을 사용하여 반응형 레이아웃 빌드

레이아웃에는 백분율 기반 여백이 있어야 합니다. Wear Compose Material 3에서 ScreenScaffold는 백분율 기반 패딩을 자동으로 계산하고 콘텐츠 람다에 contentPadding를 제공합니다. 이 contentPadding 매개변수를 TransformingLazyColumn에 전달합니다.

다음 코드 스니펫은 TransformingLazyColumn 구성요소를 사용하여 다양한 Wear OS 화면 크기에서 보기 좋은 콘텐츠를 만듭니다.

val columnState = rememberTransformingLazyColumnState()
val transformationSpec = rememberTransformationSpec()
ScreenScaffold(
    scrollState = columnState
) { contentPadding ->
    TransformingLazyColumn(
        state = columnState,
        contentPadding = contentPadding
    ) {
        item {
            ListHeader(
                modifier = Modifier
                    .fillMaxWidth()
                    .transformedHeight(this, transformationSpec)
                    .minimumVerticalContentPadding(ListHeaderDefaults.minimumTopListContentPadding),
                transformation = SurfaceTransformation(transformationSpec)
            ) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(
                modifier = Modifier
                    .fillMaxWidth()
                    .transformedHeight(this, transformationSpec)
                    .minimumVerticalContentPadding(ButtonDefaults.minimumVerticalListContentPadding),
                transformation = SurfaceTransformation(transformationSpec),
                onClick = { /* ... */ },
                icon = {
                    Icon(
                        imageVector = Icons.Default.Build,
                        contentDescription = "build",
                    )
                },
            ) {
                Text(
                    text = "Build",
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis,
                )
            }
        }
    }
}

이 예시에서는 ScreenScaffold 및 AppScaffold도 보여줍니다. 이러한 구성요소는 앱과 개별 화면(탐색 경로) 간에 조정되어 올바른 스크롤 동작과 TimeText 위치 지정을 보장합니다.

상단 및 하단 패딩의 경우 다음 사항도 참고하세요.

  • Modifier.minimumVerticalContentPadding(예: ListHeaderDefaults.minimumTopListContentPadding 및 ButtonDefaults.minimumVerticalListContentPadding)를 사용하여 이러한 항목이 목록 가장자리에 표시될 때 TransformingLazyColumn에서 최소한 권장되는 상단 및 하단 패딩을 사용하도록 합니다.
  • 목록의 첫 번째 항목에 일반 Text 컴포저블이 아닌 ListHeader를 사용합니다.

전체 사양은 Figma 디자인 키트에서 확인할 수 있습니다. 자세한 내용과 예시는 다음을 참조하세요.

  • Horologist 라이브러리 - Wear OS용으로 최적화되고 차별화된 앱을 빌드하는 데 도움이 되는 도우미를 제공합니다.
  • ComposeStarter 샘플: 이 가이드에 설명된 원칙을 보여주는 예입니다.
  • JetCaster 샘플 - Horologist 라이브러리를 사용하여 다양한 화면 크기에서 작동하는 앱을 빌드하는 더 복잡한 예입니다.

앱에서 스크롤 레이아웃 사용

화면을 구현할 때 기본 선택사항으로 이 페이지 앞부분에 표시된 스크롤 레이아웃을 사용합니다. 이렇게 하면 사용자가 디스플레이 환경설정이나 Wear OS 기기 화면 크기와 관계없이 앱의 구성요소에 도달할 수 있습니다.

다양한 기기 크기 및 글꼴 크기 조정의 효과

다양한 기기 크기 및 글꼴 크기 조절의 영향

대화상자

대화상자는 스크롤 가능해야 합니다. 단, 스크롤할 수 없어야 하는 타당한 이유가 있는 경우는 예외입니다. AlertDialog 구성요소는 반응형이며 콘텐츠가 표시 영역 높이를 초과하는 경우 기본적으로 스크롤할 수 있습니다.

맞춤 화면에는 스크롤되지 않는 레이아웃이 필요할 수 있음

일부 화면은 스크롤되지 않는 레이아웃에 적합할 수 있습니다. 미디어 앱의 기본 플레이어 화면과 피트니스 앱의 운동 화면이 그 예입니다.

이러한 경우 Figma 디자인 키트에 제공된 표준 가이드를 살펴보고 올바른 여백을 사용하여 화면 크기에 반응하는 디자인을 구현하세요.

중단점을 통해 차별화된 환경 제공

디스플레이가 커지면 추가 콘텐츠와 기능을 도입할 수 있습니다. 이러한 차별화된 환경을 구현하려면 화면 크기 중단점을 사용하여 화면 크기가 225dp를 초과할 때 다른 레이아웃을 표시합니다.

const val LARGE_DISPLAY_BREAKPOINT = 225

@Composable
fun isLargeDisplay() =
    LocalConfiguration.current.screenWidthDp >= LARGE_DISPLAY_BREAKPOINT

// ...
// ... use in your Composables:
    if (isLargeDisplay()) {
        // Show additional content.
    } else {
        // Show content only for smaller displays.
    }
    // ...

디자인 가이드에서 이러한 기회를 더 많이 보여줍니다.

미리보기를 사용하여 화면 및 글꼴 크기 조합 테스트

Compose 미리보기를 사용하면 다양한 Wear OS 화면 크기에 맞게 개발할 수 있습니다. 기기 및 글꼴 크기 조절 미리보기 정의를 모두 사용하여 다음을 확인합니다.

  • 크기 조정의 극단적인 경우(예: 가장 큰 글꼴과 가장 작은 화면이 페어링된 경우) 화면이 어떻게 표시되는지 확인합니다.
  • 중단점에서 차별화된 환경이 작동하는 방식

앱의 모든 화면에 WearPreviewDevices 및 WearPreviewFontScales를 사용하여 미리보기를 구현해야 합니다. Wear OS 미리보기, 맞춤 하드웨어 사양, 스크롤된 목록 미리보기 구성에 관한 자세한 내용은 Wear OS용 Compose에서 UI 미리보기를 참고하세요.

@WearPreviewDevices
@WearPreviewFontScales
@Composable
fun ComposeListPreview() {
    ComposeList()
}

스크린샷 테스트

스크린샷 테스트를 사용하면 미리보기 테스트 외에도 다양한 기존 하드웨어 크기를 대상으로 테스트할 수 있습니다. 이는 이러한 기기를 즉시 사용할 수 없고 다른 화면 크기에서는 문제가 나타나지 않을 수 있는 경우에 특히 유용합니다.

스크린샷 테스트는 코드베이스의 특정 위치에서 회귀를 식별하는 데도 도움이 됩니다.

샘플에서는 스크린샷 테스트에 Roborazzi를 사용합니다.

  1. Roborazzi를 사용하도록 프로젝트 및 앱 build.gradle 파일을 구성합니다.
  2. 앱의 각 화면에 대한 스크린샷 테스트를 만듭니다. 예를 들어 다음 코드는 목록이 포함된 화면의 스크린샷 테스트를 보여줍니다.
@RunWith(ParameterizedRobolectricTestRunner::class)
class ComposeListScreenTest(
    override val device: WearDevice
) : WearScreenshotTest() {
    override val tolerance = 0.02f

    @Test
    fun myScreenTest() =
        runTest {
            AppScaffold {
                ComposeList()
            }
        }

    companion object {
        @JvmStatic
        @ParameterizedRobolectricTestRunner.Parameters
        fun devices() = WearDevice.entries
    }
}

중요 참고사항:

  • WearDevice.entries에는 가장 인기 있는 Wear OS 기기의 정의가 포함되어 있으므로 대표적인 화면 크기 범위에서 테스트가 실행됩니다.

골든 이미지 생성

화면의 이미지를 생성하려면 터미널에서 다음 명령어를 실행합니다.

./gradlew recordRoborazziDebug

이미지 확인

기존 이미지에 대한 변경사항을 확인하려면 터미널에서 다음 명령어를 실행합니다.

./gradlew verifyRoborazziDebug

스크린샷 테스트의 전체 예는 ComposeStarter 샘플을 참고하세요.