Skeleton UI 적용기

시작하며

이전부터 유튜브의 skeleton UI를 좋아했다. 이미지와 영상이 대부분이라 로딩시간이 오래 걸리는데 아래와 같은 skeleton ui는 사용자가 대기하는 시간을 더 빠르게 느끼게 해주고 그 다음에 나올 화면에 대한 예측이 가능하게함으로 사용자 경험을 높일 수 있다. 

youtube의 skeleton UI

Skeleton UI

skeleton UI는 사용자에게 화면을 보여주기 전에 나타나는 로딩 에니메이션으로 단순히 돌아가는 loading 애니메이션보다 더 나은 사용자 경험을 제공한다. 하지만 무조건 skeleton UI를 적용하는 것이 좋은 것은 아니다. 닐슨 로먼에서 발표한 자료에서는 1초 이하로 걸리는 작업에 대해 skeleton UI뿐 아니라 loading 상태를 나타내는 Progress Indicator를 보여주는 것은 오히려 깜빡임을 유발해 불안함을 느끼게 한다고 말한다. 따라서 데이터를 가져오는데 시간이 걸리는 작업에 적절히 사용해야 한다.

 

Skeleton UI 적용하기

사실 오래전부터 skeleton UI를 적용해보고 싶었지만 간단한 프로젝트는 금방 데이터를 가져와서 적용할 일이 없었다. 하지만 마침 최근에 만드는 board game을 위한 paper 앱에서 데이터를 가져오는데 2초 이상 걸리는 것을 파악하고 skeleton UI를 적용해보았다. 

 

skelton UI 적용 전

skeleton UI 적용 후

 

마치며

skeleton UI를 적용하는 것이 만사는 아니겠지만 적절히 사용할 경우 보다 친절한 사용자 경험을 줄 수 있는 것 같다. react Suspense와 함께 더 자연스럽게 사용하는 부분을 추후 리팩토링을 통해 다시 정리해보려 한다. 

 

 

참고

https://velog.io/@chchaeun/Skeleton-UI%EB%A1%9C-%EC%82%AC%EC%9A%A9%EC%9E%90-%EA%B2%BD%ED%97%98-%EA%B0%9C%EC%84%A0%ED%95%98%EA%B8%B0-with-Suspense

사용자 경험 개선을 위한 Skeleton UI 도입 with Suspense

https://velog.io/@oimne/UX-Progress-Indicator%EB%9E%80

UX - Progress Indicator란?