스켈레톤 스크린: 스피너 대신 사용하는 경우
스켈레톤 화면이 무엇인지, 스피너를 능가하는 경우, 실제 콘텐츠와 일치하도록 디자인하는 방법, 성능이나 접근성을 저하시키지 않고 애니메이션을 적용하는 방법.
핵심 포인트
스켈레톤 화면은 콘텐츠가 로드되는 동안 콘텐츠의 레이아웃을 표시하는 와이어프레임과 같은 자리 표시자입니다. 전체 페이지와 예측 가능한 모양의 목록에 사용하세요. 작은 영역이나 알 수 없는 콘텐츠에는 스피너를 사용하고, 긴 작업에는 실제 진행 상황을 확인하세요. 뼈대가 실제 레이아웃과 일치하도록 만들어 콘텐츠가 도착할 때 아무것도 튀지 않도록 합니다.
스켈레톤 스크린이란?
Nielsen Norman Group는 와이어프레임과 같은 시각적 요소로 레이아웃을 모방하는 로딩 페이지의 자리 표시자로 뼈대 화면을 정의합니다. 전체 페이지 로드에 사용되며 사람들이 빈 공간 대신 앞으로 나올 내용의 구조를 보기 때문에 인식되는 로드 시간을 줄입니다.
언제 어느 것을 사용할지
표시기를 콘텐츠 및 대기 시간과 일치시키세요.
- 스켈레톤: 피드, 카드, 프로필 등 레이아웃이 알려진 페이지 또는 목록이 로드됩니다.
- 스피너: 모양을 예측할 수 없는 작은 영역, 버튼 또는 콘텐츠입니다.
- 진행률 표시줄: 업로드, 내보내기 등 긴 작업을 측정할 수 있습니다.
- 아무것도 없음: 매우 빠른 응답, 표시기가 깜박이기만 합니다.
좋은 뼈대 디자인하기
콘텐츠가 도착할 때 페이지가 이동하지 않도록 실제 구성 요소 크기를 사용하면 누적 레이아웃 이동 점수도 보호됩니다. 모양을 단순하게 유지하고(이미지의 블록, 텍스트의 막대), 대비가 낮은 회색을 사용하고, 모든 것을 기다리지 않고 준비되는 즉시 각 자리 표시자를 실제 콘텐츠로 교체합니다.
뼈대 애니메이션
NN/g는 일부 뼈대에는 시스템이 여전히 작동 중임을 알리기 위해 펄스 또는 반짝이는 애니메이션이 포함되어 있다고 지적합니다. 느리고 미묘하게 유지하고, 레이아웃 속성 대신 불투명도나 변형에 애니메이션을 적용하고, 모션 감소가 켜져 있으면 중지하세요. 로드 영역에 "결과 로드 중"과 같은 액세스 가능한 레이블을 지정합니다.
기억할 핵심 원칙
- 스켈레톤은 다가오는 콘텐츠의 레이아웃을 보여주고 인지된 대기 시간을 줄입니다.
- 예측 가능한 페이지 및 목록 로드에 사용하세요. 작거나 알려지지 않은 영역을 위한 스피너
- 레이아웃 변경을 방지하기 위해 실제 치수 일치
- 쉬머를 미묘하게 유지하고 모션을 줄이려면 중지하세요.
- 화면 판독기의 라벨 로드 영역
자주 묻는 질문
출처
- Skeleton Screens 101 — Nielsen Norman Group
- Progress Indicators Make a Slow System Less Insufferable — Nielsen Norman Group
- Cumulative Layout Shift (CLS) — web.dev