Skeleton UI (스켈레톤)
설명
UX 요소 모델 단계 중 스켈레톤이라는 명칭이 있다. 이는 정보/내비게이션/인터페이스들의 디자인을 윤곽으로 보여주는 단계다. (참고 - 2.1.1 UX/UI 디자인 개념과 특징)
요즘 사용자들이 페이지에 접속하면 화면이 로딩되면서 콘텐츠 요소들의 윤곽이 드러나는 모습을 종종 볼 수 있는데 사용자들에게 지금 여기 콘텐츠가 있어요~ 현재 로딩되고 있답니다~ 라는 것을 시각적으로 알려준다.
스피너 같은 로딩 요소가 홀로 화면 중앙에 뱅글뱅글 돌아가는 것보다 UI 적으로 안정감과 기대감이 든다고 해야 할까..? 여하튼 스켈레톤 UI는 화면이 렌더링 되면서 데이터가 들어오기 전 단계를 나타낸다.
참고
skeleton ui, 스켈레톤 ui 키워드로 구글링 하면 많이 나오니 참고하면 될 것 같다.
그리고 직접 제작할 때 UI 라이브러리 참고해 봐도 좋을 것 같다.
그리고 Toast UI - 더 나은 UX를 위한 React에서 스켈레톤 컴포넌트 만들기 이것도 참고하면 좋을 것 같다.
Last updated