때로는 ‘가짜 로딩’ 화면이 필요합니다
로딩 화면 UX 영리하게 설계하는 법
1. 누구나 그럴 테지만요. 로딩 화면은 반갑지 않습니다. 화면이 조금이라도 멈춰 있으면 오류인가 싶어 곧바로 ‘새로고침’ 버튼을 누르고요. 그래도 로딩이 길어지면 가차 없이 페이지를 꺼버립니다.
2. 실제로 지난 2017년 구글이 모바일 웹사이트 로딩 시간에 따른 이용자의 이탈률을 조사한 적이 있습니다. 연구에 따르면, 로딩 시간이 3초, 5초, 10초를 넘길 때마다 이탈률은 각각 32%, 90%, 123% 증가했습니다. 인내심의 한계가 3초라는 뜻일 텐데요. 이 조사 이후로 인터넷 속도가 비약적으로 상승했으니 기준은 더 엄격해졌을 겁니다.
3. 결국 로딩 시간이 짧을수록 매끄러운 사용자 경험을 만드는 데 도움이 된다는 이야기겠죠. 많은 웹 및 앱 개발자가 로딩 시간을 줄이거나, 디자인 요소를 통해 체감 시간을 단축하는 데 공을 들이는 이유가 여기 있습니다.
‘가짜 로딩’으로 신뢰 높여
4. 그런데 말입니다. 로딩을 최소화하는 게 항상 좋은 결과로 이어지는 건 아닙니다. 때로는 ‘가짜 로딩’ 화면이 사용자 경험을 더 높여 주기도 하죠.
5. 가짜 로딩이란 일부러 로딩 화면을 띄워 사용자가 기다리게 하는 걸 뜻합니다. 실제 작업은 이미 완료됐음에도 말이죠. 이 ‘속임수’는 몇 가지 상황에서 유용한데요. 먼저 무언가 중요한 작업이 마무리됐을 때입니다.
6. 예를 들어 금융 앱을 이용해 통장을 신규 개설하는 경우를 떠올려 보면요. 사용자가 개인정보를 입력하고 신원을 조회하는 등 복잡한 절차를 끝마친 뒤 최종적으로 ‘개설하기’ 버튼을 눌렀을 때, 로딩 화면이 잠깐 등장했다가 사라집니다. 이는 가짜 로딩일 가능성이 큽니다. 일부러 짧은 로딩 화면을 띄워 ‘지금 중요한 작업이 진행되고 있다’는 메시지를 은연 중에 전달하는 겁니다.
7. 만약 과정은 길고 복잡했는데 마무리가 순식간에 끝난다면 사용자는 이렇게 생각할 수 있습니다. ‘어? 이거 제대로 된 거 맞아?’ 사람은 대개 중요한 작업에는 더 많은 시간이 필요하다고 믿기 때문인데요. 이런 의심을 가짜 로딩 화면을 통해 해결하는 것이죠. 계좌 송금이나 대출 상품 또는 신용 등급을 조회할 때도 마찬가지입니다. 이처럼 가짜 로딩은 상황을 명확히 인지 시키는 역할을 합니다.
8. 중요한 문서를 저장하거나 무언가를 예약하는 경우도 비슷합니다. 최종 결과를 보여주기 전에 의도적으로 로딩 화면을 띄워 사용자에게 다음과 같은 메시지를 전달할 수 있습니다. ‘앱이 열심히 일하고 있습니다. 그러니 걱정하지 마세요’
9. 조금 더 유용하게 활용되기도 합니다. ‘되돌리기’ 기능이 대표적인데요. 예컨대 구글은 메일 발송 후 화면 하단에 실행 취소 팝업을 5초간 띄웁니다. 마치 발송에 5초가 걸리는 척 뜸을 들여 사용자가 행동을 취소할 여유를 주는 것이죠.
로딩 화면으로 긴장감 높이기
10. 게임이나 이벤트를 진행할 때도 가짜 로딩은 효과적입니다. 사용자의 즐거움을 극대화할 수 있기 때문이죠. 복권이나 경연 프로그램을 예로 들어 볼까요. 구매한 즉시 당첨 결과가 나오는 로또, 사회자의 뜸 들이기 없는 순위 발표를 상상해보세요. 무슨 재미가 있을까요? 기다린 만큼 결과는 더 짜릿한 법이죠.
11. 많은 앱의 랜덤 선물 이벤트나 당첨 결과 발표 페이지에 적용되는 추첨 형태의 로딩 화면이 바로 이런 역할을 합니다. 의도적으로 긴장감을 유발해 재미를 높이는 겁니다.
12. 로딩 화면을 설계할 때 효율과 속도만을 생각해선 안 되는 이유입니다. UX 디자이너 스티븐 P. 앤더슨은 ‘Wait for It…’이라는 제목의 칼럼에서 “(가짜 로딩은) 사용자의 감정을 고려해 설계한 디자인”이라고 정의하며 “때로는 짧은 기다림이 사용자 경험을 향상시킬 수 있다”고 말합니다.
13. 로딩 관련해 게임 업계에서 널리 사용되는 팁이 하나 있습니다. 로딩 화면, 특히 진행률 바(프로그레스 바)를 적용할 때 로딩 속도를 일부러 불규칙적으로 설계하는 겁니다. ‘버벅거림’을 의도하라는 거죠. 처음부터 끝까지 일정한 속도로 차오르는 로딩 바를 사람들은 ‘가짜’라고 생각하고, 이게 몰입을 해친다는 설명입니다.
시간에 따른 로딩 화면 UX
14. 가짜 로딩의 시간은 1~2초가 적절합니다. 이보다 짧으면 사용자가 충분히 인식하지 못하고, 넘어서면 사용자의 이탈 가능성이 커집니다. 보통은 사용자가 눈치 채지 못할 만큼 빠르게 지나가는 로딩 화면(0.1초 미만)에서 가짜 로딩이 널리 적용된다고 하네요.
15. 만약 로딩이 1초를 넘어서면 어떻게 할까요? 이때부터는 사용자의 이탈을 최소화 하기 위한 디자인이 필요합니다. 앞서 말한 효율과 속도의 논리가 적용되는 상황이죠.
16. 관련해 유용한 글을 발견해 일부를 정리합니다. 구체적으로 로딩이 1초를 넘어서면 사용자가 대기 시간을 인지하기 시작합니다. 로딩 구성 요소가 작은 경우(클릭 버튼, 파일 업로드 영역 등) ‘스피너’ 방식의 디자인을 권장하고, 화면 전체가 바뀔 때는 ‘스켈레톤’ 디자인이 좋습니다. 이미지가 핵심 콘텐츠일 경우 로딩 과정에서 주요 색상을 흐리게 처리해 미리 보여주면 더욱 매끄러운 이용 경험을 제공할 수 있습니다.
17. 2~10초라면 본격적으로 이탈률이 증가합니다. 때문에 사용자에게 로딩 진행 과정을 명확히 전달해야 합니다. 남은 시간이나 진행률을 숫자로 표시하는 식이죠. 수치적으로 정확히 가늠하기 어렵다면 ‘서버 연결 중’과 같은 표현을 통해 진행 단계를 알려주는 것이 좋습니다.
18. 만약 로딩 시간이 10초 이상이라면 ‘기다리지 않게 하는 것’도 유용한 방법입니다. 작업이 완료되면 메일로 안내해준다고 설명하거나, 구글 드라이브 업로드처럼 백그라운드에서 작업을 진행해 사용자가 다른 행동을 할 수 있도록 하는 것이죠.
그 밖의 로딩 화면 설계 팁
19. 지금까지는 시간을 기준으로 로딩 UX를 살펴봤습니다. 하지만 분량도 고려해야 할 요소입니다. 만약 불러올 화면이 복잡하면 구성 요소를 하나씩 표시할 수 있습니다. 로딩된 것부터 보여주는 것이죠. 사용자의 체감 대기 시간을 단축할 수 있습니다.
20. 여기에는 크게 두 가지 디자인 방식이 있는데요. 하나는 무한 스크롤입니다. 사용자가 목록이나 페이지 끝에 도달할 경우 이를 감지해 다음 콘텐츠를 로딩하는 것이죠.
21. 또 하나는 ‘더 보기’나 ‘페이지 숫자’ 버튼을 삽입해 사용자가 추가 콘텐츠를 불러오도록 결정하게 할 수 있습니다. 사용자의 요청 없이는 콘텐츠를 추가로 불러오지 않기 때문에 전체적인 로딩 시간을 줄일 수 있습니다.
22. 로딩 없는 서비스는 없습니다. 이왕 만드는 거 영리하게 설계해야 합니다. 기억하세요. 잘 만든 로딩은 사용자를 춤추게 합니다.
뉴스콘텐츠는 저작권법 제7조 규정된 단서조항을 제외한 저작물로서 저작권법의 보호대상입니다. 본 기사를 개인블로그 및 홈페이지, 카페 등에 게재(링크)를 원하시는 분은 반드시 기사의 출처(로고)를 붙여주시기 바랍니다. 영리를 목적으로 하지 않더라도 출처 없이 본 기사를 재편집해 올린 해당 미디어에 대해서는 합법적인 절차(지적재산권법)에 따라 그 책임을 묻게 되며, 이에 따른 불이익은 책임지지 않습니다.
- 에디터장준영 (zzangit@ditoday.com)
- 섬네일손 찬호
