iOS Components,
Interactive Playground

Apple Human Interface Guidelines의 UI 컴포넌트를 iPhone 목업 안에서 직접 체험해보세요. 스타일, 크기, 색상을 바꿔보며 HIG 원칙을 익힐 수 있습니다.

40

Components

8

Categories

∞

Combinations

📄 Content 4 components

Bar, Line, Area, Pie 차트 타입과 색상 스킴 체험

contentMode, aspectRatio, clipShape 조절

Font 스타일, line limit, truncation, Dynamic Type

WKWebView 컨테이너와 nav bar, progress 표시

📐 Layout 7 components

LazyVGrid/LazyHGrid 레이아웃과 컬럼 수 조절

Disclosure Groups

Expandable/Collapsible 섹션과 중첩 레벨

SF Symbol + 텍스트 조합과 label 스타일

Plain/Inset Grouped 스타일과 swipe actions

계층형 트리 리스트와 expand/collapse

NavigationSplitView의 sidebar + detail 레이아웃

다중 컬럼 정렬 가능한 테이블 뷰

📋 Menus and Actions 8 components

ShareLink/UIActivityViewController 공유 시트

Filled, Tinted, Bordered, Plain 스타일 + 3가지 크기

Long press 메뉴와 아이콘, divider 구성

Cut/Copy/Paste 편집 메뉴와 커스텀 액션

Pull-down 메뉴와 아이콘, divider, destructive 항목

팝업 버튼의 선택 인디케이터와 스타일

Pull-Down Buttons

Pull-down 버튼의 항목과 아이콘 구성

아이콘/텍스트/혼합 스타일 툴바와 배치

🧭 Navigation and Search 5 components

Navigation Bars

Large/Inline 타이틀과 back/trailing 버튼 배치

검색 바, scope bar, 검색 제안 UI

NavigationSplitView 사이드바와 섹션, 배지

3~5개 탭 구성과 badge, 선택 애니메이션

Vertical/Horizontal 스크롤과 paging, indicators

🪟 Presentation 5 components

Bottom sheet 스타일의 액션 목록과 cancel 버튼

1~3 버튼 Alert과 destructive 액션 패턴

페이지 인디케이터 dots와 스와이프 네비게이션

Popover의 방향, 크기, dismiss 동작

Modal sheet의 detent 크기와 drag indicator

✏️ Selection and Input 8 components

ColorPicker의 wheel/grid/spectrum 스타일

Compact/Wheel/Graphical 스타일 비교

Wheel, Menu, Segmented, Inline 피커 스타일

Segmented Controls

2~5개 세그먼트의 선택 UI와 슬라이딩 애니메이션

연속/단계 슬라이더와 최소/최대 아이콘 커스터마이징

+/- 증감 컨트롤과 값 표시, 범위 설정

Plain/Rounded 스타일과 keyboard type, secure field

iOS Switch 컨트롤의 on/off 애니메이션과 색상 커스터마이징

📈 Status 3 components

동심원 진행 링과 애니메이션, 색상 커스터마이징

Circular/Linear 게이지 인디케이터와 그라디언트

Progress Indicators

ProgressView의 linear/circular 스타일과 진행률 조절