모바일 앱에서의 ‘로딩 애니메이션’ 어떻게 활용하면 좋을까?

로딩 화면, 그리고 로딩 프로그레스

언제까지 어깨춤을 추게 할거야~~~~

사용자가 지금 어떤 ‘상황’에 처해 있는지를 알려주는 건 상당히 중요한 일입니다. 그 중 대표적인 방법이 진행 상황에 대한 알림이라고 할 수 있는데요! 사용자가 데이터를 보기까지 얼마나 기다려야 하는지 시각적으로 알려줌과 동시에 이탈하지 않게 하는 중요한 장치가 되기 때문입니다. 이 과정에서 고려해야할 변수들이 몇몇 존재하는데요. 먼저 네트워크 환경입니다. 네트워크 환경에 따라 로딩 자체가 불가능한 상황이 발생할 수 있죠. 이 경우 로딩 상태가 무제한 반복되는 것 보다 네트워크 환경을 확인할 필요가 있다는 점을 인지시켜 주는 것이 우선입니다. 네트워크 환경에 문제가 없다면, 로딩 시 플레이스 홀더를 두거나 진척도를 보여주는 등의 방법을 활용해 사용자와 보이지 않는 커뮤니케이션을 진행해야 합니다. 생각보다 오래걸리지 않아! 라는 느낌을 줄 수 있어야 하고요. 서비스에 따라 다양한 로딩 상황에 대한 사례들이 존재하지만, 분명한 것은 ‘아무것도’ 나타나지 않는 상황은 피해야 한다는 사실! 오늘은 로딩 중인 상황에 대해 서비스가 어떤식으로 ‘인지’를 시키는지 사례 중심으로 살펴보고자 합니다.

팬톤

팬톤

팬톤 모바일앱은 사용자가 보유하고 있는 사진들을 불러와 컬러값을 분석해줍니다. 사진들을 ‘불러와야’ 이후의 과정이 진행될 수 있다는 ‘단점’아닌 ‘단점’을 지니고 있는 서비스이기도 하죠. 최초 실행시에는 이 로딩에 많은 시간이 소요되기도 합니다. 첫 실행에, 오랜 로딩이라니 – 최악의 상황을 맞이할 수 있는 가능성을 지니고 있다는 생각이 드는데요! 우선 이들은 자신들의 심볼이라고도 할 수 있는 정사각형과 팬톤 로고안에 로딩 프로그레스를 넣어두었습니다. 정확히는 로딩 프로그레스에 대한 주목도를 높이기 위해 로고와 정사각형을 배치한 것. 물론 이 정도로 사용자들의 ‘기다림’을 달랠 순 없겠죠? 그래서 한가지 더! 일정 시간이 지나면 짧은 문구 하나를 보여줍니다. ‘흠…생각보다 오랜 시간이 걸리네’라고 말이죠. 물론 ‘네 사진 속 컬러가 다양해 분석하는데 시간이 조금 더 걸리네’와 같은, 조금더 재치있는 문구였으면 하는 아쉬움도 있지만 시스템 로딩 프로그레스만 출력해주는 것보단 지루함이 상대적으로 줄어든 인상을 받았습니다.

보통 2-10초 이내의 로딩 시 무한 루프 애니메이션을 활용하게 되는데요. 팬톤의 경우 평균치를 내긴 어렵지만 첫 로딩 시 10초 이내의 시간이 소요됐습니다. 앞선 기준에 맞긴 하지만, 10초라는 시간이 그리 짧은 시간이 아님을 감안했을 때 시간의 흐름에 따라 ‘문구’를 함께 보여주는 방법은 좋은 선택이 아니었나 싶네요. (그래도 문구 자체에 대한 아쉬움은 남습니다)

피들리

피들리

로딩 시, 문구를 사용하는 서비스는 팬톤 뿐만이 아닙니다. 제가 매일 아침, 점심, 저녁으로 확인하는 ‘피들리’ 역시 로딩 시 ‘배우는 것을 멈추지 마!’라는 문구를 띄워주고 있습니다. 피들리는 이미 서비스가 종료된 ‘구글 리더’와 같은 RSS 리더 서비스입니다. 한 곳에서 다양한 서비스의 콘텐츠를 확인할 수 있도록 도와주는 것이 기본이죠. 피들리를 활용하는 사용자들의 가장 큰 목표는 원하는 정보를 업데이트 되는대로 보기 위함입니다. 저 역시 국,내외 다채로운 미디어, 블로그 소식을 이 곳에서 확인하고 있고요. 팬톤이 루프 애니메이션을 먼저 띄우고 문구를 보여줬다면, 피들리는 배움에 대한 문구를 먼저, 이후에 루프 애니메이션을 띄우고 있습니다. 피들리를 실행하는 이유를 ‘배움’과 연결지어 띄워주는 점이 인상적이었습니다. 아주 짧은 시간이고, 길지 않은 내용이지만 뭐가 있을까- 라는 생각으로 실행했다가, 조금 더 자세히 살펴봐야겠다- 라는 생각을 하게 만들어주는 트리거가 될 수 있기에 더더욱!

로딩 시 화면은 아니지만, 카카오 브런치 역시 스플래시 화면에서 ‘너는 글쓰기를 통해 뭐든지 할 수 있어’라는 문구를 보여주는데요. 이런 문구들이 사용자들에겐 서비스를 사용하는 이유를 다시 한 번 확인하게 해주는 연결고리가 될 수 있지 않을까, 라는 생각이 듭니다.

해먹남녀와 배달의민족

해먹남녀

무한루프를 변형해 활용하는 사례도 많았습니다. 해먹남녀도 그 중 대표적인 사례라고 할 수 있는데요! 해먹남녀는 다양한 요리레시피를 영상으로 확인하고, 필요한 재료들을 바로 구매할 수 있는 서비스입니다. ‘음식(Food)’이 중요한 연결고리라고 할 수 있는 것. 그래서 이들은 로딩 시 대표적인 음식 아이콘을 반복적으로 보여주고 있습니다. 로딩 자체가 빠르게 처리되고, 아이콘 역시 빠른 속도로 전환되기에 기다림의 상태라는 것을 느끼지 못한다는 점이 좋았습니다. 자신들을 대표하는 아이콘을 활용해, 끊임없이 서비스에 대한 연상을 할 수 있는 시간으로 활용하는 점도!

배달의 민족

이 방법은 배달의 민족에서도 확인할 수 있었습니다. (누가 먼저 시작했는지는 ㅠㅠ) 떡볶이, 컵케익, 닭다리 등! 주문을 위해 앱을 실행한 사용자들에게 로딩의 순간에도 침샘을 자극하는 방법을! 으악!

트리플

트리플

작년 12월 진행된 구글 플레이 타임 행사 때, 올해의 베스트앱을 게임과 비게임으로 나누어 현장에서 투표를 진행했었는데요. 저는 비게임에 올라온 후보 중 ‘트리플’을 주저없이 선택했습니다. 싱가포르와 일본 오사카, 교토 여행시 많은 도움을 받았기 때문이었죠. 그전까지는 주로 위시켓을 활용해 여행 동선을 짰는데, 오랫동안 불편한 UI가 개선되지 않고, 콘텐츠 역시 업데이트 되지 않는 만족스럽지 못했습니다. 트리플은 여행지에 대한 기본 정보와 가이드로 시작해 숙소와 액티비티 예약, 주요 장소에 따른 동선 설정 등이 모바일 환경에서도 쉽게 설정 가능하다는 점이 매력적이었죠. 이런 트리플은 로딩 시 어떤 애니메이션이나 장치를 활용하고 있을지 궁금했는데요! 이 곳 역시 변형된 무한루프를 활용하고 있었습니다. 해먹남녀가 자신들을 대표하는 음식 아이콘 여러개를 반복적으로 보여줬다면, 트리플은 여러 도형을 교차로 보여주고 있네요!

핀터레스트

핀터레스트

핀터레스도 빼놓을 수 없죠. 해먹남녀와 트리플이 원형의 로딩 프로레스를 조금씩 변형해 활용한 것처럼 핀터레스트는 원안의 4개의 점을 애니메이션으로 활용하고 있습니다.

주말에 뭐하지? 주모와 브런치

주말에 뭐하지? 주모
Brunch

주모는 원형에 자신들의 로고를 넣어 활용하고 있네요. 로고 컬러 자체가 주목도가 높고, 로딩 중인 콘텐츠는 어둡게 처리 되어 있어 더 눈에 띄는 모습입니다. 우리가 사용자에게 인지시켜줘야 하는 것은, 지금은 로딩중이야! 라는 사실도 있지만, 오래 걸리지 않아, 곧 보여질거야! 라는 사실도 있기에- 페이스북이 잘 활용하고 있는 플레이스 홀더의 역할도 함께 생각해볼 수 있는 사례가 아닐까 싶네요. 우리에겐 꼼수지만, 사용자에게는 중요한 정보가 될 수 있을테니 말이죠. 브런치 역시 로고를 활용한 사례입니다.

야놀자 패밀리

야놀자
야놀자 펜션

야놀자의 대표 서비스, 야놀자와 야놀자 펜션은 우리에게 어떤 기다림의 즐거움을 제공하고 있을까요? 야놀자는 해먹남녀와 같은 방법을, 야놀자 펜션은 자신들만의 방법을 사용하고 있었습니다. 야놀자는 모텔을 음지에서 양지로(?) 꺼내온 대표적인 서비스이자 위자드웍스와 함께 국내 1세대 스타트업으로도 잘 알려진 곳인데요. 현재의 야놀자는 모텔은 다양한 숙박 정보 제공과 예약은 물론이고 레저, 티켓 등의 정보를 제공하고 있습니다. 이런 서비스의 특징을 아이콘으로 활용(침대, 폭죽, 스파 등), 로딩 시 지루함을 달래주고 있죠. 야놀자 펜션은 지역별 펜션 확인 및 예약에 더 집중하고 있는 서비스로 주모와 같이 자신들의 메인 ‘컬러’를 활용해 로딩중이라는 상황을 우리에게 알리고 있네요. 동일한 크기의 원이 아니라, 물결처럼 퍼지는 효과를 줘 더 눈에 들어온 사례이기도 합니다.

시럽

시럽

서비스의 ‘캐릭터’를 활용한 귀여운 애니메이션 사례도 있네요! SK플래닛의 ‘시럽’은 로딩이 필요한 순간 순간 (이름은 모르지만 귀여운) 캐릭터가 등장해 고개를 갸우뚱- 하는 모습을 확인할 수 있습니다. 티몬 역시 캐릭터를 로딩 시 잘 활용하고 있는 사례 중 하나입니다. 쿠팡은 배송조회 시 로켓 아이콘과 함께 로켓배송을 강조하는 문구를 함께 활용하기도 합니다. 이처럼 ‘귀여움’을 장착한 캐릭터는 기다림의 지루함을 보는 즐거움으로 바꿔주는 역할을 하게 됩니다.

VSCO

VSCO

VSCO는 시각적 분산 효과를 활용한 대표적인 사례입니다. 앱 상단에 프로그레스 바를 적용했는데, 동일한 컬러가 아닌 다양한 컬러를 섞어 애니메이션을 추가했네요. 진행되고 있음을 시각적으로 잘 표현하고 있는 사례가 아닐까 싶습니다.

구글 아트 앤 컬쳐

구글의 서비스를 빼놓을 수 없죠. VSCO와 같이 ‘바’형태를 활용하지만, 속도감이 추가 되었습니다. 로딩이 끝날수록 바의 크기가 점점 커지고, 속도 역시 빨리지기에 기다림까지 남은 시간을 쉽게 예측할 수 있습니다.

마치며,

우리 앱이 아닌, 다른 앱들은 로딩 시간을 어떻게 활용하고 있을까- 사용자에게 어떻게 인지시키고 있을까를 살펴보니 많은 서비스들이 루프 애니메이션을 적용하고 있다는 사실을 알 수 있었습니다. 사용자들이 많이 접했을 방법이기도 하고, 어렵지 않게 적용할 수 있는 방법이기 때문이라는 생각을 하게 되었죠. 무엇보다 중요한 것은 ‘서비스’의 성격을 잘 녹여낼 수 있어야 한다는 점이었습니다. 인스타그램과 같이 콘텐츠 ‘업로드’에 초점이 맞춰져 있고 콘텐츠 종류에 따라 용량이 커진다면 기다림의 시간이 더 길어질 수 밖에 없는데요. 이런 상황에서 동일한 조건으로 계속 돌아가는 ‘원’을 보게 된다면 사용자는 좋지 않은 경험을 하게 될 가능성이 높습니다. 이럴땐 업로드까지 남은 시간이나 %를 시각적으로 보여주는 방법이 더 효율적으로 다가올 수 있겠죠. OS 업데이트 시, 남은 시간을 확인한 경험이 있다면 더 쉽게 이해할 수 있습니다.

아무리 설계를 잘한 서비스라 하더라도 ‘로딩’자체가 없는 서비스는 없습니다. 시간이 걸리기 마련이죠. 그렇기에 사용자의 기다림을 지루하지 않게 만드는 장치들이 중요합니다. 404 에러페이지를 있는 그대로 노출하지 않고, 재치있는 방법으로 활용하기 시작한 것도 부정적인 경험을 긍정적인 경험으로 바꾸기 위함인것처럼 말이죠.

(함께보세요) 이런 에러페이지를 만난다면, 오히려 색다른 경험이 되지 않을까?

(함께보세요) 모바일 앱 스플래시 화면 어떻게 활용하면 좋을까?

(함께보세요) 앱스토어와 구글 플레이 스토어에서의 전환율 높이기, ‘스크린샷’의 역할!

댓글 남기기