Apple Human Interface Guidelines

SF Pro와 Liquid Glass가 만드는 적응형 콘텐츠 우선 인터페이스

서양디자인 시스템소비자차가운modern-minimalglassmorphism고딕comfortableroundlayered라이트다크공식한글 지원출시 1985개정 2025

갤러리에서 열기 — 적용 예시 · 가이드 다운로드

Brand DNA

브랜드 DNA

브랜드명: Apple Human Interface Guidelines (HIG)
한 줄 정체성: 사람을 중심에 두고 콘텐츠가 인터페이스를 이끌게 하는 시스템
공식 디자인 철학: Purpose, Agency, Responsibility, Familiarity, Flexibility, Simplicity, Craft, Delight — 의미 있는 목적에서 시작해 사람의 주도권과 익숙함, 포용성, 정교함, 즐거움까지 설계
시그니처 요소 1개: SF Pro 가족 + 적응형 시스템 컬러 + Liquid Glass가 콘텐츠 위에 만드는 유연한 깊이감

Tone & Mood

톤 & 무드

핵심 키워드 3개: 정밀함, 명료함, 깊이감(deference)
무드 설명: 콘텐츠가 주인공이고 크롬은 한 발 물러난다. 밝고 어두운 적응형 캔버스 위에 정확한 타이포, 시스템 블루, 반투명 재질을 절제해 사용하여 차분하면서도 또렷하다.
비주얼 스타일: 모던 미니멀 + 글래스모피즘 (Liquid Glass와 표준 material의 계층)
밀도(Density): Comfortable — 터치 타깃 44pt 최소 보장, 손가락 친화적 여백 유지
모서리 성향: Round (12~16px, continuous corner) — iOS의 squircle/Apple superellipse
평면성: Layered — 모달, 시트, vibrancy 등 명확한 z축 위계

Color System

컬러 시스템 (CSS 변수)

:root {
  /* Primary - System Blue 9단계 */
  --color-primary-50:  #E5F1FF;  /* 가장 옅은 배경 */
  --color-primary-100: #CCE4FF;
  --color-primary-200: #99C9FF;
  --color-primary-300: #66ADFF;
  --color-primary-400: #3392FF;
  --color-primary-500: #007AFF;  /* iOS System Blue 기본 */
  --color-primary-600: #0062CC;  /* hover/pressed */
  --color-primary-700: #004999;
  --color-primary-800: #003166;
  --color-primary-900: #001833;

  /* Secondary - System Indigo */
  --color-secondary-500: #5856D6;  /* iOS System Indigo */

  /* Neutral - Apple Gray scale */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #F2F2F7;  /* systemGroupedBackground */
  --color-neutral-100:  #E5E5EA;  /* systemGray6 */
  --color-neutral-200:  #D1D1D6;  /* systemGray5 */
  --color-neutral-300:  #C7C7CC;  /* systemGray4 */
  --color-neutral-400:  #AEAEB2;  /* systemGray3 */
  --color-neutral-500:  #8E8E93;  /* systemGray */
  --color-neutral-700:  #636366;  /* systemGray2 */
  --color-neutral-800:  #48484A;
  --color-neutral-900:  #1C1C1E;  /* systemGray6 dark */
  --color-neutral-1000: #000000;

  /* Semantic - iOS system colors */
  --color-success-bg:   #E8F8EE;
  --color-success-fg:   #34C759;  /* System Green */
  --color-warning-bg:   #FFF8E1;
  --color-warning-fg:   #FF9500;  /* System Orange */
  --color-error-bg:     #FFEBEE;
  --color-error-fg:     #FF3B30;  /* System Red */
  --color-info-bg:      #E5F1FF;
  --color-info-fg:      #007AFF;

  /* Surface */
  --bg-base:     #FFFFFF;          /* systemBackground */
  --bg-subtle:   #F2F2F7;          /* secondarySystemBackground */
  --bg-elevated: #FFFFFF;          /* 카드 — 그림자로 분리 */
  --bg-overlay:  rgba(255,255,255,0.72); /* vibrancy 효과 */

  /* Text */
  --text-primary:    rgba(0,0,0,0.85);   /* labelColor */
  --text-secondary:  rgba(60,60,67,0.60); /* secondaryLabelColor */
  --text-tertiary:   rgba(60,60,67,0.30);
  --text-on-primary: #FFFFFF;
  --text-disabled:   rgba(60,60,67,0.18);

  /* Border */
  --border-default: rgba(60,60,67,0.18);
  --border-subtle:  rgba(60,60,67,0.12);
  --border-strong:  rgba(60,60,67,0.36);
  --border-focus:   #007AFF;
}

[data-theme="dark"] {
  --bg-base: #000000;
  --bg-subtle: #1C1C1E;
  --bg-elevated: #2C2C2E;
  --bg-overlay: rgba(28,28,30,0.72);
  --text-primary: rgba(255,255,255,0.92);
  --text-secondary: rgba(235,235,245,0.60);
  --text-tertiary: rgba(235,235,245,0.30);
}

Typography

타이포그래피

폰트 페어링:
- 영문: SF Pro / SF Pro Display / SF Pro Text (Apple 라이선스, Apple 플랫폼 한정)
- 한글: Apple SD Gothic Neo (macOS/iOS 번들)
위계 (Apple Dynamic Type 기준):
- Display: 48px / 700 / 1.1 / -0.022em
- H1 (Large Title): 34px / 700 / 1.2 / -0.020em
- H2 (Title 1): 28px / 600 / 1.25 / -0.017em
- H3 (Title 2): 22px / 600 / 1.3 / -0.014em
- Body Large (Headline): 17px / 600 / 1.41 / -0.011em
- Body: 17px / 400 / 1.41 / -0.011em
- Body Small (Footnote): 13px / 400 / 1.38 / -0.005em
- Caption: 11px / 400 / 1.27 / 0em

Spacing

스페이싱

Base unit: 8px (iOS 기본 그리드)
토큰: ``css --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; ``
Container: max-width 980px (Apple.com 기준), 좌우 패딩 22px (mobile) / 44px (desktop)

Border Radius

--radius-none: 0;
--radius-sm: 6px;     /* 작은 칩 */
--radius-md: 10px;    /* 버튼, 입력 */
--radius-lg: 14px;    /* 카드 */
--radius-xl: 22px;    /* 시트, 모달 (continuous corner 권장) */
--radius-full: 9999px;

Shadow / Elevation

--shadow-none: none;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.04);                          /* 평면 카드 */
--shadow-md: 0 2px 8px rgba(0,0,0,0.08);                          /* 카드 hover */
--shadow-lg: 0 8px 24px rgba(0,0,0,0.12);                         /* 모달, 팝오버 */
--shadow-xl: 0 24px 48px rgba(0,0,0,0.18);                        /* 풀스크린 sheet */

Iconography

스타일: Outline + Filled 혼합 (SF Symbols 4,000+ 글리프)
Stroke 굵기: 1.5~2px (가변 weight: ultralight ~ black)
모서리 처리: Round
추천 라이브러리: SF Symbols (Apple 플랫폼) / Lucide (웹 대체)

Component Guide

컴포넌트 가이드

Button

.btn {
  font: 600 17px/1.41 -apple-system, "SF Pro Text", sans-serif;
  letter-spacing: -0.011em;
  border-radius: var(--radius-md);
  padding: 12px 20px;
  transition: opacity 150ms ease-out, transform 100ms ease-out;
  min-height: 44px;
}
.btn-primary {
  background: var(--color-primary-500);
  color: var(--text-on-primary);
}
.btn-primary:hover { opacity: 0.85; }
.btn-primary:active { opacity: 0.7; transform: scale(0.97); }
.btn-primary:disabled { background: var(--color-neutral-300); color: var(--text-disabled); }

.btn-secondary {
  background: rgba(0,122,255,0.10);
  color: var(--color-primary-500);
}
.btn-ghost {
  background: transparent;
  color: var(--color-primary-500);
}
.btn-danger {
  background: var(--color-error-fg);
  color: #fff;
}

Input

.input {
  background: var(--bg-subtle);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-size: 17px;
  color: var(--text-primary);
}
.input:focus {
  outline: none;
  border-color: var(--border-focus);
  background: var(--bg-base);
}
.input[aria-invalid="true"] { border-color: var(--color-error-fg); }
.input:disabled { color: var(--text-disabled); }

Card

.card {
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  box-shadow: var(--shadow-sm);
}
.card-elevated { box-shadow: var(--shadow-md); }
.card-outlined { box-shadow: none; border: 1px solid var(--border-subtle); }

Badge / Tag

.badge { padding: 4px 10px; border-radius: var(--radius-full); font-size: 13px; font-weight: 600; }
.badge-solid   { background: var(--color-primary-500); color: #fff; }
.badge-subtle  { background: rgba(0,122,255,0.12); color: var(--color-primary-500); }
.badge-outline { border: 1px solid var(--border-default); color: var(--text-primary); }

Navigation (Tab Bar)

.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: 49px;
  background: var(--bg-overlay);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--border-subtle);
  display: flex; justify-content: space-around;
}
.tab-item { color: var(--text-secondary); }
.tab-item.active { color: var(--color-primary-500); }

Motion

--duration-fast: 150ms;
--duration-base: 250ms;
--duration-slow: 400ms;
--ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);
/* Apple 특유의 spring */
--ease-spring: cubic-bezier(0.5, 1.25, 0.5, 1);

Anti-patterns

1. 시스템 컬러를 임의 RGB로 덮어쓰지 말 것 — 다크모드/접근성 자동 적응이 깨진다 2. 44pt 미만의 터치 타깃 금지 3. 본문 폰트에 Display 가족 사용 금지 (SF Pro Display는 20pt 이상에만) 4. 번역 가능한 텍스트를 이미지로 굽지 말 것 (Dynamic Type/접근성 차단) 5. iOS 표준 컨트롤(스위치, 액션시트, 알림)을 커스텀으로 재구현 금지 — 일관성 파괴

Apple Human Interface Guidelines

Brand DNA

브랜드 DNA

Tone & Mood

톤 & 무드

Color System

컬러 시스템 (CSS 변수)

Typography

타이포그래피

Spacing

스페이싱

Border Radius

Border Radius

Shadow / Elevation

Shadow / Elevation

Iconography

Iconography

Component Guide

컴포넌트 가이드

Motion

Motion

Anti-patterns

Anti-patterns

Sources

출처