원본 Gist
Apple Human Interface Typography Guide (Figma 중심 에디션)
Figma 중심의 워크플로우 내에서 Apple의 타이포그래피에 대한 Human Interface Guidelines(HIG)를 구현하기 위한 상세하고 실행 가능한 가이드입니다.
1. Figma의 타이포그래피 기초
시스템 글꼴군 사용법
- SF Pro: macOS에서 기본적으로 사용 가능. Figma에서는 "SF Pro"를 사용합니다 (사전 설치되지 않은 경우 수동으로 가져오기).
- SF Pro Text (≤19pt): 본문 텍스트에 사용. Apple의 사양에 맞게 자간을 수동으로 추가합니다 (예: 17pt = -0.43px).
- SF Pro Display (≥20pt): 헤더에 이상적. 그에 따라 글자 간격을 조정합니다 (예: 28pt = -0.8px).
- SF Mono: 코드 또는 표 형식 요소에 사용합니다.
- New York (NY): 편집 레이아웃에 사용합니다.
글꼴 메트릭스 및 기술적 정확성
- 줄 높이 (Leading): SF Pro Text의 경우 120–130%, Display의 경우 110–120%를 사용합니다. Figma에서는 포인트 크기에 따라 수동으로 설정합니다 (예: 17pt → ~22pt).
- 자간 (Tracking): Figma에서 텍스트 스타일별로 사용자 정의 글자 간격을 허용합니다. Apple 사양에 맞게 특정 값을 입력합니다.
- 두께 사용 계층: Regular(기본), Medium(보조 헤더), Semibold(섹션 헤더/버튼), Bold(주요 CTA)로 계층을 정의하고 Figma 라이브러리에서 고유한 텍스트 스타일로 정의합니다.
2. Figma에서 시맨틱 텍스트 스타일 시스템 구축
Figma 라이브러리에서 Apple의 Dynamic Type 스타일을 직접 복제합니다.
| 스타일 | 크기 | 두께 | 자간 | 줄 높이 | 사용 사례 |
|---|---|---|---|---|---|
| Large Title | 34pt | Bold | -1.05px | ~41pt | 화면 제목, 히어로 텍스트 |
| Title 1 | 28pt | Bold | -0.8px | ~34pt | 섹션 제목 |
| Title 2 | 22pt | Bold | -0.7px | ~28pt | 모달 헤더 |
| Title 3 | 20pt | Semibold | -0.6px | ~25pt | 목록 그룹 헤더 |
| Headline | 17pt | Semibold | -0.43px | ~22pt | 강조된 본문 |
| Body | 17pt | Regular | -0.43px | ~22pt | 주요 읽기 텍스트 |
| Callout | 16pt | Regular | -0.32px | ~20pt | 보조 설명 |
| Subhead | 15pt | Regular | 0px | ~19pt | 양식 레이블 |
| Footnote | 13pt | Regular | +0.03px | ~16pt | 메타데이터, 타임스탬프 |
| Caption 1 | 12pt | Regular | +0.12px | ~15pt | 캡션, UI 힌트 |
| Caption 2 | 11pt | Regular | +0.15px | ~14pt | 마이크로카피, 보조 정보 |
✅ 프로 팁: Figma의 텍스트 스타일 기능을 사용하여 디자인 시스템 전반에 걸쳐 이러한 설정을 중앙에서 관리하세요. "Heading / Title 1", "Body / Regular" 등 카테고리별로 스타일을 그룹화하세요.
3. Figma의 반응형 타이포그래피 및 접근성
Dynamic Type 시뮬레이션
Figma는 시스템 Dynamic Type을 직접 지원하지 않지만, 접근성 크기를 시뮬레이션하기 위해 텍스트 스타일의 크기 조절 버전을 만들 수 있습니다.
| 크기 카테고리 | 배율 (약) |
|---|---|
| Small (S) | 85–90% |
| Large (L–XL) | 110–130% |
| Accessibility XL+ | 140–300% |
접근성 디자인 테스트
Able, Contrast 또는 Stark와 같은 Figma 플러그인을 사용하여 명암비 확인, 큰 크기의 텍스트 테스트, 모션 감소 또는 투명도 환경 시뮬레이션 등을 수행합니다.
4. Figma 디자인 시스템을 위한 타이포그래피 토큰
Figma의 변수(또는 디자인 토큰 플러그인)를 사용하여 다음과 같이 정의합니다:
{"body": {"fontFamily": "SF Pro Text", "fontSize": "17pt", "fontWeight": "Regular", ...}}
플랫폼 간 고려 사항
- iOS/iPadOS: 표준 SF Pro 스타일을 사용합니다.
- macOS: 렌더링 차이를 균형 잡기 위해 약간 더 두꺼운 두께를 추가합니다.
- watchOS: SF Compact와 함께 더 큰 크기(+1–2pt)를 사용합니다.
Figma 팁: 컴포넌트 변형을 사용하여 텍스트가 여러 플랫폼에서 어떻게 적응하는지 보여줍니다.
5. 일반적인 Figma 함정 (및 해결책)
| 실수 | 해결책 |
|---|---|
| 글꼴 크기 하드코딩 | 토큰에 연결된 확장 가능한 텍스트 스타일 사용 |
| 강조를 위해 볼드만 사용 | 두께와 시맨틱 색상을 결합하되, 둘 다 사용하지 않음 |
| 접근성 크기 무시 | 200–300% 크기로 디자인 수동 미리보기 |
| SF Pro Text와 Display를 잘못 혼합 | 사용 지침 준수: Text <20pt, Display ≥20pt |
| 일관성 없는 간격 | 오토 레이아웃과 일관된 줄 높이 규칙 사용 |
Apple의 타이포그래피 원칙을 Figma 스타일, 컴포넌트 라이브러리, 디자인 토큰에 직접 내장함으로써 확장 가능하고 접근 가능하며 개발 준비가 된 인터페이스를 보장하여 Apple 디자인 철학의 명확성과 깊이를 존중할 수 있습니다.