스피너 대신 스켈레톤 UI를 사용해야 하는 경우는 언제인가요?
화면에 목록, 테이블, CRM 행, 칸반 카드 또는 대시보드 위젯과 같은 많은 레코드가 표시되면 스켈레톤 UI(고스트 자리 표시자)를 사용하세요. 스켈레톤은 데이터가 로드되는 동안 레이아웃을 안정적으로 유지하므로 사용자는 구조를 즉시 스캔할 수 있습니다. 스피너는 미리 볼 수 있는 조밀한 콘텐츠 모양이 없는 짧은 원자 작업(저장, 제출, 단일 파일 업로드)에 더 좋습니다.
조밀한 화면의 스켈레톤 대 스피너.
| 옵션 | 다음에 가장 적합 | 레이아웃 안정성 | 생산 비용 | 정직한 거래 |
|---|---|---|---|---|
| 스켈레톤/고스트 UI | 목록, 테이블, 피드, 대시보드 | 높음 — 자리 표시자가 최종 크롬과 일치합니다. | 레이아웃 템플릿(또는 생성기)이 필요합니다. | 잘못된 뼈대 모양은 가짜처럼 느껴집니다. 역할을 단순하게 유지 |
| 중심 스피너 | 짧은 작업, 모달 제출 | 낮음 — 콘텐츠가 도착할 때 페이지가 자주 이동합니다. | 사소한 CSS | ~1초 미만이면 괜찮습니다. 긴 목록 로드에 실망함 |
| Ghost Wireframe Generator | HTML용 랜딩 크롬 + 로딩 스켈레톤 | 내보내기는 데스크탑/모바일 레이아웃과 일치합니다. | 무료, 브라우저-로컬 | v1의 라이브러리 모드 — 아직 SVG-from-Figma 변환이 없습니다. |
목록과 테이블이 유령을 선호하는 이유
밀집된 UI는 행, 열, 카드를 통해 계층 구조를 전달합니다. 스피너는 요청이 완료될 때까지 해당 계층 구조를 지웁니다. 고스트 바와 블록을 사용하면 실제 데이터가 도착하기 전에 사용자가 "이것은 필터가 있는 테이블입니다.", "이것은 칸반 보드입니다." 이것이 바로 제품 팀이 마케팅 모형뿐만 아니라 CRM 및 분석 보기에 대한 로드 뼈대를 제공하는 이유입니다.
1분 안에 로딩 뼈대를 내보냅니다.
- Ghost Wireframe Generator를 엽니다.
- CRM 테이블, 분석 또는 대시보드 레이아웃을 선택하세요. 데스크톱 + 모바일이 필요한 경우 Combo를 사용하세요.
- 제품 표면과 일치하도록 색상 역할을 조정한 다음 Copy HTML(
--ghost-*변수 포함)를 조정합니다. - 선택 사항: 편집기에서 동일한 계약에 대한 Ghost Wireframe Skill를 가져옵니다.
Ghost Wireframe Generator 가이드에서 전체 연습을 읽어보세요.