[TOAST] 더 나은 UX를 위한 React에서 스켈레톤 컴포넌트 만들기를 읽고

https://ui.toast.com/weekly-pick/ko_20201110

 

이번에 코드스쿼드에서 투두리스트 미션을 진행하며, 초기 로딩 시 잠깐 지연이 발생하는 시간 동안 로딩 UI를 보여주면 어떨까라고 생각했었는데 생각만으로 그쳐버렸다.

하여 다음 미션에라도 구현을 해보자고 생각하며 찾아보던 중 스켈레톤 UI를 알게되고 여차해서 토스트의 포스팅까지 도달하게 됐다.

 

스켈레톤 UI는 프로그레스바, 로딩 UI 등을 콘텐츠를 불러오는 동안 사용자의 지루함을 줄여주는 목적을 가지고 있는 UI를 의미한다.

 

읽으면서 문득 이전 회사에서 간단한 스피너를 만들어서 사용했던 기억이 떠올랐다.

몇몇 API의 응답 시간이 길었기에 개선 기간 동안 잠시 사용하려던 UI였지만 막상 만들고 나서 적용했더니 클라이언트가 예상치 못할 정도로 매우 긍정적인 반응을 보여줬다. 결국 스피너는 개선 이후에도 대부분의 로딩이 필요한 사항에 적용하게 되었고, 사소한 기능 하나가 UX 개선에서 매우 긍정적인 결과를 낳을 수 있다는 경험을 했다.

 

포스팅에서 소개하는 스켈레톤 컴포넌트 처럼 실제 페이지와 비슷한 UI를 가지는 컴포넌트를 만들어보면 어떨까 싶은 생각이 들었다. 미션이나 개인프로젝트에서 여유가 된다면 시도해봐야지 ::)

 

예제

codesandbox.io/s/r6ddt

codesandbox.io/s/skeleton-vtn9m?from-embed=&file=/public/index.html

 

참고

material-UI - 스켈레톤 컴포넌트