모바일 웹을 진짜 '앱(App)'처럼! 이미지 꾹 누를 때 뜨는 팝업 막기
스마트폰으로 쇼핑몰이나 홈페이지를 보다가 로고나 예쁜 배너를 무심코 꾹~ 길게 눌렀을 때, [이미지 저장 / 복사하기 / 공유] 같은 브라우저 기본 팝업 메뉴가 떠서 화면을 가린 적 있으신가요?
우리가 매일 쓰는 카카오톡이나 인스타그램 같은 진짜 '앱(App)'에서는 아무리 화면을 꾹 눌러도 이런 팝업이 뜨지 않습니다.
💡 왜 팝업을 막아야 할까요?
사용자가 사이트를 이용할 때 "아, 이건 앱이 아니라 그냥 인터넷 창이구나"라고 느끼는 순간 몰입감이 크게 깨집니다. 이 브라우저 고유의 간섭(Callout)을 막아주면, 웹사이트가 마치 스토어에서 다운로드 받은 진짜 어플리케이션처럼 쫀득하고 고급스럽게 느껴집니다.
1. CSS 한 줄로 '꾹 누르기' 팝업 원천 차단
과거에는 마우스 우클릭을 막기 위해 복잡한 스크립트를 썼지만, 모바일에서는 CSS의 touch-callout 속성 하나로 완벽하게 제어할 수 있습니다. 로고, 배너, 탭 메뉴 등 사용자가 저장할 필요가 없는 UI 요소에만 적용해 보세요.
/* 앱처럼 보이고 싶은 이미지나 메뉴 박스에 적용하세요 */
.app-like-ui {
/* 아이폰/사파리 꾹 누르기(저장 팝업) 완벽 방지 */
-webkit-touch-callout: none;
/* 꾹 눌렀을 때 파랗게 글자가 블록 지정되는 현상 방지 */
-webkit-user-select: none;
user-select: none;
}2. PC 환경 방어: 이미지 드래그(끌림) 현상 막기
모바일을 방어했다면 PC도 챙겨야 합니다. PC에서 마우스로 이미지를 클릭한 채로 옆으로 끌면, 이미지가 반투명하게 복사되면서 따라오는 '고스트 드래그(Ghost Drag)' 현상이 발생합니다.
HTML img 태그에 draggable="false" 속성만 넣어주면 돌덩이처럼 단단하게 고정됩니다.
<!-- HTML 태그에 draggable="false" 딱 하나만 추가하세요 -->
<img src="logo.png" alt="회사 로고" draggable="false">"훌륭한 웹사이트는 사용자의 무의식적인 터치 오류까지 방어합니다."
나눔웹은 PC 웹의 경계를 넘어, 스마트폰 사용자의 터치 습관까지 완벽히 분석하여
웹사이트를 하이엔드 네이티브 앱 수준으로 끌어올립니다.