UI 가이드요소
스켈레톤Skeleton
스켈레톤은 콘텐츠가 로딩되는 동안 실제 레이아웃과 같은 모양의 회색 뼈대를 먼저 보여주는 로딩 UI입니다. 빈 화면이나 스피너 대신 무엇이 어디에 나타날지 미리 보여줘 체감 속도를 높입니다.
- 이렇게 생겼습니다
- 로딩 중에 보이는 회색 블록들. 글자·사진 자리에 깜빡이는 막대.
- 프롬프트에 쓰는 이름
- Skeleton · 다른 이름: 스켈레톤 로더, Skeleton Screen, 로딩 플레이스홀더
콘텐츠의 뼈대(skeleton)만 먼저 그린다고 해서 붙은 이름입니다. 유튜브나 페이스북이 로딩될 때 보이는 회색 블록들이 바로 이것입니다.
주
이번 주 학습 기록
레슨 3개를 마쳤고 목표 작업 기록을 2번 남겼습니다. 다음 레슨은 배포 준비입니다.
왜 스피너보다 나은가요
스피너는 "기다리세요"만 말하지만, 스켈레톤은 "카드 세 개가 여기 나타날 거예요"까지 말합니다. 실제 로딩 시간이 같아도 체감이 빨라지고, 콘텐츠가 뜰 때 화면이 널뛰는 레이아웃 시프트도 막아 줍니다. 스켈레톤이 자리를 미리 차지하고 있기 때문입니다.
단, 0.3초 안에 끝나는 로딩에 스켈레톤을 넣으면 오히려 깜빡임이 됩니다. 짧은 로딩은 아무것도 보여주지 않는 편이 낫습니다.
AI에게 시키기
목록 로딩 중에 스켈레톤 UI를 보여줘.
- 실제 카드와 같은 크기·배치의 회색 블록 (아바타 원 + 제목 줄 + 본문 두 줄)
- 은은한 펄스(pulse) 애니메이션
- 데이터가 도착하면 같은 자리에 콘텐츠로 교체 (레이아웃 시프트 없이)
- 로딩이 300ms 미만이면 스켈레톤을 아예 띄우지 않기
"로딩 표시해줘"라고 하면 스피너가 나옵니다. 스켈레톤이라는 단어를 알면 결과물의 급이 달라집니다.
혼동 주의
- 스피너(Spinner): 회전하는 로딩 아이콘입니다. 자리·모양 정보가 없습니다.
- 프로그레스 바(Progress Bar): 진행률(%)을 아는 작업에 씁니다. 업로드, 설치 같은 것입니다.
- 플레이스홀더(Placeholder): 입력 필드의 안내 문구 등 더 넓은 개념입니다. 스켈레톤은 로딩 전용 플레이스홀더인 셈입니다.
- 엠티 스테이트: 로딩이 끝났는데 보여줄 것이 없는 상태입니다. 스켈레톤은 "오는 중"입니다.