Ears바이브코딩 용어사전UI 패턴
스켈레톤 (Skeleton)
스켈레톤은 콘텐츠가 로딩되는 동안 실제 레이아웃과 같은 모양의 회색 뼈대를 먼저 보여주는 로딩 UI로, 빈 화면이나 스피너 대신 '무엇이 어디에 나타날지'를 미리 보여줘 체감 속도를 높입니다.
최종 업데이트
콘텐츠의 '뼈대(skeleton)'만 먼저 그린다고 해서 붙은 이름이에요. 유튜브나 페이스북이 로딩될 때 보이는 회색 블록들이 바로 이겁니다.
스켈레톤 로더
주간 채택률 리포트
지난주 대비 채택률이 12% 올랐습니다. 새로 들어온 의견 8건 중 5건이 채택됐어요.
왜 스피너보다 나은가요?
스피너는 "기다리세요"만 말하지만, 스켈레톤은 "카드 세 개가 여기 나타날 거예요"까지 말해줍니다. 실제 로딩 시간이 같아도 체감이 빨라지고, 콘텐츠가 뜰 때 화면이 널뛰는 레이아웃 시프트도 막아줘요 — 스켈레톤이 자리를 미리 차지하고 있으니까요.
단, 0.3초 안에 끝나는 로딩에 스켈레톤을 넣으면 오히려 깜빡임이 됩니다. 짧은 로딩은 아무것도 안 보여주는 게 낫습니다.
AI에게 시키기
피드 목록 로딩 중에 스켈레톤 UI를 보여줘.
- 실제 카드와 같은 크기·배치의 회색 블록 (아바타 원 + 제목 줄 + 본문 두 줄)
- 은은한 펄스(pulse) 애니메이션
- 데이터 도착 시 스켈레톤과 같은 자리에 콘텐츠 교체 (레이아웃 시프트 없이)
- 로딩이 300ms 미만이면 스켈레톤을 아예 띄우지 않기"로딩 표시해줘"라고 하면 스피너가 나옵니다. 스켈레톤이라는 단어를 알면 결과물의 급이 달라져요.
혼동 주의
- 스피너: 회전하는 로딩 아이콘. 자리·모양 정보가 없음
- 프로그레스 바: 진행률(%)을 아는 작업에 씀 — 업로드, 설치
- 플레이스홀더: 입력 필드의 안내 문구 등 더 넓은 개념. 스켈레톤은 로딩 전용 플레이스홀더인 셈