읽는 사용자: UI 텍스트는 리듬처럼 보여야 한다

[UX] 타이포, 폰트만 예쁘면 장땡이라 생각하시나요

Mar 3. 2025

'지금 이 시대에는 모든 디자이너가 타이포그래퍼(Typographer)가 되어야 한다.'

- Oliver Schöndorfer

어떤 폰트든 원하는 스타일로 자유롭게 사용할 수 있는 시대. 그만큼 타이포그래피의 본질은 제대로 인식하지 못한채, 그저 '예쁜 폰트'를 고르는 문제라 여기기 쉽습니다.

타이포그래피는 비즈니스 목적, 디자인 원칙, UX 전략 모두에 맞물립니다. 앱이든, 웹사이트든, 모든 인터페이스에서 텍스트란 사용자의 경험을 결정하는 중요한 요소 중 하나고요. 따라서 이번 글에서는 UX 디자인에서 타이포그래피가 어떤 역할을 수행하고, 사용자들은 텍스트를 어떻게 대하고 있으며, 그런 사용자들을 위해 좋은 타이포그래피를 설계하려면 어떻게 접근해야하는지를 분석해 봅니다.

우리는 텍스트를 읽지 않는다, 스캔한다.

텍스트는 UI에서 가장 기본적이고 지배적인 요소지만, 꼼꼼히 읽히지 않습니다. 되려 사용자는 텍스트를 빠르게 스캔(Scan)하거나 훑어봄(Skim)으로써 필요한 정보만을 눈으로 골라내죠. 이러한 탐색방식을 정보사냥(information foraging)이라고도 부릅니다.

대표적인 스캔닝 패턴으로는 F, Z 패턴이 있습니다.

잘 설계된 타이포그래피는 사용자가 텍스트를 빠르게 스캔할 때 필요한 정보를 효과적으로 파악할 수 있도록 돕습니다. 이를 위해서는 가독성과 일관성이 핵심. 명확한 텍스트 계층 구조와 읽기 쉬운 헤드라인은 복잡한 인터페이스에서도 시각적 연결성을 높이고, 자연스러운 시선의 흐름을 형성합니다.

타이포그래피 리듬(Typographic Rhythm) :

텍스트는 흐름을 만들어내야 한다.

텍스트간 일정한 흐름과 리듬을 만든다, 이를 가능하게 하는 것이 바로 '타이포그래피 리듬(Typographic Rhythm)'입니다. 타이포그래피 리듬이란, 텍스트가 수직적 흐름(Vertical Flow)을 유지하며 사용자에게 자연스러운 읽기-훑기- 경험을 제공하는 개념인데요. 마치 음악에서 일정한 박자가 흐름을 형성하듯, 디지털 인터페이스에서 텍스트가 일정한 규칙과 패턴을 가지고 정렬될 때 발생합니다.

수직적 흐름(Vertical Flow)이란, 사용자가 페이지를 스크롤하며 수직적으로 정보를 탐색할 때 텍스트와 UI 요소들이 논리적으로 배치되는 원칙을 의미합니다. 이 흐름이 유지되면 사용자는 자연스럽게 시선을 이동하며 내용을 빠르게 이해할 수 있으며, 정보 간의 관계를 직관적으로 파악할 수 있습니다.

리듬감 있는 UI 텍스트를 만드는 6가지 원칙

1️⃣ [8pt 그리드 시스템]을 기반으로 배치하라.

8pt 그리드 시스템이란 모든 요소를 8의 배수(8, 16, 24, 32, 40...)로 정렬하는 디자인 원칙입니다. 이러한 시스템을 적용하면 디자인 패턴이 반복되면서 UI내 간격이 일정해지고, 텍스트 블록 간의 균형이 잡히는 등 일관된 리듬이 형성됩니다. (*꼭 8pt일 필요는 없습니다. 기준이 되어줄 그리드면 돼요.)

✏️ 적용 방법

본문과 본문 사이의 간격을 8의 배수로 유지(ex. 16px, 24px, 32px)

버튼과 텍스트의 마진 및 패딩을 동일한 그리드에 맞추어 정렬

* 하지만 디자인 작업시 8pt 그리드를 권장합니다. 관련 내용이 궁금하다면 아래 글을 확인해보세요.

https://medium.com/@mertyagci/the-power-of-the-8pt-grid-system-in-design-1c9dbc683ad8

The Power of the 8pt Grid System in Design

This article highlights the importance of the 8pt grid system in design. In terms of achieving consistency and efficiency, this system…

https://medium.com/@mertyagci/the-power-of-the-8pt-grid-system-in-design-1c9dbc683ad8

2️⃣ 텍스트 정렬은 [베이스라인 그리드]에 맞춰라

베이스라인Baseline 그리드란, 텍스트의 줄 간격(line height)을 일정한 간격으로 배치하는 타이포그래피 중심의 그리드 시스템입니다. 위에서 소개한 8pt 그리드 시스템과는 조금 다른 개념으로, 쉽게 말하면 글자가 놓이는 선이 일정한 간격을 가지도록 배치하는 방식이에요.

✏️ 적용 방법

줄 간격(line height)을 일정한 수치(예: 24px)로 설정하여 텍스트 간격을 균일하게 유지.
ex) 폰트 크기가 16px이고, 줄 간격이 24px라면: 베이스라인 그리드는 24px 단위로 설정됩니다.

제목, 본문, 캡션 등의 텍스트가 동일한 베이스라인에 정렬되도록 배치.
ex) 그렇다면, 모든 텍스트는 이 24px 단위에 맞춰 배치되도록 조정해야해요.

짚고 넘어가는 8pt Grid vs Baseline Grid 차이점

8pt 그리드는 UI의 전체적인 레이아웃을 정리하는 역할을 하고, 베이스라인 그리드는 텍스트 간격을 조정하여 일관된 타이포그래피 리듬을 만드는 역할을 해요. 따라서, 큰 UI 레이아웃을 잡을 때는 8pt 그리드를 사용해 정리하고, 텍스트를 배치할 때는 베이스라인 그리드를 적용하면 됩니다.

3️⃣ 행간(Line Height)은 최소 150% 이상 유지하라

줄 간격이 너무 좁으면 가독성이 떨어지고, 너무 넓으면 시각적 흐름이 끊깁니다. 따라서 일반적으로는 글꼴 크기의 1.5배(150%)를 기본 행간으로 설정하는 것이 이상적이예요.

✏️ 적용 방법

16px 폰트 → 24px(1.5x) 행간

20px 폰트 → 30px(1.5x) 행간

24px 폰트 → 36px(1.5x) 행간

4️⃣ 폰트의 목적을 정의하고, 이에 따른

텍스트 계층 구조를 명확하게 보여라.

사용자는 페이지를 스캔하며 정보를 인식해요. 따라서 타이포그래피 리듬을 고려할 때, 헤드라인(H1) → 부제목(H2) → 본문 순으로 시각적 계층을 분명히 나누고, 그에 맞게 텍스트를 배치하는 것이 중요합니다. 폰트의 크기와 굵기 강약을 조절하면 정보의 중요도를 시각적으로 표현할 뿐만 아니라, 읽는 흐름까지 자연스럽게 유도할 수 있어요.

✏️ 적용 방법

H1 (헤드라인): 가장 강한 시각적 대비 (ex. 32px / 볼드)

H2 (부제목): H1보다 작지만 본문보다 크고 강조된 형태 (ex. 24px / 세미볼드)

특히 H1은 제목, 헤드라인, 큰 텍스트, 브랜드 정체성을 강조하는데 보통 사용 주목을 끌거나 특정 분위기를 형성하는 역할로, Display 폰트로도 통함.

본문: 일반적인 가독성을 유지한 크기 (ex. 16px / 레귤러)

긴 문장을 읽기 쉽게 구성해야하며, 가독성이 가장 중요한 요소.

캡션 & 버튼 (UI 텍스트): 버튼/네비게이션/라벨 등에 사용되는 작은 폰트 (ex. 12px / 1.5x 행간 / 레귤러)

작은 크기(10~14px)에서도 선명하게 보이는 것이 중요하기 때문에 행간 확보가 특히 중요. 또한 UI에서 작은 크기의 텍스트(12px 이하)를 사용할 경우, 너무 얇거나 굵은 폰트는 가독성을 해칠 수 있기 때문에 Medium 정도의 굵기를 권장.

5️⃣ 화이트스페이스(Whitespace)를 활용하라

화이트스페이스는 UI에서 텍스트, 이미지, 버튼 등 콘텐츠 요소 사이의 빈 공간을 의미합니다. 화면 곳곳에 배치된 빈 공간은 UI의 리듬을 형성하는 숨은 요소로 작용하므로, 적절하게 사용될시 사용자가 텍스트를 더 쉽게 읽고, 중요한 정보를 빠르게 파악하도록 돕습니다.

사용 팁을 하나 드리자면, 텍스트와의 마진은 (해당 텍스트의) 베이스라인에, 요소 간 간격은 그리드 시스템에 맞춰 배치하세요. 이렇게 일관된 패턴으로 공간을 유지하면 좋은 UI 흐름이 만들어집니다.

✏️ 적용 방법

문단과 요소 사이에는 충분한 화이트스페이스(8pt, 16pt, 24pt 등 그리드 시스템에 맞게) 배치

콘텐츠 간의 그룹핑 역할로 활용, 텍스트 블록 간 적절한 가격 유지

이미지 주변의 마진과 요소들 사이의 패딩까지 일관되게 유지

6️⃣ 마지막, 서체를 고를 때는

(a) X-Height와 (2) 스타일까지 고려하자.

(a) X-Height는 소문자 ‘x’의 높이를 기준으로 폰트 크기를 정의하는 개념이예요. X-Height가 너무 낮으면 작은 글자의 가독성이 떨어지고, 반대로 너무 높으면 텍스트간 균형이 깨져보입니다.

✏️ 좋은 X-Height 폰트 추천

UI에서는 X-Height가 적절히 높은 서체가 더 읽기 쉽고 가독성이 좋습니다.

San Francisco (Apple)

Inter (Google)

Roboto (Android)

(b) 같은 글꼴 패밀리(굵기, 이텔릭 정도의 베리에이션만 존재) 내에서 폰트를 활용하면 글꼴의 높이와 너비가 유사해져 자간을 일관되게 유지하기가 쉬워집니다. 만약 두 가지 이상의 폰트를 섞어써야하는 상황이라면, 최대한 서체 분위기와 스타일이 비슷한 조합을 사용하는걸 권장합니다.

✏️ 다른 패밀리 폰트끼리 섞어 쓰는 팁

X-hight 값이 유사하거나, 둥글림 정도가 비슷하거나. 여러 디테일을 살펴보며 스타일을 맞추는 겁니다.

리듬감 있는 타이포그래피 사례:

Apple의 Human Interface Guidelines (HIG) & iOS 기본 앱 디자인

위에서 소개된 개념들은 Apple의 iOS 기본 앱과 Human Interface Guidelines(HIG)에서 잘 드러납니다. 텍스트 경험이 두드러지는 매모 앱을 예로 들어볼게요. Apple의 메모 인터페이스는 매우 단순해 보이지만, 텍스트 리듬과 가독성을 극대화하는 요소들을 쉽게 발견할 수 있습니다.

에이 설마하며 뜯어봤는데 진짜더군요

❶ 일관된 행간과 자간 조절

본문 텍스트는 San Francisco 폰트를 사용하며, 150~180%의 넉넉한 줄 간격(line height)을 적용해 읽기 편함.

자간(letter spacing)도 기본적으로 적절히 조정되어 있어, 작은 글씨에서도 글자가 뭉쳐 보이지 않음.

❷ 화이트스페이스와 8pt 그리드 사용

각 메모 항목과 본문 사이의 여백이 8pt, 16pt 단위로 균일하게 설정됨.

적절한 마진과 패딩을 활용해 사용자가 메모 내용을 쉽게 구분할 수 있음.

❸ 명확히 구분되는 텍스트 계층 구조

타이틀, 일정, 각 메모에서의 메모 제목과 본문간 시각적 계층 구분이 확실(폰트 굵기, 크기, 색상)

❹ X-Height가 높은 서체 선택

San Francisco는 X-Height가 높은 폰트로, 작은 크기에서도 가독성이 뛰어남.

모바일에서도 텍스트 크기를 줄이더라도 쉽게 읽히는 이유.

❺ 대비(Contrast)와 컬러 활용

다크모드에서도 텍스트 대비(contrast)를 7:1 이상 유지하여 접근성을 강화.

* 함께 읽어보면 좋을 애플의 HCI guidelines - Typograhpy

https://developer.apple.com/kr/design/human-interface-guidelines/typography

타이포그래피 | Apple Developer Documentation

타이포그래피 선택지는 가독성 있는 텍스트를 표시하고, 정보 계층을 명시하고, 중요한 콘텐츠를 전달하며, 브랜드 또는 스타일을 선보일 수 있습니다.

https://docs.developer.apple.com/kr/design/human-interface-guidelines/typography

UX를 비롯한 모든 디자이너는

타이포그래퍼(Typographer)가 되어야한다.

텍스트는 단순히 정보 전달 도구가 아닌, 사용자의 눈이 따라가는 '길'과도 같아요. 따라서 적절한 타이포그래피 리듬을 설계하는 것은 곧 사용자의 경험을 설계하는 것이며, 이런 디테일의 차이는 서비스의 첫인상과 완성도를 크게 좌우합니다. UI내 텍스트 디자인은 단순히 어떤 멋진 폰트를 쓸 것인지 고민하는데 끝나는게 아니라, 굉장히 섬세하고 지엽적인 노력이 필요한 영역. UX 디자이너는 타이포그래퍼가 되어야만 합니다.