MotionLayout 입문은 ConstraintLayout 기본 개념을 이해한 뒤에 마주치는 대표적인 다음 단계입니다. 단순히 한 번 움직이는 애니메이션보다 상태가 바뀌면서 화면 구조 자체가 자연스럽게 전환되는 UI를 설계하고 싶을 때 MotionLayout이 필요해집니다.
이번 글에서는 MotionLayout을 어렵게 설명하지 않고, ConstraintLayout 다음 단계에서 상태 변화 UI를 설계하는 도구라는 관점으로 정리하겠습니다. 핵심은 API를 외우는 것이 아니라 왜 MotionLayout이 필요한지와 어떤 문제를 풀 때 꺼내야 하는지를 이해하는 것입니다.
먼저 한 줄로 정리
MotionLayout은 상태 전환을 설계하는 도구라고 이해하면 됩니다. 즉, 버튼을 단순히 이동시키는 기능 하나가 아니라 ‘이 화면이 A 상태에서 B 상태로 어떻게 변할지’를 구조적으로 다루는 도구에 가깝습니다. 입문 단계에서는 start state, end state, Transition, MotionScene 네 가지를 먼저 잡으면 됩니다.
MotionLayout이 왜 필요한가
안드로이드에서는 간단한 애니메이션을 주는 방법이 이미 많습니다. 그래서 처음에는 왜 MotionLayout까지 써야 하는지 궁금해집니다. 핵심은 MotionLayout이 단순 효과보다 상태 변화가 중요한 UI에 더 잘 맞는다는 점입니다. 카드가 펼쳐질 때 제목 위치, 버튼 위치, 이미지 크기, 여백이 함께 바뀌는 상황은 한 속성만 바꾸는 애니메이션보다 상태 전환으로 보는 편이 더 자연스럽습니다.
MotionLayout은 무엇을 바꾸는 도구인가
Android 공식 문서는 MotionLayout을 motion과 widget animation을 관리하는 도구로 설명합니다. 하지만 입문자 관점에서는 MotionLayout을 ConstraintLayout 기반 화면의 상태 전환을 관리하는 도구로 이해하는 편이 훨씬 쉽습니다. 기본적으로 ConstraintLayout 위에서 생각하되, 정적인 배치 하나만 보는 게 아니라 시작 상태, 끝 상태, 그 사이 전환 규칙을 함께 다루는 구조입니다.
MotionLayout 입문에서 가장 먼저 이해해야 할 4가지
start state
전환이 시작되기 전 상태입니다. start state는 지금 화면이 처음 그려질 때 각 뷰가 어디에 있고, 얼마나 크고, 어떤 제약을 가지는가를 정의한 상태라고 이해하면 쉽습니다.
end state
전환이 끝난 뒤 상태입니다. end state는 전환이 끝났을 때 각 뷰가 어떤 배치 규칙을 가져야 하는지를 담는 상태입니다. 즉, start state와 end state는 화면 모양 두 개가 아니라 배치 규칙 두 세트에 가깝습니다.
Transition
start state에서 end state로 어떻게 넘어갈지를 정의하는 규칙입니다. 단순히 상태 두 개가 있는 것에서 끝나는 게 아니라, 그 사이를 어떤 방식으로 연결할지 보는 개념입니다. duration, OnSwipe 같은 규칙도 여기에 들어갑니다.
MotionScene
MotionScene은 MotionLayout의 상태와 전환 규칙을 담는 별도 XML 설계도입니다. 쉽게 말해 레이아웃 XML이 무대라면 MotionScene은 장면 전환 대본입니다. 어떤 start state가 있고 어떤 end state가 있고 둘 사이를 어떻게 연결할지가 여기에 들어갑니다.
state는 정확히 무엇을 의미할까
state는 화면 전체의 모드라기보다 그 순간 각 뷰가 어떤 위치와 크기, 제약을 가져야 하는지에 대한 설계 묶음이라고 보면 쉽습니다. 예를 들어 큰 헤더 상태와 작은 헤더 상태는 단순히 모양만 다른 것이 아니라, 이미지 크기와 텍스트 위치와 여백 규칙이 함께 달라진 상태입니다.
MotionScene은 정확히 무엇을 담고 있을까
MotionScene은 보통 start state, end state, Transition, 그리고 필요하면 OnSwipe 같은 상호작용 규칙을 담습니다. 즉, ‘이 화면이 어떤 상태에서 어떤 상태로, 어떤 규칙으로 넘어갈지’를 담는 XML 파일입니다. MotionScene을 읽을 때는 시작 상태, 끝 상태, Transition, 사용자 입력 규칙 순서로 보는 편이 이해가 빠릅니다.
full 예제로 보면 MotionLayout은 어떻게 동작할까
아주 단순한 예제로 MotionLayout 구성을 보겠습니다. 예시 상황은 시작 상태에서 버튼이 왼쪽 아래에 있고, 끝 상태에서 버튼이 오른쪽 위로 이동하며, 사용자가 스와이프로 전환을 끌 수 있는 구조입니다.
1. 레이아웃 XML
<androidx.constraintlayout.motion.widget.MotionLayout
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"
app:layoutDescription="@xml/scene_button_move">
<Button
android:id="@+id/actionButton"
android:layout_width="72dp"
android:layout_height="72dp"
android:text="GO" />
</androidx.constraintlayout.motion.widget.MotionLayout>여기서 중요한 건 루트가 MotionLayout이라는 점과, app:layoutDescription으로 MotionScene XML을 연결한다는 점입니다. 즉, 레이아웃 XML은 뷰를 담는 그릇이고 실제 상태 전환 규칙은 다른 XML로 넘깁니다.
2. MotionScene XML
<MotionScene xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:motion="http://schemas.android.com/apk/res-auto">
<Transition
motion:constraintSetStart="@id/start"
motion:constraintSetEnd="@id/end"
motion:duration="600">
<OnSwipe
motion:touchAnchorId="@id/actionButton"
motion:touchAnchorSide="top"
motion:dragDirection="dragUp" />
</Transition>
<ConstraintSet android:id="@+id/start">
<Constraint
android:id="@id/actionButton"
android:layout_width="72dp"
android:layout_height="72dp"
android:layout_marginStart="16dp"
android:layout_marginBottom="16dp"
motion:layout_constraintStart_toStartOf="parent"
motion:layout_constraintBottom_toBottomOf="parent" />
</ConstraintSet>
<ConstraintSet android:id="@+id/end">
<Constraint
android:id="@id/actionButton"
android:layout_width="72dp"
android:layout_height="72dp"
android:layout_marginEnd="16dp"
android:layout_marginTop="16dp"
motion:layout_constraintEnd_toEndOf="parent"
motion:layout_constraintTop_toTopOf="parent" />
</ConstraintSet>
</MotionScene>3. 이 예제를 어떻게 읽어야 할까
이 예제를 한 줄로 해석하면 이렇습니다. start 상태에서는 버튼이 왼쪽 아래에 있고, end 상태에서는 버튼이 오른쪽 위에 있으며, Transition은 이 둘을 600ms 동안 연결하고, OnSwipe가 있으므로 사용자가 버튼을 위로 드래그하며 전환을 끌 수 있습니다. 즉, MotionLayout은 ‘상태 2개 + 연결 규칙 1개’라는 틀로 읽으면 훨씬 단순해집니다.
이 예제가 중요한 이유는 MotionLayout의 본질을 잘 보여주기 때문입니다. 중요한 건 버튼을 위로 움직이는 함수가 아니라, 버튼이 start 상태에서는 어떤 제약을 갖고 end 상태에서는 어떤 제약을 갖는지를 정의한다는 점입니다.
간단한 예시로 보면 어떻게 이해할 수 있을까
- 카드 펼침/접힘: 이미지 크기, 설명 길이, 버튼 위치가 함께 바뀌는 상태 전환
- 프로필 헤더 축소/확대: 헤더 높이, 이미지 크기, 텍스트 위치가 함께 변하는 전환
- 버튼 그룹 위치 전환: 아래쪽의 넓은 그룹이 위쪽의 모인 액션 그룹으로 바뀌는 전환
MotionLayout은 화려한 효과보다 상태가 분명한 UI에서 더 이해하기 쉽습니다. 즉, 복잡한 특수 효과보다 ‘이 화면이 어떤 상태에서 어떤 상태로 이동하는가’를 먼저 떠올리는 편이 좋습니다.
MotionScene은 왜 따로 분리할까
레이아웃 XML은 ‘지금 화면이 어떤 뷰들로 구성되는가’를 담고, MotionScene은 ‘이 화면이 어떻게 다른 상태로 전환되는가’를 담습니다. 즉, 구성과 전환을 분리해두는 구조입니다. 이렇게 나누면 전환 설계가 커져도 화면 구조 자체와 섞이지 않아서 읽기와 유지보수가 쉬워집니다.
OnSwipe와 progress는 왜 중요할까
공식 문서 예시에서도 Transition 안에 OnSwipe를 둘 수 있습니다. 즉, 사용자가 드래그하는 방향과 기준 뷰를 바탕으로 전환을 직접 끌어갈 수 있습니다. progress는 현재 전환이 얼마나 진행됐는지를 보는 개념입니다. 0이면 시작 상태, 1이면 끝 상태라고 생각하면 이해가 쉽습니다. 이 개념을 이해하면 왜 MotionLayout이 중간 상태를 자연스럽게 만드는 도구처럼 느껴지는지도 같이 보입니다.
ConstraintSet과 MotionLayout은 어떻게 다를까
짧게 구분하면 ConstraintSet은 코드에서 제약 상태를 바꾸는 도구이고, MotionLayout은 상태 전환 자체를 구조적으로 설계하는 도구입니다. 즉, ConstraintSet은 ‘현재 상태를 이렇게 바꾸자’에 더 가깝고, MotionLayout은 ‘A 상태에서 B 상태로 넘어갈 때 전환 전체를 어떻게 설계할까’에 더 가깝습니다. 둘은 경쟁 관계라기보다 문제 크기와 목적이 다릅니다.
언제 MotionLayout을 쓰면 좋을까
- 상태 전환이 UI 경험의 중요한 부분일 때
- 여러 뷰의 위치, 크기, 간격이 함께 바뀔 때
- 사용자 스와이프와 함께 전환이 자연스럽게 진행돼야 할 때
- 시작 상태와 끝 상태를 명확히 구분할 수 있을 때
반대로 단순 show/hide 정도면 충분한 경우나 아주 짧은 alpha 변화만 필요한 경우에는 과할 수 있습니다. MotionLayout은 강력하지만 전환 설계가 문제의 중심일 때 꺼내야 빛이 납니다.
자주 하는 실수
- 단순 효과에도 MotionLayout을 바로 쓰는 실수
- 상태보다 속성만 보려는 실수
- MotionScene 구조를 큰 그림 없이 만지는 실수
- 예시를 너무 화려한 것으로 시작하는 실수
처음부터 과한 인터랙션 예시를 보면 MotionLayout이 더 어렵게 느껴질 수 있습니다. 입문 단계에서는 카드 펼침/접힘처럼 상태가 분명한 예시부터 보는 편이 훨씬 좋습니다.
한 번에 정리
- MotionLayout은 상태 전환 설계 도구다
- start state, end state, Transition, MotionScene을 먼저 이해한다
- ConstraintSet은 상태 변경, MotionLayout은 전환 설계에 더 가깝다
- OnSwipe와 progress를 이해하면 왜 더 자연스럽게 느껴지는지 설명할 수 있다
- 상태 전환이 중요한 UI일수록 MotionLayout이 잘 맞는다
즉, MotionLayout 입문은 애니메이션 API를 외우는 것이 아니라 화면이 어떻게 상태를 바꾸며 움직일지를 설계하는 관점을 익히는 것입니다.
마무리
MotionLayout은 처음 보면 어렵게 느껴질 수 있습니다. 하지만 ConstraintLayout 다음 단계에서 상태 변화 UI를 어떻게 구조적으로 설계할지 이해하려는 관점으로 보면, 왜 이 도구가 필요한지도 훨씬 분명해집니다. 특히 카드 펼침/접힘, 프로필 헤더 축소/확대, 버튼 그룹 위치 전환처럼 상태 전환 자체가 중요한 UI를 자주 만든다면 MotionLayout은 한 번 제대로 익혀둘 가치가 충분합니다.
관련해서 ConstraintLayout 기본 개념부터 다시 보고 싶다면 안드로이드 ConstraintLayout 완전 정리, ConstraintLayout 디버깅 가이드, ConstraintSet 사용법 정리 글을 함께 읽어보면 좋습니다. 공식 기준은 Android Developers MotionLayout 가이드, MotionLayout API reference, ConstraintLayout 가이드를 참고하면 됩니다.
