베이스라인그리드 (Baseline Grid)
쉽게 풀면
글줄들이 보이지 않는 가로선에 딱 맞춰 정렬되도록 만드는 격자이다.
왜 중요한가
베이스라인 그리드는 글자가 앉는 기준선을 일정 간격으로 반복시켜 여러 단이나 요소의 텍스트 줄이 서로 맞물리게 하는 장치입니다. 잡지나 보고서의 편집 디자인에서 좌우 페이지의 줄이 어긋나지 않게 하고, 웹에서는 4px나 8px 배수 간격 체계로 구현되어 컴포넌트 간 수직 리듬을 일관되게 만듭니다.
이미지나 아이콘 같은 비텍스트 요소도 그리드 배수 높이로 맞추면 텍스트와 나란히 배치될 때 하단선이 어긋나지 않아, 베이스라인 그리드는 텍스트뿐 아니라 전체 컴포넌트 크기 체계의 기준으로도 확장된다.
핵심 정리
- 기준선(baseline)은 글자가 앉는 보이지 않는 선입니다. 베이스라인 그리드는 이 선을 일정한 간격으로 반복해 깔아, 본문과 제목 등의 텍스트 줄이 모두 그 선에 맞게 합니다.
- 그리드 간격은 보통 본문의 행간(예: 10pt 글자에 행간 14pt이면 14pt)으로 정합니다. 다른 크기의 글자도 행간을 이 간격의 배수로 맞춥니다.
- 효과는 수직 리듬입니다. 여러 단이나 앞뒤 면에서 줄이 서로 맞고, 얇은 종이에서 뒷면의 글줄이 비치는 문제도 줄어듭니다.
- 웹에서는 CSS에 기준선 그리드 기능이 따로 없어, 행간과 여백을 4px 또는 8px 같은 단위의 배수로 맞추는 방식으로 근사합니다.
예시로 보기
가상의 인쇄물입니다(코드로 계산). A4 높이 842pt, 위아래 여백 각 56pt이고 본문 10pt/14pt입니다.
- 본문 영역 높이 = 842 − 56 × 2 = 730pt.
- 들어가는 줄 수 = ⌊730 ÷ 14⌋ = 52줄이며, 남는 높이는 730 − 52 × 14 = 2pt입니다. 남는 2pt는 여백에 더해 처리합니다.
- 제목을 18pt로 키우면 행간을 28pt(=14의 2배)로 정해, 제목 아래 본문이 다시 그리드에 맞게 합니다.
- 문단 사이 간격도 14pt(1칸)나 7pt(반 칸)처럼 그리드의 약수·배수로 둡니다.
자주 하는 오해
| 오해 | 바로잡기 |
|---|---|
| 모든 글자가 같은 행간이어야 한다. | 행간이 그리드 간격의 배수이기만 하면 됩니다. |
| 베이스라인 그리드는 글자 윗선에 맞춘다. | 글자가 앉는 아랫선(기준선)에 맞춥니다. |
| 이미지는 그리드와 상관없다. | 이미지 높이를 그리드의 배수로 맞추어야 옆의 텍스트와 하단선이 어긋나지 않습니다. |
| 베이스라인 그리드와 모듈러 그리드는 같다. | 베이스라인 그리드는 수직 방향의 줄 간격 체계이고, 모듈러 그리드는 가로·세로 모듈로 면을 나눈 2차원 체계입니다. |
논문에서는 이렇게 쓰입니다
실제 논문에서
이 용어를 직접 쓴 국내 논문 문장을 아직 수집하지 못했습니다. 수집되는 대로 출처와 함께 싣겠습니다.
예시 문장
아래는 용어의 쓰임을 보여 주려고 만든 예시로, 실제 논문에서 가져온 문장이 아닙니다.
여러 컬럼에 걸친 텍스트의 수직 정렬을 통일하기 위한 베이스라인그리드 활용 사례이다.
그리드 간격과 본문 행간의 관계를 맞추지 않으면 정렬이 깨질 수 있다는 주의점을 설명한다.
조금 더 깊게 보면
베이스라인 그리드는 행간이 그리드 간격의 배수여야 유지되므로, 제목처럼 큰 글자의 행간을 그리드에 맞추면 답답하게 보이는 절충이 생깁니다. 실무에서는 제목만 반 간격을 허용하는 식의 예외 규칙을 둡니다.
웹 브라우저는 인쇄 조판과 달리 글자 상자 내에서 글리프의 정확한 베이스라인 위치를 통제하기 어려워, 웹의 '베이스라인 그리드'는 대개 행 높이 배수 체계라는 근사에 그친다는 점을 알아야 합니다.
인쇄 조판에서는 폰트의 실제 베이스라인 좌표를 정밀하게 제어할 수 있지만, 웹 브라우저는 폰트마다 다른 내부 메트릭(어센더·디센더 여백)을 갖고 있어 동일한 line-height 값을 줘도 브라우저와 서체에 따라 실제 베이스라인 위치가 미세하게 어긋난다.
주의할 점
베이스라인그리드는 모든 텍스트 요소에 엄격히 적용하기 어려운 경우가 있어 예외 규칙이 필요할 수 있다. 이미지처럼 텍스트가 아닌 요소는 실제 베이스라인 자체가 없으므로, 이런 요소를 그리드에 맞추려면 상단이나 하단 가장자리를 그리드 선에 맞추는 방식으로 대체해야 한다. 다단 레이아웃에서 각 열의 텍스트 길이가 달라 마지막 줄 위치가 어긋나면, 그리드를 지켰음에도 열 하단이 들쭉날쭉해 보이는 문제가 남는다.
헷갈리기 쉬운 용어
| 용어 | 핵심 | 차원 |
|---|---|---|
| 베이스라인 그리드 | 기준선을 일정 간격으로 맞춤 | 수직 방향 |
| 모듈러그리드 | 가로·세로 모듈로 지면을 나눔 | 2차원 |
| 행간(leading) | 한 줄과 다음 줄 기준선 사이의 거리 | 그리드 간격을 정하는 값 |
참고 문헌
- Müller-Brockmann, J. (1981). Grid Systems in Graphic Design. Arthur Niggli.
- Bringhurst, R. (1992). The Elements of Typographic Style. Hartley & Marks.
- Elam, K. (2004). Grid Systems: Principles of Organizing Type. Princeton Architectural Press.
표의 기준값은 위 문헌에 근거한 관례이며, 분야·학술지마다 다른 기준을 쓸 수 있습니다.