텍스트와 폰트 — 가독성을 결정하는 타이포그래피

텍스트 도구 기본 사용

단축키: T

포인트 텍스트 (클릭 후 타이핑):
캔버스 클릭 → 타이핑 → 내용에 맞게 너비 자동 조절
언제 사용: 제목, 버튼 레이블, 짧은 텍스트

박스 텍스트 (드래그로 영역 지정):
캔버스 드래그 → 고정된 너비 안에서 줄바꿈
언제 사용: 본문, 설명문, 긴 텍스트

변환:
포인트 텍스트 더블클릭 핸들 → 박스 텍스트로 전환
박스 텍스트를 내용에 맞게 줄이면 포인트로 전환

폰트 설정 패널 완전 해부

항목	위치	핵심 팁
Font Family	오른쪽 패널 Text	검색창에 폰트명 타이핑, 한국어는 "Noto Sans KR"
Font Style	폰트명 오른쪽	Regular / Medium / SemiBold / Bold / ExtraBold
Font Size	크기 입력란	Ctrl+Shift+. / , 로 1px 조절
Line Height	행간 아이콘	본문 1.5~1.7, 제목 1.1~1.3 권장
Letter Spacing	자간 아이콘	제목 -1~-3%, 본문 0~2%
Paragraph Spacing	단락 간격	Font Size의 50~75% 값 권장
Text Align	정렬 아이콘 4개	한국어/영어 본문은 Left 고정
Text Decoration	U / S 아이콘	밑줄, 취소선
Text Transform	AA / Aa / aa	Uppercase / Capitalize / Lowercase

타이포그래피 스케일 — 8pt 시스템

UI 디자인에서 모든 크기는 8의 배수(또는 4의 배수)로 맞추면 개발 시 일관성이 유지됩니다.

Display:    56px / Bold    / Line Height: 1.1
H1:         40px / Bold    / Line Height: 1.2
H2:         32px / SemiBold / Line Height: 1.25
H3:         24px / SemiBold / Line Height: 1.3
H4:         20px / Medium  / Line Height: 1.35
Body L:     18px / Regular / Line Height: 1.6
Body M:     16px / Regular / Line Height: 1.65
Body S:     14px / Regular / Line Height: 1.7
Caption:    12px / Regular / Line Height: 1.5
Label:      11px / Medium  / Line Height: 1.4

8pt 그리드를 쓰는 이유: iOS, Android, 웹 모두 8의 배수를 기반으로 렌더링 최적화가 되어 있습니다. 디자이너-개발자 간 "딱 떨어지는" 값을 공유하면 구현 오류가 줄어듭니다.

Text Style — 타이포그래피 시스템 구축

스타일 등록:
1. 텍스트 선택 → 오른쪽 패널 Text 섹션 우측 "+" 클릭
2. 이름 입력 (예: "Heading/H1") → Create Style

스타일 적용:
텍스트 선택 → 오른쪽 패널 Text 섹션 점 4개 아이콘 → 저장된 스타일 클릭

스타일 편집:
Assets 패널(Ctrl+Alt+O) → Text Styles → 스타일 우클릭 → Edit

네이밍 컨벤션 (슬래시로 폴더화):
Heading/H1
Heading/H2
Body/Regular
Body/Bold
Caption/Default
Label/Small

Google Fonts 연동

방법 1 (자동):
폰트 패밀리 검색창에 Google Fonts 이름 그대로 입력
예) "Pretendard" 검색 → 목록에 나타나면 선택

방법 2 (Figma 플러그인):
Plugins → "Google Fonts" 설치 → 원하는 폰트 선택 후 Apply

한국어 프로젝트 추천 폰트:
Noto Sans KR   — 가장 범용적, Google Material
Pretendard     — 한국 스타트업 선호도 1위
Spoqa Han Sans Neo — 깔끔한 현대적 감각
Nanum Gothic   — 뉴스/공공기관 느낌

영문 조합 추천:
제목: Inter, Outfit, Satoshi
본문: Inter, Manrope, DM Sans

실습 — 4단계 텍스트 계층 만들기

목표: 카드 UI에 들어갈 텍스트 계층 구조 완성

Step 1: 프레임 생성
F → 400x300 프레임 생성, Fill: 흰색

Step 2: 텍스트 4개 배치
T → 클릭 → "AI 디자인의 미래" → Font Size: 24, Bold
T → 클릭 → "클로드로 만드는 UI 시스템" → 18, SemiBold
T → 클릭 → "본문 내용이 들어가는 자리입니다. 독자가 핵심 정보를 빠르게 파악할 수 있도록 2-3문장으로 요약합니다." → 14, Regular, Line Height: 1.65
T → 클릭 → "2024.12 · 5분 읽기" → 12, Regular, Color: #9ca3af

Step 3: Text Style 등록
각 텍스트 선택 → + 클릭 → 이름 지정:
"Heading/H3" / "Heading/H4" / "Body/Regular" / "Caption/Default"

Step 4: 수직 정렬
4개 선택 → 오른쪽 패널 Space Between → 수직 간격 12px

관련 검색어  ·  피그마 텍스트, 피그마 폰트 설정, 피그마 타이포그래피 시스템, Figma Text Style, 8pt 그리드, 피그마 구글 폰트, Pretendard 피그마