수동 작업 없이 실제 DOM에서 추출하는 픽셀 퍼펙트 스켈레톤 UI
Other·TypeScript12 / 0
실제 렌더링된 DOM의 위치 정보를 스냅샷으로 찍어 픽셀 단위로 정확한 스켈레톤 로딩 화면을 자동으로 생성하는 TypeScript 프레임워크이다.
주요 기능
- getBoundingClientRect API를 사용하여 실제 요소와 동일한 위치의 뼈대를 추출함
- 다양한 중단점에 대응하는 반응형 스냅샷을 생성하여 기기별 레이아웃을 지원함
- CLI 도구를 통해 개발 서버의 DOM 상태를 자동으로 빌드하고 레지스트리에 저장함
- 애니메이션 효과와 색상을 Props로 제어하여 브랜드 가이드라인에 맞게 조정함
어떻게 동작하는가
CLI가 개발 서버에 접속하여 가시적인 모든 요소의 getBoundingClientRect 값을 수집하고, 이를 좌표 데이터로 변환하여 런타임에서 동일한 위치에 사각형을 렌더링함
2.8k
Stars
101
Forks
+928
Trending
12
조회수
2.8k watchers7 open issues
관련 토론
아직 관련 토론이 없습니다.
댓글
댓글을 작성하려면 로그인이 필요합니다.