열 마디 말보다 한 방의 퓨즈(Pause)

앱 내 로딩 타임을 훌륭한 사용자 경험으로 바꾸는 법

가뜩이나 싫은 로딩 시간, 보고 싶지 않은 광고를 억지로 봐야 해서 더 기분이 나빠질 때가 있죠. 그나마 광고는 가끔 재밌기라도 합니다. 도대체 지금 로딩이 되고 있기는 한 건지, 혹시 렉 걸린 건 아닌지 당최 알 수 없는 상황이 오면 당장 인터넷 창을 끄고 싶어 집니다. 연구에 의하면 모바일 방문자의 53%가 페이지 로딩에 3초 이상 걸릴 경우 바로 이탈해버린다고 합니다. 

로딩 타임 별 바운스 증가 추이(출처: WP ROCKET)

하지만 필수 불가결한 로딩도 있습니다. 예컨대 보험사, 은행 등 금융 관련 앱의 경우 개인정보를 다루다 보니 보안 절차를 위해 다른 앱 보다 긴 로딩 시간이 필요합니다. 앱을 구동할 때 뜨는 스플래쉬(splash) 화면 역시 꼭 필요한 로딩 타임이죠. 

피할 수 없는 로딩 타임. 이 짧고도 긴 시간을 멋진 사용자 경험으로 활용할 수는 없을까요? 

Case 1. 앱을 처음 구동할 때

The New York times

미디어 앱, 특히 뉴스를 보기 위한 채널을 선택할 때 가장 중요한 선택 기준은 무엇일까요? 아마도 앱 내에 있는 기사가 얼마나 다양하고, 또 믿을만한지 일 것입니다. 뉴욕타임즈는 자신을 선택(설치)한 사용자의 물음에 확신을 주는 한 마디를 스플래쉬 화면을 통해 던집니다.

Etsy

아기자기하면서도 특이한 수공예품을 주로 판매하는 온라인 장터인 엣지. 아마존이나 이베이 등 거대 마켓플레이스와 엣지 자신의 가장 큰 차별점을 첫 화면 하나로 보여줍니다. 

아직 엣지를 들어가 보지 않은 사람이라도 ‘world most imaginative’라는 표현을 통해 이 앱 안에 얼마나 기발한 상품들이 있을지 기대하게 되죠. 따뜻하면서도 개성 넘치는 (그리고 로고 컬러와 부딪히지 않는) 일러스트도 앱의 초기 이미지 형성에 큰 몫을 한다고 생각합니다. 

Case 2. 다음 화면으로 움직이는 로딩 시간

Shopify

온라인에서 개인의 쇼핑몰을 쉽게 만들 수 있도록 해주는 서비스인 쇼피파이는 모바일 앱으로도 쉽게 쇼핑몰을 개설하고 판매를 시작할 수 있도록 지원합니다. 

(여러모로 칭찬할 게 많은 쇼피파이 앱이지만) 이번 글의 주제에 맞게 로딩 타임 구동 방식을 칭찬해보겠습니다. 앱 화면에서 어떤 영역이나 버튼을 눌렀을 때, 다음에 나타날 화면을 예상할 수 있는 로딩 이미지가 나타난다는 점입니다. 아래 화면처럼요. 

이 로딩 화면을 통해 사용자는 다음 화면을 예측할 수 있습니다. 따라서 페이지 로딩에 시간이 조금 걸려도(실제로 쇼피파이 앱 내 페이지 간 로딩 타임은 제법 긴 편입니다) 왠지 안심하고 기다릴 수 있습니다.

신한카드

우리에게 익숙한 프로그레스 인디케이터(progress indicator)는 보통 스피닝 휠(동글동글하게 돌아가는 그것, 맞습니다)입니다. 국내 앱들 중 은행이나 보험사의 경우 자사 로고를 애니메이션으로 구성해 프로그래스 인디케이터로 사용하는 곳도 있습니다.

저는 신한카드 앱의 프로그레스 인디케이터를 재밌게 봤습니다. 단순히 스피닝 휠이나 회사 로고가 아니라, 카드 형태의 아이콘을 프로그레스 인디케이터로 사용하고 있었습니다. 크게 기능적인 요소는 없지만 브랜드의 아이덴티티를 잘 표현한, 소소하고 귀여운 한 방이라고 생각합니다.

Case 3. 앱이 멈춘 상태일 때(인터넷 끊김)

여러 가지 장애 케이스를 찾아 헤맸지만 생각보다 장애의 순간을 포착하는 게 쉽지 않아서, 이번 케이스에는 ‘인터넷 끊김’ 장애 메시지만 소개합니다.

Amazon

너무 귀엽지 않나요? 인터넷 끊김으로 일어난 짜증이 재치 넘치는 강아지 사진 한방에 녹아버립니다. 그리고 가끔씩은 다른 강아지가 나타납니다. 어느 녀석이고 사랑스럽습니다.

처음부터 인터넷을 끄고 앱 접속을 시도했을 때와(좌측 스크린 샷), 앱 사용 중간에 인터넷이 끊겼을 때(우측 스크린 샷)의 메시지가 다른 것도 재밌습니다. 아마존의 디테일을 확인할 수 있죠. 

왓챠(Whatcha)

이번 글을 준비하면서 핸드폰에 깔린 백여개 남짓한 앱을 모두 인터넷을 끄고 구동해보았는데요, 말도 안 되게 어색한 메시지가 뜨는 앱은 물론, 심지어 뭐가 잘못되었는지 말해주지도 않고 그냥 빈 화면만 보여주는 앱도 있었습니다. (어떤 앱인지는 아래 이미지 속에 정답이..)

왜 인터넷이 끊겼다고 말하지 못하니!

그러나 역시 왓챠는 달랐습니다. 

조금 아쉬운 점이라면 메시지가 앱 상단에 치우쳐 있다는 건데요, 감히 추측해보건대 인터넷 설정을 확인하기 위해 사용자의 시선을 위로 끌어올린 건 아닐까 싶습니다. 어쨌든 짜증 난 사용자에게 심호흡을 유도하는 상냥한 멘트가 인상적입니다. 

서비스를 설계하다 보면 당연히 완벽한 시나리오에 더 힘을 쏟기 마련입니다. 하지만 사용자의 기기, 서버 환경 등 기획자가 컨트롤할 수 없는 조건으로 인해 발생하는 장애 상황이나 로딩 타임 역시 사용자와 만나는 지점입니다. 사람은 반전이 있을 때 더 깊은 인상을 받죠. 자칫 사용자의 이탈로까지 이어질 수 있는 로딩 타임을 멋진 경험으로 바꿔보는 건 어떨까요.

장애 메시지를 더 모았으면 좋았을 텐데 아쉬움이 남네요. 실제 사용하다가 장애 현장을 맞닥뜨리게 되면, 잊지 않고 캡처해두어야겠습니다.