개요
인터렉션은 모호한 분야입니다.
존재한다고 해서 편리함이 피부로 와닿거나, 앱의 성능이 비약적으로 좋아지는건 아니지만(오히려 애니메이션 등의 연산 처리가 들어가 성능이 더 떨어지기도 합니다), 최신 시장에 만연한 유려하고 유기적인 앱에 익숙해진 유저가 인터렉션이 없는 앱을 마주하게 되면 말로 설명하기 힘든 딱딱함을 느끼게 됩니다.
마치 120hz 모니터를 사용하다가, 30hz 모니터를 바라보는 느낌과 비슷하다고 해야할까요?
이렇게 있을때는 모르다가도 없으면 체감되는 요소인 인터렉션은, 다른 시각으로 보면 작은 차이로 앱의 경쟁력을 좌우하는 요소가 될 수 있습니다.
하루에도 수백개의 앱이 마켓에 등록되지만, 그 중 살아남는 앱은 극소수입니다.
당장 여러분의 스마트폰을 켜서 몇 개의 앱이 설치되어있는지 세어보세요. 앱스토어, 플레이스토어를 비롯 마켓에 등록된 앱은 수십만 개에 달하지만, 여러분의 스마트폰에 설치된 앱은 백여 개 남짓이 되지 않을 겁니다.
이제 앱 시장은 앱의 본질인 기능과 편의성 그 자체만으로는 살아남기 힘들어졌습니다.
그들이 선택받지 못한 이유는 기능이 부족해서도, 성능이 모자라서도 아닐 겁니다.
이제 유저들은 기능 그 자체보다도 앱이 주는 경험과 직관성, 즉 딱딱하게 끊기지 않고 내가 생각하는 대로 움직이는 느낌을 더 원합니다.
그런 이유에서, 제가 구현한 인터렉션의 기술적인 요소와 개발 과정을 공유하고자 합니다.
그 첫 번째로 이번 포스트에서는 최신 앱에서 자주 찾아볼수 있는 끌어내려서 새로고침(Pull to Refresh) 인터렉션을 구현해봅니다.
끌어내려서 새로고침
끌어내려서 새로고침은 개발자나 모바일 앱 업계 종사자가 아니더라도 이름 그 자체만으로 어떠한 기능인지 유추하실 수 있을 겁니다.
그만큼 최근 모바일 앱에서 자주 찾아볼 수 있는 인터렉션입니다.
리스트 뷰와 페이지네이션 기능이 없는 앱을 찾아보기 힘든 만큼, 많이 사용되며 그만큼 기초적인 기능은 구현하기 쉽지만, 제대로 파고들면 제스처 감지를 세분화하거나 프로그레스 인디케이터 애니메이션의 상태를 여러 개로 나누어 관리하는 것 등 커스텀할 수 있는 요소가 많습니다.
다음은 예시로 필수적인 기능만을 담은 끌어내려서 새로고침 인터렉션을 구현한 모습입니다.
이것만으로도 끌어내려서 새로고침을 실행한다는 기능 자체는 구현할수 있지만, 어딘가 아쉬움이 느껴집니다.
다음은 이 기능을 조금 더 트렌디하게 구현한 모습입니다. 인스타그램의 끌어내려서 새로고침 인터렉션으로, 제가 이번 포스트 구현을 위해 참고한 예시이기도 합니다.
얼핏 보면 로딩 프로그레스 애니메이션 정도만 다른 듯 하지만, 자세히 보면 큰 차이가 있습니다.
인스타그램의 끌어내려서 새로고침 인터렉션은 유저의 제스처 감지를 세분화하여 애니메이션을 더 유기적으로 만들어냅니다.
일반적인 속도로 아래로 끌어내리는 플로우, 빠르게 낚아채듯 끌어내리는 플로우 등등, 유저의 손가락이 전달하는 제스처의 상태에 따라 프로그레스 애니메이션의 속도와 반응이 달라집니다.