CloseWatcher API를 사용하여 유저 경험 부스트하기

일단 UX 디자인 관점에서 제이콥의 법칙을 떠올려봅시다.

제이콥의 법칙?

사용자는 새로운 사이트나 앱을 접했을 때, 이미 알고 있는 기존의 UX와 동일한 방식을 기대한다.

제이콥의 법칙에 따르면, 사용자가 이미 경험한 것과 다르게 동작하는 UI를 만들면 사용자는 혼란스러워하게 됩니다. 그리고 이는 사용자의 이탈로 이어질 수 있습니다.

모바일 OS(특히 안드로이드의 경우)애서는 다이얼로그 등이 표시 될 떄, '뒤로 가기' 버튼을 통해 다이얼로그를 닫는 경험을 제공합니다.

웹 환경에선 '뒤로 가기' 버튼 입력시 다이얼로그가 표시된 상태여도 브라우저의 back navigation 동작이 수행됩니다. 바로 이럴 떄 사용하는 표준이 바로 CloseWatcher API입니다.

/**
 * (주의)
 * CloseWatcher는 해당 코드가 실행되는 window 객체를 따릅니다.
 * 따라서, 다이얼로그가 실제로 표시되는 window 객체에서 이 코드를 실행해야 합니다.
 */
const watcher = new CloseWatcher();
 
/**
 * `close` 이벤트는 사용자가 다이얼로그를 닫는 액션을 수행했을 때 발생합니다.
 */
watcher.on('close', () => {
  // 다이얼로그 닫기 등의 동작 수행
});

CloseWatcher API에서의 '닫기' 요청이 발생하는 상황은 다음과 같은 예시가 있습니다:

• (데스크톱의 경우) Esc 키 입력
• (안드로이드 OS의 경우) 뒤로 가기 버튼 및 뒤로 가기 제스처 입력
• (iOS의 경우) 접근성 기능을 통한 취소 요청, 예를 들면 VoiceOver의 z 제스처 등
• 듀얼 쇼크 등의 게임 컨트롤러에서의 네모 버튼과 같은 뒤로가기 액션 버튼

다만 기억해둘 점은 이 표준은 아주 최근의 스펙이라는 것 입니다. 지원하는 브라우저 풀도 굉장히 적으며 이는 아직 프로덕션 환경에서 이용하기에는 어려운 스펙이라고 볼 수 있습니다.