HIG Playground Home GitHub 🇺🇸 EN
HIG Lab → HIG Playground → Gauges

Gauges

iOS 게이지의 Circular/Linear 스타일, 컬러 그라데이션, 범위 설정을 직접 체험해보세요. 컨트롤 패널에서 속성을 변경하면 iPhone 화면에 즉시 반영됩니다.

9:41
●●●● WiFi 🔋
Gauges
Circular Gauge
65
BPM
0 100
Linear Gauge
Battery 65%
0 100
Compact
♥
Heart Rate
65 BPM
⚡
Energy
42%
💧
Hydration
78%
⚠️ HIG 위반: 게이지가 오해를 줍니다
📚 HIG Guidelines — 직접 체험하기
✓ Do — 올바른 예시
✗ Don't — 나쁜 예시

✓ 이렇게 하세요

  • Use gauges to display a single value within a defined range
  • Choose circular style for prominent, at-a-glance readings
  • Use linear style for compact, inline value displays
  • Apply color gradients to convey meaning (green=good, red=warning)
  • Include clear labels and units for the value

✗ 이렇게 하지 마세요

  • Don't use a gauge for values that change extremely rapidly
  • Don't omit the range — users need min/max context
  • Don't use multiple circular gauges in a small space
  • Don't use arbitrary colors — follow semantic meaning

👆 iPhone 미리보기에서 나쁜 패턴을 직접 확인해보세요

65
0
100
Show Label
SwiftUI Code
HIG Lab — Apple Human Interface Guidelines Interactive Playground