태그에 class="no-date-view" , x-apple-data-detectors="none" 적용하기
현재 회사의 App은 네이티브 코드(Kotlin) + 웹 기술(JSP, WebView)이 결합된 하이브리드앱이다. 잠시 앱 형태에 대해 설명하자면 아래와 같다.
✅ 앱 형태의 분류
1️⃣ 하이브리드 앱 (Hybrid App)
네이티브 코드(Kotlin) + 웹 기술(JSP, WebView) 결합
웹 기술(HTML, CSS, JavaScript, JSP 등)을 활용하지만, 네이티브 기능(GPS, 카메라, 푸시 알림 등)도 사용 가능
대표적인 예: 네이버 앱, 카카오톡 내 웹뷰 페이지
2️⃣ 웹앱 (Web App)
완전히 웹에서 실행되는 앱
웹 브라우저에서 동작하며, 네이티브 기능을 거의 사용하지 않음
설치 없이 URL을 통해 접근 (PWA 같은 기술 포함)
대표적인 예: 구글 드라이브 웹 버전, 유튜브 웹 버전
팝업 내 테이블에 당첨자 발표 시작일 이전에는 8월 22일부터 매일 1명 씩 당첨자를 확인하세요! 라는 문구가 뜨도록 해두었다. 그리고 해당 작업을 웹에서 확인했을 때는 줄 바꿈이 일어나지 않았으나 iOS 개발 APP으로 확인했을 때는 줄바꿈 현상이 일어났다. (안드로이드는 정상적으로 보여졌다.)
그리고 그 텍스트를 클릭했을 때, 모바일 내 캘린더 앱으로 이동했다.
레드 박스 영역을 클릭하면 캘린더 앱으로 이동(iOS)
이를 해결하기 위해 아래와 같이 스타일 코드도 적용해보았으나 줄바꿈 및 클릭 현상은 지속적으로 발생하였다.
word-break: keep-all;
white-space: nowrap;이러한 현상은 iOS의 기본적인 텍스트 처리 방식과 관련이 있다. iOS에서는 날짜나 시간과 관련된 텍스트를 자동으로 인식하여 해당 텍스트를 링크로 변환하고, 이를 터치하면 캘린더 앱이나 날짜와 관련된 다른 앱으로 연결할 수 있게끔 한다.
문구가 줄바꿈이 되는 이유는 텍스트가 날짜로 인식된 후 자동으로 링크가 생성되면서, 이 링크가 텍스트의 길이 및 레이아웃에 영향을 주었기 때문일 수 있다. iOS에서는 링크로 변환된 텍스트가 화면에 표시될 때 줄바꿈이 발생하는 경우가 종종 있다.
이를 방지하기 위해서는 해당 텍스트가 날짜로 인식되지 않도록 HTML 태그나 CSS를 사용하여 조정할 수 있다. 예를 들어, 태그를 사용해 텍스트를 감싸거나, 날짜 부분을 다른 형식으로 작성하여 iOS가 날짜로 인식하지 못하게 할 수 있다.
날짜 인식을 방지하고 싶다면 아래와 같은 방법을 사용하였다:
부모요소에 class="no-date-view" 를 주고 날짜 부분을 <span> 태그로 감싸고 마크업 인라인으로 x-apple-data-detectors="none" 추가
<td colspan="3" style="padding: 5% 0;" class="no-date-view">
<p style="margin: 0;font-size: 14px;white-space: nowrap;" x-apple-data-detectors="none">8월 22일부터 <span style="font-weight: 700;">매일 1명</span>씩 당첨자를 확인하세요!</p>
</td>x-apple-data-detectors="none"는 HTML 태그에서 사용되는 속성으로, iOS 및 macOS에서 애플리케이션이 자동으로 데이터 감지기를 적용하지 않도록 하는 기능을 한다.
📌 자동 링크 생성 방지: iOS와 macOS에서는 이메일 주소, 전화번호, 날짜, 시간 등의 특정 패턴을 자동으로 감지하여 이를 링크로 변환하는 기능이 있다. 예를 들어, 날짜가 텍스트에 포함되어 있으면 이를 터치했을 때 캘린더 앱으로 연결될 수 있는 링크로 변환한다. x-apple-data-detectors="none" 속성을 추가하면 이러한 자동 링크 생성 기능을 비활성화할 수 있다.
사용자 경험을 제어하고자 할 때: 자동으로 생성된 링크가 사용자에게 혼란을 줄 수 있거나, 원하지 않는 앱(예: 캘린더, 전화 앱)으로 연결되는 것을 방지하고자 할 때.
이메일 디자인: 특히 이메일 템플릿에서 날짜, 주소, 전화번호 등이 포함된 텍스트가 자동으로 링크로 변환되지 않도록 할 때.
결론적으로, x-apple-data-detectors="none"는 iOS와 macOS에서 특정 텍스트가 자동으로 링크로 변환되는 것을 막기 위해 사용되는 속성이다. 이를 통해 개발자는 텍스트의 표시 방식을 더욱 정밀하게 제어할 수 있다.
class="no-date-view" 일 경우 click 이벤트에 event.preventDefault(); 를 추가하여 캘린더로 이동하는 액션 막기
// ios 캘린더 액션 막기
document.addEventListener('click', function(event) {
if (event.target.matches('.no-date-view p, .no-date-view')) {
event.preventDefault();
}
}, false);event.preventDefault();를 사용하는 이유는 사용자가 어떤 상호작용을 했을 때, 기본적인 브라우저 동작을 막고 자바스크립트로 더 복잡한 동작을 수행하게 하거나, 조건에 따라 특정 동작만 허용하도록 제어하기 위해서다. 이를 통해 개발자는 웹 애플리케이션에서 사용자 인터페이스를 더 유연하게 제어할 수 있다.
