[Android] ConstraintLayout을 사용해야 하는 이유

 

최근 github의 안드로이드 프로젝트의 xml을 확인해 보면, 거의 대부분의 프로젝트가 레이아웃을 ConstraintLayout을 채택하고 있습니다.

뿐만 아니라, 안드로이드 스튜디오에서 새로운 프로젝트를 생성하면 기본 레이아웃으로 ConstraintLayout을 제공하고 있습니다.

 

기존에 사용되던 LinearLayout, RelativeLayout 등 여러 Layout이 있음에도 불구하고 ConstraintLayout을 사용하는 이유는 무엇일까요?

 

ConstraintLayout 

ConstraintLayout은 안드로이드에서 제공하는 레이아웃(Layout) 중 하나로, 뷰(View)를 배치할 때 제약 조건(Constraint)을 사용하여 제어하는 방식을 사용합니다.

기존의 LinearLayout, ReleativeLayout 등의 레이아웃은 뷰의 위치를 상대적으로 지정하는 방식이었습니다.

예를 들어, LinearLayout에서는 뷰를 Vertical, Horizontal 하게 배치할 수 있고, RelativeLayout은 뷰를 상대적으로 배치할 수 있었습니다.

 

하지만, ConstraintLayout은 뷰 간의 관계를 제약 조건(Constraint)으로 지정하여 뷰의 위치를 지정하는 방식입니다.

제약 조건은 뷰의 상하좌우와 같은 위치, 크기, 비율 등을 지정할 수 있으며, 이를 통해 다양한 레이아웃을 구성할 수 있습니다.

 

 

ConstraintLayout 장점

그럼 제약 조건을 통해 뷰를 배치하는 것이 어떠한 장점이 있을까요?

가장 큰 장점으로는 뷰의 깊이(depth)를 줄일 수 있기 때문입니다.

뷰의 깊이를 줄이면 아래와 같은 이점이 따라옵니다.

 

1. 성능 최적화

2. 가독성 증대

 

먼저, 성능 최적화에 대해 이야기해 보겠습니다.

 

우선, ConstraintLayout을 사용하면 1 depth만으로도 복잡한 화면을 구성할 수 있습니다.

뷰의 깊이는 뷰 계층 구조에서 한 뷰가 다른 뷰 위에 쌓이는 깊이를 의미합니다.

 

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="1st Level"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="2nd Level"/>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="3rd Level"/>

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="3rd Level"/>

        </LinearLayout>

    </LinearLayout>

</LinearLayout>

 

예를 들어, LinearLayout 안에 또 다른 LinearLayout이 있고, 그 안에 LinearLayout이 있다면, 이때 뷰 계층 구조에서는 3단계(depth)를 가집니다.

 

뷰의 깊이를 줄이는 것은 뷰 계층 구조를 단순화하고 레이아웃을 계산하는 데 필요한 시간과 자원을 줄일 수 있습니다.

Android 공식문서에 따르면 16ms당 1 프레임을 렌더링 해주어야 앱이 버벅거린다는 느낌을 받지 않습니다.

 

뷰의 깊이가 깊어질수록 UI 렌더링은 오래 걸립니다.

그 이유는 다음과 같습니다.

 

1. 레이아웃 계산 시간 증가

깊은 뷰 계층 구조를 가진 레이아웃을 렌더링 하면, 뷰 계층 구조를 계산하는 데 많은 시간이 걸립니다. 레이아웃 계산은 뷰 계층 구조의 크기와 복잡성에 따라 비례하여 늘어납니다.

 

2. 뷰 계층 구조 복잡성 증가

뷰의 깊이가 깊어질수록 뷰 계층 구조가 더 복잡해지며, 뷰 계층 구조 내에서 뷰들 간의 상호작용이 복잡해집니다. 이로 인해 UI 이벤트 처리 및 애니메이션 처리 시간이 오래 걸립니다.

 

3. 뷰 계층 구조 변경 시간 증가

뷰 계층에 동적으로 뷰를 추가, 제거 또는 변경하는 데에 오랜 시간이 걸립니다.

 

4. 메모리 사용 증가

깊은 뷰 계층 구조를 가진 레이아웃일수록 메모리를 많이 사용합니다.

안드로이드에서는 뷰 계층 구조에 대한 정보를 저장하기 위해 메모리를 사용하는데, 뷰 계층 구조가 깊어질수록 메모리 사용량도 늘어납니다. 특히, 안드로이드에서 크게 고려해야 하는 OOM(Out Of Memory)가 발생하지 않도록 최적화하는 데에 도움이 됩니다.

 

 

ConstraintLayout은 뷰의 깊이를 줄이면서도 레이아웃을 유연하게 구성할 수 있는 기능을 제공합니다.

ConstraintLayout은 제약 조건(constraint)을 사용하여 뷰를 배치하므로, 뷰 계층 구조가 깊어지지 않고도 복잡한 UI를 만들 수 있습니다.

 

 

 

그다음으로는, 가독성 측면입니다.

 

뷰의 깊이를 줄이면 코드의 가독성 또한 향상됩니다.

뷰 계층 구조가 깊다는 것은 그만큼 사람이 보기에 복잡한 구조라는 신호일 수 있습니다.

그렇기 때문에 코드가 복잡하고 유지보수하기 어려워지는 문제가 발생합니다.

 

ConstraintLayout은 뷰의 깊이를 줄일 수 있기 때문에 훨씬 간결하고 높은 가독성을 가질 수 있습니다.

 

 

 

 

github : https://github.com/tmdgh1592

tmdgh1592 - Overview