ConstraintLayout — 소개, 제약 조건 및 플랫 계층 구조

ConstraintLayout이란?

ConstraintLayout은 AndroidX ConstraintLayout 라이브러리의 ViewGroup으로, 선언적 제약 조건을 통해 유연하고 성능이 뛰어난 인터페이스를 만들기 위해 설계되었습니다. 요소를 한 줄로 배열하는 LinearLayout이나 인접 요소를 기준으로 배치하는 RelativeLayout과 달리, ConstraintLayout은 각 요소를 다른 요소와 부모에 대해 동시에 고정할 수 있습니다.

이 라이브러리는 Google I/O 2016에서 복잡한 화면의 렌더링을 가속화하는 솔루션으로 발표되었습니다. ConstraintLayout이 해결하는 주요 문제는 레이아웃 중첩입니다. 중첩된 각 ViewGroup은 최소 2개의 measure 패스와 1개의 layout 패스를 추가합니다. 4단계 중첩이 있는 화면은 8개의 measure 패스를 수행하지만, 동일한 기능의 ConstraintLayout은 2개의 패스만 수행합니다. Google(Android Performance Blog, 2017)에 따르면, 세 개의 중첩된 LinearLayout을 하나의 ConstraintLayout으로 교체하면 onMeasure 시간이 40% 감소합니다.

현재 버전 ConstraintLayout 2.1.4는 Android 2.3+(API 9)에서 AndroidX를 통해 안정적으로 작동합니다. 버전 2.0에서는 원형 배치, Flow(자동 요소 줄바꿈) 및 MotionLayout 지원이 도입되었습니다. ConstraintLayout은 최신 Android 개발을 이해하는 데 필수적입니다 — Jetpack Compose의 수정자 기본 개념, Android Studio 기본 템플릿 및 Material Design 3에서 사용됩니다.

플랫 계층 구조의 작동 방식

ConstraintLayout의 플랫 계층 구조는 모든 하위 뷰가 동일한 중첩 수준에 있음을 의미합니다. 요소 A를 LinearLayout에 배치하고 LinearLayout을 RelativeLayout에 배치하는 대신, 모든 요소가 부모 ConstraintLayout에 직접 또는 속성을 통해 서로 바인딩됩니다. 이는 메모리 소비 감소(각 ViewGroup은 Java 힙의 객체), 더 빠른 레이아웃 패스(재귀 호출 감소), 화면 크기 변경 시 더 예측 가능한 동작을 제공합니다.

제약 조건 시스템: 바인딩, 바이어스 및 여백

제약 조건(constraint)은 한 뷰의 가장자리(또는 중심)와 다른 뷰 또는 부모의 가장자리 사이의 연결입니다. 각 뷰는 최대 8개의 제약 조건(left, top, right, bottom, start, end, baseline, center)을 가질 수 있습니다. 배치에는 최소 두 개의 수직 제약 조건(예: top + left)으로 충분합니다.

속성 형식: app:layout_constraint[Source]_to[Target]Of="[id]" — 여기서 Source는 바인딩된 가장자리(Left, Right, Top, Bottom, Start, End, Baseline)이고 Target은 대상 가장자리입니다. 예: app:layout_constraintTop_toBottomOf="@+id/header"는 "현재 요소의 위쪽 가장자리가 header 요소의 아래쪽 가장자리에 바인딩됨"을 의미합니다. 부모에 바인딩하려면 id parent를 사용합니다.

바이어스(Bias)는 반대 제약 조건(left + right 또는 top + bottom)이 있을 때 작동하는 매개변수입니다. 값은 0에서 1까지입니다: 0 — 왼쪽/위쪽 가장자리에 밀착, 0.5 — 중앙, 1 — 오른쪽/아래쪽 가장자리. 속성: layout_constraintHorizontal_bias(0.0~1.0) 및 layout_constraintVertical_bias. 여백은 표준 android:layout_margin*으로 설정되지만, 제약 조건과 여백은 독립적으로 작동합니다. 여백은 제약 조건으로부터의 오프셋이지 인접 뷰로부터의 오프셋이 아닙니다.

백분율 배치

ConstraintLayout 1.1+부터 layout_constraintWidth_percent 및 layout_constraintHeight_percent를 통한 백분율 기반 크기 조정이 지원되었습니다. 값 0.3은 부모 너비/높이의 30%를 의미합니다. 바이어스와 결합하면 프로그래밍 없이 적응형 레이아웃을 만들 수 있습니다.

체인 및 가이드라인

체인(Chain)은 양방향 제약 조건(A가 B에 바인딩되고 B가 A에 바인딩됨)으로 연결된 둘 이상의 뷰 그룹입니다. 체인은 모드에 따라 요소 간 공간을 자동으로 분배합니다: spread(여백을 고려하여 균등하게), spread_inside(균등하게, 외부 요소는 가장자리 여백 없음), packed(공통 바이어스로 요소가 함께 압축됨). 모드는 app:layout_constraintHorizontal_chainStyle 또는 layout_constraintVertical_chainStyle 속성을 통해 설정됩니다.

가이드라인(Guideline)은 런타임에 보이지 않는 보조 뷰로, 바인딩을 위한 선을 정의합니다. 가이드라인은 수평 또는 수직일 수 있으며, dp, 백분율(app:layout_constraintGuide_percent) 또는 가장자리로부터의 오프셋(app:layout_constraintGuide_begin/end)으로 배치됩니다. 가이드라인은 적응형 레이아웃에 필수적입니다 — 예를 들어, 기기 크기에 관계없이 화면을 두 개의 동일한 반으로 나누는 경우에 사용됩니다.

Google I/O 2017에 따르면, spread_inside을 사용한 체인은 weight를 사용한 중첩 LinearLayout보다 15~20% 더 효율적입니다. 이는 weight 계산에 필요한 이중 measure 패스를 피하기 때문입니다.

배리어, 그룹 및 가상 도우미

배리어(Barrier)는 요소 그룹의 크기에 따라 동적으로 위치를 조정하는 가상 뷰입니다. 고정 위치의 가이드라인과 달리, 배리어는 그룹에서 가장 넓은 요소에 의해 "밀려집니다". 예를 들어, 길이를 알 수 없는 제목과 설명이 있는 경우, 가장 넓은 텍스트의 오른쪽 가장자리에 바인딩된 배리어를 사용하면 그 바로 뒤에 아이콘을 배치할 수 있습니다. 속성: app:barrierDirection(left, right, top, bottom, start, end) 및 app:constraint_referenced_ids(쉼표로 구분된 ID 목록).

Group은 여러 뷰의 가시성을 동시에 관리하는 가상 컨테이너입니다. 각 요소에 대해 개별적으로 setVisibility를 호출하는 대신 하나의 Group의 가시성을 변경하면 됩니다. Group은 배치에 영향을 미치지 않으며 — 가시성에만 영향을 미칩니다. Flow는 "흐르는" 레이아웃을 만들기 위한 가상 도우미입니다. 공간이 부족하면 단락의 텍스트처럼 요소가 자동으로 새 행/열로 줄바꿈됩니다. Flow는 wrapMode: none, chain 및 aligned를 지원합니다.

이러한 도구(Barrier, Group, Flow, Guideline)는 가상 도우미라고 불리는데, 이는 기존적인 의미의 뷰가 아니기 때문입니다 — 계층 구조에서 공간을 차지하지 않으며 포커스나 터치 이벤트에 참여하지 않습니다. 그 목적은 중첩된 컨테이너를 추가하지 않고 복잡한 레이아웃의 유지 관리를 단순화하는 것입니다.

예제: XML 및 Kotlin

예제 1: 제약 조건이 있는 기본 양식

이메일 필드, 비밀번호 필드 및 버튼으로 구성된 간단한 로그인 양식입니다. 버튼을 제외한 모든 요소는 부모에 바인딩되어 있으며, 버튼은 비밀번호 필드 아래에 있습니다. 플랫 계층 구조가 사용됩니다 — 세 요소 모두 동일한 수준에 있습니다.

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/email_input"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="32dp"
        android:layout_marginHorizontal="16dp" />

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/password_input"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/email_input"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="16dp"
        android:layout_marginHorizontal="16dp" />

    <Button
        android:id="@+id/login_button"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toBottomOf="@+id/password_input"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="24dp"
        android:layout_marginHorizontal="16dp"
        android:text="로그인" />

</androidx.constraintlayout.widget.ConstraintLayout>

모든 요소의 너비는 0dp(match_constraint)로, 수평 여백을 고려하여 start 제약 조건에서 end 제약 조건까지 늘어납니다. 이는 여백이 있는 match_parent와 동일하지만 중첩이 없습니다.

예제 2: spread_inside을 사용한 체인

가장자리 여백과 함께 수평으로 균등하게 분포된 세 개의 버튼입니다. spread_inside 체인은 외부 버튼을 가장자리에 배치하고 중간 버튼을 그 사이에 중앙에 배치합니다.

<Button
    android:id="@+id/btn_left"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toLeftOf="@+id/btn_center"
    android:text="왼쪽" />

<Button
    android:id="@+id/btn_center"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toRightOf="@+id/btn_left"
    app:layout_constraintRight_toLeftOf="@+id/btn_right"
    android:text="중앙" />

<Button
    android:id="@+id/btn_right"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toRightOf="@+id/btn_center"
    app:layout_constraintRight_toRightOf="parent"
    android:text="오른쪽" />

요소에 양방향 제약 조건이 있으면 체인이 자동으로 생성됩니다. spread_inside 모드는 app:layout_constraintHorizontal_chainStyle="spread_inside"를 통해 체인의 모든 요소에 설정됩니다. 이렇게 하면 weightSum 및 layout_weight가 있는 LinearLayout이 필요하지 않습니다.

예제 3: 대칭 레이아웃을 위한 가이드라인

50%의 수직 가이드라인을 사용하여 두 개의 동일한 열을 만듭니다. 왼쪽 요소는 왼쪽 부모에 바인딩되고 오른쪽 가장자리는 가이드라인에 바인딩됩니다. 오른쪽 요소는 왼쪽 가장자리가 가이드라인에, 오른쪽 가장자리가 부모에 바인딩됩니다.

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/gl_midpoint"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.5" />

<TextView
    android:id="@+id/left_card"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toLeftOf="@+id/gl_midpoint"
    android:layout_margin="8dp"
    android:background="@color/card_background" />

<TextView
    android:id="@+id/right_card"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toRightOf="@+id/gl_midpoint"
    app:layout_constraintRight_toRightOf="parent"
    android:layout_margin="8dp"
    android:background="@color/card_background" />

백분율이 0.5인 가이드라인은 화면 너비에 자동으로 적응합니다. 태블릿과 휴대전화 모두에서 열 비율은 50/50으로 유지됩니다. 왼쪽/오른쪽 명명법의 경우 RTL 호환성을 위해 start/end 속성을 사용하세요.

비교: ConstraintLayout vs LinearLayout vs RelativeLayout

Android 개발을 위한 세 가지 주요 ViewGroup 비교표: ConstraintLayout, LinearLayout 및 RelativeLayout. 기준: 유연성, 성능, 코드 복잡성 및 사용 사례.

Android Vitals(Google, 2025)에 따르면, ConstraintLayout을 기본 컨테이너로 사용하는 앱은 중첩된 LinearLayout을 사용하는 앱에 비해 복잡한 화면 렌더링 시 평균 18% 더 적은 정크 프레임을 보여줍니다. IT Sectr에서는 2018년에 모든 XML 레이아웃의 표준으로 ConstraintLayout으로 전환했습니다 — 이로 인해 평균 화면 계층 구조 깊이가 4.2에서 1.8 수준으로 줄었고 새 양식 개발이 25% 빨라졌습니다.