# Human Interface Guidelines (HIG) — 디자인 스타일 가이드

## 기본 정보
- **ID**: human-interface-guidelines
- **카테고리**: design-language
- **연도**: 1987
- **제작자**: Apple

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

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

## 핵심 원칙
- 명료성 (Clarity)
- 존중 (Deference)
- 깊이 (Depth)

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

## 컬러 시스템 가이드
시스템 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 사용. 커스텀 전환은 시스템 제스처와 연동.

## 사용 사례
- 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 등 접근성 기능이 시스템 레벨에서 강력하게 지원됨.

## 관련 스타일
- [fluent-design](https://ui.buildersgate.com/styles/fluent-design)
- [material-design](https://ui.buildersgate.com/styles/material-design)
- [minimalism](https://ui.buildersgate.com/styles/minimalism)

## 참고 구현 예시 (디자인 토큰)
> 아래 토큰은 이 스타일의 참고 구현 예시입니다. 프로젝트의 브랜드 컬러·폰트에 맞게 조정하되, 위 컬러 시스템/타이포그래피 가이드의 제약 조건을 준수하세요.

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

### 헤더
- background: rgba(255, 255, 255, 0.8)
- textColor: #000000
- accentColor: #007AFF

### 타이포그래피
- fontFamily: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Noto Sans KR', sans-serif
- headingWeight: 700
- bodyWeight: 400
- letterSpacing: -0.01em

### 스페이싱
- unit: 8px
- scale: 1

### 그림자 (Shadows)
- sm: 0 1px 3px rgba(0,0,0,0.08)
- md: 0 4px 12px rgba(0,0,0,0.08)
- lg: 0 12px 24px rgba(0,0,0,0.08)
- xl: 0 24px 48px rgba(0,0,0,0.10)

### Border Radius
- none: 0
- sm: 10px
- md: 14px
- lg: 20px
- full: 9999px

### 테두리 (Borders)
- width: 0.5px
- style: solid
- color: #C6C6C8

### 이펙트
- blur: 20px
- opacity: 1
- transition: all 0.35s cubic-bezier(0.25, 0.1, 0.25, 1)

### 애니메이션
- duration: 350ms
- easing: cubic-bezier(0.25, 0.1, 0.25, 1)

### 컴포넌트 토큰
- 버튼: shape=pill / hoverEffect=darken / textTransform=none
- 카드: style=elevated / hoverEffect=lift
- 인풋: style=filled / focusEffect=ring
- 배지: shape=pill / style=solid
- 아이콘: package=lucide / strokeWidth=1.5 / defaultSize=22

### 레이아웃
- containerStyle: boxed
- sectionSpacing: normal

### 특수 효과
- glassmorphism: true
- gradientText: false
- animatedBackground: false
- scanlines: false
- noise: false

## 자주 묻는 질문 (FAQ)

### Q: Human Interface Guidelines (HIG)이란 무엇인가요?
A: 애플의 디자인 철학으로, 명료성, 존중, 깊이를 핵심 가치로 합니다. 1987년 Mac용 첫 가이드라인 발행. 이후 iOS, iPadOS, macOS, watchOS, tvOS로 범위를 넓히며 세계에서 가장 영향력 있는 디자인 가이드라인으로 발전.

### Q: Human Interface Guidelines (HIG)의 핵심 디자인 원칙은 무엇인가요?
A: Human Interface Guidelines (HIG)의 핵심 원칙은 명료성 (Clarity), 존중 (Deference), 깊이 (Depth)입니다.

### Q: Human Interface Guidelines (HIG)은 어떤 프로젝트에 적합한가요?
A: Human Interface Guidelines (HIG)은 iOS / iPadOS 앱, macOS 앱, watchOS / tvOS 앱, Apple 생태계 서비스, iOS 앱, macOS 앱, Apple 생태계 서비스, 프리미엄 소비자 앱 등의 프로젝트에 적합합니다.

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

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

### Q: Human Interface Guidelines (HIG)에 어울리는 폰트 스타일은 무엇인가요?
A: 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 지원 필수.

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

### Q: Human Interface Guidelines (HIG)을 사용하는 실제 서비스나 제품은 무엇이 있나요?
A: Human Interface Guidelines (HIG)을 적용한 대표적인 제품·서비스로는 iOS 설정 앱, Safari, iMessage, Apple Music, Airbnb iOS 앱 등이 있습니다.

## API 엔드포인트
- 스타일 상세: https://ui.buildersgate.com/api/styles?id=human-interface-guidelines
- 디자인 토큰: https://ui.buildersgate.com/api/themes?id=human-interface-guidelines&merged=true

이 페이지 주소를 AI에게 보여주고 "디자인 시스템 문서를 만들어줘"라고 해보세요.

← 홈으로 돌아가기

Human Interface Guidelines (HIG)

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

연도

1987

제작자

Apple

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

#007AFF

핵심 원칙

1

명료성 (Clarity)

2

존중 (Deference)

3

깊이 (Depth)

주요 특징

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

장단점

장점

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

단점 / 한계

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

적합한 사용처

사용 사례

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

이런 프로젝트에 추천

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

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

실제 사용 예시

iOS 설정 앱SafariiMessageApple MusicAirbnb iOS 앱

UI 컴포넌트 예제

이 디자인 스타일의 특징을 반영한 실제 UI 컴포넌트들입니다.

iOS-Style Buttons

애플 HIG의 명료하고 단순한 버튼 디자인

iOS Cards

명료한 계층 구조와 부드러운 그림자

Clear Hierarchy

HIG는 명료성을 최우선으로 하여 사용자가 콘텐츠에 집중할 수 있게 합니다.

Deference

UI는 콘텐츠를 방해하지 않고 존중하며 보조적인 역할을 합니다.

List Items

iOS 네이티브 스타일의 리스트 아이템

SF
San Francisco
System Font
DP
Depth
Layer Hierarchy
CL
Clarity
Core Principle

Toggle Switch

iOS의 아이코닉한 토글 스위치

Segmented Control

iOS 네이티브 세그먼트 컨트롤

HIG Typography

SF 폰트 기반의 Apple 타이포그래피 — Dynamic Type 시스템

Large Title (34px)

Human Interface

Title 1 (28px)

명료성, 존중, 깊이

Title 2 (22px)

Apple Design Guidelines

Body (17px)

HIG는 1987년부터 Apple이 발전시켜온 디자인 철학으로, iOS·macOS·watchOS·tvOS 전 플랫폼에서 일관되고 직관적인 사용자 경험을 목표로 합니다.

Caption 1 (12px)

Apple Inc. · 1987 · SF Pro · Dynamic Type

자주 묻는 질문

Human Interface Guidelines (HIG)이란 무엇인가요?
애플의 디자인 철학으로, 명료성, 존중, 깊이를 핵심 가치로 합니다. 1987년 Mac용 첫 가이드라인 발행. 이후 iOS, iPadOS, macOS, watchOS, tvOS로 범위를 넓히며 세계에서 가장 영향력 있는 디자인 가이드라인으로 발전.
Human Interface Guidelines (HIG)의 핵심 디자인 원칙은 무엇인가요?
Human Interface Guidelines (HIG)의 핵심 원칙은 명료성 (Clarity), 존중 (Deference), 깊이 (Depth)입니다.
Human Interface Guidelines (HIG)은 어떤 프로젝트에 적합한가요?
Human Interface Guidelines (HIG)은 iOS / iPadOS 앱, macOS 앱, watchOS / tvOS 앱, Apple 생태계 서비스, iOS 앱, macOS 앱, Apple 생태계 서비스, 프리미엄 소비자 앱 등의 프로젝트에 적합합니다.
Human Interface Guidelines (HIG)의 장단점은 무엇인가요?
장점으로는 전 세계 iPhone 사용자에게 친숙한 UX, 시스템과 깊이 통합된 자연스러운 경험, 고급스럽고 프리미엄한 이미지, SwiftUI로 빠른 구현 가능이 있습니다. 단점으로는 Apple 플랫폼에 한정, 웹에서 그대로 구현 어려움, 엄격한 가이드라인으로 커스터마이징 제한이 있습니다.
Human Interface Guidelines (HIG)에서 색상은 어떻게 사용하나요?
시스템 tint color 기반. 사용자의 iOS/macOS accent color를 따르는 적응형 시스템 색상 역할은 tint: 링크, 버튼, 강조 — 시스템 accent color 사용 (사용자 변경 가능), background: 순수 흰색(라이트) 또는 시스템 검정(다크) — OS가 결정, grouped-background: 섹션 구분용 약한 회색 배경입니다. 주의사항: 임의 HEX 색 직접 지정 지양 — 시스템 semantic color 사용 권장 (UIColor.systemBlue 등), 단일 tint color만 사용 — 색상 혼잡 배제.
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 지원 필수.
Human Interface Guidelines (HIG) 디자인에서 하면 안 되는 것은 무엇인가요?
Human Interface Guidelines (HIG)에서 피해야 할 것: 시스템 컨트롤 외관 임의 변형 금지 (UIButton 등 native control 유지 권장), 하단 safe area 침범 금지, gesture 충돌 — 시스템 swipe-back 등 native gesture와 겹치는 커스텀 제스처 금지, 모달 남용 금지 — 최소한의 context에서만 사용.
Human Interface Guidelines (HIG)을 사용하는 실제 서비스나 제품은 무엇이 있나요?
Human Interface Guidelines (HIG)을 적용한 대표적인 제품·서비스로는 iOS 설정 앱, Safari, iMessage, Apple Music, Airbnb iOS 앱 등이 있습니다.

관련 스타일 탐색

Fluent Design System

마이크로소프트의 디자인 언어로, 빛, 깊이, 모션, 재료, 스케일의 5가지 요소를 강조합니다.

Material Design

구글이 만든 디자인 시스템으로, 물리적 재료와 조명의 은유를 사용합니다.

Minimalism

"적을수록 좋다"는 철학으로, 불필요한 요소를 제거하고 본질에 집중합니다.