베이스라인을 모르면 타이포그래피가 어긋납니다

베이스라인을 모르면 타이포그래피가 어긋납니다 thumbnail

버튼 안의 텍스트가 분명 가운데 정렬인데 이상하게 위로 떠 보일 때가 있어요. 아이콘과 글자를 같은 높이로 맞췄는데 실제 화면에서는 글자만 조금 내려앉아 보이기도 해요. 카드 목록에서는 제목과 본문 사이 간격을 같은 값으로 줬는데, 어떤 항목은 더 답답하고 어떤 항목은 더 헐거워 보예요.

이런 문제를 단순히 align-items: center나 line-height 값의 문제로만 보면 계속 미세 조정에 갇히게 돼요. 실제 원인은 텍스트가 박스의 정중앙에 놓이는 것이 아니라, 글꼴이 가진 베이스라인(baseline) 을 기준으로 배치된다는 점에 있어요.

타이포그래피에서 베이스라인은 눈에 잘 보이지 않지만, 텍스트 정렬의 기준이 되는 선예요. 이 선을 이해하지 못하면 폰트 크기, 줄 높이, 아이콘 정렬, 버튼 높이, 그리드 시스템이 모두 조금씩 어긋나요.

베이스라인이란?

베이스라인은 대부분의 글자가 놓이는 기준선예요. 영문 소문자 x, n, o 같은 글자는 보통 이 선 위에 앉고, g, p, y처럼 아래로 내려가는 부분은 베이스라인 아래로 내려갑니다.

여기서 같이 봐야 하는 개념이 있어요.

어센더(ascender): b, d, h처럼 x-height 위로 올라가는 부분
디센더(descender): g, p, q, y처럼 베이스라인 아래로 내려가는 부분
x-height: 소문자 x의 높이를 기준으로 보는 중간 높이
line-height: 한 줄이 차지하는 전체 높이

즉, 텍스트의 시각적 중심은 박스의 수학적 중심과 다를 수 있어요. 같은 16px 텍스트라도 폰트마다 x-height, 어센더, 디센더의 비율이 다르기 때문예요.

그래서 height: 40px, line-height: 40px을 줬다고 해서 텍스트가 항상 시각적으로 중앙에 보이는 것은 아니예요. 숫자로는 중앙인데 눈으로는 어긋나 보이는 상황이 여기서 발생해요.

웹에서 텍스트는 박스가 아니라 줄 상자 안에 놓입니다

CSS에서 인라인 텍스트는 단순한 사각형 하나로 배치되지 않아요. 브라우저는 인라인 포맷팅 컨텍스트 안에서 줄 상자(line box)를 만들고, 그 안에서 글리프와 인라인 요소를 베이스라인 기준으로 정렬해요.

MDN의 vertical-align 문서에서도 기본값은 baseline예요. 인라인 요소나 테이블 셀 안에서 별도 값을 주지 않으면, 요소는 부모의 베이스라인에 맞춰져요.

이 기본 동작은 합리적예요. 글자는 원래 줄을 따라 읽히는 요소이기 때문예요. 문제는 UI 컴포넌트에서 텍스트를 사각형 안의 장식 요소처럼 다룰 때 생깁니다. 버튼, 배지, 탭, 칩, 내비게이션처럼 텍스트와 아이콘이 섞인 컴포넌트에서는 베이스라인 기준 정렬과 박스 기준 정렬이 충돌해요.

예를 들어 아이콘은 대개 정사각형 박스예요. 반면 텍스트는 베이스라인, x-height, 어센더, 디센더를 가진 글리프예요. 둘을 단순히 center로 맞추면 박스끼리는 가운데가 맞지만, 글자의 시각적 중심과 아이콘의 중심은 다르게 보일 수 있어요.

line-height는 여백이 아니라 줄의 높이입니다

line-height를 텍스트 위아래 여백처럼 생각하면 타이포그래피 시스템이 쉽게 흔들려요. line-height는 한 줄이 차지하는 높이이며, 브라우저는 글꼴 메트릭을 기준으로 이 높이를 줄 상자에 배분해요.

중요한 점은 line-height: 24px이라고 해서 글자 위 4px, 아래 4px이 항상 예쁘게 나눠지는 것이 아니라는 점예요. 폰트의 어센더와 디센더 비율, 내부 leading, 렌더링 엔진에 따라 실제로 보이는 균형은 달라질 수 있어요.

그래서 디자인 시스템에서 font-size: 16px, line-height: 24px 같은 토큰만 정의해도 충분하지 않아요. 해당 조합이 실제 UI에서 어떤 시각적 높이를 만드는지 확인해야 해요.

특히 한글과 영문을 함께 쓰는 서비스에서는 이 문제가 더 잘 드러나요. 한글은 영문 소문자 중심의 x-height 감각과 다르게 보이고, 숫자와 영문 약어가 섞이면 같은 줄 안에서도 밀도가 달라져요. 한국어 UI에서 ABC, 2026, 설정, Typography를 모두 테스트해야 하는 이유예요.

베이스라인 그리드는 언제 도움이 될까?

베이스라인 그리드는 텍스트의 베이스라인을 일정한 간격의 그리드에 맞추는 방식예요. 편집 디자인에서는 오래된 개념이고, 웹 UI에서도 긴 읽기 콘텐츠나 복잡한 정보 화면에서는 여전히 유용해요.

예를 들어 본문 텍스트의 line-height를 24px로 정하고, 문단 간격과 섹션 간격을 4 또는 8의 배수로 맞추면 화면 전체의 리듬이 안정돼요. 텍스트가 많은 관리자 화면, 문서 페이지, 테이블 중심 UI에서는 이런 리듬이 가독성에 직접적인 영향을 줘요.

하지만 모든 UI를 엄격한 베이스라인 그리드에 끼워 맞추는 것은 비추천예요. 버튼, 입력창, 카드, 모달, 모바일 내비게이션은 터치 영역, 상태 표시, 아이콘 크기, 컴포넌트 밀도 같은 제약을 함께 받아요. 이때 베이스라인 그리드를 절대 규칙으로 두면 오히려 컴포넌트가 부자연스러워질 수 있어요.

베이스라인 그리드는 전체 레이아웃을 지배하는 법칙이라기보다, 텍스트가 많은 영역에서 리듬을 확인하는 기준선에 가깝게 쓰는 편이 좋아요.

디자인 시스템에서는 무엇을 정해야 할까?

베이스라인 문제를 줄이려면 타이포그래피 토큰을 단순한 크기 목록으로 끝내면 안 돼요. 최소한 다음 기준은 함께 정해야 해요.

1. 폰트 크기와 line-height를 한 세트로 정의하기

font-size와 line-height는 따로 움직이면 안 돼요. 같은 16px 텍스트라도 본문, 버튼, 캡션에서 필요한 줄 높이는 달라요.

:root {
  --text-body-font-size: 16px;
  --text-body-line-height: 24px;

  --text-button-font-size: 14px;
  --text-button-line-height: 20px;

  --text-caption-font-size: 12px;
  --text-caption-line-height: 16px;
}

이렇게 세트로 정의하면 컴포넌트마다 임의로 line-height를 바꾸는 일을 줄일 수 있어요. 디자이너와 개발자가 같은 이름의 토큰을 보고 이야기할 수 있다는 점도 중요해요.

2. 아이콘과 텍스트의 정렬 기준 정하기

아이콘 버튼이나 텍스트 버튼에서는 아이콘의 박스 중심과 텍스트의 시각적 중심이 다를 수 있어요. 이때 모든 경우를 align-items: center로 해결하려고 하면 특정 폰트나 특정 크기에서 어긋나요.

실무적으로는 다음 기준이 필요해요.

텍스트와 아이콘을 center로 맞추되, 자주 쓰는 크기에서 시각 보정을 허용할지
아이콘 크기를 텍스트 line-height보다 작게 둘지, 같은 값으로 둘지
버튼 높이를 텍스트 줄 높이 기준으로 만들지, 터치 영역 기준으로 만들지
특정 폰트에서 필요한 top 또는 translateY 보정을 토큰화할지

여기서 중요한 것은 보정값의 존재 자체가 아니예요. 보정값이 컴포넌트 내부에 흩어져 있으면 문제가 돼요. 필요한 보정이라면 한 곳에서 관리해야 해요.

3. 실제 문자열로 검수하기

타이포그래피는 가나다, ABC, 123만으로 검수하면 부족해요. 어센더와 디센더가 모두 있는 문자열, 한글과 영문이 섞인 문자열, 숫자와 기호가 섞인 문자열을 같이 봐야 해요.

예를 들어 버튼과 배지는 이런 문자열로 확인하는 편이 좋아요.

Agjyp 설정 2026
Typography 기준선
결제 완료 1,280원

이런 테스트 문자열은 단순히 폰트 모양을 보는 용도가 아니예요. 실제 제품에서 텍스트가 위아래로 치우쳐 보이는지, 아이콘과 어색하게 맞물리는지, 줄 높이가 너무 빽빽하거나 헐거운지 확인하는 도구예요.

피해야 할 접근

가장 흔한 실수는 모든 문제를 패딩으로 덮는 것예요. 버튼 텍스트가 위로 떠 보인다고 padding-top만 1px 늘리고, 다른 버튼에서는 다시 padding-bottom을 조정하는 식예요. 이렇게 하면 컴포넌트가 늘어날수록 기준이 사라집니다.

두 번째 실수는 폰트를 바꾸면서 타이포그래피 토큰을 그대로 두는 것예요. 폰트가 바뀌면 x-height, 어센더, 디센더, 내부 leading이 바뀝니다. 같은 font-size와 line-height라도 화면에서 차지하는 인상은 달라져요. 폰트 교체는 색상 교체보다 훨씬 큰 레이아웃 변경일 수 있어요.

세 번째 실수는 디자인 도구에서 보이는 텍스트 박스만 믿는 것예요. Figma 같은 디자인 도구와 브라우저는 텍스트 박스를 계산하고 렌더링하는 방식이 완전히 같지 않을 수 있어요. 시안에서 맞아 보였던 정렬도 실제 CSS에서는 다르게 보일 수 있으므로, 중요한 컴포넌트는 브라우저에서 확인해야 해요.

정리

베이스라인은 타이포그래피의 숨은 기준선예요. 텍스트가 사각형 안에서 기계적으로 중앙에 놓인다고 생각하면 버튼, 아이콘, 배지, 표, 본문 리듬이 조금씩 어긋나요.

디자인 시스템에서 중요한 것은 모든 요소를 엄격한 베이스라인 그리드에 맞추는 것이 아니예요. font-size와 line-height를 세트로 정의하고, 실제 문자열로 검수하며, 아이콘과 텍스트의 정렬 기준을 명시하는 것예요.

타이포그래피가 이상하게 어긋나 보인다면 먼저 패딩을 만지기보다 베이스라인을 확인하는 편이 좋아요. 그래야 문제를 한 컴포넌트의 예외가 아니라 시스템의 기준으로 다룰 수 있어요.