Skeleton
Skeleton (스켈레톤)
스켈레톤은 페이지의 다른 부분을 막지 않으면서 콘텐츠의 한 영역이 로딩 중이라는 것을 사람들이 알게 해 주는 요소예요. 로딩이 진행되는 동안 자리를 잡아두는 일종의 '빈 뼈대'라고 생각하면 쉬워요.
스켈레톤은 레이아웃 안의 정보 구조를 암시하는 데 훌륭해요. 1초보다 오래 걸리는 콘텐츠를 점진적으로 로딩할 때 사용하세요. 구조를 알 수 없다면 progress bar나 spinner를 시도해 보세요. 스켈레톤은 사람들에게 무슨 일이 일어나고 있다는 것은 알려주지만, 언제 끝날지는 알려주지 않아요. 그래서 긴 작업에는 피하세요.
본문
Behavior (동작)
스켈레톤에는 wave와 pulse 두 가지 애니메이션 스타일이 있어요. Wave는 기본 애니메이션이고 가장 부드러운 전환을 제공하죠. 대부분의 경우, 특히 화면에 스켈레톤이 한 번에 많이 있는 경우에는 부드러운 경험을 위해 wave를 사용하세요.
가능하면 데이터를 동시에 요청해서 계단식 로딩(staggered loading)을 피하세요. 계단식 로딩을 피할 수 없다면 스켈레톤 애니메이션이 동기화를 유지하게 하세요. 그렇지 않으면 경험이 바쁘고 산산조각 나 보일 수 있어요.
Layout (레이아웃)
Communicate what's essential (핵심을 전달하세요)
스켈레톤을 사용해 사람들이 새 데이터에 대비하게 하세요. 앱 바의 탭처럼 레이아웃의 고정된 부분에는 사용하지 마세요.
최종 콘텐츠가 다양한 동적 컴포넌트를 로딩할 때는 스켈레톤으로 일관되고 높은 수준의 정보를 전달하세요. 가장 중요한 것은 단순하게 유지하는 거예요. 예를 들어 persona를 로딩한다면, 스켈레톤은 아바타, 제목, 부제를 반영해야 해요. 로딩된 콘텐츠에 존재 상태 배지(presence badge) 같은 구체적인 것이 있더라도 그것까지 반영할 필요는 없어요.
Accessibility (접근성)
Focusable components (포커스 가능한 컴포넌트)
로딩 컴포넌트가 포커스 가능하고 스켈레톤 콘텐츠를 보여준다면, 로딩 중임을 알리는 접근 가능한 이름이나 라벨을 포함했는지 확인하세요. 콘텐츠가 로딩된 후에는 키보드 포커스가 중단되지 않도록 하세요.
Live regions and aria-busy (라이브 영역과 aria-busy)
더 크거나 더 중요한 스켈레톤 콘텐츠 블록의 경우, 콘텐츠 로딩이 끝났을 때 화면 낭독기(screen reader)에 알리기 위해 라이브 영역(aria-live) 구현을 고려하세요. 라이브 영역은 잘못 사용하면 방해가 될 수 있어요. 라이브 영역이 너무 많지 않게 하고, 화면 낭독기 발표를 계속 방해하지 않도록 적절한 politeness 수준을 설정하세요.
라이브 영역에 스켈레톤이 여러 개 있지만 동시에 업데이트될지 확신할 수 없다면 aria-busy를 시도해 보세요. aria-busy를 true로 설정하면 화면 낭독기가 모든 콘텐츠가 로딩될 때까지 기다렸다가 발표하게 할 수 있어요. 콘텐츠가 로딩된 후에는 aria-busy를 false로 설정해서 콘텐츠가 준비되었음을 알려주세요.
더 알아보기 (Learn more)
- Skeleton 스토리북 및 React 가이드: react.fluentui.dev
- 구조를 모르는 로딩에는 Progress Bar 또는 Spinner 참고
- 긴 작업에는 스켈레톤 대신 progress bar를 사용하세요