글자에 크기 · 굵기 · 행간의 차이를 주어 읽는 순서를 만들고, 이를 Text Style로 등록해 화면 전체에서 일관되게 사용한다.
오늘 배운 것
- 크기 · 굵기 · 행간으로 타이포그래피 위계 만들기
- 자주 사용하는 글자 규칙을 Text Style로 등록하기
- 역할을 기준으로 Text Style 이름 정하기
- 섹션마다 필요한 스타일 적용하기
- 데스크탑과 모바일의 타이포그래피 차이 조정하기
01. 타이포그래피 위계
위계란?
위계(Hierarchy)는 화면에서 무엇을 먼저 읽고, 무엇을 나중에 읽을지를 구분하는 것이다.
모든 글자가 같은 크기와 굵기라면 제목, 본문, 부가 설명이 구분되지 않아 사용자가 모든 내용을 한 번씩 읽어야 한다.
반대로 중요한 글자를 크게 하고 부가적인 글자를 작게 만들면 자연스럽게
제목 → 본문 → 보조 설명
순으로 시선이 이동한다.
예쁜 글꼴을 고르는 것보다 읽는 순서를 만드는 것이 먼저다.
02. 위계를 만드는 3가지 값
타이포그래피 위계는 기본적으로 크기 · 굵기 · 행간으로 만든다.
| 값 | 역할 | 예시 |
|---|---|---|
| 크기 Size | 읽는 순서를 정함 | 본문 16 / 제목 24~40 |
| 굵기 Weight | 같은 크기 안에서 강조함 | 본문 Regular / 제목 Bold |
| 행간 Line Height | 줄 사이의 공간과 가독성을 조절함 | 본문 150% / 제목 120% |
① 크기
가장 직접적으로 읽는 순서를 만드는 방법이다.
큰 글자 → 작은 글자
순으로 눈에 들어오기 때문에 제목과 본문의 크기 차이를 확실하게 둔다.
② 굵기
크기가 같거나 비슷한 글자 사이에서 중요도를 구분한다.
예를 들어,
제목 → Bold
본문 → Regular
처럼 사용할 수 있다.
모든 글자를 Bold로 만들면 오히려 강조의 차이가 사라지므로 강조가 필요한 부분에만 굵기를 사용한다.
③ 행간
행간(Line Height)은 여러 줄로 된 글자의 줄과 줄 사이 간격이다.
이번 수업의 시작 기준은 다음과 같다.
본문 → 150%
제목 → 120%
예를 들어 본문이 16px이라면,
[16 × 1.5 = 24px]
이므로 150%의 행간은 24px이 된다.
Figma에서 행간을 설정할 때는 px뿐 아니라 % 단위도 사용할 수 있다.
03. 글꼴은 적게 사용한다
타이포그래피의 위계는 여러 글꼴을 섞어서 만드는 것이 아니라 하나의 글꼴 안에서 크기와 굵기를 조절하는 것부터 시작한다.
이번 수업의 기준은 다음과 같다.
- 글꼴: 1개
- 크기: 약 2~3개부터 시작
- 굵기: 필요한 만큼 최소한으로 사용
한글 UI에서는 Pretendard 또는 Noto Sans KR처럼 가독성이 좋은 글꼴을 사용할 수 있다.
글꼴을 많이 섞기보다 한 글꼴을 기준으로 체계를 만드는 편이 화면을 일관되게 관리하기 쉽다.
04. 기본 Text Style 6개 만들기
이번 실습에서는 총 6개의 Text Style을 만든다.
| Style | 크기 · 굵기 | 사용 위치 |
|---|---|---|
| Heading 1 | 40 / Bold | 핵심 메시지 |
| Heading 2 | 28 / Bold | 섹션 제목 |
| Heading 3 | 20 / Bold | 카드 제목 |
| Body | 16 / Regular | 본문, 리뷰 |
| Caption | 13 / Regular | 성분표, 안내 문구 |
| CTA | 16 / Bold | 버튼 |
처음부터 비슷한 크기의 스타일을 지나치게 많이 만드는 것보다, 실제 화면에서 역할이 분명한 몇 개의 스타일로 시작하는 것이 좋다.
05. Text Style
Text Style이란?
Text Style은 글자의 설정을 하나의 규칙으로 저장해 재사용하는 기능이다.
예를 들어 Body Style에
16px / Regular / Line Height 150%
를 등록하면, 본문마다 크기와 행간을 직접 입력할 필요 없이 Body 스타일만 적용하면 된다.
그리고 나중에 Body의 행간을 수정하면 해당 스타일을 사용하는 텍스트를 한꺼번에 변경할 수 있다.
즉,
Auto Layout = 배치 규칙
Text Style = 글자 규칙
이라고 생각하면 쉽다.
06. Figma에서 Text Style 등록하기
텍스트를 선택한 뒤 Typography 영역에서 Style 아이콘을 눌러 현재 설정을 스타일로 등록한다.
- 제품 카드의 제품명 → Heading 3
- 제품 설명 → Body
- 성분표 등 보조 정보 → Caption
- 버튼 글자 → CTA
- 첫 화면 메시지 → Heading 1
- 섹션 제목 → Heading 2
최종적으로 스타일 목록에 6개의 스타일이 만들어지면 된다.
07. 스타일 이름은 모양이 아니라 역할로 짓기
스타일 이름은
큰 글씨
작은 글씨
버튼
처럼 현재 보이는 모양이나 특정 화면을 기준으로 짓기보다 역할을 기준으로 이름을 붙인다.
예를 들어,
Heading/H1
Heading/H2
Body/Regular
Caption/Regular
CTA/Bold
처럼 정리할 수 있다.
왜 역할로 이름을 지을까?
디자인이 바뀌면서 H1의 크기가 40px에서 36px이 되더라도 역할은 여전히 H1이다.
반면 40px Bold처럼 값을 이름으로 사용하면 값을 수정할 때 이름까지 어색해진다.
스타일 이름 = 어디에 쓰는 글자인가
로 생각하면 된다.
08. Text Style을 사용하는 이유
Text Style의 가장 큰 장점은 한 곳만 수정해도 같은 규칙을 사용하는 글자가 함께 바뀐다는 것이다.
스타일 없이 작업하면
본문의 행간을 바꾸고 싶을 때 화면에 있는 본문을 하나씩 찾아 수정해야 한다.
스타일을 사용하면
Body Style → Line Height 150%
처럼 Style 자체를 수정한다.
→ Body를 적용한 텍스트가 모두 같은 규칙으로 변경된다.
그래서 화면이 커지고 반복되는 요소가 많아질수록 Text Style의 효과가 커진다.
09. 섹션에 스타일 적용하기
모든 화면에서 모든 스타일을 사용할 필요는 없다.
콘텐츠의 역할에 따라 필요한 위계만 사용한다.
| 섹션 | 사용할 스타일 | 확인할 것 |
|---|---|---|
| 첫 화면 | Heading 1 + Body + CTA | 핵심 메시지가 가장 먼저 보이는가 |
| 제품 정보 | Heading 3 + Body + Caption | 이름 → 설명 → 부가 정보 순으로 읽히는가 |
| 리뷰 카드 | Body + Caption | 리뷰와 작성 정보가 구분되는가 |
적용 순서
- 기존 레이아웃에서 섹션 하나를 고른다.
- 각 텍스트의 역할을 판단해 Style을 적용한다.
- 화면에서 멀리 떨어져 보거나 흑백으로 보면서 읽는 순서가 생겼는지 확인한다.
핵심은 단순히 스타일을 적용했다는 사실이 아니라,
눈을 가늘게 뜨고 봐도 큰 글자 → 작은 글자 순으로 위계가 보이는가?
이다.
10. 모바일에서는 무엇이 달라질까?
화면이 작아졌다고 모든 글자를 함께 줄이는 것은 아니다.
이번 수업에서는 제목 계층을 중심으로 크기를 줄인다.
| Style | Desktop | Mobile |
|---|---|---|
| Heading 1 | 40 | 28 |
| Heading 2 | 28 | 22 |
| Body · CTA | 16 | 16 |
| Caption | 13 | 12 |
본문은 모바일에서도 읽을 수 있는 크기를 유지하고, 화면에서 큰 비중을 차지하는 제목을 단계적으로 줄이는 방식이다.
즉,
화면이 작아진다 ≠ 모든 글자가 작아진다
라고 기억하면 된다.
11. 자주 하는 실수
크기 종류가 너무 많다
13 / 14 / 15 / 16...
처럼 비슷한 크기를 계속 추가하면 오히려 위계가 잘 보이지 않는다.
→ 처음에는 정해놓은 Style 안에서 해결한다.
전부 Bold로 사용한다
모든 글자가 강조되면 결국 아무것도 강조되지 않는다.
→ 제목이나 CTA처럼 실제 강조가 필요한 요소에 사용한다.
행간이 너무 좁다
특히 여러 줄의 본문에서 행간이 좁으면 읽기 어려워진다.
→ 본문은 우선 150% 정도를 기준으로 시작해본다.
12. 막힐 때 확인할 것
| 문제 | 확인할 것 |
|---|---|
| Style 아이콘이 안 보임 | 텍스트 레이어를 선택했는지 |
| 원하는 글꼴이 없음 | 해당 글꼴이 설치되어 있는지 |
| 행간이 이상함 | px / % 중 어떤 단위를 사용했는지 |
| 위계가 잘 안 보임 | 제목과 본문의 크기 차이가 충분한지 |
| 화면이 복잡해 보임 | 비슷한 크기나 굵기를 너무 많이 사용하지 않았는지 |
⭐ 오늘 기억해둘 것
1. 타이포그래피는 읽는 순서를 만든다
크기 · 굵기 · 행간을 이용해 무엇부터 읽어야 하는지 보여준다.
2. Text Style은 글자의 규칙이다
Heading 3단 · Body · Caption · CTA
처럼 역할별 Style을 만들어 반복해서 사용한다.
한 번 등록해두면 나중에 Style 한 곳만 수정해도 전체 화면에 동일한 변경을 적용할 수 있다.
3. 화면에 적용해야 위계가 보인다
Style을 만드는 것 자체가 목적이 아니라 실제 섹션에 적용한 뒤
제목 → 본문 → 보조 정보
순으로 자연스럽게 읽히는지 확인해야 한다.
Auto Layout이 배치의 규칙이라면, Text Style은 글자의 규칙이다.
