스켈레톤 로딩 화면 만들기, 빈 화면 대신 회색 자리 표시로 기다림 줄이는 법
스켈레톤 로딩은 게시글 목록이나 상품 카드가 불러와지는 동안, 실제 내용이 들어갈 자리에 회색 상자를 먼저 그려 두는 방식입니다.
하얀 빈 화면이나 빙글빙글 도는 아이콘만 보여줄 때보다 무엇이 나올지 미리 보이기 때문에 기다림이 덜 답답하게 느껴집니다. CSS 몇 줄이면 만들 수 있습니다.
💡 로딩 아이콘 하나면 충분하지 않나요?
짧은 대기라면 괜찮습니다. 다만 목록이 비어 있다가 한꺼번에 채워지면 화면이 갑자기 아래로 밀리고, 방문자는 지금 무엇을 기다리는지 알 수 없습니다. 자리를 먼저 잡아 두면 레이아웃이 흔들리지 않고, 페이지 구조가 먼저 보이니 이탈도 덜합니다.
1. 기본 스켈레톤 카드 만들기
핵심은 회색 상자에 밝은 띠가 지나가는 그라데이션 애니메이션입니다. 배경 크기를 200%로 키운 뒤 background-position을 옮기면 빛이 훑고 지나가는 효과가 납니다.
<div class="sk-card">
<div class="sk sk-thumb"></div>
<div class="sk sk-line"></div>
<div class="sk sk-line short"></div>
</div>
.sk {
background: linear-gradient(90deg,
#eee 25%, #f6f6f6 50%, #eee 75%);
background-size: 200% 100%;
animation: sk-shine 1.4s ease infinite;
border-radius: 6px;
}
.sk-thumb { aspect-ratio: 4 / 3; }
.sk-line { height: 14px; margin-top: 10px; }
.sk-line.short { width: 60%; }
@keyframes sk-shine {
from { background-position: 100% 0; }
to { background-position: -100% 0; }
}2. 실제 내용과 크기를 똑같이 맞추기
스켈레톤에서 가장 흔한 실수는 회색 상자와 실제 카드의 크기가 다른 경우입니다. 상자는 높이 200px인데 실제 썸네일은 260px이면, 내용이 들어오는 순간 화면이 덜컹 밀립니다. 위 코드처럼 썸네일은 실제 이미지와 같은 aspect-ratio를 쓰고, 글줄 높이와 간격도 실제 제목·요약 글씨에 맞춰 두세요.
개수도 중요합니다. 한 화면에 카드가 6개 나오는 목록이라면 스켈레톤도 6개 정도로 맞춰야 자연스럽습니다. 저희는 리뉴얼 작업 때 실제 카드와 스켈레톤을 겹쳐 놓고 위치가 어긋나지 않는지 확인한 뒤 적용합니다.
3. 화면 낭독기와 움직임 줄이기 설정까지
회색 상자는 시각 장치일 뿐이라 화면 낭독기에는 의미가 없습니다. 상자에는 aria-hidden="true"를 주고, 감싸는 영역에 aria-busy="true"와 짧은 안내 문구를 넣은 뒤 로딩이 끝나면 false로 바꿔 줍니다. 기기에서 애니메이션 줄이기를 켠 방문자에게는 반짝임을 멈춰 주는 것이 좋습니다.
<!-- 불러오는 동안 -->
<section class="list" aria-busy="true">
<span class="sr-only">목록을 불러오는 중입니다</span>
<div class="sk-card" aria-hidden="true">...</div>
</section>
/* 움직임 줄이기 설정 사용자 */
@media (prefers-reduced-motion: reduce) {
.sk { animation: none; }
}- 데이터가 거의 바로 뜨는 화면이라면 스켈레톤이 오히려 깜빡임처럼 보일 수 있습니다.
- 버튼, 메뉴처럼 처음부터 있는 요소는 스켈레톤으로 가리지 말고 그대로 보여주세요.
- 불러오기에 실패했을 때는 회색 상자를 그대로 두지 말고 안내 문구로 바꿔야 합니다.
"기다리는 시간도 화면 설계의 일부입니다."
나눔웹은 내용이 다 들어온 화면뿐 아니라, 불러오는 몇 초 동안의 화면까지 같이 그려 두고 작업합니다.