우리나라의 대표적인 웹뷰(WebView)를 활용한 회사 중 하나는 토스다. 토스에서는 앱의 뒤로 가기 버튼을 두 번 눌러 앱을 종료하는 UX를 제공하고 있다. 이를 본 우리 회사 DOF 실무진 중 한 명이 지나가며 이렇게 말했다…
"짜치게 팝업으로 알려주지 말고, 이거 해줘요."
그 말 한마디가 나를 또 한 번 새로운 도전으로 이끌었다.
뒤로가기 버튼 클릭 시간 확인
DateTime currentTime = DateTime.now();
현재 시간을 기록하여 두 번의 뒤로가기 클릭 사이 간격을 계산한다… 이유는 그냥 막 종료 시키면 안되지 않을까?… ㅎㅎ 3초간의 유지를 하고 한 번 더 요청하면 그때 💀
WebView 초기화 확인
if (webViewController == null) { Fluttertoast.showToast( msg: "WebView is not ready. Try again later.", ); return Future.value(false); }
WebView가 초기화되지 않았을 경우 사용자에게 토스트 메시지를 보여줍니다. 그냥 막 종료할 수 없으니 그리고 앱이던 웹이던 초기화는 프로그래밍의 기본중에 기본이니깐…?
현재 URL 확인 및 특정 URL 목록 처리
dart 코드 복사 WebUri? currentUrlUri = await webViewController?.getUrl(); String? currentUrl = currentUrlUri?.toString(); List<String> allowedUrls = [ "https://web.dev.smdof.com/map", "https://web.dev.smdof.com/route", "https://web.dev.smdof.com/ticket", "https://web.dev.smdof.com/profile", "https://web.dev.smdof.com/login", ]; bool isAllowedUrl = currentUrl != null && allowedUrls.any((url) => currentUrl.startsWith(url.split('?').first));
WebView의 현재 URL을 가져와 특정 URL 목록(allowedUrls)에 포함되는지 확인합니다 이 부분은 추후에 vue3에서 js 핸들러로 요청하는 것으로 바꾸려구한다.. url 바뀌면 다 무용지물이라서..?
startsWith를 사용해 URL 파라미터가 포함된 경우에도 기본 URL을 비교 그 후에 로직을 처리한다!특정 URL에서 뒤로가기 버튼 동작
if (isAllowedUrl) { if (currentBackPressTime == null || currentTime.difference(currentBackPressTime!) > const Duration(seconds: 3)) { currentBackPressTime = currentTime; Fluttertoast.showToast( msg: "Do you want to quit the app? Press Back once more.", ); return Future.value(false); } else { currentBackPressTime = null; SystemNavigator.pop(); // 앱 종료 return Future.value(true); } }
첫 번째 클릭 시 토스트 메시지로 알림 3초 내에 다시 클릭하면 앱 종료 진짜 얼마나 아름…? 다운가
이리하여 우리 앱에서는 두 번 눌러서 종료되는 기능이 안드로이드에서만 가능하게 되었다. iOS는 특유의 제한적인 시스템 정책으로 인해 현재로선 구현할 수 없지만, 추후에 더 깊이 공부하고 연구하여 iOS에서도 지원할 예정…일까? 아니, 반드시 지원해 보일 것이다.
Share article