Skeleton
골격
Skeleton은 아직 로딩 중인 내용의 모양처럼 생긴 간단한 임시 화면이야.
실제 예시
프로필 페이지는 사진과 글이 들어갈 자리를 남겨둬요. 화면 구조는 자료가 불러와져도 흔들리지 않아요.
주요 부분
- 01State signal
- 02Human-readable message
- 03Timing or progress
- 04Recovery path
사용할 때
레이아웃이 알려져 있고 대기 상태가 쉽게 눈에 띌 때 사용하세요.
다음 경우에는 사용하지 마세요
거짓 세부 사항을 만들거나, 영원히 반짝이거나, 콘텐츠가 거의 동시에 나타날 때 스켈레톤을 사용하지 마세요.
코드에서 사용된 이름
aria-busy="true" 출시하기 전에
Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states.
Outcome：Complete the task with 골격 (Skeleton)。 User context：프로필 페이지는 사진과 글이 들어갈 자리를 남겨둬요. 화면 구조는 자료가 불러와져도 흔들리지 않아요. Recommended pattern：골격 (Skeleton)。 Why it fits：레이아웃이 알려져 있고 대기 상태가 쉽게 눈에 띌 때 사용하세요. Do not use it when：거짓 세부 사항을 만들거나, 영원히 반짝이거나, 콘텐츠가 거의 동시에 나타날 때 스켈레톤을 사용하지 마세요. Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary)：하나의 공식 표준이 전체 용어를 통제하지 않음. 의미는 팀, 플랫폼 또는 프레임워크마다 달라질 수 있음. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
이 요청을 확인하세요
Review how 골격 (Skeleton) is used now. Definition: Skeleton은 아직 로딩 중인 내용의 모양처럼 생긴 간단한 임시 화면이야. Release checks: Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.