DEVOCEAN

안녕하세요. 에이닷에서 프론트엔드 개발자로 일하고 있는 스카이입니다.

오늘은 사용자의 편의성을 위해 이탈 방지 팝업을 서비스에 적용하면서 했던 경험을 정리하여 글로 남깁니다.

배경

에이닷 회원 가입 과정에서 사용자가 실수로 페이지를 벗어날 때 입력한 정보가 유실되는 문제가 발견되었습니다.

이 문제는 사용자 경험을 저해하는 중요한 이슈로, 이탈 방지 팝업을 통해 해결하고자 했습니다.

가끔 사이트에서 아래와 같은 팝업을 마주하게 될때가 있습니다.

beforeunload 이벤트

앞서 보여드린 팝업을 노출 시키는 방법은 매우 간단합니다.

beforeunload 이벤트를 추가하면 됩니다. 해당 이벤트는 페이지를 벗어나려고 할때 이벤트가 트리거 됩니다.

구현 코드

window.addEventListener('beforeunload', (e) => {
   e.preventDefault()
})

그런데 beforeunload 이벤트 적용 했을때 다음과 같은 문제점이 있었습니다.

사용자 제스처(클릭/터치) 필요

페이지에 사용자 제스처(클릭/터치)가 없으면 이벤트는 트리거 되지 않습니다.

SPA 환경에서 제한적 동작

이전 페이지와 현재 페이지의 도메인 주소가 다를때만 동작합니다.

에이닷은 Vue.js 기반의 SPA(Single Page Application)입니다. 라우터를 기반으로 화면이 이동되다보니 상위 도메인 경로가 동일합니다.

이럴때는 동작하지 않는 문제가 발견되었습니다.

브라우저 고유 confirm만 사용 가능

해당 이벤트를 사용하면 오직 각 브라우저에서 제공하는 형태의 confirm이 노출됩니다.

이전에는 메세지 내용을 변경할수 있게 제공되었으나 현재는 메세지 내용을 바꿀수가 없습니다.

일부 브라우저 미지원

onBeforeRouteLeave 이벤트

onBeforeRouteLeave 이벤트는 Vue.js에서 사용하는 이벤트로 해당 페이지를 벗어나려고 할때 트리거 됩니다.

구현 코드

  onBeforeRouteLeave((_to, _from, next) => {
      const confirm = window.confirm('저장되지 않은 정보가 있을 수 있어요.\n정말 나가시겠어요?')
      next(confirm)
  })

onBeforeRouteLeave 이벤트를 사용 할 경우 다음과 같은 문제점이 있었습니다.

SPA 환경에서만 동작

당연한 말이지만 라우터를 통하면 페이지 이동의 경우에만 발생합니다.

beforeunload의 발생 조건인 이전 페이지와 현재 페이지의 도메인이 다른 경우에는 동작하지 않습니다.

일부 브라우저 미지원

onBeforeRouteLeave이벤트가 beforeunload 이벤트 보다 나은 점은 다음과 같습니다.

사용자 제스처(클릭/터치) 불필요

beforeunload 경우 사용자의 동작이 있어야 이벤트가 트리거 되는 조건이 있었습니다.

그러나 onBeforeRouteLeave는 사용자 동작 유무와 무관하게 이벤트가 트리거 됩니다.

메세지 변경 가능

beforeunload는 각 브라우저에서 제공하는 confirm만 사용이 가능합니다. 메세지 내용을 수정할수 없습니다.

onBeforeRouteLeave는 문구를 변경할수 있습니다. 또한 async/await 제공하는 confirm UI 만들어서 제공할수도 있습니다.

결론

에이닷은 다른 도메인을 통해 이동되는 경우와 라우터를 통해 이동되는 경우 2가지가 혼재 합니다. 그래서 두가지 경우를 모두 커버할수 있도록 구현했습니다.

효과적인 이탈 방지 팝업 구현을 위해서는 기술적 제약을 이해하고, 다양한 시나리오를 고려한 유연한 접근이 필요합니다.

Vue.js 환경에서는 라우터 이벤트와 브라우저 이벤트를 조합하여 최적의 사용자 경험을 제공할 수 있습니다.

beforeunload 적용된 경우

onBeforeRouteLeave 적용된 경우

참고

두 이벤트가 지원하는 브라우저