UI/UX 디자인
쉬움
코딩
스켈레톤 로딩 UI
Skeleton Screen 패턴 구현
30분
65점
#3778
문제 설명
사용자 경험을 개선하는 스켈레톤 로딩 UI를 구현하세요.
스켈레톤 장점
- 체감 로딩 시간 감소
- 레이아웃 시프트 방지
- 진행 상황 인지
구현할 컴포넌트
- 카드 스켈레톤: 이미지, 제목, 설명
- 리스트 스켈레톤: 아바타, 텍스트 라인들
- 테이블 스켈레톤: 헤더, 행들
- 프로필 스켈레톤: 이미지, 정보
애니메이션
- 펄스(pulse) 효과
- 시머(shimmer) 효과
평가 기준
- 실제 콘텐츠와 유사한 형태
- 부드러운 애니메이션
- 재사용성
실행 버튼을 눌러 코드를 실행하세요.