[Android/Compose] Jetpack Compose의 디자인 시스템

Compose를 알면 알수록 얼른 마스터해서 완성된 앱을 보고 싶다는 생각이 들었어요.

 

그래서 화면 UI를 담당하는 함수에 대해 자세히 알고 싶어 졌습니다.

 

지금은 저번 포스트에서 부가적인 설명을 더해 Surface와 Modifier에 대해 알아보려고 합니다!

 

 

Surface

 

Surface Composable은 배경색이나 배경 테두리 등을 설정합니다. 하지만 Surface는 modifiers를 사용하여 동일한 작업을 수행할 수도 있어요. 그럼 Surface를 사용하지 않아도 되는 거 아닌가요? Surface를 왜 사용하는 걸까요?

 

 

 

 

Surface Composable은 코드를 더 쉽게 만들 뿐만 아니라 코드가 Material Surface을 사용함을 명시적으로 나타냅니다. 예를 들어 설명해볼게요.

 

 

 

Surface를 사용한 코드

Surface(
    color = MaterialTheme.colors.primarySurface,
    border = BorderStroke(1.dp, MaterialTheme.colors.secondary),
    shape = RoundedCornerShape(8.dp),
    elevation = 8.dp
) {
    Text(
        text = "example",
        modifier = Modifier.padding(8.dp)
    )
}

위 코드의 실행 화면

Surface를 사용하지 않아도 동일한 결과를 가져올 수 있어요.

 

 

 

val shape = RoundedCornerShape(8.dp)
val shadowElevationPx = with(LocalDensity.current) { 2.dp.toPx() }
val backgroundColor = MaterialTheme.colors.primarySurface

Text(
    text = "example",
    color = contentColorFor(backgroundColor),
    modifier = Modifier
        .graphicsLayer(shape = shape, shadowElevation = shadowElevationPx)
        .background(backgroundColor, shape)
        .border(1.dp, MaterialTheme.colors.secondary, shape)
        .padding(8.dp)
)

확연히 보이시나요? 코드의 품질이 아래보다 위가 더 좋다는 걸 알 수 있습니다.

이처럼 Surface를 사용하지 않으면 여러 단점이 존재해요.

 

 

• 코드가 무엇이 무엇을 설정하는지 알아보기 힘들어요.
• 여러 변수를 선언하고 세 가지 다른 변수에 값을 전달해야 해요.
• ContentColorFor를 사용하여 색깔을 설정하고 또 다시 .background()에 배경색을 넘겨줘야 해요. 여러 번 작업해야 해요.
• 폰트 크기를 픽셀 단위로 계산해야 해요.

 

 

등등 여러 문제점이 있습니다.

Surface 기능의 전체 목록은 설명서를 살펴보는 것이 좋으니 확인해보세요.

 

 

이래서 더욱더 간편한 Surface를 사용해 화면을 구성하는 거죠!!

 

 

Modifier

Compose의 수정자인 Modifier는 Composable를 꾸미거나 더욱 강조합니다.

Modifier를 통해 여러 작업을 수행할 수 있습니다.

 

 

• 컴포저블의 크기, 레이아웃, 동작 및 모양 변경
• 접근성 라벨과 같은 정보 추가
• 사용자 입력 처리
• 요소를 클릭 가능, 스크롤 가능, 드래그 가능 또는 확대/축소 가능하게 만드는 것과 같은 높은 수준의 상호작용 추가

 

 

Modifier는 Kotlin 표준 객체로 Modifer 클래스 중 하나를 호출해 사용해보겠습니다.

@Composable
private fun Greeting(name: String) {
  Column(modifier = Modifier
    .padding(24.dp)
    .fillMaxWidth()
  ) {
    Text(text = "Hello,")
    Text(text = name)
  }
}

위의 코드 실행 화면

다음과 같이 이러한 함수를 함께 연결해 구성이 가능합니다.

위의 코드에선 다양한 Modifier 함수가 사용된 것을 확인할 수 있습니다.

 

 

 

• padding: 요소 주위에 공간을 배치합니다.
• fillMaxWidth: 컴포저블이 상위 요소로부터 부여받은 최대 너비를 채우도록 합니다.

 

 

 

또한 Modifier는 순서의 영향을 받는데요,  이 또한 코드와 실행 화면으로 설명드리겠습니다.

@Composable
fun ArtistCard() {
    val padding = 16.dp
    Column(
        Modifier
            .clickable(onClick = onClick)
            .padding(padding)
            .fillMaxWidth()
    ) {
    }
}

위의 코드 실행 화면

위의 코드에서는 padding modifier가 clickable modifier 뒤에 적용되었기 때문에 주변 패딩을 포함하여 전체 영역을 클릭할 수 있습니다. modifier 순서가 뒤집히면 어떻게 될까요? 

 

 

 

 

@Composable
fun ArtistCard() {
    val padding = 16.dp
    Column(
        Modifier
            .padding(padding)
            .clickable(onClick = onClick)
            .fillMaxWidth()
    ) {
    }
}

위의 코드 실행 화면

 

(두 이미지를 비교하기 힘들다면 프로필 이미지를 자세히 봐주세요)

이처럼 modifier 순서가 뒤집히면 다음과 같이 padding으로 추가된 공간은 사용자 입력에 반응하지 않습니다. 순서에 제약을 받는 modifier 였습니다.

 

 

 

 

이 글을 마치며

오늘은 Compose 디자인 시스템에 대해 알아보았는데요, 좀 더 깊은 내용을 배우기 위해 이만 가보겠습니다. 더욱더 좋은 내용을 가지고 돌아오겠습니다!

 

 

 

 

 

출처

https://developer.android.com/jetpack/compose/modifiers

Compose 수정자  |  Jetpack Compose  |  Android Developers

https://developer.android.com/jetpack/compose/themes/custom?hl=ko 

Compose의 맞춤 디자인 시스템  |  Jetpack Compose  |  Android Developers