표본
이 스타일의 기본형
버튼·입력·배지를 이 스타일의 규칙 그대로 그린 카드입니다.
Human Interface Guidelines (HIG)
애플의 디자인 철학으로, 명료성, 존중, 깊이를 핵심 가치로 합니다.
- YEAR
- 1987
- BY
- Apple
- MOOD
- 미니멀 · 신뢰감
- PRIMARY#007AFF
- SECONDARY#5856D6
- ACCENT#FF9500
- BG#FFFFFF
- SURFACE#F2F2F7
취급 표시
- 둥근 모서리
- 가는 테두리
- 가는 아이콘 선
표본
이 스타일의 규칙을 그대로 적용한 UI 컴포넌트입니다.
버튼
입력과 토글
배지
중립강조긍정
탭
스탯과 차트
2,480주간 방문증가+12%
1.8%이탈률감소-0.4%p
여덟 달의 지표 흐름을 담은 표본 차트입니다.
아바타와 아이콘
김서이하박지윤채+1
카드
기본 카드
서피스 토큰이 그대로 정하는 기본 상태의 카드입니다.
강조 카드
강조 상태에서 서피스가 어떻게 달라지는지 보여줍니다.
무드와 이웃
밀도여백빽빽여백에서 빽빽 사이 5단계 중 2단계
온도감차가움따뜻함차가움에서 따뜻함 사이 5단계 중 3단계
시대감레트로미래적레트로에서 미래적 사이 5단계 중 3단계
격식자유분방격식자유분방에서 격식 사이 5단계 중 4단계
- 미니멀
- 신뢰감
어디에 쓰나
실제로 쓰는 곳
- iOS 설정 앱
- Safari
- iMessage
- Apple Music
- Airbnb iOS 앱
사용 사례
- iOS / iPadOS 앱
- macOS 앱
- watchOS / tvOS 앱
- Apple 생태계 서비스
이런 프로젝트에 맞습니다
- iOS 앱
- macOS 앱
- Apple 생태계 서비스
- 프리미엄 소비자 앱
더 읽기
원칙·제약·역사처럼 적용할 때 필요한 내용입니다. 필요한 항목만 펼쳐 보세요.
역사와 배경
1987년 Mac용 첫 가이드라인 발행. 이후 iOS, iPadOS, macOS, watchOS, tvOS로 범위를 넓히며 세계에서 가장 영향력 있는 디자인 가이드라인으로 발전.
핵심 원칙
- 명료성 (Clarity)
- 존중 (Deference)
- 깊이 (Depth)
주요 특징
- 명료한 계층 구조
- 부드러운 애니메이션
- SF 폰트 사용
- 네이티브 컨트롤
- 일관된 내비게이션
장점과 한계
장점
- 전 세계 iPhone 사용자에게 친숙한 UX
- 시스템과 깊이 통합된 자연스러운 경험
- 고급스럽고 프리미엄한 이미지
- SwiftUI로 빠른 구현 가능
한계
- Apple 플랫폼에 한정
- 웹에서 그대로 구현 어려움
- 엄격한 가이드라인으로 커스터마이징 제한
컬러 시스템
시스템 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 내장
설계 제약
반드시 포함
- Safe Area 완전 지원 (notch, Dynamic Island, home indicator)
- Dynamic Type 지원 — 모든 텍스트가 접근성 글꼴 크기에 대응
- Haptic Feedback — 주요 인터랙션에 촉각 피드백
하지 말 것
- 시스템 컨트롤 외관 임의 변형 금지 (UIButton 등 native control 유지 권장)
- 하단 safe area 침범 금지
- gesture 충돌 — 시스템 swipe-back 등 native gesture와 겹치는 커스텀 제스처 금지
- 모달 남용 금지 — 최소한의 context에서만 사용
모션 — spring 기반 물리 애니메이션 (UISpringTimingParameters). 화면 전환은 iOS 표준 push/modal 사용. 커스텀 전환은 시스템 제스처와 연동.
접근성
Dynamic Type(텍스트 크기 자동 조정), VoiceOver, Switch Control 등 접근성 기능이 시스템 레벨에서 강력하게 지원됨.
자주 묻는 질문
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 앱 등이 있습니다.