[UI/UX] 좋은 기다림을 제공하는 법

ondo·2022년 10월 16일

당신이 두 웹 사이트에 들에갔다고 가정해보자.
두 사이트는 글을 불러오기까지 똑같이 5초가 걸린다.
첫번째 사이트는 로딩화면을 제공하는 반면 두번째 사이트는 로딩화면을 제공하지 않는다.
당신은 어느 사이트에 다시 방문하고 싶을것인가?

로딩의 종류

로딩화면에서 원하는 정보를 받기까지 걸리는 시간은 대체로 백엔드에서 결정되지만 클라이언트에서 결정되는 경우도 있다.

다음은 모 대학교의 커뮤니티다

글목록이 이렇게 몇글자의 제목과 한줄의 내용으로 보여지는 글목록의 경우에는 로딩시간이 그렇게 길지 않다.

하지만 아래 페이스북 글목록처럼 이미지가 들어가거나 보여지는 글이 길어질경우 많은 정보를 보여주어야 하기 때문에 로딩시간이 길어지게 된다.

첫번째 사례처럼 로딩시간이 짧은 경우에는 로딩스피너로 로딩화면을 만드는것이 좋은 선택지가 될 수 있다.

하지만 로딩스피너는 동작이 단순해 금방 지루해질 수 있기 때문에 긴 로딩시간이 걸리는 데에는 사용을 자제하는 것이 좋다.

두번째 사례처럼 로딩 시간이 긴 경우에는 스켈레톤 로딩 화면을 제공하는것이 좋다.

스켈레톤, 말 그대로 해골처럼 페이지의 골격을 미리 제공하는 것이다.
실제로 페이스북이나 유튜브 같이 많은 데이터를 필요로 해 로딩시간이 긴 웹사이트에 경우에 이 스켈레톤 로딩을 사용하고 있다.

하지만 스켈레톤 로딩의 경우 로딩화면의 골격이 데이터를 불러온뒤 페이지의 레이아웃과 많이 일치하지 않는다면 페이지를 보고있는 사용자가 당황할 수도 있다.

이 스켈레톤 로딩은 애니메이션과 함께 사용하면 더 좋은 시너지를 낼 수 있다.

위 로딩보다 아래 로딩이 애니메이션이 있기 때문에 더 덜 지루 할것이다.

이렇게 로딩의 종류들과 각각의 로딩들이 갖지고있는 장점에 대해 살펴보았다.
로딩이미지를 잘 사용하면 사용자의 경험을 개선 할 수 있을것이다. 당신에게 알맞는 로딩화면을 찾기를 바란다

Better than me