VibeCoding 365 바이브 코딩 사전
로딩 스켈레톤
영어 표기
Loading Skeleton
예시
AI에게 대시보드 목록을 만들게 할 때 '데이터 fetch 전에는 카드 크기와 줄 수가 비슷한 스켈레톤을 보여 주고, 로딩·빈 결과·오류 상태를 각각 분리하며, 실제 목록으로 바뀔 때 레이아웃이 크게 흔들리지 않는지 smoke 검증해 달라'고 요청한다.
참고
스켈레톤은 실제 콘텐츠 구조와 너무 다르면 신뢰를 잃는다. 무한히 반복되는 회색 박스가 아니라 시간 초과, 빈 상태, 오류 메시지로 넘어가는 조건까지 함께 설계해야 한다.
로딩 스켈레톤은 실제 데이터가 도착하기 전 카드, 목록, 이미지 영역의 형태를 미리 보여 주는 임시 UI입니다. 단순한 빙글빙글 로더보다 사용자가 곧 무엇을 보게 될지 예측하기 쉬워지고, AI가 만든 페이지에서 느린 API나 DB 조회가 있어도 빈 화면처럼 보이는 문제를 줄여 줍니다. 그래서 로딩·빈 결과·오류 상태를 구분하고 화면 흔들림까지 검증하는 기준이 됩니다.
- 카테고리
- 프론트엔드·UI
- 난이도
- basic
- 태그
- frontend · loading-state
- 슬러그
- loading-skeleton
- 상태
- published
- 정렬 순서
- 10005
함께 읽기