들어가며
Apple Human Interface Guidelines (HIG)는 1987년 Macintosh II 시절부터 갱신되어온 Apple의 디자인 헌법이다. 큰 그림과 핵심 원칙, 그리고 2025년에 들어온 큰 변화 Liquid Glass 까지 살펴보자.
가장 인상 깊었던 지점은 Glass 효과들이 VisionOS 관련된 것이라는 점, 컨트롤과 콘텐츠의 연관관계를 생각한 UI/UX라는 게 가장 흥미로웠던 것 같다.
그럼 고고
1. 큰 그림 - 6개 대분류
| 카테고리 | 다루는 것 |
|---|---|
| Platforms | iOS/iPadOS/macOS/watchOS/tvOS/visionOS 별 특성 |
| Foundations | 색상, 타이포, 아이콘, 접근성, 모션 등 토대 |
| Patterns | 검색/온보딩/모달 같은 인터랙션 패턴 |
| Components | 버튼/시트/내비게이션 바 같은 부품 |
| Inputs | 터치/키보드/제스처/음성 |
| Technologies | Apple Pay/iCloud/Game Center 통합 |
분류 순서가 철학을 드러내나 싶은데, 콘텐츠 → 인터랙션 → 컴포넌트 순. "버튼을 어떻게 그릴까"보다 "사용자가 무엇을 하나"가 먼저다.
2. 핵심 원칙 - Clarity, Deference, Depth
HIG 전체를 관통하는 3원칙이 있다.
- Clarity (명료함) - "Text is legible at every size. Icons are precise and lucid." 텍스트는 어떤 크기에서도 읽혀야 하고, 아이콘은 정확해야 한다
- Deference (콘텐츠 우선) - "The UI helps people understand the content, but never competes with it." UI는 콘텐츠를 빛나게 하는 보조 역할일 뿐이다
- Depth (계층) - "Visual layers and realistic motion convey hierarchy." 레이어와 모션으로 계층을 전달한다
여기에 암묵적 4번째 원칙 Consistency - 같은 패턴은 같은 동작을 한다. Apple 사용자가 처음 본 앱도 익숙하게 느끼는 토대다.
3. Foundations - 토대를 이루는 것들
핵심 토픽들.
- Accessibility - 44×44 pt 최소 터치 타겟, Dynamic Type, VoiceOver
- Color - 의미 기반 시스템 컬러 (
systemBlue,label,secondaryLabel) - Typography - San Francisco 폰트 (
SF Pro Text≤19pt /SF Pro Display≥20pt) - Icons - SF Symbols 5,000개 이상
- Materials - vibrancy / blur. 반투명 위에서도 텍스트 가독성 유지
- Motion - 출처와 목적지를 잇는 의미 있는 전환
이 중 두 가지는 다른 디자인 시스템과 결정적으로 다르다.
SF Symbols
폰트처럼 다루는 아이콘. 텍스트 옆에 배치하면 베이스라인이 자동으로 맞고, 굵기도 같이 변한다. 별도 아이콘 폰트가 아니라 타이포의 일부로 설계됐다는 게 차이인 것 같다.
Dynamic Type
사용자가 시스템 설정에서 폰트 크기를 키우면 모든 앱이 따라간다. 디자이너는 px이 아니라 시맨틱 크기 (title, body, caption) 를 지정하고, 시스템이 실제 px을 결정. 웹의 rem + clamp() 와 비슷한 내용인 것 같다.
4. Liquid Glass - 2025년 큰 변화
WWDC25에서 발표된 새 디자인 언어가 Liquid Glass다.
핵심 특성:
- Translucency - 광학적 굴절. 단순 blur가 아님
- Light reactivity - 환경에 따라 색상 자동 적응
- Motion - 디바이스를 기울이면 액체 방울처럼 반응
- Depth hierarchy - 콘텐츠와 컨트롤 사이 시각적 분리 강화
Craig Federighi 왈 가장 명확한 영감은 visionOS인데, 공간 컴퓨팅의 글래스 메타포가 모든 플랫폼으로 내려온 느낌을 냈다고 한다. 의미는 단순 시각 효과가 아니라 Deference 원칙을 더 강하게 밀어붙이는 장치 - 컨트롤이 콘텐츠를 덜 가린다!
5. Material Design과의 차이
| Apple HIG | Google Material | |
|---|---|---|
| 비유 | 글래스·빛·깊이 | 종이·잉크 |
| 모션 | 물리적 자연스러움 (spring) | 정보 계층 강조 (elevation) |
| 색상 | 시맨틱 시스템 컬러 | Material You의 사용자 색상 추출 |
| 컴포넌트 | 플랫폼 native 우선 | 커스텀 친화 |
요약: HIG는 chrome을 줄여 콘텐츠를 살리고, Material은 elevation으로 계층을 그린다.
6. 부록 - Dock Magnification
마지막으로, HIG 본문엔 짧게 적힌 macOS의 시그니처 인터랙션 하나 살펴보며 마무리 하려한다. Dock Magnification 인데, 마우스가 dock 위를 지나갈 때 가까운 아이콘이 부드럽게 커지는 효과다.
1999년 Mac OS X Public Beta부터 Apple이 들고 있는 모션 언어이고, "의미 있는 모션" (Depth 원칙) 이 무엇인지를 가장 짧게 보여주는 예제이기도 하다.
매 프레임마다 마우스 X 위치를 읽어서, 각 아이콘이 마우스에서 얼마나 떨어져 있는지를 계산하는 방식으로 따라 만들었다. (거리 직접 측정)