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

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

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

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

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

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

## 색상 팔레트
- Blue (#007AFF): Primary — 링크·기본 버튼
- Green (#34C759): 성공·긍정 상태
- Red (#FF3B30): 오류·삭제 액션
- Orange (#FF9500): 경고 상태
- System Background (#FFFFFF): 기본 배경 (라이트)
- Secondary Background (#F2F2F7): 그룹 배경
- Label (#000000): 텍스트 Primary
- Secondary Label (#3C3C4399): 텍스트 Secondary

## 사용 사례
- 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

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

Human Interface Guidelines (HIG)

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

연도

1987

제작자

Apple

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

#007AFF

색상 팔레트

Blue

#007AFF

Primary — 링크·기본 버튼

Green

#34C759

성공·긍정 상태

Red

#FF3B30

오류·삭제 액션

Orange

#FF9500

경고 상태

System Background

#FFFFFF

기본 배경 (라이트)

Secondary Background

#F2F2F7

그룹 배경

Label

#000000

텍스트 Primary

Secondary Label

#3C3C4399

텍스트 Secondary

핵심 원칙

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

관련 스타일 탐색