2024-06-13
iOS 웹뷰에서 onclick 이벤트를 처리할 때 클릭된 영역에 회색 플리커 현상이 나타나는 문제를 경험하신 적이 있나요? 이는 웹 콘텐츠가 기본적으로 적용하는 클릭 피드백 효과로 인해 발생합니다. 이 블로그 포스트에서는 이러한 클릭 피드백 효과를 제거하는 방법을 소개해 드리겠습니다.
1. -webkit-tap-highlight-color
가장 간단한 방법은 CSS의 -webkit-tap-highlight-color 속성을 사용하는 것입니다. 이 속성을 통해 클릭 피드백 효과를 완전히 제거할 수 있습니다.
* {
-webkit-tap-highlight-color: transparent;
}
이 코드를 스타일 시트에 추가하면 페이지의 모든 요소에서 탭 하이라이트 효과가 제거됩니다.
2. -webkit-touch-callout
또한, -webkit-touch-callout 속성을 사용하여 터치 콜아웃(롱 프레스 시 나타나는 메뉴)을 비활성화할 수도 있습니다.
* {
-webkit-touch-callout: none;
}3. touch-action
touch-action 속성을 사용하여 기본 터치 동작을 제어할 수 있습니다. 클릭 피드백 효과를 제거하려면 이 속성을 설정할 수 있습니다.
* {
touch-action: manipulation;
}4. Button 및 Link 요소의 스타일링
특히 버튼 및 링크 요소에 대해서도 스타일을 적용할 수 있습니다.
button, a {
-webkit-tap-highlight-color: transparent;
}5. 예제: 모든 방법을 결합
아래는 위의 모든 방법을 결합한 전체 예제입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>iOS WebView Click Effect Removal</title>
<style>
* {
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
touch-action: manipulation;
}
button, a {
-webkit-tap-highlight-color: transparent;
}
</style>
</head>
<body>
<div>
<button onclick="alert('Button clicked!')">Click Me</button>
<a href="#" onclick="alert('Link clicked!')">Click Me</a>
</div>
</body>
</html>
위 코드를 웹뷰에 적용하면 클릭 피드백 효과가 제거되어 클릭 시 회색 플리커 현상이 발생하지 않습니다. 프로젝트의 요구 사항에 따라 필요한 부분만 선택하여 적용하시면 됩니다.
메인 이미지 출처 : 사진: Unsplash의Benjamin Ashton