Skeleton Screen
スケルトン・スクリーン / 2013– / 기법 / UI 스타일
읽어 들이는 동안 회전 표시를 내지 않고 내용이 들어오기 전의 빈 화면을 먼저 보여 준 뒤 거기에 정보를 조금씩 흘려 넣는 방법이다. Luke Wroblewski가 2013년에 자신이 만든 앱 Polar에서 얻은 반성으로 이 이름을 붙여 소개했다. 기다리게 하고 있다는 사실이 아니라 진행되고 있다는 것을 보여 준다.
읽어 들이는 동안 회전 표시도 진행 막대도 나오지 않는다 / 본문과 이미지가 들어갈 자리에 같은 치수의 민무늬 면이 먼저 놓여 있다 / 내용이 오기 전에 배치가 확정되어 있어 도착해도 요소가 움직이지 않는다 / 정보가 한꺼번에 나오지 않고 영역별로 차례차례 채워진다
사전 항목
- 적합한 용도
- 목록이나 타임라인의 첫 읽기에서 회전 표시를 걷어 내고 체감 속도를 높이고 싶을 때 · 내용이 도착하는 순간 요소가 밀리는 화면을 위치와 치수를 먼저 확정해서 고치고 싶을 때
- 타이포그래피
- 글자는 놓지 않는다. 제목과 본문이 들어갈 자리에는 실제 행간과 행 길이에 맞춘 민무늬 면을 늘어놓는다.
- 구성
- 완성된 화면의 뼈대를 그대로 쓴다. 요소의 위치와 치수를 먼저 확정해 내용이 들어와도 움직이지 않게 한다.
- 재료
- 바탕색에서 한 단계만 떨어뜨린 무채색 면을 쓴다. 둥근 모서리와 치수를 실물에 맞추고 색 수를 늘리지 않는다.
- 주의
- 실물과 치수가 다른 면을 늘어놓으면 내용이 도착하는 순간 화면 전체가 밀려 대신하려던 회전 표시보다 더 어수선한 화면이 된다.
- 더 읽을거리
- why the 2013 article attacked the spinner, and how it defines progress / what change in user reaction it reports for Polar / cases where the dimensions of the blank blocks do not match the actual content
관련 항목
이 항목을 인용하기
사전은 링크되기 위해 있다. 글을 쓰는 자리에 맞는 형식을 그대로 가져가면 된다.
- Link
- https://indexstyle.org/ko/styles/skeleton-screen
- Markdown
- [Skeleton Screen — IndexStyle](https://indexstyle.org/ko/styles/skeleton-screen)
- HTML
- <a href="https://indexstyle.org/ko/styles/skeleton-screen">Skeleton Screen — IndexStyle</a>