웹뷰 환경에서의 이벤트 발생 순서

📱 웹뷰 환경에서의 이벤트 발생 순서

웹뷰는 네이티브 앱 안에 임베드된 브라우저이므로, 일반 모바일 브라우저와 다소 다른 특성을 가집니다.

📱 웹뷰 (기본 설정)

1. touchstart   ← 터치 시작
2. touchend     ← 터치 종료
3. ⏰ 300ms 지연  ← 여전히 존재 (설정에 따라 다름)
4. mousedown    ← 가상 마우스 이벤트
5. mouseup      ← 가상 마우스 이벤트
6. click        ← 가상 클릭 이벤트

⚡ 웹뷰 (FastClick 또는 touch-action 최적화)

1. touchstart   ← 터치 시작
2. touchend     ← 터치 종료
3. click        ← 지연 없이 즉시 발생

🔧 웹뷰별 차이점

📱 Android WebView

일반 모바일과 거의 동일:
1. touchstart
2. touchend  
3. 300ms 지연 (설정으로 제거 가능)
4. mousedown
5. mouseup
6. click

🍎 iOS WKWebView

더 최적화됨:
1. touchstart
2. touchend
3. click (지연 최소화)

📱 하이브리드 앱 (Cordova/PhoneGap)

네이티브 최적화:
1. touchstart
2. touchend
3. click (거의 즉시)

⚙️ 웹뷰 설정에 따른 차이

Android WebView 설정

// 300ms 지연 제거 설정
webView.getSettings().setBuiltInZoomControls(false);
webView.setInitialScale(100);

iOS WKWebView 설정

// 터치 지연 최소화
webView.configuration.allowsInlineMediaPlayback = true

🎯 웹뷰에서 권장하는 이벤트 처리

1. 가장 안전한 방법 (모든 웹뷰 호환)

<button 
  onTouchStart={(e) => {
    e.preventDefault();
    e.stopPropagation();
    handlePress();
  }}
  onClick={(e) => {
    // 터치 디바이스에서는 무시
    if (!('ontouchstart' in window)) {
      handlePress();
    }
  }}
  style={{ touchAction: 'manipulation' }}
>

2. 최신 웹뷰용 (Pointer Events)

<button 
  onPointerDown={handlePress}
  style={{ touchAction: 'manipulation' }}
>

📊 웹뷰별 반응 시간 비교

환경	반응 시간	특징
일반 모바일 브라우저	~300ms	표준 지연
Android WebView (기본)	~300ms	설정으로 개선 가능
iOS WKWebView	~50-100ms	자동 최적화
하이브리드 앱	~10-50ms	네이티브에 가까움
touchstart 사용	~0ms	모든 환경에서 즉시

🎮 게임용 웹뷰 최적화 권장사항

touchstart/touchend 사용 - 가장 빠른 반응
touch-action: manipulation - CSS로 지연 제거
preventDefault() - 기본 동작 차단
이벤트 중복 방지 - 터치와 클릭 이벤트 분리

웹뷰는 앱별로 설정이 다르므로, 가장 호환성이 좋은 touchstart 이벤트를 사용하는 것이 안전합니다! 🚀