스켈레톤 UI 적용하기

로딩중 애니메이션을 어떤걸로 넣을까 검색하다가 스켈레톤 UI를 발견했다.
익숙한 로딩 UI지만 이걸 스켈레톤이라 불리는지는 처음 알았다😲

사이트에서 코디맵, 룩북 버튼을 누르면 아래에 사진들이 뜨는데, 이때 사진을 불러오는 동안 로딩중.. 대신 스켈레톤 UI를 적용하려고 한다.

스켈레톤 UI란?

사이트가 멈춘 것이 아니라 로딩 중인 상태를 사용자에게 시각적으로 보여주는 방법으로, 주로 기본 프레임을 회색 처리해서 보여준다.
이를 구현하기 위해서, 스켈레톤 컴포넌트와 css를 먼저 작성하자.

스켈레톤 컴포넌트 작성

코디맵 컴포넌트 구조와 비슷하게 스켈레톤 컴포넌트를 작성해준다. 아래는 코디맵 결과로 룩북과 구조가 같기에 하나의 스켈레톤 컴포넌트를 두가지에 적용했다.

import React from "react";
import "../css/Skeleton.css";  // 스켈레톤 UI 스타일을 위한 CSS 파일

const SkeletonItem = () => {
  return (
    <div className="skeleton-item">
      <div className="skeleton-image"></div>
      <div className="skeleton-likes"></div>
    </div>
  );
};

export default SkeletonItem;

컨테이너 div안에 이미지와 좋아요 부분을 구분해서 하나의 이미지 구조를 만들어 준다.

        {/* 코디맵 콘텐츠 */}
        {activeTab === "codimap" && (
          <div className="codimap-section">
            {codiMapLoading ? (
              <div className="skeleton-grid">
                {Array.from({ length: 12 }).map((_, index) => (
                  <SkeletonItem key={index} />
                ))}
              </div>
            ) : (
              <CodiMapGrid codiMapItems={codiMapItems} />
            )}
          </div>
        )}

로딩중이면, 스켈레톤 컴포넌트를 총 12개 전달하도록 한다.

스켈레톤 css

css는 간단하다. 기존의 코디맵 css 그대로 스켈레톤 컴포넌트에도 적용해주고 로딩중을 시각적으로 보여줄 수 있는 애니메이션을 추가해주면 끝!

@keyframes skeleton-loading {
  0% {
    background-color: #e0e0e0;
  }
  50% {
    background-color: #f0f0f0;
  }
  100% {
    background-color: #e0e0e0;
  }
}

가장 기본적인 애니메이션을 추가했다.

결과

룩북 로딩이 좀 오래걸리는데... 기존 로딩중 애니메이션보다는 스켈레톤 UI가 나은듯