🦴 스켈레톤 화면 설계 가이드 | 빠뜨린 항목이 있을까?

실제 콘텐츠 영역의 블록 수 (개, 선택)

스켈레톤 플레이스홀더 블록 수 (개, 선택)

스켈레톤 구성 점검 항목

실제 콘텐츠와 블록의 위치·크기가 같다

텍스트 줄 수와 플레이스홀더 줄 수가 같다

이미지·아바타 영역의 가로세로 비율이 같다

모든 블록의 shimmer 방향과 속도가 같다

prefers-reduced-motion 일 때 움직임을 멈춘다

로딩 영역에 aria-busy 등 스크린리더 안내가 있다

로드 완료 시 레이아웃이 밀리지 않는다

데이터가 비었을 때 보여 줄 화면이 따로 있다

요청이 실패했을 때 보여 줄 화면이 따로 있다

스켈레톤 화면에서 점검할 것

스켈레톤 화면은 데이터가 오기 전에 들어올 콘텐츠의 모양을 미리 그려 두는 로딩 표현입니다. 실제 콘텐츠와 블록의 위치·개수·줄 수가 어긋나면 데이터가 도착하는 순간 화면이 밀려, 로딩을 감춘 효과가 오히려 사라집니다. 점검 항목을 체크하면 확인한 항목과 남은 항목이 집계되고, 블록 수를 넣으면 실제 콘텐츠와 비교해 줍니다.

집계 방식

체크한 항목 수 ÷ 전체 항목 수로 비율을 내고, 체크하지 않은 항목은 그대로 목록으로 보여 줍니다. 블록 수 비교는 스켈레톤 블록 수 − 실제 블록 수이며, 차이가 0이 아닐 때만 밀림 가능성을 안내합니다. 항목은 W3C 웹 접근성 지침의 상태 전달 원칙과 레이아웃 이동 관련 웹 성능 지표에서 공통으로 다루는 내용을 모았습니다.

한계

2026년 10월 기준 스켈레톤의 권장 표시 시간이나 블록 개수에 대한 공인 기준은 없어 이 도구는 값을 제시하지 않고 점수도 매기지 않습니다. 또한 스피너와 스켈레톤 중 무엇이 맞는지 판정하지 않습니다. 모션에 민감한 사용자를 위해 prefers-reduced-motion 일 때 반짝임을 멈추세요.

자주 묻는 질문

스켈레톤은 몇 초까지 보여 주는 게 맞나요?

공인된 권장 표시 시간이 없어 이 도구는 값을 제시하지 않습니다. 실제 응답 시간을 측정해 정하고, 응답이 늦어질 때 보여 줄 화면을 따로 준비하세요.

스피너를 쓰는 편이 나을 때도 있나요?

결과 레이아웃을 미리 알 수 없는 화면에서는 블록 모양을 그대로 따라 그릴 수 없어 스켈레톤의 이점이 줄어듭니다. 이 도구는 둘 중 무엇을 쓸지 판정하지 않습니다.

블록 수가 다르면 왜 문제가 되나요?

플레이스홀더보다 실제 블록이 많거나 적으면 콘텐츠가 도착할 때 그 차이만큼 레이아웃이 밀립니다. 블록 수와 줄 수를 맞추면 밀림을 줄일 수 있습니다.

🦴스켈레톤 로딩 화면 설계 가이드

관련된 도구

스크롤 진행률 인디케이터 가이드

페이지 전환 애니메이션 시간 가이드

스켈레톤 화면에서 점검할 것

집계 방식

한계

자주 묻는 질문

관련된 도구

스크롤 진행률 인디케이터 가이드

페이지 전환 애니메이션 시간 가이드

스켈레톤 화면에서 점검할 것

집계 방식

한계

자주 묻는 질문

같은 카테고리 도구