앗, 실수로 새로고침! 튕기는 모바일 화면 꽉 잡는 법
스마트폰에서 열심히 회원가입 폼을 작성하거나 지도를 이리저리 움직이고 있는데, 손가락을 위로 잘못 쓸어내리는 바람에 화면 상단에 '새로고침(동그란 화살표)'이 뜨면서 화면이 초기화된 끔찍한 경험, 다들 있으실 겁니다.
혹은 스크롤이 맨 위나 맨 아래 끝에 닿았을 때 화면이 고무줄처럼 '튕기는(Rubber-banding)' 현상 때문에 사이트가 엉성해 보이기도 합니다.
💡 일반 웹사이트와 진짜 '앱(App)'의 차이
네이티브 앱(App)은 화면을 끝까지 당겨도 튕기거나 새로고침되지 않고 화면이 액정 테두리에 단단하게 고정되어 있습니다. 웹사이트를 진짜 앱처럼 묵직하고 고급스럽게 만들려면 브라우저의 이 '오버스크롤(Overscroll)' 기본 동작을 꺼주어야 합니다.
1. CSS 한 줄로 당겨서 새로고침 원천 차단
과거에는 스크립트로 터치 이벤트를 복잡하게 제어했지만, 이제는 overscroll-behavior라는 CSS 속성 하나면 브라우저의 기본 튕김 현상을 완벽하게 잠재울 수 있습니다.
/* 웹사이트 전체의 당겨서 새로고침 및 고무줄 튕김 방지 */
body {
/* 세로(y) 방향의 오버스크롤 동작을 없애라! */
overscroll-behavior-y: none;
}2. 팝업창(모달) 스크롤 시 뒤쪽 화면이 움직인다면?
이 속성은 팝업창(Layer Popup)을 띄웠을 때도 엄청난 위력을 발휘합니다. 팝업창 안에서 스크롤을 끝까지 내렸는데, 갑자기 뒤에 깔린 원래 배경 화면이 덩달아 덜컹거리며 스크롤되는 현상(Scroll Chaining)을 겪어보셨을 겁니다.
이때 팝업창 박스에 이 속성을 적용하면 뒤쪽 화면으로 스크롤이 전이되는 것을 완벽하게 막아줍니다.
/* 팝업창 스크롤 시 뒤쪽 배경이 같이 움직이는 현상 완벽 방어 */
.layer-popup-box {
overflow-y: auto; /* 팝업창 내부 스크롤 활성화 */
/* 스크롤이 끝에 다다라도 부모 요소(배경)로 힘을 전달하지 마라! */
overscroll-behavior: contain;
}"사용자의 실수를 방어하는 것이 진정한 사용성(UX)입니다."
나눔웹은 고객이 입력한 소중한 데이터가 날아가거나 팝업창이 덜컹거리는 불안정한 요소를
모던 웹 기술로 완벽하게 통제하여 압도적인 안정감을 제공합니다.