# Human Interface Guidelines (HIG)

> 애플의 디자인 철학으로, 명료성, 존중, 깊이를 핵심 가치로 합니다.

- 층: 레퍼런스 (디자인 언어)
- ID: human-interface-guidelines
- 연도: 1987
- 제작자: Apple
- 무드 태그: 미니멀, 신뢰감
- 출처: 빌더스게이트 디자인 피팅룸 — https://ui.buildersgate.com/styles/human-interface-guidelines

## 정의

애플의 디자인 철학으로, 명료성, 존중, 깊이를 핵심 가치로 합니다.

## 역사·배경

1987년 Mac용 첫 가이드라인 발행. 이후 iOS, iPadOS, macOS, watchOS, tvOS로 범위를 넓히며 세계에서 가장 영향력 있는 디자인 가이드라인으로 발전.

## 주요 특징

- 명료한 계층 구조
- 부드러운 애니메이션
- SF 폰트 사용
- 네이티브 컨트롤
- 일관된 내비게이션

## 핵심 원칙

- 명료성 (Clarity)
- 존중 (Deference)
- 깊이 (Depth)

## 컬러 시스템

시스템 tint color 기반. 사용자의 iOS/macOS accent color를 따르는 적응형 시스템

### 색상 역할

- tint: 링크, 버튼, 강조 — 시스템 accent color 사용 (사용자 변경 가능)
- background: 순수 흰색(라이트) 또는 시스템 검정(다크) — OS가 결정
- grouped-background: 섹션 구분용 약한 회색 배경
- label: 텍스트 색 — 시스템 정의 (primary/secondary/tertiary/quaternary 4단계)
- separator: 구분선 색 — 반투명 회색

### 색상 제약

- 임의 HEX 색 직접 지정 지양 — 시스템 semantic color 사용 권장 (UIColor.systemBlue 등)
- 단일 tint color만 사용 — 색상 혼잡 배제
- 라이트/다크 모드 automatic color 필수 지원

### 다크모드 전략

Automatic color asset로 두 모드를 하나의 토큰으로 처리. 직접 다크 색상 지정은 최소화

### 대비 요구사항

WCAG AA 이상. Dynamic Type과 함께 고령·저시력 사용자 지원 필수

## 타이포그래피

- 폰트 성격: 시스템 폰트(-apple-system, SF Pro) 최우선. 직접 고른 폰트는 SF와 유사한 휴머니스트 산세리프
- 권장 폰트 수: 최대 1개
- 타입 스케일: Dynamic Type Scale — 고정 비율 없음, 사용자 접근성 설정에 따라 자동 조정

### 타이포그래피 제약

- SF Pro 미사용 시 Dynamic Type 크기 단계 반드시 준수 (largeTitle/title1~3/body/callout/subhead/footnote/caption)
- 커스텀 폰트 사용 시 scaledFont로 Dynamic Type 지원 필수
- letter-spacing 임의 조정 금지 — SF Pro는 optical tracking 내장

## 설계 제약

### 하면 안 되는 것

- 시스템 컨트롤 외관 임의 변형 금지 (UIButton 등 native control 유지 권장)
- 하단 safe area 침범 금지
- gesture 충돌 — 시스템 swipe-back 등 native gesture와 겹치는 커스텀 제스처 금지
- 모달 남용 금지 — 최소한의 context에서만 사용

### 반드시 포함할 것

- Safe Area 완전 지원 (notch, Dynamic Island, home indicator)
- Dynamic Type 지원 — 모든 텍스트가 접근성 글꼴 크기에 대응
- Haptic Feedback — 주요 인터랙션에 촉각 피드백

### 모션 가이드

spring 기반 물리 애니메이션 (UISpringTimingParameters). 화면 전환은 iOS 표준 push/modal 사용. 커스텀 전환은 시스템 제스처와 연동.

## 무드 프로파일

4축 각각 −2 ~ +2 정수. 취향 테스트(/fit)와 비교 페이지가 같은 좌표를 쓴다.

- 밀도: -1 (여백 −2 ↔ +2 빽빽)
- 온도감: 0 (차가움 −2 ↔ +2 따뜻함)
- 시대감: 0 (레트로 −2 ↔ +2 미래적)
- 격식: +1 (자유분방 −2 ↔ +2 격식)

## 사용 사례

- iOS / iPadOS 앱
- macOS 앱
- watchOS / tvOS 앱
- Apple 생태계 서비스

## 추천 프로젝트 유형

- iOS 앱
- macOS 앱
- Apple 생태계 서비스
- 프리미엄 소비자 앱

## 장단점

### 장점

- 전 세계 iPhone 사용자에게 친숙한 UX
- 시스템과 깊이 통합된 자연스러운 경험
- 고급스럽고 프리미엄한 이미지
- SwiftUI로 빠른 구현 가능

### 단점·한계

- Apple 플랫폼에 한정
- 웹에서 그대로 구현 어려움
- 엄격한 가이드라인으로 커스터마이징 제한

## 실제 사용 제품·서비스

- iOS 설정 앱
- Safari
- iMessage
- Apple Music
- Airbnb iOS 앱

## 접근성

Dynamic Type(텍스트 크기 자동 조정), VoiceOver, Switch Control 등 접근성 기능이 시스템 레벨에서 강력하게 지원됨.

## 자주 묻는 질문

### Q1. Human Interface Guidelines (HIG)이란 무엇인가요?

애플의 디자인 철학으로, 명료성, 존중, 깊이를 핵심 가치로 합니다. 1987년 Mac용 첫 가이드라인 발행. 이후 iOS, iPadOS, macOS, watchOS, tvOS로 범위를 넓히며 세계에서 가장 영향력 있는 디자인 가이드라인으로 발전.

### Q2. Human Interface Guidelines (HIG)의 핵심 디자인 원칙은 무엇인가요?

Human Interface Guidelines (HIG)의 핵심 원칙은 명료성 (Clarity), 존중 (Deference), 깊이 (Depth)입니다.

### Q3. Human Interface Guidelines (HIG)은 어떤 프로젝트에 적합한가요?

Human Interface Guidelines (HIG)은 iOS / iPadOS 앱, macOS 앱, watchOS / tvOS 앱, Apple 생태계 서비스, iOS 앱, macOS 앱, Apple 생태계 서비스, 프리미엄 소비자 앱 등의 프로젝트에 적합합니다.

### Q4. Human Interface Guidelines (HIG)의 장단점은 무엇인가요?

장점으로는 전 세계 iPhone 사용자에게 친숙한 UX, 시스템과 깊이 통합된 자연스러운 경험, 고급스럽고 프리미엄한 이미지, SwiftUI로 빠른 구현 가능이 있습니다. 단점으로는 Apple 플랫폼에 한정, 웹에서 그대로 구현 어려움, 엄격한 가이드라인으로 커스터마이징 제한이 있습니다.

### Q5. Human Interface Guidelines (HIG)에서 색상은 어떻게 사용하나요?

시스템 tint color 기반. 사용자의 iOS/macOS accent color를 따르는 적응형 시스템 색상 역할은 tint: 링크, 버튼, 강조 — 시스템 accent color 사용 (사용자 변경 가능), background: 순수 흰색(라이트) 또는 시스템 검정(다크) — OS가 결정, grouped-background: 섹션 구분용 약한 회색 배경입니다. 주의사항: 임의 HEX 색 직접 지정 지양 — 시스템 semantic color 사용 권장 (UIColor.systemBlue 등), 단일 tint color만 사용 — 색상 혼잡 배제.

### Q6. Human Interface Guidelines (HIG)에 어울리는 폰트 스타일은 무엇인가요?

Human Interface Guidelines (HIG)에는 시스템 폰트(-apple-system, SF Pro) 최우선. 직접 고른 폰트는 SF와 유사한 휴머니스트 산세리프 폰트가 적합합니다. 최대 1개 폰트 패밀리 사용을 권장합니다. 제약 사항: SF Pro 미사용 시 Dynamic Type 크기 단계 반드시 준수 (largeTitle/title1~3/body/callout/subhead/footnote/caption), 커스텀 폰트 사용 시 scaledFont로 Dynamic Type 지원 필수.

### Q7. Human Interface Guidelines (HIG) 디자인에서 하면 안 되는 것은 무엇인가요?

Human Interface Guidelines (HIG)에서 피해야 할 것: 시스템 컨트롤 외관 임의 변형 금지 (UIButton 등 native control 유지 권장), 하단 safe area 침범 금지, gesture 충돌 — 시스템 swipe-back 등 native gesture와 겹치는 커스텀 제스처 금지, 모달 남용 금지 — 최소한의 context에서만 사용.

### Q8. Human Interface Guidelines (HIG)을 사용하는 실제 서비스나 제품은 무엇이 있나요?

Human Interface Guidelines (HIG)을 적용한 대표적인 제품·서비스로는 iOS 설정 앱, Safari, iMessage, Apple Music, Airbnb iOS 앱 등이 있습니다.

## 참고 디자인 토큰

> 아래 토큰은 이 스타일의 참고 구현 예시다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템·타이포그래피·설계 제약은 지킨다.

### 색상

- primary: #007AFF
- secondary: #5856D6
- accent: #FF9500
- background: #FFFFFF
- surface: #F2F2F7
- text: #000000
- textSecondary: #8E8E93
- border: #C6C6C8

### 타이포그래피

- fontFamily: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Noto Sans KR', sans-serif
- headingWeight: 700
- bodyWeight: 400
- letterSpacing: -0.01em

### 간격·반경·그림자·테두리

- spacing: unit 8px × scale 1
- borderRadius: sm 10px / md 14px / lg 20px / full 9999px
- shadow sm: 0 1px 3px rgba(0,0,0,0.08)
- shadow md: 0 4px 12px rgba(0,0,0,0.08)
- shadow lg: 0 12px 24px rgba(0,0,0,0.08)
- border: 0.5px solid #C6C6C8

### 컴포넌트 형태

- button: pill / hover darken / text none
- card: elevated / hover lift
- input: filled / focus ring
- badge: pill / solid
- icon: lucide / stroke 1.5 / size 22px
- layout: boxed / section normal
- animation: 350ms cubic-bezier(0.25, 0.1, 0.25, 1)
- specialEffects: glassmorphism

## 관련 링크

### 관련 스타일

- [Fluent Design System](https://ui.buildersgate.com/styles/fluent-design)
- [Material Design](https://ui.buildersgate.com/styles/material-design)
- [Minimalism](https://ui.buildersgate.com/styles/minimalism)

### 데모 (같은 화면, 이 스타일로)

- [브랜드 랜딩 데모](https://ui.buildersgate.com/demo/brand/human-interface-guidelines)
- [SaaS 대시보드 데모](https://ui.buildersgate.com/demo/saas/human-interface-guidelines)
- [커머스 데모](https://ui.buildersgate.com/demo/commerce/human-interface-guidelines)

### 비교

- [Human Interface Guidelines (HIG) vs Astryx (Meta 디자인 시스템)](https://ui.buildersgate.com/compare/astryx-vs-human-interface-guidelines)
- [Human Interface Guidelines (HIG) vs Fluent Design System](https://ui.buildersgate.com/compare/fluent-design-vs-human-interface-guidelines)
- [Human Interface Guidelines (HIG) vs LINE Design System (LDS)](https://ui.buildersgate.com/compare/human-interface-guidelines-vs-line-lds)
- [Human Interface Guidelines (HIG) vs Material Design](https://ui.buildersgate.com/compare/human-interface-guidelines-vs-material-design)
- [Human Interface Guidelines (HIG) vs Minimalism](https://ui.buildersgate.com/compare/human-interface-guidelines-vs-minimalism)
- [Human Interface Guidelines (HIG) vs Toss Design System (TDS)](https://ui.buildersgate.com/compare/human-interface-guidelines-vs-toss-design-system)

### 쓰임새별 추천

- [게임·엔터테인먼트](https://ui.buildersgate.com/for/game-entertainment)
- [모바일 앱](https://ui.buildersgate.com/for/mobile-app)

---

HTML 버전: https://ui.buildersgate.com/styles/human-interface-guidelines

이 문서는 https://ui.buildersgate.com/styles/human-interface-guidelines.md 로 제공됩니다. 전체 목록은 https://ui.buildersgate.com/llms.txt 를 참고하세요.