피그마에서 타이포 다루기

피그마 기초 스터디로그 · 03

피그마에서 타이포 다루기

BX 3일차에서 폰트의 역할을 개념으로 배웠다면,
오늘은 그걸 피그마 화면 안에서 실제로 구현하는 법을 배웠어요.

TODAY'S BASICS

오늘 배운 네 가지

1

위계

크기·굵기로 읽는 순서 만들기

2

글자 스타일

자주 쓰는 설정을 저장해두기

3

글자 규칙

줄간격·자간을 통일하는 기준

4

섹션

여러 프레임을 묶어 정리하기

01 · HIERARCHY

위계

크기·굵기로 읽는 순서 만들기

BX 3일차에서 배운 "위계" 개념을, 피그마에서는 실제 숫자 값으로 구현해요.
제목·부제목·본문마다 크기와 굵기를 다르게 줘서 읽는 순서를 만들어요.

위계 예시

제목 · 24px Bold

부제목 · 16px Semibold

본문 · 14px Regular. 이렇게 세 단계만 나눠도 화면에 순서가 생겨요.

왜 중요한가

크기 차이가 거의 없으면 뭘 먼저 읽어야 할지 헷갈리는데, 차이를 확실히 주면 눈이 알아서 순서대로 움직여요.

02 · TEXT STYLES

글자 스타일

자주 쓰는 설정을 저장해두기

폰트·크기·줄간격 조합을 스타일로 저장해두면, 매번 똑같이 설정할 필요 없이 바로 적용할 수 있어요.

저장된 스타일 목록 예시

Title/24Bold · 24px

Body/14Regular · 14px

Caption/12Regular · 12px

왜 중요한가

"Title/24" 스타일 하나만 수정해도, 그 스타일을 쓰는 모든 텍스트에 한 번에 반영돼요.
화면이 많아질수록 이 차이가 커져요.

03 · TEXT RULES

글자 규칙

줄간격·자간을 통일하는 기준

같은 크기의 글자라도 줄간격(line-height)과 자간(letter-spacing)이 들쭉날쭉하면 지저분해 보여요.
미리 기준을 정해두고 통일해서 써요.

줄간격 비교

줄간격 110% (너무 빽빽함)

한 줄이 끝나면

바로 다음 줄이

붙어버려요

→

줄간격 150% (적당함)

한 줄이 끝나면

다음 줄까지

여유가 있어요

왜 중요한가

본문은 보통 150% 안팎,
큰 제목은 좁게(100~120%) 쓰는 식으로 크기별 기준을 정해두면화면 전체 톤이 통일돼요.

04 · SECTIONS

섹션

여러 프레임을 묶어 정리하기

섹션은 여러 개의 프레임을 하나로 묶는 상위 그룹이에요.
1일차에서 배운 프레임이 화면 하나였다면, 섹션은 그 화면들을 모아두는 폴더 같은 개념이에요.

섹션 예시

📁 온보딩 플로우

 

 

 

왜 중요한가

작업이 많아지면 캔버스가 복잡해지는데, 관련 화면들을 섹션으로 묶어두면 한눈에 찾고 정리하기 쉬워져요.

🧭 오늘의 정리

BX디자인에서 배운 "왜"를, 오늘은 피그마 안에서 "어떻게"로 옮겨본 하루였어요.

위계 — 크기·굵기로 읽는 순서를 만들어요

글자 스타일 — 설정을 저장해두고 재사용해요

글자 규칙 — 줄간격·자간 기준을 통일해요

섹션 — 여러 프레임을 묶어서 정리해요