Apple Human Interface Guidelines — AI Design Skill

Apple HIG를 기반으로 한 UI/UX 디자인 지시서. AI 에이전트가 Apple 생태계에 부합하는 인터페이스를 설계·구현할 때 참조한다.

Part 1. 철학과 원칙

1.1 세 가지 핵심 원칙 (Core Principles)

Clarity (명료성)

•인터페이스의 모든 요소는 즉시 이해할 수 있어야 한다
•텍스트는 모든 크기에서 읽기 쉬워야 하고, 아이콘은 정밀하고 명확해야 한다
•장식적 요소를 최소화하고, 기능이 디자인을 주도한다
•모호함을 제거하는 것이 최우선이다

Deference (콘텐츠 존중)

•UI는 콘텐츠를 돕되, 콘텐츠와 경쟁하지 않는다
•사용자가 관심을 두는 것(콘텐츠, 작업)이 항상 주인공이어야 한다
•컨트롤과 장식은 콘텐츠를 지원하는 보조 역할에 머문다
•Apple Photos 앱처럼 UI 요소를 최소화하고 사진 자체가 전면에 나와야 한다

Depth (깊이감)

•시각적 레이어와 사실적인 모션으로 계층 구조와 공간적 관계를 전달한다
•반투명(translucency)은 표면 아래의 콘텐츠를 암시한다
•패럴렉스와 스케일링은 활력감과 입체감을 만든다
•사용자가 앱 구조 안에서 자신의 위치를 이해하고 자신 있게 탐색할 수 있도록 돕는다

1.2 네 가지 디자인 기초 (Design Foundations)

기초	설명
Structure	앱을 구조화하여 사용자가 즉시 정체성과 배치를 이해하게 한다. 명확한 정보 아키텍처로 발견과 탐색을 지원한다
Navigation	일관되고 명확한 이동 경로를 제공하여 사용자가 자신감을 가지고 앱을 탐색할 수 있게 한다
Content	정보를 파악하기 쉽게 조직하고, 자연스럽게 올바른 행동으로 이끈다
Visual Design	정렬, 계층, 대비를 통해 앱의 개성과 사용성을 형성한다

1.3 사용자 경험 3대 질문

Apple은 모든 화면에서 사용자가 아래 세 가지에 즉시 답할 수 있어야 한다고 강조한다:

•나는 어디에 있는가? (Where am I?)
•무엇을 할 수 있는가? (What can I do here?)
•어디로 갈 수 있는가? (Where can I go from here?)

1.4 일관성과 친숙함 (Consistency & Familiarity)

•사용자는 Apple 내장 앱(Mail, Messages, Safari 등)에서 매일 수 시간을 보낸다
•표준 컨트롤이 기대대로 동작하면, 사용자는 앱의 고유한 가치에 집중할 수 있다
•일관성은 용어, 시각적 스타일, 제스처 상호작용 전체에 걸쳐 유지해야 한다
•커스텀 컨트롤로 시각적 차별화를 얻을 수 있지만, 플랫폼 규칙과의 일관성이 주는 인지적 이점이 대부분 더 크다

Part 2. 구체적인 세부 지시사항

2.1 타이포그래피 (Typography)

시스템 폰트

•기본 폰트: SF Pro (sans-serif). iOS, iPadOS, macOS의 시스템 폰트
•보조 serif 폰트: New York. SF Pro와 함께 사용 가능
•모노스페이스: SF Mono. 코드 표시용
•9가지 웨이트: Ultralight → Black. Condensed/Expanded 폭도 지원

Optical Size 규칙

•SF Pro Text: 19pt 이하 텍스트에 사용 (넓은 자간, 소형 가독성 최적화)
•SF Pro Display: 20pt 이상 텍스트에 사용
•코드에서는 자동 적용되지만, 디자인 목업에서는 수동 구분 필요

iOS 텍스트 스타일 (Text Styles)

Style	기본 크기	용도
Large Title	34pt	화면 최상단 큰 제목 (스크롤 시 17pt로 축소)
Title 1	28pt	주요 섹션 제목
Title 2	22pt	부 섹션 제목
Title 3	20pt	소제목
Headline	17pt Semi-Bold	강조된 본문급 텍스트
Body	17pt	기본 본문 텍스트
Callout	16pt	설명 텍스트
Subhead	15pt	보조 텍스트
Footnote	13pt	각주, 보조 정보
Caption 1	12pt	캡션
Caption 2	11pt	최소 크기 캡션 (최소 가독 한계)

타이포그래피 원칙

•가능한 한 내장 텍스트 스타일을 사용한다 (Dynamic Type 자동 지원)
•커스텀 폰트 사용 시에도 Dynamic Type과 접근성 기능(Bold Text 등)을 반드시 지원한다
•폰트 웨이트와 크기로 계층을 표현한다 — 무게(weight) 대비가 크기 대비보다 효과적일 수 있다
•서체 종류는 제한한다 — 너무 많으면 계층이 무너지고 비전문적으로 보인다
•최소 폰트 크기: 11pt (그 이하는 대부분의 사용자가 읽기 어려움)

2.2 컬러 (Color)

시맨틱 컬러 시스템

•하드코딩된 색상값 대신 시맨틱 컬러를 사용한다
•시맨틱 컬러는 Light/Dark 모드 전환에 자동 대응한다

시맨틱 컬러	용도
`systemBlue`	인터랙티브 요소, 링크, Primary 액션
`systemRed`	삭제, 경고, 파괴적 액션
`systemGreen`	성공, 완료 상태
`systemOrange`	주의, 경고
`systemGray`	비활성 요소, 중립 표면
`label`	기본 텍스트
`secondaryLabel`	보조 텍스트
`tertiaryLabel`	3차 텍스트
`systemBackground`	기본 배경
`secondarySystemBackground`	그룹화된 영역 배경

컬러 원칙

•같은 색상을 서로 다른 의미로 사용하지 않는다 (예: 파란색을 "저장"과 "삭제" 모두에 쓰지 않는다)
•색상만으로 정보를 전달하지 않는다 — 아이콘, 패턴, 텍스트 라벨로 보완한다 (색맹 사용자 고려)
•개인 취향이 아닌 의미와 기능에 기반해 색상을 선택한다
•Light/Dark 모드 모두에서 명확하게 보이는지 테스트한다
•적응형 컬러(Adaptive Colors)를 사용하여 환경 변화에 자동 대응한다

대비 (Contrast)

•일반 텍스트: 최소 4.5:1 대비 비율 (WCAG AA 기준)
•큰 텍스트 (18pt regular / 14pt bold 이상): 최소 3:1
•고대비 색상 조합을 기본으로 사용한다 (검은 텍스트 + 흰 배경, 또는 그 반대)

2.3 레이아웃과 간격 (Layout & Spacing)

기본 규칙

•8pt 그리드 시스템을 따른다 — 모든 간격과 크기는 8의 배수가 기본이다 (4pt는 세밀한 조정 시 허용)
•Safe Area를 존중한다 — 노치, Dynamic Island, 홈 인디케이터 영역을 침범하지 않는다
•Auto Layout과 제약 조건을 사용하여 화면 크기·방향 변화에 적응한다

여백 (Margins)

•기본 좌우 여백: 16pt (iPhone), 20pt (iPhone Plus/Max)
•요소 간 최소 간격: 8pt
•컨텐츠 카드 모서리 반경: 큰 카드 20pt, 작은 요소 10pt

터치 타겟

•모든 터치 가능한 요소: 최소 36×36dp
•이보다 작으면 사용자가 잘못 터치하거나 놓칠 수 있다
•시각적 크기가 작더라도 터치 영역은 36dp 이상으로 확보한다

화면 디자인 우선순위

•작은 화면(375pt 폭)부터 설계하고, 큰 화면으로 확장한다
•핵심 행동 유도(CTA)는 화면 상단 50% 영역에 배치한다
•"모바일 디자인의 90%는 리스트 디자인이다" — 리스트 항목 설계에 세심한 주의를 기울인다

2.4 내비게이션 (Navigation)

3대 네비게이션 패턴

패턴	설명
Tab Bar (플랫)	화면 하단에 위치. 앱의 최상위 섹션을 2~5개 탭으로 구분. 항상 표시 (모달 제외). 각 탭은 상태를 기억한다
Hierarchical (계층적)	Navigation Bar + Back 버튼. 오른쪽으로 이동하면 깊어지고, 왼쪽으로 돌아오면 상위로 복귀. 왼쪽 가장자리 스와이프 = Back 버튼
Modal (모달)	특정 작업에 집중하기 위한 오버레이. 시트, 알림, 팝오버 등. 완료/취소로 닫는다

내비게이션 원칙

•Tab Bar 항목은 시트를 띄우거나 액션을 트리거하면 안 된다 — 순수 내비게이션 용도로만 사용
•Tab Bar는 모달이 열린 경우를 제외하고 항상 화면에 표시한다
•햄버거 메뉴(☰)를 사용하지 않는다 — 발견성이 현저히 떨어진다. Tab Bar가 훨씬 효과적
•Push 트랜지션은 계층 이동에, Modal은 독립적 작업에 사용한다
•Back 버튼에 공간이 허용되면 "Back" 대신 부모 화면의 제목을 레이블로 표시한다
•Cancel 버튼은 절대로 데이터를 직접 삭제하면 안 된다 — 반드시 확인 다이얼로그를 추가한다

2.5 컴포넌트 (Components)

버튼

•상태 구분: default, highlighted, selected, disabled — 각 상태를 시각적으로 명확히 전달한다
•Primary 액션은 가장 크고 두드러진 버튼으로 표현한다
•파괴적 액션(삭제 등)은 반드시 systemRed로 표현한다

리스트 (Table View)

•기본 텍스트: 17pt regular
•보조 텍스트: 15pt 또는 12pt regular (강조도에 따라)
•왼쪽: 선택적 아이콘/이미지
•오른쪽: 우향 셰브론(>)은 다른 화면으로의 이동을 의미
•리스트 항목 설계 시 3가지를 결정한다: (1) 어떤 텍스트를 표시할 것인가 (2) 왼쪽에 무엇을 넣을 것인가 (3) 오른쪽에 무엇을 넣을 것인가

검색 (Search)

•검색바를 쉽게 발견할 수 있어야 한다
•인기/최근 검색어를 옵션으로 표시한다
•입력 즉시 결과가 나타나야 한다 (실시간 검색)

모달 시트

•완료할 특정 작업이 있을 때만 사용한다
•고마찰 모달: 사용자가 결정을 내려야 닫힌다 (Done/Cancel)
•저마찰 모달: 앱을 차단하되 "이것 아니면 저것" 결정을 강요하지 않는다

2.6 애니메이션과 모션 (Animation & Motion)

원칙

•모션은 의도적으로 사용한다 — 경험을 향상시키되, 그 자체가 목적이 되면 안 된다
•불필요하거나 과도한 애니메이션은 사용자를 산만하게 하고 불편하게 한다
•모션은 선택적이어야 한다 — 중요한 정보를 모션만으로 전달하지 않는다
•시각적 피드백을 햅틱, 오디오 큐로 보완한다

트랜지션

•Push 트랜지션: 수평 이동으로 계층 이동을 암시한다 (오른쪽 = 더 깊게, 왼쪽 = 복귀)
•상태 전환은 부드럽게 애니메이션된다 — iOS 특유의 디테일
•인터랙티브한 제스처 기반 트랜지션을 지원한다 (취소 가능한 전환)

Apple 표준 이징 커브

•기본 이징: cubic-bezier(0.25, 0.1, 0.25, 1.0) — 자연스러운 감속
•스프링 애니메이션: 활력감 있는 바운스 효과에 사용
•지속 시간: 대부분 0.2~0.5초. 복잡한 전환도 1초를 넘지 않는다

Reduce Motion 대응

•Reduce Motion 설정이 켜져 있으면 패럴렉스 효과를 최소화하고, 슬라이딩 트랜지션을 크로스페이드로 대체하며, 자동 재생 애니메이션을 중단한다

2.7 접근성 (Accessibility)

필수 요구사항

•Dynamic Type 지원: 사용자가 선호하는 텍스트 크기를 존중한다. 시스템 폰트는 자동 대응하며, 커스텀 폰트도 동일하게 구현해야 한다
•VoiceOver 지원: 모든 인터랙티브 요소에 명확한 접근성 라벨(label)과 특성(trait)을 부여한다
•Bold Text 설정 존중: 시스템 폰트는 자동 대응. 커스텀 폰트도 동일하게 구현한다
•Reduce Motion 설정 존중 (위 2.6 참조)
•색맹 사용자 고려: 색상만으로 의미를 전달하지 않는다. 남성의 약 8%, 여성의 약 0.5%가 색각 이상

대비와 가독성

•최소 본문 크기: 17pt 권장, 캡션 등에서도 11pt 이하는 피한다
•헤드라인 최소: 34pt
•텍스트 대비: 4.5:1 이상
•Apple의 Accessibility Inspector 등으로 테스트한다

2.8 다크 모드 (Dark Mode)

•모든 UI를 Light와 Dark 양쪽 모드에서 테스트한다
•시맨틱 컬러를 사용하면 자동으로 모드 전환이 처리된다
•다크 모드에서는 elevated surface에 약간 밝은 배경을 사용하여 깊이감을 표현한다
•순수 검정(#000000)보다 약간 밝은 다크 배경이 눈의 피로를 줄인다
•이미지와 아이콘도 양 모드에서 명확하게 보이는지 확인한다

2.9 아이콘 (Icons & SF Symbols)

•SF Symbols 라이브러리를 우선 사용한다 — 수천 개의 스타일 일관된 아이콘 제공
•SF Symbols는 SF Pro 폰트와 웨이트가 매칭되어 텍스트와 원활히 정렬된다
•9가지 웨이트 × 3가지 스케일 (small, medium, large)
•앱 아이콘은 모든 크기에서 즉시 인식 가능해야 한다 — 알림 배지부터 홈 스크린까지
•커스텀 아이콘 제작 시에도 SF Symbols의 스타일 가이드를 따른다

2.10 피드백과 상태 표시 (Feedback & Status)

•사용자에게 항상 무슨 일이 일어나고 있는지 알려준다
•잘못된 입력 → 즉각적인 오류 메시지
•진행 중인 작업 → 프로그레스 바 또는 스피너
•완료/실패 → 명확한 결과 알림
•햅틱 피드백으로 물리적 확인감을 제공한다 — 명확성과 일관성을 유지
•로딩 상태에서는 플레이스홀더와 애니메이션으로 사용자의 관심을 유지한다

2.11 이미지와 에셋 (Images & Assets)

•최고 품질 소스 이미지를 사용하고, 업스케일하지 않는다 (다운스케일만)
•Retina 대응: 1x, 2x, 3x 에셋을 준비한다
•아이콘은 PNG 또는 PDF 벡터를 사용한다
•사진/일러스트레이션은 JPEG 또는 HEIF를 적절한 압축으로 사용한다
•마스킹과 일관된 모서리 반경을 사용하여 시각적 계층을 만든다

2.12 국제화 (Internationalization)

•RTL(Right-to-Left) 레이아웃 방향을 지원한다
•날짜, 시간, 숫자 형식을 지역에 맞게 자동 적용한다
•색상의 문화적 의미를 고려한다 (예: 빨간색은 서양에서 경고, 중국에서 행운)
•텍스트 길이 변화를 고려한 레이아웃 설계 — 번역 시 텍스트가 길어질 수 있다

부록: 빠른 체크리스트

디자인 시작 전

• 대상 플랫폼과 디바이스 크기 확인
• Light/Dark 모드 양쪽 계획
• 정보 아키텍처와 네비게이션 구조 수립

시각 디자인

• SF Pro 또는 시스템 폰트 기반 타이포그래피 계층 설정
• 시맨틱 컬러 사용, 하드코딩 색상 최소화
• 8pt 그리드 시스템 준수
• 36×36dp 터치 타겟 확보
• 4.5:1 이상 텍스트 대비 비율

인터랙션

• Tab Bar는 하단, 2~5개 항목
• Push 트랜지션으로 계층 이동, 모달로 독립 작업
• Back 제스처(좌측 엣지 스와이프) 지원
• 파괴적 액션에 확인 다이얼로그

접근성

• Dynamic Type 지원
• VoiceOver 라벨 및 특성 설정
• Reduce Motion 대응
• 색상 외 대안적 정보 전달 수단 확보
• Bold Text 설정 존중

에셋

• 1x, 2x, 3x Retina 에셋
• SF Symbols 활용
• 앱 아이콘 모든 크기 대응

출처: Apple Human Interface Guidelines (developer.apple.com/design/human-interface-guidelines), WWDC 세션 자료, 및 관련 디자인 리소스 종합 정리. 최종 구현 시에는 반드시 공식 HIG를 참조할 것.