Compose에서 ConstraintLayout이 사라진 이유

안드로이드 개발자라면 누구나 ConstraintLayout을 사용해봤을 거다. 그런데 Compose에서는 ConstraintLayout 을 지양한다.(사용은 가능함) 위의 사진은 Google이 ConstraintLayout을 공식적으로 지원하지 않거나, 새로운 안정화 계획이 없으면 라이브러리 자체를 deprecated 처리하겠다고 한다. 이렇게 ConstraintLayout이 사라지는 이유는 무엇일까? 또 그럼에도 ConstraintLayout 을 사용하고 싶은 순간이 있었을때 어떻게 변경했는가를 작성해보겠다.

패러다임의 차이?

내가 생각하는 근본적인 이유는 패러다임이라고 생각한다. ConstraintLayout은 XML 기반의 명령형(Imperative) 접근방식에서 탄생했다. "A 위젯이 B 위젯의 오른쪽에 붙어야 한다"는 식의 상대적 위치 관계를 명시적으로 정의하는 방식이다.

반면 Compose는 선언형(Declarative) UI 패러다임이다. "이런 UI를 그려달라"고 선언하면, Compose가 그것을 어떻게 렌더링할지 알아서 결정한다. 여기서 차이가 발생한다. 또한 Compose는 변경된 부분만 리컴포지션(재구성)하는 구조이다. ConstraintLayout을 사용한다면 서로의 제약이 걸려있어 모든 제약을 매번 계산해야 하여 성능 측면에서도 좋지 않다.

---

그럼에도 사용해야 하고 싶었던 순간?

나는 개발 도중 ConstraintLayout 을 사용하고 싶은 순간이 있었다.
예시는 다음과 같다. 다음은 내 비밀번호 저장 앱 을 개발하던 발생하였다. 아래 사진을 보면 빨간 박스의 콘텐츠 영역은 중앙에 고정되어 위치하고 초록 박스의 텍스트가 여러줄이 되었을때 아래로 밀리는것이 아닌 위로 밀려올라가야 한다.

 

기본적으로 Column을 사용하면 위에서부터 순서대로 요소들이 쌓인다. 그런데 특정 요구사항이 생긴다.

• 상단 텍스트: 2줄이 되면 상단 여백으로 밀려올라가야 함
• 중앙 콘텐츠: 키패드, 생체인식 등이 화면 중앙에 항상 고정
• 하단: 추가 공간이 필요할 때만 확장

기존 방식으로는 상단 텍스트가 늘어나면 모든 컴포넌트가 아래로 밀려내려가므로 이 요구사항을 충족할 수 없다. 아마 두줄이 될때 전체 레이아웃이 떨어져서 덜컹거리는 듯한 느낌이 날 것이다.

---

해결책: weight(1f) 활용

핵심 아이디어: 상단 텍스트를 Box에 감싸고 Box에 weight(1f)를 적용한다. 이렇게 하면 남은 공간을 모두 차지하게 만들어 상단 텍스트가 2줄이 되면 weight 계산이 줄어들고, 상단 텍스트가 우선적으로 공간을 차지한다. 중앙 콘텐츠영역은 그대로 중간에 있게 된다. 또 하위에  Spacer를 넣어 상하를 중앙으로 만든다.

Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(horizontal = 16.dp),
    ) {
    	// ========== 상단 텍스트 영역 ==========
        Box(
            modifier = Modifier.weight(1f),  //핵심!!!
            contentAlignment = Alignment.BottomCenter
        ) {
            Text()
        }

        // ========== 중앙 콘텐츠 영역 ==========
        Column {
            PasswordIndicator()
            Spacer()
            PasswordKeypad()
            Spacer()
            Image()
            SpeechBubble()
        }
        Spacer(modifier = Modifier.weight(0.7f)) //핵심!!
    }