이 페이지는 Cloud Translation API를 통해 번역되었습니다.

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

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

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

Horologist를 사용하여 반응형 레이아웃 빌드

레이아웃에는 백분율 기반 여백이 있어야 합니다. Compose는 기본적으로 절댓값으로 작동하므로 다음과 같은 기능이 있는 Horologist 라이브러리의 구성요소를 사용하세요.

가로 여백은 기기 화면 크기의 비율에 따라 올바르게 설정됩니다.
상단 및 하단 간격이 올바르게 설정되었습니다. 권장되는 상단 및 하단 간격은 사용 중인 구성요소에 따라 달라질 수 있으므로 이 경우 특별한 문제가 발생합니다. 예를 들어 Chip는 목록에 사용될 때 Text 구성요소와 다른 간격을 가져야 합니다.
TimeText 여백이 올바르게 설정되었습니다.

다음 코드 스니펫은 Horologist의 ScalingLazyColumn 레이아웃을 사용하여 다양한 Wear OS 화면 크기에서 멋지게 표시되는 콘텐츠를 만듭니다.

import com.google.android.horologist.compose.layout.ScalingLazyColumn

val columnState = rememberResponsiveColumnState(
    contentPadding = ScalingLazyColumnDefaults.padding(
        first = ItemType.Text,
        last = ItemType.SingleButton
    )
)

ScreenScaffold(scrollState = columnState) {
    ScalingLazyColumn(
        columnState = columnState,
        modifier = Modifier.fillMaxSize()
    ) {
        item {
            ResponsiveListHeader(contentPadding = firstItemPadding()) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(...)
        }
    }
}

이 예에서는 ScreenScaffold]3 및 AppScaffold도 보여줍니다. 앱과 개별 화면 간의 좌표(탐색 경로)는 올바른 스크롤 동작과 TimeText 배치를 보장합니다.

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

올바른 패딩을 결정하기 위한 첫 번째와 마지막 ItemType의 사양입니다.
목록의 첫 번째 항목에는 ResponsiveListHeader를 사용합니다. Text 헤더에 패딩이 있어서는 안 되기 때문입니다.

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

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

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

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

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

대화상자

대화상자는 스크롤이 가능해야 합니다. 별다른 이유가 없는 한 스크롤이 가능해야 합니다. Horologist에서 제공하는 ResponsiveDialog 구성요소는 다음을 추가합니다.

기본적으로 스크롤.
백분율 기반 여백을 수정했습니다.
버튼이 공간이 허용하는 범위 내에서 너비를 조정하여 더 많은 탭 타겟을 제공할 수 있습니다.

기본적으로 스크롤을 제공하고 사용 가능한 공간에 맞게 조정되는 버튼을 제공하는 반응형 대화상자

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

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

이러한 경우 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를 사용하여 미리보기를 구현해야 합니다.

@WearPreviewDevices
@WearPreviewFontScales
@Composable
fun ListScreenPreview() {
    ListScreen()
}

스크린샷 테스트

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

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

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

Roborazzi를 사용하도록 프로젝트 및 앱 build.gradle 파일을 구성합니다.
앱에 있는 각 화면의 스크린샷 테스트를 만듭니다. 예를 들어 ComposeStarter 샘플에서는 GreetingScreenTest와 같이 GreetingScreen 테스트가 구현됩니다.

@RunWith(ParameterizedRobolectricTestRunner::class)
class GreetingScreenTest(override val device: WearDevice) : WearScreenshotTest() {
    override val tolerance = 0.02f

    @Test
    fun greetingScreenTest() = runTest {
        AppScaffold(
            timeText = { ResponsiveTimeText(timeSource = FixedTimeSource) }
        ) {
            GreetingScreen(greetingName = "screenshot", 
        }
    }

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

몇 가지 중요한 참고사항은 다음과 같습니다.

FixedTimeSource를 사용하면 TimeText가 변경되지 않아 의도치 않게 테스트가 실패하는 스크린샷을 생성할 수 있습니다.
WearDevice.entries에는 대표적인 화면 크기 범위에서 테스트가 실행되도록 가장 많이 사용되는 Wear OS 기기의 정의가 포함되어 있습니다.

골든 이미지 생성

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

./gradlew recordRoborazziDebug

이미지 확인

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

./gradlew verifyRoborazziDebug

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