[Troubleshooting] 모바일 웹 고스트 클릭(Ghost Click) 해결 방법

박두팔이·2025년 12월 23일

내가너무궁금해서그래

목록 보기

27/27

[Troubleshooting] 모바일 웹 고스트 클릭(Ghost Click) 해결 방법

모달 중첩 클릭 이슈 원인 분석과 Overlay Shield 패턴

모바일 웹 개발 중 한 번의 터치로 의도하지 않은 요소까지 클릭되는 현상, 이른바 고스트 클릭(Ghost Click) 문제를 경험한 적이 있다면 이 글이 실질적인 해결책이 될 것이다.
본 문서는 모달 중첩 환경에서 발생한 고스트 클릭 현상의 원인을 분석하고, Overlay Shielding 패턴을 통해 근본적으로 해결한 실무 사례를 정리한다.

1. 문제 상황: 모바일 웹 모달 중첩 클릭 버그

발생 환경

모바일 웹 브라우저 (iOS Safari / Android Chrome 공통)
Vue.js 기반 SPA
모달이 중첩되는 UI 구조

증상

퀴즈 모달 위에 오답 알림 모달(Alert Modal)이 표시됨
사용자가 알림 모달의 [확인] 버튼을 터치
알림 모달이 닫히는 순간, 뒤에 있던 퀴즈 선택지 버튼이 자동 클릭됨

UX 문제

사용자는 단순히 오답 확인만 하려 했으나
다음 문제의 선택지가 의도치 않게 선택됨
명백한 UX 결함 및 신뢰도 하락 요인

2. 원인 분석: 모바일 고스트 클릭(Ghost Click)의 정체

이 문제는 단순한 버그가 아니라 모바일 브라우저의 클릭 이벤트 처리 방식에서 비롯된다.

2.1 모바일 브라우저의 300ms 클릭 지연

모바일 브라우저는 터치가 더블 탭(확대) 인지 판단하기 위해
touchend 이후 약 300ms 대기 후 click 이벤트를 발생시킴

2.2 이벤트 전파(Event Propagation) 문제

사용자가 [확인] 버튼을 터치 (touchend)
알림 모달이 즉시 DOM에서 제거됨
300ms 후, 브라우저가 해당 좌표에 click 이벤트를 전송
기존 타겟이 사라졌기 때문에
같은 좌표에 있던 하위 요소(퀴즈 버튼) 가 이벤트를 수신

➡ 이를 Ghost Click, 혹은 클릭 이벤트 대물림 현상이라고 부른다.

3. 해결 시도와 한계: Debounce 방식의 문제점

시도한 방법

퀴즈 버튼 클릭 시 Date.now() 기준으로
직전 클릭 후 400ms 이내의 클릭은 무시

한계

모든 클릭 대상에 방어 로직 추가 필요
컴포넌트가 늘어날수록 유지보수 난이도 급증
근본 원인(이벤트 타이밍)을 해결하지 못함

➡ 확장성과 구조적 안정성이 떨어지는 임시방편

4. 최종 해결책: Overlay Shielding 패턴

핵심 아이디어

모달이 사라질 때, 투명한 오버레이를 잠시 유지하여
고스트 클릭 이벤트를 흡수한 뒤 제거한다.

전략 요약

DOM 제거를 300ms 이후로 지연
시각적으로는 즉시 사라진 것처럼 처리
실제 클릭 이벤트는 오버레이가 대신 수신

5. 구현 코드 예시 (Vue.js)

GlobalAlertModal.vue

<script setup>
import { ref } from 'vue'

const isClosing = ref(false)

function handleClose() {
  if (isClosing.value) return
  isClosing.value = true

  // 고스트 클릭 흡수용 쉴드 유지
  setTimeout(() => {
    appStore.clearGlobalAlert() // 실제 DOM 제거
    isClosing.value = false
  }, 350)
}
</script>

<template>
  <div
    v-if="globalAlert"
    class="modal-overlay"
    :class="{ 'is-closing': isClosing }"
    @click.self="handleClose"
  >
    <div class="modal-content" :class="{ 'fade-out': isClosing }">
      <!-- alert content -->
    </div>
  </div>
</template>

<style scoped>
.modal-overlay.is-closing {
  background: rgba(0, 0, 0, 0); /* 시각적으로 투명 */
  pointer-events: auto;        /* 중요: 클릭 차단 유지 */
  backdrop-filter: none;
}

.modal-content.fade-out {
  opacity: 0;                  /* 콘텐츠만 먼저 숨김 */
}
</style>