React Webview에서 앱처럼 뒤로가기 적용하기

현재 내가 운영하는 서비스 꽁술은 앱이지만 앱안에서 웹뷰로 운영된다.

웹뷰의 장점은 너무나도 많다. 하지만 굳이 하나를 고르자면 앱 업데이트를 하지 않아도 언제든지 배포만 하면, 웹에 바로 반영되니,
앱을 사용하는 고객들이 매번 업데이트를 해야하는 불편을 줄일 수 있다. 

그리고 더군다나 스타트업이라면, 실시간으로 변경하고, 추가해야 할 것이 많기에 더욱 웹뷰로 하는 것이 좋다고 생각한다.

React만 할 수 있으면, React Native로 앱의 껍데기를 만들고 React로 만든 웹을 안에다가 띄우면 되기에, 조금 더 쉽게 접근할 수 있다.

하지만 웹뷰에서 느끼는 한계들도 있다. 내가 가장 크게 문제라고 느꼈던 부분은 Back 버튼이 먹히지 않는다는 것이다.
그렇기에 이것을 해결하기 위해 팝업을 띄워주고 그 팝업을 끄는 형태로 진행하였다. => 팝업을 띄움으로써 장점은 따로 클릭할 당시의 높이등을 지정하지 않아도, 팝업을 끄면 바로 그 위치에 가 있다는 것! 

팝업을 띄움으로서 많은 부분 개선할 수 있었지만, 결국 팝업을 끄는 X 버튼을 만들어서 팝업을 꺼주어야 하는 이슈가 있었다....

사람들은 당연스럽게 앱에서 스와이프를 통해서 뒤로 돌아가기를 원하고, 앱안에서 너무 자연스럽게 사용하던 스와이프가 되지 않으니
불편을 겪게 된다. 

하지만 서비스만 좋으면 뭐 그런 불편이야 감수할 수 있지 않을까? 생각했던 내 오만이, 직접 고객을 만나뵙고 처참히 깨지게 되었다.
위쪽으로 돌아가기 위해 스와이프를 하던 고객분을 보고 있자니 얼굴이 붉어질 수 밖에 없었다. 

불편하다!! 사실 나도 불편하다!! 나도 고치고 싶은데... 어떻게 해야할지 모르겠다. ㅠㅠ

그래서 그것을 고친 삽질기를 적어보려고 한다.

먼저 웹뷰에서 왜 뒤로가기가 안 되는지 조사하였다.
아래 글을 보고 알게 된 것은 웹뷰 히스토리가 쌓이지 않는다는 것!

 

[Android] Webview 사용 시 History back이 안되는 문제

그래서 웹뷰인 경우, POP 이벤트를 잡아서 어떻게든 팝업 close 버튼을 닫아보려고 하였다.
하지만 히스토리가 쌓이지 않아 이벤트가 일어나지 않았다.

useEffect(()=>{
        const preventGoBack = () => {
            // change start
            setClickDetail(false)
            // window.history.forward();
            window.history.pushState(null, '', window.location.href);
            console.log('prevent go back')
        };

        window.history.pushState(null, '', window.location.href);
        window.addEventListener('popstate', preventGoBack);

        return () => window.removeEventListener('popstate', preventGoBack);
    }, [])

(뒤로가기 이벤트를 감지하고 해결하기 위해 삽질했던 코드들...)

결국 여러가지 글들을 찾아보니, 웹과 앱의 통신을 통해 해결하라는 글들이 많았다.
=> 하지만 이것도... 결국 서로 통신간의 간격이 발생하고, 또 앱 업데이트를 해야하기 때문에 패스 

그렇게 그렇게 시간만 흘러가던 중... 알게된 

 

hammer.js !! 

슬프다... 왜 이걸 이제서야 할게 되었는지

http://hammerjs.github.io/

Hammer.JS - Hammer.js

공식홈페이지에서보면, 클릭이나 스와이프 등등 다양한 이벤트를 웹에서 잡을 수 있도록 해주는 라이브러리다

관련 소개 글은 정말 잘 정리해놓으신 글이 있어서 첨부

모바일웹 터치 제스쳐 적용기 - [1] 터치 제스쳐 이해하기

 

모바일웹 터치 제스쳐 적용기 - [2] Hammer.js로 쉽게 구현하기

 

결론적으로 꽁술에는 많은 부분 해당 라이브러리를 통해 스와이프 이벤트를 잡고, 팝업을 끄도록 처리해주었다.

조금 주의해줘야했던 부분은 
아래 이미지와 같이 스와이프를 해서 보는 부분 
배너나 메뉴판의 경우 스와이프 이벤트를 잡히지 않도록 해야했다.

 

이 부분을 해결하기 위해 해당 부분을 제외하고 className들을 일괄적으로 부여

아래 코드를 적용해주었다.

useEffect(()=>{
      const viewerImage = document.getElementsByClassName("detail_swipe")
      if(viewerImage.length !== 0){
        for (let i =0 ; i<viewerImage.length ; i++){
          const hammertime = new Hammer(viewerImage[i])
          hammertime.on('swipe', function(ev) {
            // 상세정보를 꺼준다.
            if (detailPartnerInfo){
              ShowDetailPartner(false)
            }
          });
        }
      }
},[])

Hammer.js를 써주기 위해서는 일단 먼저 적용해줄 부분을 가지고 온 다음에
new Hammer( 해당 부분 ) 을 적용해줘야 한다.

나는 스와이프 했을 때 위로 가기를 적용할 부분들 (배너와 메뉴판 부분을 제외하고) className을 "detail_swipe"로 적용해주었고,
해당 부분을 가지고 와 for문을 돌면서 하나씩 Hammer를 적용해주었다.

휴 해당 부분을 적용해주고 나니 ㅠㅠ 정말 앱처럼 스와이프로 너무 잘 작동한다!!!!

어떤 키워드를 조사해야 할지도 몰라 막막헀는데, 누군가 나처럼 막혀있을 것 같아서 글을 적는다.

# 혹시라도 document.getElement를 가지고 오면 length가 0인 경우 => 랜더링 시점 이슈로
아래와 같이 setTimeOut을 적용해주면 된다.

useEffect(()=>{
      setTimeout(() => {
        const viewerImage = document.getElementsByClassName("detail_swipe")
        if(viewerImage.length !== 0){
          for (let i =0 ; i<viewerImage.length ; i++){
            const hammertime = new Hammer(viewerImage[i])
            hammertime.on('swipe', function(ev) {
              // 뒤로가기
              setBack(true)
            });
          }
        }
      }, 200);
    },[])

 

아래는 적용된 꽁술 서비스 

웹이기때문에 웹에서 바로 들어가볼 수 있다.

https://app.ggongsul.net/intropage 

술집 갈 땐 잊지 말고, 꽁술!