Jetpack Compose를 사용하여 아름다운 스크린샷 자동화하는 방법

Jetpack Compose를 사용하여 아름다운 스크린샷 자동화하는 방법

 

Android 앱을 위한 유연한 디자인 만들기

스크린샷은 앱에서 사용자의 첫인상입니다. 따라서 최선을 다하기 위해서는 가장 잘 설계된 스크린샷이 제시되어야 합니다.

그러나 그래픽으로 스크린샷을 디자인하는 것은 시간이 많이 걸립니다. 독특한 디자인을 생각해 낸 후에도 앱의 모든 변형에 적용하려면 여전히 적용해야 합니다. 휴대전화나 태블릿, 여러 현지화 등이 될 수 있습니다. 그리고 인터페이스를 업데이트하면 이 프로세스를 다시 실행하거나 적어도 영향을 받는 스크린샷에 대해 다시 실행해야 합니다.

자동화된 스크린샷은 이러한 문제의 대부분을 해결할 수 있었습니다. 우리가 원하는 모든 다양한 변형으로 앱의 스크린샷을 자동으로 찍을 수 있게 해주는 fastlane과 같은 도구가 있습니다.

이것의 단점은 스크린샷 촬영을 자동화하면 군중에서 눈에 띄는 데 도움이 되는 독창성이 사라진다는 것입니다.

이 기사에서는 UI 테스트와 Jetpack Compose를 사용하여 스크린샷을 디자인하고 fastlane을 사용하여 자동으로 캡처합니다.

class MyComposeTest {

@get:Rule
val composeTestRule = createAndroidComposeRule()

@Rule
@JvmField val localeTestRule = LocaleTestRule()

@Before
fun init() {
Screengrab
.setDefaultScreenshotStrategy(
UiAutomatorScreenshotStrategy()
)
}

@Test
fun simpleScreenshot() {
composeTestRule.setContent {
ScreenshotsTheme {
App()
}
}
composeTestRule.takeScreenshot("simpleScreenshot")
}
}

간단한 스크린샷을 찍는 방법은 다음과 같습니다. 테스트 자체 전에 fastlane 스크린샷 도구를 설정하기 위한 몇 가지 코드가 있습니다. 그러나 가장 중요한 부분은 내부에 있습니다. composeTestRule.setContent. 여기에서는 일반 앱을 디자인할 때 사용 가능한 모든 컴포저블을 사용할 수 있습니다. 예를 들어 전체 앱과 그림자에 패딩을 추가할 수 있습니다.

composeTestRule.setContent { 
ScreenshotsTheme { 
Box( 
modifier = Modifier 
.fillMaxSize() 
.padding(30.dp) 
.shadow(
elevation = 18.dp, 
shape = RoundedCornerShape(10.dp)) 
.clip(RoundedCornerShape(10.dp)) 
) { 
App() 
} 
} 
}

// 카드 스크린샷 이제부터는 상상력(또는 디자이너의 ;)에 의해서만 제한됩니다. 스크린샷을 설명하는 제목을 추가하고, 배경을 추가하고, 기능을 강조 표시하는 등의 작업을 할 수 있습니다.

composeTestRule.setContent { 
ScreenshotsTheme { 
Box( 
Modifier 
.fillMaxSize() 
.background(Color.White) 
) {

Box(
modifier = Modifier
.align(Alignment.TopEnd)
.offset(x = 10.dp, y = 30.dp)
.size(200.dp)
.background(
color = MaterialTheme.colors.secondary,
shape = CircleShape
)
)
Box(
modifier = Modifier
.align(Alignment.TopStart)
.offset(x = 40.dp, y = 130.dp)
.size(50.dp)
.background(
color = MaterialTheme.colors.primary,
shape = CircleShape
)
)
Column(
modifier = Modifier
.verticalScroll(
state = rememberScrollState(),
reverseScrolling = false)
.fillMaxSize()
) {

Text(
text = "Tasks app",
textAlign = TextAlign.Center,
fontSize = 48.sp,
fontWeight = FontWeight.Black,
modifier = Modifier
.fillMaxWidth()
.padding(vertical = 94.dp)
)

Box(
modifier = Modifier
.fillMaxWidth()
.height(640.dp)
.padding(horizontal = 30.dp)
.shadow(
elevation = 18.dp,
shape = RoundedCornerShape(10.dp))
.clip(RoundedCornerShape(10.dp))
) {
App()
}
}
}
}
}

이 예에서는 앱 위에 텍스트를 추가하고 아래쪽으로 오프셋했습니다. 또한 두 개의 상자를 사용하여 간단한 배경을 추가했습니다. 앱의 두 버전을 인스턴스화하여 여러 버전의 앱을 표시할 수도 있습니다.

Row(...) { 
Box( 
...
) { 
ScreenshotsTheme(darkTheme = false) { 
App() 
}

}

Box(
...
) {
ScreenshotsTheme(darkTheme = true) {
App()
}

}
}

여기에 앱의 어둡고 밝은 버전이 나란히 있습니다. 왜냐하면 App 구성 가능하므로 두 가지 버전을 나란히 쉽게 만들 수 있습니다. 이것은 단일 스크린샷에서 애플리케이션의 다양한 상태를 표시할 때 유용합니다.

이 샘플에서는 fastlane을 사용하여 UI 테스트를 자동으로 실행하고 스크린샷을 찍고 관리합니다. 앱이 현지화되어 있는 경우 여러 언어로 스크린샷을 찍어 자동으로 플레이 스토어에 업로드할 수 있습니다. 이 샘플의 경우 깔끔한 빌드를 만들고 스크린샷을 찍을 수 있는 간단한 레인이 있습니다.

lane :screenshots do 
gradle(task: "clean assembleDebug assembleAndroidTest") 
screengrab 
end

또한 apk의 위치와 스크린샷을 찍고 싶은 언어를 정의하는 파일이 있습니다.

locales ['en-US', 'de-DE'] 
clear_previous_screenshots true 
tests_apk_path 'app/build/outputs/apk/androidTest/debug/app-debug-androidTest.apk' 
app_apk_path 'app/build/outputs/apk/debug/app-debug.apk' 
test_instrumentation_runner 'androidx.test.runner.AndroidJUnitRunner'

따라서 동일한 디자인과 코드로 독일 스크린샷을 자동으로 생성할 수도 있습니다.

자동화를 설정하는 방법은 귀하와 귀하의 워크플로에 달려 있습니다. 그러나 이 기사의 요점은 Jetpack Compose를 사용하여 스크린샷 디자인에 유연하게 대처할 수 있는 방법을 보여주는 것이었습니다. 이를 통해 멋진 스크린샷을 만들 수 있기를 바랍니다. 샘플 프로젝트의 소스 코드는 여기에 있습니다.

읽어주셔서 감사합니다. 행운을 빕니다!