Web Guide스켈레톤지연 로딩로딩 표시
스켈레톤 화면과 지연 로딩
내용이 오기 전에 자리를 먼저 잡아둡니다.
빈 화면 대신 형태를 보여주면 기다림이 짧게 느껴집니다.
01스켈레톤 이란
내용이 들어올 자리를 회색 틀로 보여줍니다.
1
형태 미리보기
무엇이 올지 짐작됩니다.
2
자리 확보
나중에 밀리지 않습니다.
3
진행 느낌
멈춘 게 아니라는 신호.
4
시선 유지
화면을 떠나지 않게.
5
단순함
복잡한 애니메이션은 불필요.
6
짧을 때 생략
금방 뜨면 오히려 깜빡임.
02빙글빙글 표시와 비교
상황에 따라 적합한 것이 다릅니다.
회전 표시
짧은 대기에 적합 · 구조를 모를 때 · 버튼 처리 중 표시
스켈레톤
목록이나 카드처럼 구조가 뻔할 때 · 여러 요소가 동시에 올 때 · 체감이 더 짧음
03지연 로딩
당장 안 보이는 것은 나중에 불러옵니다.
화면 밖 이미지스크롤이 닿을 때 불러옵니다.
긴 목록내려갈수록 추가로 가져옵니다.
지도, 영상누를 때 불러옵니다.
댓글본문 다음에 가져옵니다.
외부 위젯필요한 시점에.
첫 화면 제외처음 보이는 것은 지연시키지 않습니다.
04주의 사항
잘못 쓰면 역효과입니다.
첫 화면 지연 대표 이미지는 즉시 로딩.
검색 노출 내용이 수집되는지 확인.
깜빡임 너무 짧으면 오히려 거슬립니다.
자리 어긋남 실제 크기와 틀이 맞아야.
무한 스크롤 꼬리말에 접근 못 하게 됩니다.
실패 처리 안 불러와질 때 안내.
CHECK POINT
□ 로딩 중 빈 화면이 아닌가
□ 스켈레톤 크기가 실제와 맞는가
□ 첫 화면 이미지는 즉시 로딩되는가
□ 화면 밖 이미지는 지연 로딩되는가
□ 지연 로딩한 내용이 검색에 수집되는가
□ 너무 짧은 대기에 로딩 표시를 넣지 않았는가
□ 무한 스크롤에서 꼬리말에 접근할 수 있는가
□ 로딩 실패 시 안내가 있는가
#스켈레톤#지연 로딩#로딩 표시#체감속도#무한 스크롤#검색 수집#성능#반응형#웹비스타#홈페이지 제작