원본 Gist
HIG 시각 디자인
Apple의 HIG(Human Interface Guidelines) 중 시각 디자인 지침에 대한 구조화된 분석입니다.
핵심 원칙
- 명료성 (Clarity): 가독성과 직관적인 시각적 계층을 우선시합니다.
- 존중 (Deference): 콘텐츠가 돋보이도록 하고, 반투명성과 같은 미묘한 UI 요소를 사용하여 주의를 분산시키지 않습니다.
- 깊이 (Depth): 레이어, 그림자, 모션을 사용하여 공간적 관계를 만듭니다.
주요 구성 요소
1. 색상 (Color)
- 시스템 색상: 라이트/다크 모드에서 일관성을 위해 시맨틱 색상(예: 동작에
.systemBlue)을 사용합니다. - 접근성: 텍스트에 4.5:1, 비텍스트 요소에 3:1의 명암비를 보장합니다.
- 의미론적 의미: 파괴적인 행동에는 빨간색, 긍정적인 행동에는 녹색을 사용합니다.
2. 타이포그래피 (Typography)
- SF Pro: Dynamic Type을 지원하는 기본 글꼴군(19pt 이하 SF Pro Text, 20pt 이상 SF Pro Display)입니다.
- 계층 구조:
- 제목: 17–34pt (두드러지게 하기 위해 Medium 두께)
- 본문 텍스트: 표준 17pt, 보조 콘텐츠 15pt
- 최소 크기: 가독성을 위해 11pt
- 사용자 정의 글꼴: Dynamic Type 크기 조정을 지원하고 가독성을 유지해야 합니다.
3. 레이아웃 & 간격 (Layout & Spacing)
- 그리드 시스템: 정렬을 위해 8pt 기준선 그리드를 사용합니다.
- 안전 영역 (Safe Areas): 코너 노치와 홈 인디케이터를 피합니다.
- 여백 (White Space): 과밀하지 않으면서 콘텐츠 밀도를 우선시합니다(예: 44pt 이상의 터치 대상).
4. 아이콘 & 이미지 (Icons & Imagery)
- SF Symbols: 시스템 앱과의 일관성을 위해 Apple의 아이콘 세트를 사용합니다.
- 사용자 정의 아이콘: Apple의 미니멀하고 외곽선 스타일과 일치해야 합니다(사실적인 디테일 피하기).
- 이미지: 고해상도 디스플레이에 맞게 최적화합니다(iOS의 경우 3배 스케일).
5. 모션 & 전환 (Motion & Transitions)
- 목적 있는 애니메이션: 공간 관계를 강화하기 위해 미묘한 애니메이션(예: 슬라이드 전환)을 사용합니다.
- 지속 시간: 지연을 피하기 위해 애니메이션을 0.5초 미만으로 유지합니다.
플랫폼별 고려 사항
- iOS: 반투명 효과가 있는 전체 화면 레이아웃을 사용합니다.
- macOS: 포인터 입력을 위해 생생한 색상과 더 큰 클릭 가능 영역을 사용합니다.
- watchOS: 한눈에 볼 수 있도록 대비를 극대화합니다(예: 검은색 배경에 흰색 텍스트).
- visionOS: 사용자의 시야 내에 콘텐츠를 배치하고 거슬리는 움직임을 피합니다.
모범 사례
- 다크 모드: 가독성을 보장하기 위해 라이트/다크 환경 모두에서 색상을 테스트합니다.
- 지역화: 더 긴 텍스트 문자열(예: 독일어 번역)을 수용할 수 있도록 레이아웃을 디자인합니다.
- 심볼: 명확성을 위해 아이콘과 레이블을 함께 사용합니다(예: 탭 바 항목).
흔한 함정
- 과도한 스타일링: 일관성을 깨는 과도한 그라데이션, 그림자 또는 사용자 정의 컨트롤을 피합니다.
- Dynamic Type 무시: 사용자가 텍스트 환경 설정을 조정할 때 고정된 글꼴 크기는 레이아웃을 망가뜨릴 수 있습니다.
- 낮은 명암비: 흰색 배경에 밝은 회색 텍스트는 접근성 검사를 통과하지 못합니다.
이 가이드라인을 준수함으로써 디자이너는 Apple의 생태계에 네이티브한 느낌을 주면서 장치 전반에 걸쳐 접근성과 사용성을 보장하는 인터페이스를 만듭니다.