Skeleton Loader(로딩 placeholder) HTML·CSS 코드를 시각적으로 생성. shimmer 애니메이션 + 6종 프리셋.
🦴 미리보기
HTML + CSS

Skeleton Loader 생성기 사용법

  1. 6가지 프리셋(카드·기사·프로필·리스트·그리드·댓글) 중 선택합니다.
  2. 베이스/shimmer 색과 애니메이션 방식을 조정합니다.
  3. 반복 횟수를 조정해 실제 페이지 레이아웃에 맞춥니다.
  4. 생성된 HTML+CSS를 복사해 본인 프로젝트에 붙여넣습니다.

주요 기능

  • 6가지 표준 패턴 (카드·기사·프로필·리스트·그리드·댓글)
  • 3가지 애니메이션 (shimmer·pulse·없음)
  • 색상·반복 횟수 자유 조정
  • 순수 HTML+CSS (JS 무관)
  • 실시간 미리보기 + 코드 복사

활용 예시

  • SPA 초기 로딩 — API 응답 대기 동안 표시
  • 이미지 lazy load — 이미지 로드 전 자리 표시
  • 리스트 데이터 — 무한 스크롤 새 페이지 fetch 중
  • 대시보드 위젯 — 차트/통계 로딩
  • 모바일 앱 웹뷰 — 네이티브 느낌의 로딩

Skeleton Loader가 spinner보다 좋은 이유

전통적인 spinner는 "뭐가 로딩 중"인지 알 수 없어 사용자에게 불안감을 줍니다. Skeleton Loader는 곧 표시될 콘텐츠의 형태와 위치를 미리 보여줘서 사용자가 인지된 대기 시간을 짧게 느낍니다. Facebook이 2013년 처음 도입한 후 LinkedIn·YouTube·Slack 등 대부분의 모던 SaaS에서 표준이 되었습니다. UX 연구에 따르면 같은 로딩 시간이라도 skeleton이 spinner보다 10~30% 더 빠르게 느껴진다고 합니다.

자주 묻는 질문

React/Vue에서 어떻게 쓰나요?

HTML 부분만 컴포넌트로 옮기고, CSS를 글로벌 또는 module로 추가하면 됩니다. React Native에서는 react-native-skeleton-placeholder 같은 라이브러리 권장.

다크모드도 지원?

네, 베이스/shimmer 색을 다크 톤(#374151, #1f2937 등)으로 바꾸기만 하면 됩니다.

접근성은?

스크린리더가 "loading" 상태를 인지하도록 aria-busy="true" 또는 role="status"를 부모에 추가하세요.

무료?

네, 완전 무료입니다.