ConstraintLayout baseline 정렬은 높이가 다른 TextView를 박스 위쪽이 아니라 글자 기준선으로 맞추는 방법입니다. 두 텍스트의 크기나 fontWeight가 달라도 읽는 눈에는 글자 아래 기준선이 맞아야 더 자연스럽게 보이는 경우가 많습니다.
핵심은 baseline 정렬은 View의 top이 아니라 TextView 안의 글자 기준선을 맞추는 제약이라는 점입니다.
ConstraintLayout baseline 정렬은 무엇을 맞추는가
TextView를 나란히 놓을 때 가장 먼저 떠올리는 방법은 top 정렬입니다. 작은 label과 큰 value를 같은 top에 붙이면 XML은 단순해 보입니다. 하지만 실제 화면에서는 글자의 높이가 달라서 두 텍스트가 어긋나 보일 수 있습니다.
baseline은 글자가 줄 위에 앉는 기준선입니다. Android Developers 문서도 baseline alignment를 한 View의 text baseline을 다른 View의 text baseline에 맞추는 정렬로 설명합니다.
top 정렬과 baseline 정렬의 차이
top 정렬은 View 박스의 위쪽 경계를 맞춥니다. baseline 정렬은 글자 기준선을 맞춥니다. 그래서 작은 label과 큰 value를 같이 보여주는 UI에서는 baseline 정렬이 더 자연스럽습니다.
top 정렬이 나쁜 것은 아닙니다. 아이콘, 이미지, 카드 영역처럼 박스 자체가 중요한 UI에서는 top, center, bottom 정렬이 더 명확합니다. 반대로 TextView끼리 나란히 읽히는 행에서는 baseline을 먼저 검토하는 편이 좋습니다.
- 박스 경계를 맞춰야 한다: top, bottom, center 계열 정렬
- 텍스트가 한 줄처럼 읽혀야 한다: baseline 정렬
- 아이콘과 텍스트를 맞춘다: 이미지 크기와 텍스트 높이를 함께 확인
- label과 value를 맞춘다: baseline 정렬을 우선 검토
layout_constraintBaseline_toBaselineOf 사용법
ConstraintLayout에서 baseline 정렬은 layout_constraintBaseline_toBaselineOf 속성으로 연결합니다. 아래 예시는 price TextView의 baseline을 label TextView의 baseline에 맞춥니다.
<TextView
android:id="@+id/labelText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Price"
android:textSize="14sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/priceText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="12dp"
android:text="$49"
android:textSize="28sp"
android:textStyle="bold"
app:layout_constraintStart_toEndOf="@id/labelText"
app:layout_constraintBaseline_toBaselineOf="@id/labelText" />
이때 가로 위치 제약은 별도로 필요합니다. baseline은 세로 기준선만 맞추는 제약이므로, start/end 같은 가로 제약까지 대신 해결해주지는 않습니다.
baseline 기준 View를 먼저 정하기
baseline 정렬에서는 기준이 되는 TextView를 먼저 정하는 것이 중요합니다. 보통은 label처럼 위치가 안정적인 View를 parent나 guideline에 먼저 붙이고, 값이나 단위 텍스트를 그 label의 baseline에 맞춥니다.
반대로 큰 value를 기준으로 삼아도 됩니다. 중요한 것은 어떤 View의 baseline을 기준선으로 볼지 한 번 정하고, 나머지 TextView를 그 기준선에 연결하는 것입니다. 이렇게 해야 XML을 읽을 때 “이 행의 세로 기준은 label이다” 또는 “이 행의 세로 기준은 value다”처럼 판단할 수 있습니다.
- label을 기준으로 잡는다: 설정 화면, 폼 행처럼 label 위치가 고정된 경우
- value를 기준으로 잡는다: 가격, 수치, 단위처럼 큰 숫자가 시각 중심인 경우
- 기준 View는 parent, guideline, sibling 중 하나로 위치가 먼저 정해져 있어야 한다
- 나머지 TextView는 그 기준 View의 baseline에 연결한다
label/value UI에서 baseline이 필요한 이유
설정 화면, 프로필 화면, 가격 표시 UI에서는 작은 label과 큰 value가 한 줄에 놓이는 경우가 많습니다. 이때 top을 맞추면 큰 텍스트가 아래로 더 길게 내려오면서 label이 위로 뜬 것처럼 보입니다.
baseline을 맞추면 label과 value가 같은 문장 줄 위에 놓인 것처럼 읽힙니다. 박스 크기는 달라도 글자의 기준선이 맞기 때문에 시선이 덜 흔들립니다.
form row에서 baseline 정렬 쓰기
입력 폼에서는 label, 입력값, 단위 텍스트가 한 줄에 같이 놓일 수 있습니다. 예를 들어 “Height 180 cm” 같은 행에서 Height는 작고, 180은 크고, cm은 다시 작을 수 있습니다.
<TextView
android:id="@+id/fieldLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Height"
android:textSize="14sp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/fieldValue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:text="180"
android:textSize="24sp"
app:layout_constraintStart_toEndOf="@id/fieldLabel"
app:layout_constraintBaseline_toBaselineOf="@id/fieldLabel" />
<TextView
android:id="@+id/fieldUnit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="4dp"
android:text="cm"
android:textSize="14sp"
app:layout_constraintStart_toEndOf="@id/fieldValue"
app:layout_constraintBaseline_toBaselineOf="@id/fieldValue" />
이런 행은 centerVertical로도 어느 정도 맞출 수 있습니다. 하지만 글자 크기가 서로 다르면 centerVertical은 박스 중심을 맞출 뿐이고, 글자 기준선은 살짝 어긋날 수 있습니다. 텍스트끼리 한 줄로 읽혀야 한다면 baseline 정렬이 더 정확합니다.
baseline과 centerVertical은 목적이 다르다
centerVertical은 View 박스의 중심을 맞추는 방식입니다. 그래서 아이콘과 텍스트를 한 줄에 놓거나, 버튼 안의 요소처럼 영역 중심이 중요할 때 자연스럽습니다.
baseline은 글자가 놓이는 줄을 맞추는 방식입니다. 작은 label, 큰 숫자, 단위 텍스트처럼 서로 다른 textSize가 섞인 UI에서는 중심보다 글자 기준선이 더 중요할 수 있습니다.
- 아이콘 + 텍스트: centerVertical을 먼저 검토
- 텍스트 + 텍스트: baseline을 먼저 검토
- 같은 textSize의 TextView: top 또는 center도 충분할 수 있음
- 서로 다른 textSize의 TextView: baseline이 더 자연스러운 경우가 많음
baseline 제약이 안 맞을 때 확인할 것
baseline 정렬이 기대처럼 보이지 않으면 먼저 연결 대상을 확인해야 합니다. baseline은 baseline끼리 연결하는 제약입니다. top을 baseline에 붙이거나 baseline을 bottom에 붙이는 식으로 생각하면 안 됩니다.
<!-- 좋지 않은 예: baseline 정렬인데 가로 제약이 부족하다 -->
<TextView
android:id="@+id/valueText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Large"
app:layout_constraintBaseline_toBaselineOf="@id/labelText" />
- baseline은 baseline끼리 연결했는가
- 가로 위치를 위한 start/end 제약이 있는가
- 비교 대상 View가 TextView처럼 baseline을 제공하는가
- 박스 정렬이 필요한 UI인데 baseline을 억지로 쓰고 있지는 않은가
baseline과 top 정렬을 고르는 기준
정렬 기준은 UI에서 무엇이 중요하냐로 고르면 됩니다. 글자끼리 한 줄로 읽혀야 하면 baseline입니다. 박스, 아이콘, 이미지, 카드 영역을 맞춰야 하면 top, bottom, center 계열 정렬이 더 자연스럽습니다.
- 작은 label + 큰 value: baseline
- 가격 + 통화 단위: baseline
- 입력값 + 단위 텍스트: baseline
- 아이콘 + 텍스트: centerVertical 또는 별도 기준 검토
- 카드나 이미지 영역: top/bottom/center 계열 정렬
정리
ConstraintLayout baseline 정렬은 높이가 다른 TextView의 글자 기준선을 맞추는 기능입니다. label/value UI, 가격/단위 표시, 입력 폼 행처럼 텍스트가 한 줄로 읽혀야 하는 화면에서 특히 유용합니다.
- baseline은 View top이 아니라 글자 기준선을 맞춘다
- layout_constraintBaseline_toBaselineOf로 연결한다
- baseline은 세로 기준선 정렬이므로 가로 위치 제약은 별도로 잡는다
- 텍스트끼리 한 줄로 읽혀야 할 때 top 정렬보다 자연스럽다
다음 편에서는 dimensionRatio를 다룹니다. 1:1 정사각형 이미지, 16:9 배너, 카드 썸네일처럼 비율을 유지해야 하는 UI를 실제 XML과 이미지로 정리하겠습니다.
아래에는 이 편보다 앞에서 다룬 글만 모았습니다. 아직 뒤 편은 발행 전이므로 링크하지 않습니다.
공식 기준은 Android Developers ConstraintLayout 가이드와 AndroidX ConstraintLayout 레퍼런스를 확인했습니다.
Android ConstraintLayout 완전 정리 이전 글 모음
Android ConstraintLayout 완전 정리 (1) – ConstraintLayout 기본 사용법: LinearLayout과 다른 제약 기반 배치 이해하기
Android ConstraintLayout 완전 정리 (3) – ConstraintLayout goneMargin과 margin 차이: View.GONE일 때 간격이 바뀌는 이유
Android ConstraintLayout 완전 정리 (5) – ConstraintLayout match_constraint 완전 정리: 0dp가 남은 공간을 채우는 원리
