스켈레톤 UI란? (skeleton UI) 왜 사용해야하는가? 실제로 많이 사용될까?

스켈레톤 UI란?

데이터가 렌딩되기 전, 사용자가 보게 될 화면의 윤곽을 먼저 그려준다는 것을 의미한다.

스켈레톤은 해골이라는 의미를 뜻하는데, 사람의 형상 전에 뼈가 되는 해골이 있는 것과 비슷한 의미라고 생각하면 이해가 쉽다.

 

왜 사용해야하는가?

(한국 사람들에게만 특정되는 부분은 아니지만 한국에서 서비스 하는 회사/사람의 입장으로) 빨리빨리와 IT 강국의 맛에 익숙한 한국 사람들은 사이트가 조금이라도 느리면 바로 이탈해버리는 경우가 많다. 하지만 모든 애플리케이션들을 서버와 통신을 하며 로딩되는 시간이 필요할 수 밖에 없다. 이 때, 단순 흰색 화면만 노출된다면 많은 사람들이 렉먹은 줄 알고, 이탈하게 될 것이다. (일단 나부터)

스켈레톤 UI를 사용하게 되면 단순 로딩바를 돌리는 것 보다 이탈률이 더 적다고 한다.

 

스켈레톤 UI 주의점

사용자가 보게 될 화면을 미리 보여준다는 의미에서 스켈레톤 UI 컴포넌트는 실제 UI 컴포넌트와 비슷한 결을 가지고 있어야한다. 그래야 사용자가 서로 다른 페이지라고 인식하지 않을 수 있다.

 

스켈레톤 활용 사례

다양한 레퍼런스를 보여주는 'pintrest'의 웹 페이지이다. 이미지가 서버에서 불러오기 전 이미지가 들어 갈 자리에 색상으로 미리 해당 영역을 표현해주는 방식을 사용하고 있다.

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

 

---

 

상단에서 로딩바가 이탈률이 더 적다고 언급했지만 이는 무조건적인것을 의미하는 건 아니라고 생각한다. 적당한 페이지에서 로딩바/스피너/스켈레톤 등을 적당히 섞어가며 사용하여 사용자에게 최상의 서비스를 제공하는 유도리가 필요할 것 같다.

참고 사이트 : https://ui.toast.com/weekly-pick/ko_20201110

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