(Compose) Modifier

Jetpack Compose를 사용하다 보면 거의 모든 Composable 함수 끝에 modifier = Modifier... 코드가 따라붙는 것을 보셨을 겁니다. 처음에는 그저 "UI를 꾸미는 건가?" 싶지만, 사실 Modifier는 그 이상의 역할을 하는 Compose의 핵심 요소입니다.
이번 내용에서 Modifier가 무엇인지, 어떻게 작동하는지, 그리고 왜 중요한지에 대해 깊이 파고들어 보겠습니다.

 

Modifier란?

Modifier는 이름 그대로 Composable을 수정(Modify)하는 역할을 합니다. Composable의 크기, 모양, 여백, 배경색을 바꾸는 것부터 클릭, 스크롤, 드래그와 같은 사용자 입력을 처리하는 것까지, UI 요소에 대한 거의 모든 '부가 속성'을 설정하는 데 사용됩니다.

Modifier가 없다면 Text는 그저 글자일 뿐이고, Box는 투명한 사각형일 뿐입니다. Modifier를 통해 비로소 우리가 원하는 모습과 동작을 갖춘 UI 요소로 거듭나는 것이죠.

Modifier 사용하기

Modifier의 가장 큰 특징은 여러 수정을 체인(Chain) 형태로 이어 붙일 수 있다는 점입니다. 마치 레고 블록을 조립하듯, 필요한 기능들을 순서대로 연결하면 됩니다.

@Composable
fun ModifierExample() {
    Text(
        text = "Hello, Modifier!",
        modifier = Modifier
            .padding(16.dp) // 1. 바깥쪽에 16dp 여백을 준다.
            .background(Color.Yellow) // 2. 노란색 배경을 칠한다.
            .fillMaxWidth() // 3. 너비를 꽉 채운다.
            .clickable { /* 텍스트 클릭 시 동작 */ } // 4. 클릭 이벤트를 추가한다.
    )
}

이처럼 Modifier는 점(.)을 이용해 코드를 읽는 것만으로 어떤 속성들이 적용되었는지 명확하게 파악할 수 있습니다.

Modifier에서 순서가 중요합니다.

Modifier를 사용할 때 반드시 기억해야 할 단 하나의 규칙이 있다면, 바로 순서가 중요하다는 것입니다. 각 Modifier는 자신보다 먼저 선언된 Modifier가 적용된 결과물 위에 적용됩니다.

아래 두 코드의 결과를 비교해 볼까요?

Box(
    modifier = Modifier
        .padding(20.dp) // 1. 먼저 20dp의 여백(투명)을 만든다.
        .background(Color.Blue) // 2. 그 결과물에 파란 배경을 칠한다.
        .size(100.dp)
)

Box(
    modifier = Modifier
        .background(Color.Blue) // 1. 먼저 파란 배경을 칠한다.
        .padding(20.dp) // 2. 그 결과물 안쪽에 20dp 여백을 만든다.
        .size(100.dp)
)

이처럼 순서를 어떻게 정하느냐에 따라 UI가 완전히 달라질 수 있으므로 항상 적용 순서를 염두에 두어야 합니다.

그 외 Modifier 함수들

Modifier는 정말 종류가 많지만, 개발할 때 특히 자주 사용하는 것들은 다음과 같습니다.

• 크기와 관련된 Modifier
  • size(size: Dp): 가로, 세로 크기를 지정합니다.
  • fillMaxWidth(), fillMaxHeight(), fillMaxSize(): 가능한 최대 너비, 높이, 또는 전체 크기를 채웁니다.
  • width(width: Dp), height(height: Dp): 너비나 높이만 개별적으로 지정합니다.
• 여백과 관련된 Modifier
  • padding(all: Dp): 모든 방향에 동일한 내부 여백을 줍니다.
  • padding(horizontal: Dp, vertical: Dp): 수평, 수직 여백을 개별적으로 줍니다.
• 모양과 관련된 Modifier
  • background(color: Color): 배경색을 칠합니다.
  • border(width: Dp, color: Color): 테두리를 그립니다.
  • clip(shape: Shape): Composable을 특정 모양(예: CircleShape)으로 잘라냅니다.
• 동작과 관련된 Modifier
  • clickable { ... }: 클릭 이벤트를 처리합니다.
  • scrollable(...): 스크롤 동작을 가능하게 합니다.
• 레이아웃 가중치 (Row/Column 전용)
  • weight(weight: Float): Row나 Column 내에서 차지하는 공간의 비율을 설정합니다.

마치며

Modifier는 Jetpack Compose에서 레이아웃을 만들고, 스타일을 입히고, 생명을 불어넣는 가장 기본적이면서도 강력한 도구입니다. 처음에는 순서가 헷갈릴 수 있지만, 몇 번만 직접 코드를 작성하며 순서를 바꿔보면 그 원리를 금방 터득할 수 있을 겁니다.

 

---

블로그 글에 대해 궁금한 점이 있다면 아래 카카오톡 오픈채팅에 들어와서 질문해주세요

Android Kotlin Compose QnA