CSS로 구현하는 Skeleton 화면 로딩 애니메이션 - 사용자 경험을 향상시키는 로딩 애니메이션

Skeleton 화면 로딩 애니메이션은 웹 페이지가 데이터를 로드하는 동안 사용자가 빈 화면을 보는 대신 콘텐츠의 자리 표시자(플레이스홀더)를 볼 수 있도록 합니다. 이를 통해 사용자는 콘텐츠가 로드되고 있다는 시각적 신호를 받고, 전반적인 사용자 경험이 향상됩니다. 이 글에서는 CSS만을 사용하여 Skeleton 로딩 애니메이션을 구현하는 방법을 소개하겠습니다.

1. Skeleton 로딩 애니메이션의 기본 개념

Skeleton 로딩 애니메이션은 일반적으로 콘텐츠가 배치될 자리에 회색 또는 밝은 색상의 블록을 보여줍니다. 이러한 블록은 점진적으로 로드되는 실제 콘텐츠를 대체하여 사용자에게 데이터가 로드 중이라는 시각적 피드백을 제공합니다.

2. 기본 Skeleton 로딩 애니메이션 구현

2.1 HTML 구조:

<div class="skeleton-container">
    <div class="skeleton-header"></div>
    <div class="skeleton-content"></div>
    <div class="skeleton-footer"></div>
</div>

설명:

• skeleton-container: 전체 Skeleton 로딩 화면을 감싸는 컨테이너입니다.
• skeleton-header, skeleton-content, skeleton-footer: 각각 로드될 콘텐츠의 자리 표시자를 나타냅니다.

2.2 CSS 스타일링:

.skeleton-container {
    width: 300px;
    padding: 20px;
    background-color: #f4f4f4;
    border-radius: 8px;
}

.skeleton-header,
.skeleton-content,
.skeleton-footer {
    background-color: #e0e0e0;
    border-radius: 4px;
    margin-bottom: 15px;
    position: relative;
    overflow: hidden;
}

.skeleton-header {
    width: 70%;
    height: 20px;
}

.skeleton-content {
    width: 100%;
    height: 100px;
}

.skeleton-footer {
    width: 50%;
    height: 20px;
}

/* 애니메이션 효과 */
.skeleton-header::before,
.skeleton-content::before,
.skeleton-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%);
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

설명:

• 기본 스타일: skeleton-header, skeleton-content, skeleton-footer 요소들은 고정된 높이와 폭을 가지며, 배경색을 통해 로딩 중임을 나타냅니다.
• 애니메이션: ::before 의사 요소를 사용해 요소 위에 그라데이션 효과를 주고, @keyframes를 통해 그라데이션이 좌우로 움직이도록 설정합니다.

3. 복잡한 Skeleton 화면 구현

복잡한 레이아웃에서도 Skeleton 로딩 애니메이션을 적용할 수 있습니다. 예를 들어, 카드 레이아웃을 사용하는 경우, 이미지, 제목, 텍스트와 같은 요소들을 Skeleton 블록으로 대체할 수 있습니다.

3.1 HTML 구조:

<div class="skeleton-card">
    <div class="skeleton-thumbnail"></div>
    <div class="skeleton-title"></div>
    <div class="skeleton-text"></div>
    <div class="skeleton-text short"></div>
</div>

설명:

• skeleton-card: 카드 레이아웃을 나타내는 컨테이너입니다.
• skeleton-thumbnail, skeleton-title, skeleton-text: 각각의 자리 표시자로 이미지, 제목, 텍스트 등을 나타냅니다.

3.2 CSS 스타일링:

.skeleton-card {
    width: 100%;
    max-width: 400px;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.skeleton-thumbnail {
    width: 100%;
    height: 200px;
    background-color: #e0e0e0;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}

.skeleton-title,
.skeleton-text {
    background-color: #e0e0e0;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

.skeleton-title {
    width: 70%;
    height: 20px;
}

.skeleton-text {
    width: 100%;
    height: 15px;
}

.skeleton-text.short {
    width: 50%;
}

/* 애니메이션 효과 */
.skeleton-thumbnail::before,
.skeleton-title::before,
.skeleton-text::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%);
    animation: loading 1.5s infinite;
}

설명:

• 복잡한 레이아웃: skeleton-card 내의 각 자리 표시자 요소들은 다양한 크기와 배경색을 가지며, 이미지 썸네일, 제목, 텍스트 등을 대체합니다.
• 애니메이션 효과: 이전 예시와 마찬가지로, 각 요소에 그라데이션 애니메이션이 적용되어 로딩 중임을 시각적으로 나타냅니다.

4. Skeleton 로딩 애니메이션의 성능 최적화

• will-change 사용: 애니메이션이 적용된 요소에 will-change: transform을 추가하여, 브라우저가 해당 요소의 변화를 미리 준비할 수 있도록 합니다.
• 단순한 레이아웃 유지: 복잡한 레이아웃보다는 단순한 블록 형태로 Skeleton 화면을 구성하여, 성능 저하를 방지합니다.
• 필요한 경우에만 Skeleton 사용: Skeleton 애니메이션은 네트워크 요청 지연이나 비동기 데이터 로딩 상황에서만 사용하며, 페이지 전체에 과도하게 사용하지 않도록 합니다.

5. Skeleton 로딩 화면에서 실제 콘텐츠로 전환

데이터가 로드되면 Skeleton 화면을 실제 콘텐츠로 매끄럽게 전환하는 것도 중요합니다. JavaScript를 사용해 CSS 클래스를 전환하거나, Skeleton 요소를 제거하고 실제 콘텐츠를 삽입할 수 있습니다.

// 예시: 데이터 로드 후 Skeleton 전환
document.addEventListener("DOMContentLoaded", function() {
    // 데이터를 로드한 후
    setTimeout(function() {
        const skeletons = document.querySelectorAll('.skeleton-container, .skeleton-card');
        skeletons.forEach(skeleton => {
            skeleton.classList.add('loaded');
        });
    }, 2000); // 2초 후 데이터 로드 시뮬레이션
});

/* 실제 콘텐츠로 전환 시 Skeleton을 점진적으로 숨김 */
.skeleton-container.loaded, 
.skeleton-card.loaded {
    opacity: 0;
    transition: opacity 0.3s ease-out;
}

결론

CSS로 구현한 Skeleton 로딩 애니메이션은 웹 페이지의 로딩 경험을 크게 향상시킬 수 있습니다. 사용자가 빈 화면 대신 콘텐츠의 자리 표시자를 보면서 데이터를 기다리게 되면, 로딩 시간을 더 짧게 느끼게 되고, 전반적인 사용자 경험이 개선됩니다. 이 글에서 소개한 방법을 사용해, 여러분의 웹 페이지에 Skeleton 로딩 애니메이션을 추가해보세요. 이를 통해 사용자에게 더욱 세련되고 직관적인 경험을 제공할 수 있을 것입니다.