🦴

loading & Skeleton UI

loading & UI를 알아야 하는 이유

사용자가 이탈하지 않게끔 하고 싶다면 사용자가 능동적으로 참여하는 웹페이지와 경험을 만들고 싶다면

이 문서를 보고 나면

loading 애니메이션과 skeleton UI를 사용할 수 있다.

Skeleton UI

스피너와 로더는 전통적으로 콘텐츠를 로드하는데 시간이 걸린다는 것을 사용자에게 알리는 방법이었습니다. 이 방식은 훌륭하지만, 점차 빠르게 대체되고 있는데요. Skeleton UI는 대기 시간이 아닌 진행 상황에 초점을 맞추고 로딩 시간의 불만을 줄이기 때문에 기존 로더 UI를 대체하고 있습니다

UX적인 관점에서는 사용자는 콘텐츠가 페이지에 로드되는 동안 계속 참여해야 이탈률이 낮아진다고 봅니다. 그래서 기존의 스피너는 콘텐츠가 로드되기 전에 사용자를 참여시키는 아이디어는 훌륭한 UI였습니다. 하지만 대부분의 사용자는 시계처럼 돌고 있는 더미 애니메이션 스피너를 쳐다보는데 지루함을 느꼈는데요. 이는 더 나은 UI에 대한 고민으로 이어졌습니다. 사용자에게는 단순히 대기만 하는 것이 아니라 목표를 향해 나아가고 있음을 보여줘야 했습니다. 우리가 무작정 기다리는 신호등보다는 남은 시간을 알려주는 신호등이 덜 지루한 것처럼요.

유튜브 웹사이트에 접근하면 초기에 유튜브 영상이 로딩되기 전에 아래와 같은 화면을 본 적이 있을 겁니다. 이를 흔히 skeleton UI라고 합니다. 사용자들에게 어떤 형태로, 데이터와 화면이 그려질 것인지 보여주는 Skeleton UI는 따로 Component를 만들어 관리할 만큼 많이 사용되고 있는데요. 요즘 많은 웹사이트에서 지루한 대기 시간을 줄이기 위해 Skeleton UI를 이용하고, 일반적으로 흰색 배경과 반짝이는 CSS 애니메이션을 사용합니다.

아래의 페이스북 페이지를 보면 두 화면 모두 실제 콘텐츠를 로드하지 않았지만, Skeleton UI가 반영된 화면이 더 풍부해 보이고 반응이 더 좋아 보이는 반면 빈 페이지는 사용자에게 느리게 보입니다. 실제 콘텐츠는 동일한 속도로 로드되지만, Skeleton UI 화면은 보다 나은 사용자 경험을 제공합니다.

여기서 중요한 것은 Skeleton은 가능한 콘텐츠와 같아야 한다는 것입니다. 너무 다른 형태의 Skeleton을 보여주다가, 다른 화면을 보여주면 사용자 입장에서는 당황할 수도 있거든요.

물론 Skeleton UI도 만능인 것은 아닙니다. 중요한 것은 내가 만드는 서비스에서 어떤 UI가 사용자 경험에서 더 좋을지 고민해보는 것입니다. 때로는 단순한 로딩바가 더 의미 있을 수도 있기 때문입니다.

정리

•

Skeleton UI는 사용자에게 단순 기다림이 아니라 사용자가 콘텐츠 로드하는 시간동안 목표로 향해 나아가고 있다는 것을 알려주는 경험이다.

참고 링크

•

https://medium.com/better-programming/build-a-skeleton-component-in-react-for-better-ux-b1dca9d783e6

•

https://www.smashingmagazine.com/2020/04/skeleton-screens-react/

•

https://blog.logrocket.com/improve-ux-in-react-apps-by-showing-skeleton-ui/