05 / 프런트엔드 / 직접 만든 예시

로딩 중에도 자리 잡힌 화면 · Skeleton

본문이 올 자리에 뼈대 모양을 먼저 보여주는 로딩 UI

이번 주 읽을거리

로딩과 실패 상태까지 살펴봅니다.

이렇게 말해보세요

[목록 화면]의 로딩 상태를 실제 카드와 같은 크기의 스켈레톤으로 만들어줘. 완료 후 레이아웃이 튀지 않게 하고, 오류가 나면 재시도 버튼을 보여줘. 모션 감소 설정도 존중해줘.

빈 화면이나 회전 아이콘만 보일 때보다 어떤 내용이 나타날지 알 수 있습니다. 로딩·성공·오류 상태를 함께 요구해 빠진 상태를 줄입니다.

스켈레톤은 실제 처리를 빠르게 만들지는 않습니다. 진행률을 모르면 임의의 퍼센트를 표시하지 않습니다.