Skeleton Screen

スケルトン・スクリーン / 2013– / 기법 / UI 스타일

읽어 들이는 동안 회전 표시를 내지 않고 내용이 들어오기 전의 빈 화면을 먼저 보여 준 뒤 거기에 정보를 조금씩 흘려 넣는 방법이다. Luke Wroblewski가 2013년에 자신이 만든 앱 Polar에서 얻은 반성으로 이 이름을 붙여 소개했다. 기다리게 하고 있다는 사실이 아니라 진행되고 있다는 것을 보여 준다.

Skeleton Screen — AI가 생성한 해석 이미지 1
AI가 생성한 해석 이미지입니다. 참고 작품이 아닙니다
Skeleton Screen — AI가 생성한 해석 이미지 2
AI가 생성한 해석 이미지입니다. 참고 작품이 아닙니다
Skeleton Screen — AI가 생성한 해석 이미지 3
AI가 생성한 해석 이미지입니다. 참고 작품이 아닙니다

한눈에 판단

시각적 특징

  • 읽어 들이는 동안 회전 표시도 진행 막대도 나오지 않는다
  • 본문과 이미지가 들어갈 자리에 같은 치수의 민무늬 면이 먼저 놓여 있다
  • 내용이 오기 전에 배치가 확정되어 있어 도착해도 요소가 움직이지 않는다
  • 정보가 한꺼번에 나오지 않고 영역별로 차례차례 채워진다

적합한 용도

  • 목록이나 타임라인의 첫 읽기에서 회전 표시를 걷어 내고 체감 속도를 높이고 싶을 때
  • 내용이 도착하는 순간 요소가 밀리는 화면을 위치와 치수를 먼저 확정해서 고치고 싶을 때

이 양식 사용하기

짧은 지침을 프로젝트에 적용하거나 구조화된 사양을 AI 도구에 넘길 수 있습니다.

design.md이미지 프롬프트JSON APIMCP·기계 접근겹치기
ChatGPT에서 열기Claude에서 열기Google AI에서 열기
자세한 제작법과 출처제작 규칙, 실제 사례, 비교, 연구, 인용 형식

사전 항목

타이포그래피
글자는 놓지 않는다. 제목과 본문이 들어갈 자리에는 실제 행간과 행 길이에 맞춘 민무늬 면을 늘어놓는다.
구성
완성된 화면의 뼈대를 그대로 쓴다. 요소의 위치와 치수를 먼저 확정해 내용이 들어와도 움직이지 않게 한다.
재료
바탕색에서 한 단계만 떨어뜨린 무채색 면을 쓴다. 둥근 모서리와 치수를 실물에 맞추고 색 수를 늘리지 않는다.
주의
실물과 치수가 다른 면을 늘어놓으면 내용이 도착하는 순간 화면 전체가 밀려 대신하려던 회전 표시보다 더 어수선한 화면이 된다.
더 읽을거리
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

관련 항목

UI 스타일 더 보기

UI 스타일에서 공통 인상이 많은 항목을 우선해 골랐습니다.

UI 스타일 전체 보기

이 항목을 인용하기

사전은 링크되기 위해 있다. 글을 쓰는 자리에 맞는 형식을 그대로 가져가면 된다.

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>

색인의 원래 위치로