정렬(디자인) (Alignment)
쉽게 풀면
요소들을 줄맞춰 가지런히 배치해서 깔끔하고 정돈되어 보이게 만드는 원리이다.
왜 중요한가
정렬은 요소들의 가장자리나 중심선을 일치시켜 화면을 질서 있게 보이게 하는 원리로, 칼럼 그리드나 베이스라인 그리드가 존재하는 이유이기도 합니다. 시선이 흐르는 보이지 않는 선을 만들어 읽는 순서를 안내하고, 정렬이 어긋난 화면은 사용자가 이유를 설명하지 못해도 '허술하다'고 느끼게 하므로 신뢰도에 직접 영향을 줍니다. 여러 열에 걸친 표 형태의 데이터는 숫자를 오른쪽 정렬해 자릿수를 맞추는 것이 왼쪽 정렬보다 값 비교를 훨씬 쉽게 만든다는 것이 표 디자인의 오랜 관행이다. 여러 요소가 서로 다른 기준선(왼쪽, 가운데, 오른쪽)에 각각 맞춰져 있으면 화면 전체에 보이지 않는 선이 여러 개 생겨 산만해 보이므로, 하나의 화면에서는 정렬 기준을 최소한으로 통일하는 것이 원칙이다. 아이콘과 텍스트를 나란히 배치할 때는 아이콘의 시각적 무게중심이 텍스트의 엑스하이트 중심과 맞아야 자연스러운데, 이는 수치상의 세로 중앙 정렬과는 다른 광학적 조정이다.
핵심 정리
- 정렬(alignment)은 요소의 가장자리나 중심선을 보이지 않는 기준선에 맞추어 요소들 사이에 질서와 관계를 만드는 디자인 원리입니다.
- 기준선은 대개 왼쪽 끝, 오른쪽 끝, 가운데 중 하나이며, 한 화면 안에서 기준선의 수가 적을수록 요소들이 한 묶음으로 읽힙니다.
- 그리드 시스템은 정렬을 체계화한 도구입니다. 열(column)과 여백(gutter)으로 화면을 나누고 모든 요소가 그 선에 맞도록 배치합니다. Müller-Brockmann(1981)의 Grid Systems in Graphic Design은 그리드를 주제로 한 책입니다.
- Williams(1994)의 The Non-Designer’s Design Book은 비전문가를 위한 디자인 입문서이고, Lupton(2004)의 Thinking with Type은 타이포그래피 입문서입니다.
예시로 보기
가로 960px 화면을 12열 그리드(열 사이 간격 20px, 바깥 여백 0)로 나누면 열 하나의 폭은 (960 − 11×20) ÷ 12 = 61.67px입니다(코드로 계산, 가상의 예). 이 그리드 위에서 카드 3장을 나란히 놓으려면 각 카드가 4열을 차지하게 하면 되고, 그 폭은 4×61.67 + 3×20 = 306.67px입니다. 카드 사이 간격이 정확히 20px로 같아지고, 첫 카드의 왼쪽 끝과 셋째 카드의 오른쪽 끝이 화면 가장자리에 맞습니다.
같은 카드를 폭만 눈대중으로 정해 놓으면 카드마다 왼쪽 끝이 조금씩 어긋나 기준선이 늘어납니다. 정렬을 ‘줄 맞추기’가 아니라 공유하는 기준선의 수를 줄이는 일로 보면 이 차이가 설명됩니다.
자주 하는 오해
| 오해 | 바로잡기 |
|---|---|
| 가운데 정렬이 가장 안정적이다. | 제목처럼 짧은 글과 여러 줄의 본문은 따로 판단해야 합니다. 가운데 정렬은 줄마다 시작점이 달라지므로 기준선이 늘어난다는 점을 염두에 둡니다. |
| 수치상 같은 좌표에 놓으면 정렬된 것이다. | 원형 아이콘과 사각 글상자처럼 모양이 다르면 같은 좌표에서도 어긋나 보일 수 있어, 눈으로 보아 맞추는 광학적 보정이 필요합니다. |
| 정렬은 위치만 맞추는 일이다. | 정렬된 요소는 서로 관련된 것으로 읽히므로, 관련 없는 요소를 같은 선에 두면 잘못된 관계를 암시합니다. |
논문에서는 이렇게 쓰입니다
실제 논문에서
이 용어를 직접 쓴 국내 논문 문장을 아직 수집하지 못했습니다. 수집되는 대로 출처와 함께 싣겠습니다.
예시 문장
아래는 용어의 쓰임을 보여 주려고 만든 예시로, 실제 논문에서 가져온 문장이 아닙니다.
요소 정렬 방식의 차이가 실제 작업 완료 속도에 미치는 영향을 검증한 사용성 연구이다.
도로의 평면·종단 선형을 어떻게 정하느냐가 실제 주행 안전성과 직결된다는 점을 보여주는 서술이다.
조금 더 깊게 보면
정렬은 가운데 맞춤이 항상 안정적이라는 오해가 있지만, 긴 문단을 가운데 정렬하면 각 행의 시작점이 달라져 읽기 속도가 떨어집니다. 시각적 정렬과 수치상 정렬도 다릅니다. 원형 아이콘과 사각 텍스트 상자를 같은 좌표에 놓으면 오히려 어긋나 보여, 광학적 보정을 해야 합니다. Robin Williams가 대중화한 네 가지 기본 원리(대비·반복·정렬·근접)에서 정렬은 다른 원리를 떠받치는 바탕 역할을 합니다. 정렬은 좌우 가장자리를 맞추는 물리적 정렬과, 눈에 보이지 않아도 요소들이 하나의 논리적 축을 공유한다고 느끼게 하는 광학적 정렬로 나뉘며, 원형이나 삼각형 아이콘은 사각 텍스트 상자와 수치상 좌표가 같아도 시각적으로는 어긋나 보여 별도 보정이 필요하다.
주의할 점
정렬은 단순히 좌우를 맞추는 것을 넘어 요소 간의 논리적 관계를 시각적으로 나타내는 역할을 한다.
헷갈리기 쉬운 용어
디자인 기본 원리는 서로 겹쳐 쓰입니다.
| 용어 | 핵심 | 정렬과의 관계 |
|---|---|---|
| 정렬 | 요소를 공유하는 기준선에 맞춤 | — |
| 대비 | 요소 사이의 차이를 강조 | 정렬이 만든 질서 위에서 강조점을 줌 |
| 게슈탈트 원리 | 사람이 요소를 묶어서 지각하는 규칙(근접, 유사 등) | 정렬은 요소를 한 묶음으로 지각하게 만드는 단서의 하나 |
‘텍스트 정렬(왼쪽·가운데·양끝맞춤)’은 글줄을 맞추는 설정을 가리키는 말로, 위 원리보다 좁은 뜻입니다.
참고 문헌
- Müller-Brockmann, J. (1981). Grid Systems in Graphic Design. Verlag Arthur Niggli.
- Williams, R. (1994). The Non-Designer's Design Book. Peachpit Press.
- Lupton, E. (2004). Thinking with Type. Princeton Architectural Press.
표의 기준값은 위 문헌에 근거한 관례이며, 분야·학술지마다 다른 기준을 쓸 수 있습니다.