Pull to Refresh UI in 2018

이 글은 지금으로부터 5년 전에 작성한 '당겨서 새로고침 UI와 사례' 글의 후속 편이다.

해당 글은 새로고침을 위한 UI가 버튼 탭에서 pull to refresh로 변한 과정과 구성 요소, 25개의 앱 사례를 토대로 UI 패턴을 살펴본 글이다. 최초 피엑스디 블로그에 작성했던 2013년 5월에는 아이폰 4, iOS 6을 사용했던 것 같다. 한창 스큐어모피즘이 먹어주던 시절이다. 지금은 과거에 비해 휴대폰은 훨씬 커졌고 해상도는 높아지고 인터페이스와 디자인 언어 역시 많은 변화가 있었다. 갑자기 궁금해졌다. 마이크로 인터랙션과 모션 피드백이 더욱 정교해진 오늘날, 당겨서 새로고침 UI는 어떻게 변했을까? 5년 전에 살펴보았던 앱을 다시 꺼내 보기로 했다.

과거 Pull to refresh의 UI 패턴은 기본, 변화, 도약 이렇게 세 가지로 분류하였었다. 지금 와서 보니 패턴이란 용어는 적절하지 않아 보인다. 그냥 유형이라고 부르는 것이 맞겠다. 각 유형에 속했던 앱은 다음과 같다.

기본

: Facebook, Twitter, Youtube, Pose, Vyclone

초기 트위티가 공개했던 Pull to refresh에서 크게 벗어나지 않는 기본적인 유형. 텍스트와 화살표, 인디케이터를 제공.

변화

: 쿠팡, Pocket, Readability, Fancy, 카카오스토리, Pinterest, 싸이월드, Intonow, 네이트온, 비트윈, Vimeo, Vine

기본에서 구성 요소 일부분에 변화를 준 유형. 화살표를 삭제하거나 얼럿 창을 추가한 사례 등이 포함됨.

도약

: Dashboard, iOS Mail, Podcast, Gmail, Google+, Tumblr, Path, Twitter music

iOS 6의 메일 앱이나 트위터 뮤직처럼 기본에서 과감히 탈피하고 새로운 요소를 도입한 유형.

2013 vs. 2018 Pull to refresh UI

왼쪽이 2013년이고 오른쪽이 2018년 8월경의 모습이다. 당겨서 새로고칠때 피드백과 UI 요소를 비교해 보겠다. 모바일에서는 네트워크 속도에 따라 이미지가 바로 보이지 않을 수도 있다. gif 파일이니 조금 기다린 후 모션을 꼭 확인해 보길 바란다.

1. Facebook

2013년 페이스북의 당겨서 새로고침 UI는 인디케이터와 아이콘, 텍스트 정보가 제공되었다. 2018년 지금은 인디케이터만 제공한다.

2. Twitter

2013년 트위터의 당겨서 새로고침 UI는 인디케이터와 아이콘, 텍스트 정보가 제공되었다. 2018년 지금은 아이콘과 인디케이터를 제공한다.

3. Youtube

2013년 유튜브의 당겨서 새로고침 UI는 인디케이터와 아이콘, 텍스트 정보가 제공되었다. 2018년 지금은 색상과 모양이 변화하는 인디케이터를 제공한다. (위 이미지를 캡쳐하고 4개월이 지난 현재는 색상 변화 없이 모양만 변한다.)

4. 쿠팡

2013년 쿠팡의 당겨서 새로고침 UI는 무려 오방색 인디케이터를 사용했다! 2018년 지금은 새로고침 방식이 바뀌어 버렸다. 그냥 아래로 flicking 하면 스크롤바가 내려가면서 새로운 리스트를 미리 불러와 화면에 띄운다. 무한 스크롤이다.

5. Pocket

pocket의 당겨서 새로고침 UI는.... 지금도 똑같다. 5년 동안 한결같은 것이다. 이런 친구가 주변에 한 명쯤은 있어야 한다.

6. Fancy

2013년 Fancy의 당겨서 새로고침 UI는 텍스트 정보만 제공되었다. 2018년 지금은 화면 최상단 중앙에서 인디케이터만 제공한다.

7. 카카오스토리

2013년 카카오스토리의 당겨서 새로고침 UI는 인디케이터와 텍스트 정보가 제공되었다. 2018년 지금은 인디케이터만 제공한다.

8. Pinterest

2013년 핀터레스트의 당겨서 새로고침 UI는 인디케이터와 텍스트 정보가 제공되었다. 2018년 지금은 단추 같이 생긴 인디케이터만 제공한다.

9. 싸이월드

2013년 싸이월드의 당겨서 새로고침 UI는 인디케이터, 아이콘, 텍스트 정보와 화면 중앙에서 별도의 얼럿이 제공되었다. 2018년 지금은 인디케이터만 제공한다.

10. 네이트온

2013년 네이트온의 당겨서 새로고침 UI는 인디케이터, 아이콘, 텍스트 정보와 화면 중앙에서 별도의 얼럿이 제공되었다. 2018년 지금은 얼럿을 노출하지 않는 점을 제외하고 동일하다.

11. 비트윈

2013년 비트윈의 당겨서 새로고침 UI는... 참 아기자기했다. 2018년 지금은 인디케이터만 제공하는데 개발을 어떻게 한 건지 빨리 사라지지 못하고 리스트 위에 미련을 남긴다.

12. Vimeo

2013년 비메오의 당겨서 새로고침 UI는 지금 보아도 깔끔하다. 아이콘과 인디케이터가 제공되었다. 2018년 지금은 인디케이터만 제공한다.

13. iOS Mail

2013년 iOS 6 메일의 당겨서 새로고침 UI는 아이콘과 인디케이터뿐만 아니라 당겨서 떼는 제스처에 의해 늘어나는 찰떡 오브젝트가 제공되었다. 2018년 iOS 12인 지금은 인디케이터만 제공한다.

14. Podcast

iOS Podcast의 당겨서 새로고침 UI는 iOS 메일과 동일한 변화가 있었다.

15. Gmail

2013년 G메일의 당겨서 새로고침 UI는 아이콘과 색상이 변화하는 오브젝트가 제공되었다. 2018년 지금은 모양이 변화하는 인디케이터를 제공한다. 유튜브와 동일하다.

16. Google+

2013년 구글 플러스의 당겨서 새로고침 UI는 색상이 변화하는 오브젝트, 텍스트 정보가 제공되었다. 2018년 지금은 색상과 모양이 변화하는 인디케이터를 제공한다. 유튜브와 동일하다.

17. Tumblr

2013년 텀블러의 당겨서 새로고침 UI는 iOS 6 메일에서 보았던 찰떡과 모션이 있는 오브젝트가 제공되었다. 2018년 지금은 인디케이터만 제공한다.

18. Path

Path의 당겨서 새로고침 UI는... 여전하다. (이제 안녕)

'Pull to Refresh' UI의 현재

지금까지 총 18개의 앱을 실행하여 2013년과 2018년의 당겨서 새로고침 UI를 비교해 보았다. 2013년에는 총 25개의 앱을 보았는데 5년 사이에 아래 7개의 서비스가 망해 버렸다. ㅜㅜ

Pose, Vyclone, Readability, Intonow, Vine, Dashboard, Twitter music

문 닫은 서비스는 그렇다 치고 당겨서 새로고침 UI에는 대부분 공통적인 변화가 있었다. 바로 간소화이다.

과거 당겨서 새로고침 UI의 기본 요소였던 화살표 아이콘과 텍스트는 제스처 방향과 상태 정보를 표시했다. 컬러풀하고 화려한 애니메이션의 적용이 많았다. 2018년에 와서는 대부분 생략되고 스피너만이 아주 잠깐 빙글 돌다가 사라질 뿐이다. 왜 그럴까?

모두가 알고 있다

스크린 위에서 두 손가락 사이를 벌리면 사진을 확대할 수 있다. 스마트폰 사용자 중에 이것을 모르는 사람은 이제 없다. 이와 마찬가지로 Drag & drop, 당겼다가 떼면 새로 고칠 수 있다는 것 역시 모르는 사람이 없다. 더 이상 구분동작 설명과 학습이 필요하지 않다.

시간이 없다

네트워크 발전으로 데이터를 다운로드하는 시간 역시 크게 줄어들었다. 큰 이미지와 영상도 과거보다 더 빨리 화면에 나타난다. 리프레시하는 찰나의 순간이 콘텐츠를 불러오기에 충분한 시간이 되었지만, 완료되는 시간이 감소한 만큼 새로고침에서의 복잡한 정보와 요소를 모두 전달하기 어려워졌다.

방해된다

작은 모바일 화면에서도 이미 우리의 눈은 봐야 할 것들로 가득하다. 플레이 버튼을 누르지 않아도 자동으로 동영상이 재생된다. 이런 와중에 당겨서 새로고칠 때마다 현란한 움직임과 TMI를 봐야 한다는 것은 매우 피곤한 일이다. 구태여 존재감을 드러내지 않아도 된다. 이제는 감추는 요소가 된 것이다. 제스처에 즉각 반응하되 최소한의 피드백만 제공함으로써 사용자 시선을 분산시키지 않고 콘텐츠의 몰입을 깨지 말아야 한다. 그러나 이러한 흐름을 무시하는 분야가 있다. 바로 이커머스이다.

E-commerce의 Pull to Refresh UI

위 세 개 업체의 당겨서 새로고침은 브랜드 로고, 상품 카테고리, 원형 아이콘을 이용한 그나마 단순한 방식이다. 옥션, Amazon, LF mall, Airbnb, trivago 등등의 앱도 확인해 보았는데 일반적인 스피너 또는 쿠팡과 같은 무한 스크롤링 방식을 제공했다.

위 세 개 업체의 당겨서 새로고침은 두세 번씩 당겨도 모션 이미지를 제대로 보기가 쉽지 않았다. 앞서 언급했던 것처럼 충분한 시간이 없기 때문이다. 스크린 녹화하려고 천천히 당겼기 때문에 이 정도이지 일반적인 제스처라면 저 문구와 이미지를 제대로 볼 수 없다. 정보 전달에는 효과적이지 않다. 애초에 무엇을 위한 것인지 조차 분명하지 않다. 사용자는 이것을 보려고 온 것도 아니고 봐줄 여유도 없다.

마치며

당겨서 새로고침이 어떻게 달라졌는지 비교해 봄으로써 구성 요소와 그래픽이 과거에 비해 많이 간소화되었음을 확인할 수 있었다. 본 글에 담지는 않았지만 Flipboard, BuzzFeed, HuffPost, Medium 등과 같은 콘텐츠 앱들도 일반적인 스피너만 제공했다. 반면, 이커머스 분야에서는 아직도 화려한 피드백을 일부 제공했으며, 짧은 시간 동안 파악할 수 있는 정보의 수준과 목적성의 중요함을 알 수 있었다. 앞으로는 더욱 소비되는 콘텐츠의 성격과 이용 환경에 맞춰 인터페이스의 우선순위가 달라질 것 같다.

Yelp의 당겨서 새로고침은 우주로

5년 뒤엔 또 어떤 모습일까? 그때는 몇 개의 서비스가 살아 있으려나.

*이 글은 브런치에서도 볼 수 있습니다 - @uxstar

연관글 : Pull to Refresh(당겨서 새로고침) UI와 사례

[참고##UI 디테일##]