제스처 힌트 오버레이는 사용자에게 특정 UI 요소나 제스처를 안내하는 인터랙티브 튜토리얼입니다.
스포트라이트 효과와 애니메이션으로 사용자의 주의를 끌고, 단계별로 기능을 설명합니다.
Interactive Area
👆 Try me!
⭐
Features
스포트라이트 효과로 특정 영역 강조
애니메이션 손 모양으로 제스처 안내
단계별 진행 표시
Skip 버튼으로 언제든 종료 가능
자동 또는 수동 진행
👆
Tap here to get started
62. 제스처 힌트 오버레이
Design gesture education overlays:
**Overlay Container**:
- Full screen semi-transparent
- Dark: rgba(0,0,0,0.8)
- Spotlights on relevant UI areas
**Spotlight Effect**:
- Cut-out circle/rect on overlay
- Exposes actual UI beneath
- Border or glow around cut-out
**Gesture Indicator**:
- Animated hand/finger icon
- Shows the gesture motion
- Swipe: finger moves across
- Tap: finger presses with ripple
- Long press: finger holds with rings
**Text Instruction**:
- Brief: "Swipe left to delete"
- Position: near gesture area
- Background: contrast pill
- Font: 16px, readable
**Multi-step Tutorial**:
- Sequential gestures
- Next button or auto-advance
- Progress dots
- Skip all option
**Animation Details**:
- Hand appears, performs gesture
- Loops 2-3 times
- Subtle fade between loops
- Interactive elements pulse
**Dismissal**:
- "Got it" button
- Tap anywhere to dismiss
- Complete the gesture to dismiss
**Trigger Conditions**:
- First-time feature use
- After update with new features
- Manual "Help" menu access
**Remember Dismissal**:
- Don't show again toggle
- Store in user preferences
- Reset in settings
**Gesture Types to Show**:
- Swipe actions (delete, archive)
- Pull to refresh
- Pinch to zoom
- Double-tap to like
- Long-press for options
Tech: React Native + Reanimated + react-native-svg (for spotlight)