UI에도 리듬감이 필요해요
강약중강약 덩기덕쿵더러러러
UI에서 타이포그래피가 차지하는 비중은 생각보다 훨씬 크다. 화면 구성 요소 중 텍스트가 가장 많은 비율을 차지하기 때문에, 텍스트의 배치 방식과 간격 구조가 안정되지 않으면 전체 UI가 들쑥날쑥한 느낌을 주기 쉽다. 그래서 실무에서는 폰트 선택보다 줄 간격과 단락 간격, 글줄 길이, 기준선 그리드처럼 눈에 잘 드러나지 않는 요소들을 먼저 다루고, 이 요소들이 일정한 리듬을 만들도록 정렬하는 방식으로 접근한다. 같은 16px 본문이어도 폰트의 소문자 높이(x-height)가 달라 실제 시각적 밀도는 전혀 다르게 보이기 때문에, 숫자를 기준으로 한 정렬보다 텍스트 블록을 겹쳐 보면서 줄 사이의 공기와 무게감을 눈으로 판단하는 방식이 훨씬 안정적인 결과를 만든다. 이 과정이 번거롭게 느껴질 수 있지만, UI에서 리듬을 만드는 핵심은 결국 정밀한 계산보다 일관된 시각적 호흡을 확보하는 데 있기 때문에, 처음부터 텍스트 스타일을 단순화해 규칙을 잡아두는 것이 장기적으로도 도움이 된다.
줄 간격(line-height)은 본문 가독성을 결정하는 가장 중요한 요소다. 웹 환경에서는 보통 1.5~1.7 정도 범위에서 잡히는 경우가 많지만, 폰트별로 문자 구조가 다르기 때문에 같은 수치를 적용해도 결과는 크게 달라질 수 있다. 특히 한글 폰트는 자간과 행간 구조가 브랜드마다 다르기 때문에, 본문 크기가 같아도 어떤 폰트는 답답하게 보이고 어떤 폰트는 지나치게 여유로워 보이는 경우가 생긴다. 그래서 실무에서는 숫자보다 화면에서의 시각적 균형을 우선으로 판단하고, 텍스트 블록을 일정 배율로 확대해 줄 사이 간격이 균일한지, 단락의 첫 줄과 마지막 줄이 기준선에 자연스럽게 안착하는지 점검하는 방식으로 line-height를 조정한다. 이러한 시각적 기준선(optical baseline)을 잡아두면 같은 텍스트 스타일을 여러 화면에 반복 적용할 때도 리듬이 크게 흔들리지 않는다.
단락 간 여백(paragraph spacing) 역시 화면 리듬을 결정하는 중요한 요소인데, 종종 컴포넌트 단위의 margin 값에 의존하면서 리듬이 흐트러지는 경우가 많다. 예를 들어 카드형 UI에서 텍스트 아래 여백을 고정해두고 그대로 모든 문단에 적용하면, 정보 구조가 복잡해지면서 문단 사이의 호흡이 일정하지 않게 보일 수 있다. 단락 간격은 컴포넌트가 아니라 문맥을 기준으로 설정하는 것이 더 자연스럽다. 제목과 본문 사이에는 짧은 여백을 두고, 본문과 본문 사이에는 더 긴 여백을 두며, 목록이나 설명이 이어질 경우에는 읽기 흐름을 방해하지 않는 범위에서 리듬을 일정하게 유지하도록 구성하는 방식이다. 이러한 간격 조절은 spacing token이나 rem 단위로 변수화해두면 디자인 시스템 내에서도 쉽게 유지할 수 있고, 배포 규모가 커질수록 더 큰 효과를 발휘한다.
글줄 길이(line length)는 사용자의 읽기 경험과 직접 연결된다. 문장이 지나치게 길면 다음 줄로 시선이 이동하는 과정에서 피로가 쌓이고, 반대로 너무 짧으면 시선이 빠르게 이동하면서 정보가 분절되어 보인다. 한글 UI에서는 한 줄에 35~45자 정도가 가장 안정적이며, 웹 화면 기준으로는 600~720px 사이의 column 너비에서 자연스러운 리듬이 만들어진다. 글줄이 길어질수록 line-height를 조금씩 넓히면 시선이 자연스럽게 다음 줄로 이동할 수 있는 흐름을 만들 수 있다. 결국 글줄 길이와 줄 간격은 별개의 요소가 아니라 하나의 리듬 구조로 이해해야 하며, 두 요소의 균형이 맞을 때 화면 전체의 읽기 속도가 부드러워진다.
기준선 그리드(baseline grid)는 화면 전체의 리듬을 통합하는 데 도움이 되는 중요한 도구다. 4px 혹은 8px 단위로 그리드를 설정하고, 텍스트 스타일의 line-height를 그 배수로 맞추면 서로 다른 텍스트 스타일이 섞여도 기준선이 자연스럽게 정렬된다. 예를 들어 본문이 16px일 때 line-height를 24px로 잡으면 8px 그리드에 자연스럽게 맞춰지고, 캡션이 12px일 때 line-height를 16px으로 잡으면 4px 그리드에도 호환된다. 이렇게 기준선을 기준으로 한 정렬은 복잡한 레이아웃에서도 시각적 질서를 만들고, 반복되는 리스트나 카드형 UI에서 특히 효과적이다.
리듬을 검증하는 과정에서는 별도의 도구가 반드시 필요하지 않다. 프로토타입을 일정한 속도로 스크롤하면서 시선이 갑자기 멈추거나 화면의 호흡이 바뀌는 지점을 찾으면, 그 근처의 줄 간격이나 단락 간격, 글줄 길이를 다시 점검하면 된다. 텍스트가 균일하게 흐른다면 리듬이 잘 잡힌 상태이고, 특정 구간에서 리듬이 끊긴다면 대부분 간격 구조가 흔들린 것이다. 이러한 검증은 실제 사용자의 읽기 경험과 가장 가깝기 때문에 디자인 단계에서 반드시 필요한 절차이며, 조정이 반복될수록 UI의 리듬은 자연스럽게 정돈된다.
타이포그래피 리듬은 시각적인 정렬만으로 완성되지 않는다. 텍스트가 화면에서 어떤 속도로 흐르는지, 정보 전환 지점에서 사용자에게 얼마나 여유를 주는지, 글줄의 길이가 어떤 방향으로 시선을 이끄는지 같은 시간적 요소들이 함께 작동해야 한다. 결국 UI 타이포그래피는 공간을 정리하는 일이 아니라 시간을 설계하는 일이며, 이러한 관점을 가지고 line-height, paragraph spacing, line length, baseline grid를 조정하면 화면 전체의 호흡이 일정하게 유지된다. 실무에서는 이 네 가지 요소를 일관되게 관리하는 것만으로도 UI의 완성도가 눈에 띄게 상승하며, 사용자는 화면의 안정적인 리듬 덕분에 더 적은 인지 부담으로 정보를 읽고 이해하게 된다.
