베이스라인 그리드

정의

베이스라인 그리드는 화면 전체에 일정한 간격의 보이지 않는 가로선을 깔아 두고, 모든 텍스트 줄이 그 선 위에 앉도록 맞추는 방식입니다. 글자는 밑변을 기준으로 놓이는데, 이 밑변을 베이스라인이라고 부릅니다. 줄 높이를 4px이나 8px 같은 기준 간격의 배수로만 정하면, 서로 다른 칼럼이나 카드에 있는 글줄들이 같은 가로선 위에 나란히 놓입니다. 악보의 오선지 위에 음표가 가지런히 놓이는 모습과 비슷합니다. 인쇄 편집에서 온 개념이라 화면에서 엄밀히 지키기는 까다롭지만, 세로 방향의 정돈된 리듬을 만드는 데 큰 도움이 됩니다.

왜 중요한가

화면에 텍스트 블록이 여러 개 나란히 놓일 때, 각 블록의 줄들이 제멋대로 놓이면 서로 미묘하게 어긋나 어수선한 인상을 줍니다. 베이스라인 그리드를 지키면 여러 칼럼과 카드의 글줄이 같은 선 위에 정렬돼, 눈에 보이지 않는 규칙이 화면 전체를 단단하게 잡아 줍니다. 이렇게 세로 리듬이 맞으면 사용자는 이유를 콕 집어 말하지 못해도 화면이 정돈되고 신뢰가 간다고 느낍니다. 반대로 줄 간격이 아무 값이나 섞여 있으면, 개별 요소는 멀쩡해 보여도 전체를 함께 봤을 때 어딘가 부산스럽습니다. 여백과 줄 높이가 하나의 기준 격자를 공유할 때 비로소 화면이 하나의 짜임새 있는 시스템처럼 보입니다.

흔한 실수

• 줄 높이와 여백을 서로 다른 기준으로 정하는 경우입니다. 여백은 8의 배수인데 줄 높이는 제각각이면 두 리듬이 어긋나 그리드가 무너집니다. 텍스트와 간격이 같은 기준 격자를 공유해야 세로 정렬이 살아납니다.
• 처음부터 픽셀 단위로 완벽하게 맞추려다 지쳐 포기하는 경우입니다. 화면에서는 요소가 많아 엄격한 그리드를 100% 지키기 어렵습니다. 완벽을 목표로 삼기보다 큰 흐름을 맞추는 쪽이 현실적입니다.
• 그리드 간격을 기준 없이 아무 값으로나 잡는 경우입니다. 5px, 7px처럼 어중간한 값으로 격자를 만들면 여백이나 아이콘 크기와 잘 맞물리지 않아, 정작 정렬을 맞추기가 더 어려워집니다. 4나 8처럼 나누기 쉬운 값을 기준으로 삼으세요.

실무 팁

• 엄격한 그리드가 부담스럽다면 줄 높이를 8의 배수로만 통일해도 세로 리듬이 눈에 띄게 정돈됩니다. 인쇄처럼 완벽하게 맞추기보다 기준 격자를 정해 두고 대체로 지키는 것만으로도 효과가 큽니다.
• 기준 간격 하나를 정하고 여백과 줄 높이가 그 값을 함께 공유하도록 하세요. 텍스트와 간격이 같은 배수를 쓰면 세로 정렬이 자연스럽게 맞아, 화면이 한결 짜임새 있어 보입니다. 이 기준값은 팀 안에서 한 번 정해 두고 계속 재사용하는 것이 좋습니다.
• 제목처럼 줄 높이가 큰 요소는 기준 격자의 여러 칸을 차지하도록 배수로 맞추세요. 큰 요소도 같은 격자 위에 올려 두면 본문과 어긋나지 않고 세로 흐름이 끊기지 않습니다. 이미지나 아이콘의 높이도 같은 기준을 따르게 하면 화면 전체의 리듬이 한층 단단해집니다.

관련 개념