Compose에서 동일한 Composable에 대해 여러 옵션의 Preview가 필요한 경우

Compose Preview에서 다양한 옵션 한번에 지원하기

Jetpack Compose는 빌드 없이 @Preview 기능을 통해 UI를 빠르게 확인할 수 있는 장점이 있습니다.

개발 중 컴포넌트의 다양한 옵션을 테스트하거나, 여러 화면 크기에서 어떻게 보이는지 확인하고 싶을 때가 있습니다.

---

기존 방식 (비효율적인 코드)

예를 들어, BannerView를 다양한 화면 크기에서 테스트하고 싶다면 다음과 같이 각각의 @Preview를 지정해야 했습니다.

@Preview(widthDp = 180)

@Composable

private fun BannerPreview180() {

BannerView(onClick = {})

}

@Preview(widthDp = 240)

@Composable

private fun BannerPreview240() {

BannerView(onClick = {})

}

@Preview(widthDp = 360)

@Composable

private fun BannerPreview360() {

BannerView(onClick = {})

}

@Preview(widthDp = 520)

@Composable

private fun BannerPreview520() {

BannerView(onClick = {})

}

문제점

• 같은 BannerView에 대해 중복 코드가 많음 🛑
• 유지보수가 어렵고, 새로운 크기를 추가할 때 모든 프리뷰를 복사해서 추가해야 함 ⚠️

---

최적화된 방법: @MultiPreview 활용

Compose에서는 @Preview 애노테이션을 여러 개 한 번에 정의할 수 있는 @MultiPreview 기능을 제공합니다.

이를 활용하면 코드가 다음과 같이 깔끔하게 최적화됩니다.

@Preview(widthDp = 180, name = "180dp")

@Preview(widthDp = 240, name = "240dp")

@Preview(widthDp = 360, name = "360dp")

@Preview(widthDp = 520, name = "520dp")

annotation class BannerPreviews

@BannerPreviews

@Composable

private fun BannerPreview() {

BannerView(onClick = {})

}