스켈레톤은 무엇일까?
스켈레톤 UI의 역할은 무엇일까? 바로 로딩 중일때 사용자 경험을 개선하는 것이다
- 로딩 체감 시간 감소: 페이지의 윤곽을 보여줌으로서 사용자에게 ”무언가 진행중이다“를 전달해 체감 시간을 줄일 수 있다
- 레이아웃 쉬프팅 방지: 스켈레톤으로 미리 컨텐츠가 차지할 공간을 잡아놓기 때문에 시각적 안정감을 줄 수 있다
- 로딩이 필요한 곳만 부분적 적용: 로딩이 필요한 영역만 스켈레톤을 노출하고 나머지는 정상적인 콘텐츠를 노출함으로서 ux를 개선하고 지각 성능(로딩이 빨라보이게 하는 효과)을 개선시킬 수 있다.
이외에도 여러가지 장점들이 있지만, 요약하자면 스켈레톤을 적용하는 본질은 로딩 상태에 대한 사용성 개선이 핵심인 것이다.
오용되는 방식들…
이는 반대로 말하면, 사용성이 개선되지 않는다면 스켈레톤을 적용하면 안된다는 이야기이다. 대표적으로 많은 서비스들에서 범하는 오류는 이러하다.
- 적용된 스켈레톤과 실제 콘텐츠가 다른 경우
- 스켈레톤과 실제 콘텐츠의 크기가 달라 로딩 후 레이아웃 쉬프팅이 일어나는 경우
- 컨텐츠가 없거나, 불필요한 영역까지 스켈레톤이 적용된 경우
- 텍스트 영역 스켈레톤에서 폰트 크기나 line height를 고려하지 않고 적용되는 경우
이는 현업에서 훌륭한 UX로 좋은 평가를 받고 있는 많은 앱에서도 목격할 수 있다.


- 이유는 모르겠지만 로딩 중일때는 있었던 우측 상단의 chevron이 로딩 후에는 없어진다.