webview long touch 막기( 미리보기 끄기) - iOS/Safari disable touch-callout information

webview 서비스를 만들다 보면 운영체제 별로 다양한 이슈를 만나게 되는데요 

오늘은 iOS webview에서 나온 QA중 long press(길게 누르기) 이슈를 적어보려합니다.

 

 

 

 

문제 상황

QA에 새로운 이슈 하나가 잡혔는데 

iOS에서만 특정 요소를 길게 누를 경우 (long press) 미리보기가 열리는데 이걸 꺼달라는 요청이었습니다.

사실 미리보기는 정말 좋은데 이런 요청이 왜 나왓을까요?

 

바로 팀에서 webApp의 webview와 web을 완전히 분리하기로 결정했기 때문입니다.

그림으로 보면 아래와 같은데요,

 

다양한 서비스를 빠르게 시도하고 배포하기 위해 앱 내에는 webview서비스가 많은데, 이번에도 webview에서 먼저 시범적으로 해당 서비스를 만들었습니다.

 

 

web채널과 app 내 인앱브라우저로 노출하는 url을 아예 분리하였기 때문에

Link를 longpress를 누를 시 현재 url을 web채널에서 요청하게 되고 , web채널에 없는 url로 요청한 미리보기를 제공하게 되는 것이죠

 

 

 

 

iOS 에서 Link를 long press 시 나오는 미리보기

 

web채널엔 해당 route path가 없기 때문에 404 페이지가 뜰 수 밖에 없는 상황이죠.

web채널에 동일한 페이지 구현이 되기 전까지는 long press를 막는 방법을 선택했습니다.

 

 

해결 과정

 

How to disable long click on WebView in android

인앱 브라우저에서 long press ( long click)를 막는 방법을 searh 해보니 

 

 

CSS 설정으로 간단하게 해결할 수 있었습니다.

body {
    -webkit-touch-callout: none;
}

 

-webkit-touch-callout

long press 시 표시되는 기본 설명 표시 제어

iOS / Safari에서는 defaut로 기본 설명을 표시하기 때문에 off하려면 비활성화 해야 합니다.

 

-webkit-user-select

user가 text를 선택할 수 있는지 여부 

 

 

 

 stack overflow 그 외 다양한 설정값이 나왔는데, 현재 원하는 것은 미리보기 기능만 없애는 것이었기 때문에

touch-callout만 none 설정했습니다.

 

 

마무리

역시 webview에 기능을 추가할 때에는 OS 별로 확인이 필요하다는 걸 다시금 깨닫게 되는 시간이었습니다.🥲