출근길 버스를 기다릴 때, 길을 건너기 위해 신호를 기다릴 때 등 우리는 언제 어디서나 항상 기다림과 마주하게 됩니다. 일상에서뿐만 아니라 모바일, 웹 등의 미디어 환경에서도 로딩이라는 기다림을 마주하게 됩니다.
로딩은 프로그램이 처음 실행될 때 디스크에서 읽어 메모리에 저장하고, 이것이 화면에 출력되는 데까지 걸리는 시간을 의미합니다.
여러분은 모바일 앱이나 웹에서의 기다림의 경험 중 하염없이 돌아가고 있는 로딩을 보고 인내심의 한계를 느껴 화면 밖을 나가본 적이 있나요?
빨리빨리를 외치는 한국사회에 이미 물들어버린 저는 로딩이 조금만 늦어져도 완료되는 시간을 기다리지 못하고 여러 번 새로고침을 누르곤 합니다. 때론 프로그램을 종료할 때도 있습니다.
저는 2초 이상의 로딩이 지속될 때 위와 같은 행동을 하게 되는 것 같습니다. 그렇다면 다른 사용자들은 인내심의 한계가 작용하는 로딩 시간은 얼마일까요?
인내심의 한계의 시간은 ‘3초’
구글 리서치 자료에 따르면 모바일 웹 사이트의 로딩 시간이 3초 이상일 때 32%, 5초 이상은 90%, 6초 이상은 106% 마지막으로 10초가 넘으면 123%의 이탈률이 발생한다고 합니다.
* 이미지 출처: Google / SOASTA Research, 2017
긴 로딩 시간은 사용자에게 답답함과 지루함을 주며, 오류가 발생한 것 같은 생각이 들게 합니다. 그것은 이탈자를 증가시키게 되는데요. 그렇게 되면 사용자도 기업도 서로 만족하지 못하는 상황이 발생하게 됩니다. 긴 로딩 시간을 해결할 가장 좋은 방법은 시간을 단축하는 것이지만 그럴 수 없는 경우 디자인적으로 개선할 방법을 알아보았습니다.
[도널드 노먼의 UX 디자인 특강 책에서 대기열의 심리학 파트 부분에 있는 ‘데이비드 마이스터의 기다리는 동안 즐거움을 향상시킬 수 있는 몇 가지의 원칙'에서 도움을 받아 작성하였습니다.]
1. 사용자에게 로딩을 납득할 수 있는 충분한 정보를 제공
다음 제공될 시스템을 기다리는 동안 사용자에게 아무런 정보 없는 막연한 기다림은 당황스럽게 만듭니다. 시스템이 잘 작동되고 있는지, 에러가 발생했는지 알 수 없으며, 시스템에 대한 확신을 할 수 없게 됩니다.
때문에 어떤 이유에서 기다려야 하는지, 어떤 시스템을 처리하고 있는 상황인지, 로딩 시간이 얼마나 남아있는지 등의 안심을 시켜줄 만한 충분한 정보를 제공해야 합니다.
사용자에게 기다림을 납득할 수 있는 이유를 알려준다면 앞으로의 상황을 예측하고 이해할 수 있어 좀 더 시스템에 머무를 수 있게 할 수 있습니다.
몇 가지의 로딩으로 예를 들어 보도록 하겠습니다.
스피너 로딩
이 로딩은 무한 루프 애니메이션으로 계속해서 반복되는 스피너 로딩입니다. 대부분의 스피너 로딩은 짧은 로딩 시간 (1~2초)에 사용이 되기 때문에, 로딩 시간이 얼마나 걸리는지 정확한 정보를 담고 있지 않습니다. 하지만 3초 이상으로 로딩이 지속되는 곳에 스피너 로딩을 사용하게 된다면 아무런 정보 없이 계속 반복되는 것을 보고 사용자가 오류라고 받아들일 수 있게 됩니다. 그럴 때 스피너 로딩에 남은 시간에 대한 정보를 담는다면 사용자가 보다 편하게 기다릴 수 있게 됩니다.
프로그래스 바 로딩
프로그래스 바 로딩은 스피너 로딩과 다르게 시각적으로 남은 시간의 정보를 보여주고 있습니다. 이것은 로딩이 어느 정도 남았는지 이미지를 통해 짐작할 수 있습니다.
하지만 상단에 있는 로딩은 얼마나 기다려야 하는지 어느 정도 로딩이 됐는지에 대한 정확한 수치 정보를 알 수 없어 가늠만 할 수 있을 뿐입니다.
그렇기 때문에 언제 로딩이 완료될지 몰라 계속 화면만 보고 있어야 하는 불편함이 발생하게 됩니다.
하단에 위치한 로딩처럼 어느 정도 진행이 되었는지 혹은 진행 시간이 얼마나 남아 있는지 등의 정보를 함께 넣어준다면 사용자가 잠시 다른 일을 보고 와도 될 정도의 안심을 줄 수 있게 됩니다. 프로그래스 바는 시각적인 정보와 수치 정보 이 두 가지를 담을 수 있어 긴 로딩 시간에 사용하기 적합합니다.
스켈레톤 로딩
* Surfit 웹사이트
* 오늘의 집 웹사이트
프로그래스 바와 같이 시각적으로 정보가 보여지는 로딩인 스켈레톤은 빈 화면 대신에 다음 화면에 나올 것을 미리 보여주는 로딩입니다.
앞에서 말한 스피너 로딩, 프로그래스 바 로딩과 스켈레톤 로딩의 차이점은 대기시간이 아닌 ‘진행 상황’에 집중할 수 있는 로딩이라는 것입니다.
꼭 수치상의 정보가 아니더라도 미리 화면을 보여줌으로써 사용자에게 다음 나올 화면을 예측할 수 있는 정보를 제공합니다.
때문에 사용자에게 로딩이 끝난 후 나오게 되는 화면을 보고 놀라지 않도록 할 수 있는 장점이 있습니다.
* Behance 웹사이트
주로 이미지가 보여지는 페이지에는 위에 보이는 스켈레톤 로딩을 사용합니다.
다음에 나올 콘텐츠에 관련된 컬러를 미리 보여줌으로써 이것 또한 어떤 이미지가 보이게 될지 예측할 수 있도록 해 준 스켈레톤 로딩입니다.
2. 속임수 사용하기
책에서는 ‘물리적인 시간과 거리는 정확하게 예측하고 계산할 수 있지만 기다림에 대한 사람들의 인식은 물리학이 아닌 심리학의 지배를 받는다’라고 했습니다.
때문에 우리는 사용자들에게 체감상 빠르게 로딩이 되는 것처럼 느껴질 수 있도록 제작할 수 있습니다.
그 방법으로 로딩에 애니메이션을 활용한 속임수를 주는 것입니다. 애니메이션을 어떻게 사용하느냐에 따라 사용자들이 체감상 느끼는 로딩 시간이 달라지게 됩니다.
캐나다 프로덕트 디자이너인 Bill Chung은 ‘스켈레톤 로딩에 어떤 애니메이션을 적용하여 사용했을 때 가장 시간이 짧다고 느껴지는가’에 대한 실험을 진행했습니다.
* An example of a pulsing skeleton load
* An example of a slow and steady wave animation
(otherwise known as a shimmer)
그 결과 테스트에 참가한 사용자들은 정적인 것보단 동적인 것, 빠른 속도보단 느린 속도의 애니메이션, 펄싱(pulsing) 애니메이션 보단 웨이브(wave) 애니메이션을 사용했을 때 기다리는 체감속도가 빠르다고 느꼈습니다. 또한, 애니메이션이 나타나는 방향도 영향을 미쳤습니다.
왼쪽에서 오른쪽으로 보여주는 것이 로딩 시간을 좀 더 빠르게 느꼈다고 했습니다.
위 실험에 나온 애니메이션을 꼭 따라야 하는 것은 아닙니다. 하지만 수치적인 정보가 없는 스켈레톤 로딩에 정적인 로딩만 있다면 다음에 나올 화면을 예측할 순 있지만 현재 로딩이 진행 중인가에 대한 정보는 부족합니다. 때문에 동적인 애니메이션을 적용하여 사용하는 것이 사용자들에게 시스템이 진행 중인 것을 알릴 수 있는 좋은 방법이라고 생각합니다.
현재 우리가 사용 중인 모바일 앱에도 스켈레톤 로딩과 애니메이션이 동시에 많이 사용되고 있습니다.
아래의 두 예시자료는 Behance와 Youtube의 첫 화면 진입 시 시작되는 스켈레톤 로딩에 적용된 애니메이션 모습입니다.
 |
 |
|
* Behance App |
* Youtube App |
3. 기억에 남을 독특하고 즐거운 긍정적 경험 느끼게 하기
우리는 흔히 볼 수 있는 인테리어의 카페보다 브랜드 스토리를 담은 색다른 인테리어의 카페가 기억에 남듯, 평범했던 경험보다 독특했던 경험이
기억 속에 인상 깊이 남게 됩니다. 더불어 커피 맛이 좋고, 직원들의 서비스가 친절했다면 긍정적인 경험으로 자리 잡게 됩니다.
그렇게 카페를 생각하면 그때의 좋았던 경험이 먼저 떠올리게 되고, 그 기억은 다시 카페를 찾아가게끔 만듭니다.
이처럼 로딩도 애니메이션이나 디자인을 독특하고 재미있게 제작한다면 사용자의 흥미로움을 자극해 주의를 더욱 끌 수 있게 됩니다.
또 기다림의 시간을 따분하지 않도록 해주며, 동시에 즐거운 기다림의 경험으로 느끼게 할 수 있습니다.
여기에 브랜드 아이덴티티를 담은 로딩으로 제작한다면 사용자에게 브랜드 이미지를 긍정적인 이미지로 기억되는 일석이조의 효과를 얻을 수 있게 됩니다.
저의 생각을 조금 더 하자면 매 순간 다음 화면을 전환할 때마다 나타나는 로딩의 특성을 이용해 계속해서 브랜드를 사용자의 기억에 심어둔다면 문득 비슷한 것을 보게 됐을 때 우선으로 떠올리고, 찾게 되는 좋은 효과를 가져오지 않을까 생각합니다.
 |
 |
|
* Soundcloud Logo Animated by Rehana Khan |
* Burger Loader Animation by Rehana Khan |
 |
 |
|
* Loader by Su |
* Google Chrome Loading by UMLEARN |
* 배달의 민족 App 홈화면 새로고침 로딩
위 예시는 배달의 민족 앱 홈 화면에서 새로고침을 할 때 나오는 로딩입니다. 세 번째 방법과 딱 알맞은 예시라고 생각이 듭니다.
보통 앱에서 새로고침 로딩은 스피너 로딩이 흔하게 사용되는 것을 볼 수 있습니다. 하지만 배달의 민족은 작은 로딩도 놓치지 않고 브랜드 아이덴티티를 넣어 표현했습니다.
여기서 재미있는 점은 새로고침을 하기 위해서 화면을 아래로 ‘당겨야’ 하는 행위의 단어와 어떤 음식이 ‘땡긴다’는 두 단어로 말장난을 사용했다는 점입니다.
또 어떤 음식을 시켜야 할지 결정이 어려운 고객에게 새로고침으로 해결법을 제시한 점도 편리함을 제공하면서도 흥미로움을 자극한 방법 중 하나라고 생각합니다.
마지막으로, 작성한 글의 내용을 반영하여 올레티비 셋톱 전원 연결 시 보이는 로딩을 제작해보았습니다.
• 사용자가 오류라고 받아들이지 않는 시간인 ‘3초’의 로딩 시간을 사용.
• 계속 반복되는 로딩의 특성을 고려하여 시작과 끝이 자연스럽게 이어지도록 주의하며 제작.
• ‘빠른 속도 = 올레티비’ 를 나타내기 위해 인터넷이 선을 타고 빛의 속도로 수신되며, 올레티비가 만들어지는 컨셉을 설정.
• 선을 사용하여 빠른 속도와 방향성 애니메이션으로 표현해 브랜드 아이덴티티와 컨셉을 형상화.
이 주제를 작성하면서 책과 여러 자료들을 보고 세 가지의 방법으로 추려 나타내 보았습니다.
이야기를 좀 덧붙이자면 여기서 말한 방법과 로딩이 모든 상황에 다 알맞게 적용되는 것은 아닙니다.
사용하고자 하는 환경, 상황, 목적에 따라 맞는 적절한 방법과 로딩을 사용해야 합니다.
또 애니메이션이나 독특한 로딩을 제작할 때 너무 많은 데이터를 로딩에 담게 되면 용량이 커져 오히려 로딩 시간이 늘어나는 역효과가 나타날 수 있으니 주의해서 디자인하시길 바랍니다.
제가 작성한 글이 이탈율을 줄이는데 도움이 되었으면 좋겠습니다.
– 라이트브레인 가치디자인그룹 주다정
[참고 서적]
도널드 노먼의 ux디자인 특강
[참고 자료]
https://medium.com/myrealtrip-product/상황에-맞는-로딩-애니메이션-적용하기-2018af51c197
https://usersnap.com/blog/progress-indicators/
https://studio-jt.co.kr/google-amp-accelerated-mobile-pages/
https://uxdesign.cc/what-you-should-know-about-skeleton-screens-a820c45a571a
https://blog.amp.dev/2017/02/28/new-industry-benchmarks-for-mobile-page-speed/?_gl=1*cew2qt*_ga*YW1wLWpGMFYxUDVzQm5tN2ZBVkVpdzBPdVE.
