[UI 디자인] 레이아웃의 세가지 기술 - 정렬

정렬(Alignment)은 UI 구성 요소를 보기 좋고 읽기 쉽게 만드는 핵심 원리입니다.
같은 요소라도 정렬만 바르게 적용하면 전체 레이아웃이 단정해지고,
사용자가 정보를 훨씬 빠르게 파악할 수 있습니다.

 

이번에는 UI에서 자주 사용하는 정렬 방식과 상황별로 어떤 정렬이 가장 적합한지 간단하게 정리해보겠습니다.

 

1. 요소는 동일한 기준선에 맞춰 정렬한다

정렬의 핵심은 모든 요소가 하나의 보이지 않는 기준선에 맞춰 배치되는 것입니다.
텍스트, 아이콘, 버튼 등 어떤 요소든 기준이 명확해야 화면이 안정적으로 느껴집니다.

 

정렬이 흔들리면 UI가 어수선해지고
사용자가 어디부터 봐야 하는지 혼란을 느끼게 됩니다.

 

2. 세로로 나열할 때: 중앙 정렬이 기본

요소가 위에서 아래로 나열되는 구조라면 보통 중앙 정렬을 사용하는 것이 자연스럽습니다.
특히 카드 형태나 리스트형 UI에서 자주 쓰이는 방식입니다.

하지만 예외가 있습니다.

 

✔ 텍스트 길이가 길어지면? → 왼쪽 정렬이 더 자연스럽다

 

텍스트가 길면 줄바꿈이 발생하고
중앙 정렬은 시선 이동이 불편해집니다.
그래서 콘텐츠가 많거나 텍스트 양이 많아질수록 왼쪽 정렬이 더 읽기 쉽습니다.

 

3. 콘텐츠가 많은 세로 레이아웃: 왼쪽 정렬이 안정적

텍스트나 정보가 많아질수록
사용자의 시선이 왼쪽에서 오른쪽으로 흐르는 구조가 안정적입니다.

 

그래서 다음 상황에서는 왼쪽 정렬이 더 적합합니다.

• 여러 줄 설명
• 긴 제목 또는 본문 텍스트
• 정보 밀도가 높은 영역

왼쪽 정렬은 읽기 흐름을 방해하지 않고 자연스러운 구조를 만듭니다

 

4. 가로로 나열할 때: 가로 중앙 정렬

요소가 **옆으로 나란히 배치될 때(가로 방향)**는
가로 중앙 정렬을 맞춰주는 것이 가장 깨끗하고 균형 잡힌 형태를 만듭니다.

 

예를 들어:

• 아이콘 + 텍스트 구조
• 탭 메뉴
• 버튼 여러 개가 나란히 있는 UI

이런 경우 가로 중앙 정렬을 사용하면 시각적으로 안정적이며
요소 간 균형도 자연스럽게 형성됩니다.

 

정렬 예시

 

 

정리하면

 

세로는 중앙 정렬 → 하지만 텍스트가 많다면 왼쪽 정렬,

가로는 중앙 정렬 그리고 무엇보다 모든 요소는 동일한 기준선에 정렬되는 것이 핵심이다.

 

 

정렬은 보이지 않지만 UI의 완성도를 크게 좌우하는 기본 원리입니다.
작은 차이 같지만 최종 결과물의 품질을 확실하게 높여줍니다.