아이폰(ios)에서 모멘텀(momentum) 스크롤 사용하기

 

안드로이드(Android)와 아이폰의 운영체제(IOS)의 차이점은 여러 가지가 있지만 그 중 대표적으로 UI 측면에서 구분되는 차이점이 화면 스크롤(Scrolling)입니다.

 

💡모멘텀 스크롤이란?

안드로이드는 모바일에서 화면을 스크롤(Android)링 하게 되는 상황을 예로 들어볼게요. 

손가락으로 화면을 터치를 한 후 위나 아래로 손가락의 제스처를 주게 되면 사용자가 움직인 화면의 방향으로 일정 영역만큼 스크롤에 가속도가 생기면서 이동되었다가 서서히 가속도가 줄어들면서 스크롤링이 멈추는 스크롤링을 볼 수 있는데 이것을 모멘텀 스크롤이라합니다. 우리말로 바꾸면 관성 스크롤 또는 가속도 스크롤이라고 말할 수도 있을 거 같습니다. 

 

💡 근데 모멘텀 스크롤을 왜 아이폰(IOS)에 적용해야 하나요?

안드로이드에는 모멘텀 스크롤이 기본으로 적용되어 있지만 아이폰의 경우에는 기본 스크롤링은 손의 제스처가 멈추게 되면 화면 스크롤링도 같이 멈추는 스크롤이 적용되어 있습니다. 이는 화면이 마치 끊겨서 보이는 느낌을 받게 됩니다.

사용자에 따라서 해당 UI에 대해 전혀 불편함을 느끼지 못 할수도 있지만 요즘은 기본적으로 화면에 대한 콘텐츠 양이 많아지고 모바일은 웹과 다르게 화면이 터치 기반으로 이루어져 있기 때문에 스크롤 페이징으로 많은 양의 데이터를 처리하는 경우가 많기 때문에 화면의 스크롤이 긴 화면에서는 아이폰의 기본 스크롤의 영역이 짧기 때문에 더욱 불편하게 느껴집니다. 

더욱이 기존 안드로이드에서 제공되는 모멘텀 스크롤에 적응되어 있다면 IOS의 기본 스크롤링은 생각보다 불편할게 느껴질 수 있습니다. 

 

👍그럼 어떻게 아이폰(IOS)에 적용해야 하나요?

이를 개선하기 위해서 IOS에서도 안드로이드와 동일하게 모멘텀 스크롤이 동작하도록 CSS에 속성을 추가하면 아이폰에서도 안드로이드와 동일한 자연스러운 모멘텀 스크롤을 사용할 수 있습니다.

overflow: scroll;
-webkit-overflow-scrolling: touch;

 

감사합니다.