정렬

정의

정렬은 요소를 가로축(왼쪽·가운데·오른쪽)과 세로축(위·가운데·아래)이라는 두 기준선에 맞춰 놓는 일입니다. 말은 단순하지만, 화면 속 수많은 요소가 보이지 않는 같은 선 위에 나란히 정돈되어 있을 때 사람은 그것을 '깔끔하다'고 느낍니다. 반대로 요소들이 저마다 조금씩 어긋나 있으면, 이유를 콕 집어 말하지 못하더라도 어딘가 불안하고 완성되지 않은 인상을 받습니다. 그래서 정렬은 가장 눈에 띄지 않으면서도 완성도를 좌우하는 기본기입니다. 핵심은 '요소마다 다른 선에 두지 말고, 되도록 같은 선을 공유하게 하라'는 것입니다.

왜 중요한가

사람의 눈은 나란히 놓인 선을 따라 자연스럽게 움직입니다. 텍스트와 이미지, 버튼이 공통의 기준선을 공유하면 시선이 끊기지 않고 매끄럽게 흘러 내용을 빠르게 훑을 수 있습니다. 정렬이 무너지면 눈은 매번 새 시작점을 찾느라 미세하게 멈칫하고, 그 작은 피로가 쌓여 화면 전체가 읽기 힘들게 느껴집니다. 또한 정렬은 요소들 사이의 관계를 드러냅니다. 같은 선에 놓인 항목은 서로 동등하거나 한 묶음이라는 신호를 주고, 일부러 어긋나게 둔 요소는 강조나 예외로 읽힙니다. 즉 정렬을 다스린다는 것은 시선의 흐름과 요소의 관계를 동시에 설계한다는 뜻이며, 이는 여백과 함께 화면 질서의 두 축을 이룹니다. 실제로 화면이 어수선해 보일 때 색이나 폰트를 바꾸기 전에 기준선부터 점검하면, 손대는 곳은 적어도 효과는 가장 큰 경우가 많습니다. 어긋난 요소 하나를 같은 선으로 되돌리는 것만으로 화면 전체의 인상이 눈에 띄게 정돈되기 때문입니다.

흔한 실수

• 모든 것을 가운데 정렬하는 습관입니다. 가운데 정렬은 짧은 제목이나 버튼, 빈 상태 안내처럼 시선을 모으고 싶을 때 강력하지만, 여러 줄로 이어지는 본문에 쓰면 줄마다 시작점이 달라져 오히려 읽기 불편해집니다.
• 요소마다 제각각 다른 기준선을 쓰는 것입니다. 어떤 카드는 왼쪽 끝, 어떤 카드는 살짝 안쪽에 맞춰져 있으면 눈에는 미세한 어긋남으로 보이고, 화면이 정돈되지 않은 느낌을 줍니다.
• 숫자나 금액을 왼쪽 정렬로 두는 것입니다. 자릿수가 다른 숫자는 오른쪽으로 맞춰야 자리값이 세로로 정렬되어 크기를 한눈에 비교할 수 있습니다.

실무 팁

• 화면에서 공유할 기준선의 개수를 최대한 줄이세요. 대부분의 요소가 하나의 왼쪽 기준선을 공유하도록 정리하는 것만으로도 화면이 즉시 단정해집니다.
• 긴 글은 왼쪽 정렬, 짧고 독립적인 요소는 가운데 정렬이라는 기본값을 기억하세요. 예외를 둘 때는 '왜 이것만 다르게 두는가'를 스스로 설명할 수 있어야 합니다.
• 정렬과 여백은 함께 움직입니다. 요소를 같은 선에 맞춘 뒤, 그 사이의 간격을 스케일에 맞춰 정리하면 적은 노력으로도 전문적인 화면에 성큼 가까워집니다.

관련 개념