[React] react-loading-skeleton 적용 및 응용 (skeleton UI)

[React] 선반영, 후처리 유저 경험 및 성능 향상 - 낙관적 UI 업데이트 (Optimistic UI Update)

[React] 선반영, 후처리 유저 경험 및 성능 향상 - 낙관적 UI 업데이트 (Optimistic UI Update)

이전 글 읽으러 가기!

 

👋 소개

안녕하세요! 대학생 개발자 주이어입니다!

오늘은 skeleton UI에 대해서 간단하게 소개하고, react-loading-skeleton 라이브러리를 적용하고 사용하는 방법에 대해서 정리해보려고 합니다.

---

❓ Skeleton UI 란?

Skeleton UI는 조금 잘 만들어진 웹 사이트라면 흔히 볼 수 있는 UI 기법 입니다.

아마 가장 쉽게 접할 수 있는 사이트는 유튜브일 것 같은데요.

skeleton UI (스켈레톤 UI)

바로 위와 같이 데이터를 불러오기 전에 사용자에게 미리 보여주는 UI를 Skeleton UI라고 합니다.

쉽게 뼈대를 미리 보여준다고 이해하시면 되는데요.

 

이로써 사용자는 어떤 식으로 화면이 렌더링 될지 미리 예상할 수 있으며, 로딩되는 부분임에도 불구하고 사용자 경험을 향상시킬 수 있는 장점으로 연결될 수도 있습니다.

 

또한 Skeleton UI를 실제 화면과 유사하게 만들수록 화면이 부드럽게 전화되며, 이는 사용자에게 깊은 인상을 주는 UI가 될 수도 있습니다.

---

🧾 직접 만들기

import style from "./book-item-skeleton.module.css";

export default function BookItemSkeleton() {
  return (
    <div className={style.container}>
      <div className={style.cover_img}></div>
      <div className={style.info_container}>
        <div className={style.title}></div>
        <div className={style.subtitle}></div>
        <br />
        <div className={style.author}></div>
      </div>
    </div>
  );
}

(코드는 Next를 기준으로 작성되었지만, React도 똑같은 방식으로 진행 됩니다.)

Skeleton UI를 직접 만든다면 위와 같이 빈 태그를 이용하여 뼈대를 만들고,

.container {
  display: flex;
  gap: 15px;
  padding: 20px 10px;
  border-bottom: 1px solid rgb(220, 220, 220);
}

.cover_img {
  width: 80px;
  height: 105px;
  background-color: rgb(230, 230, 230);
}

.info_container {
  flex: 1;
}

.title,
.subtitle,
.author {
  width: 100%;
  height: 20px;
  background-color: rgb(230, 230, 230);
}

해당 코드에 css를 추가해서 Skeleton UI를 직접 구현할 수 있습니다.

 

당연히 복잡한 UI도 오래 걸릴 뿐 제작이 가능하며, 굳이 라이브러리를 사용하지 않아도 되긴 합니다.

하지만 라이브러리를 사용하면 빠르게 제작이 가능하고, 초보자들도 고급진 UI를 적용시킬 수 있으니 사용하는게 좋겠죠.

---

⚡react-loading-skeleton

react-loading-skeleton - npm

react-loading-skeleton

(npm 공식 사이트 : react-loading-skeleton)

라이브러리를 이용해서 만드는 방법도 직접 만드는 방법과 비슷하지만 훨씬 더 많은 기능을 쉽게 이용할 수 있습니다.

npm install react-loading-skeleton

먼저 터미널에 위와 같이 입력하여 라이브러리를 다운받아 줍니다.

import style from "./Schedule-skeleton.module.css";
import Skeleton, { SkeletonTheme } from "react-loading-skeleton";
import "react-loading-skeleton/dist/skeleton.css";

function ItemSkeleton() {
  return (
    <>
      <div className={style.timeItem}>
        <div className={style.skeletonH3}>
          <Skeleton height="100%" />
        </div>
        <div className={style.skeletonActivity}>
          <Skeleton height="100%" />
        </div>
        <div className={style.skeletonTip}>
          <Skeleton height="100%" />
        </div>
        <div className={style.skeletonLink}>
          <Skeleton height="100%" />
        </div>
      </div>
      <hr className={style.skeletonLine} />
    </>
  );
}

export default function ScheduleSkeleton() {
  return (
    <SkeletonTheme baseColor="#D3D3D3" highlightColor="#E0E0E0">
      <div className={style.container}>
        <div className={style.buttons}>
          <div className={style.skeletonButton}>
            <Skeleton height="100%" style={{ borderRadius: "inherit" }} />
          </div>
          <div className={style.skeletonButton}>
            <Skeleton height="100%" style={{ borderRadius: "inherit" }} />
          </div>
        </div>
        {Array.from({ length: 6 }).map((_, index) => (
          <ItemSkeleton key={index} />
        ))}
      </div>
    </SkeletonTheme>
  );
}

현재 진행 중인 프로젝트에 react-loading-skeleton을 사용하여 Skeleton UI를 제작한 코드입니다.

사실 이 라이브러리를 사용하면 굳이 CSS를 작성하지 않아도 skeleton UI를 구현할 수 있지만,

저는 기존에 구현해두었던 뼈대에 그대로 적용시키기 위해서 자체 CSS를 작성했습니다.

참고로 'react-loading-skeleton/dist/skeleton.css'는 필수로 import 해줘야 스타일이 적용됩니다.

 

이 라이브러리는 Skeleton 태그를 사용하여 UI를 구현할 수 있으며 기본적으로 height값과 width값을 입력할 수 있고,
이 값을 토대로 UI를 생성하게 됩니다. (CSS를 따로 작성하지 않는 경우)

이외에도 지원하는 다양한 속성이 있으니 공식 문서를 통해 확인해보시는 것을 추천드립니다.

.container {
  width: 700px;
  margin: 10px auto 0 auto;
}

.buttons {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid lightgray;
  border-radius: 5px;
}

.skeletonButton {
  width: 68px;
  height: 36px;
  background-color: lightgray;
  border-radius: 10px;
  overflow: hidden;
}

.skeletonH3 {
  background-color: lightgray;
  width: 150px;
  height: 27px;
  margin-top: 10px;
  border-radius: 5px;
  overflow: hidden;
}

.skeletonActivity {
  background-color: lightgray;
  width: 350px;
  height: 24px;
  margin-top: 16px;
  border-radius: 5px;
  overflow: hidden;
}

.skeletonTip {
  background-color: lightgray;
  width: 600px;
  height: 24px;
  margin-top: 5px;
  border-radius: 5px;
  overflow: hidden;
}

.skeletonLink {
  background-color: lightgray;
  width: 120px;
  height: 24px;
  margin-top: 16px;
  border-radius: 5px;
  overflow: hidden;
}

.skeletonLine {
  border: none;
  border-bottom: 1px solid lightgray;
}

(CSS는 참고용으로 첨부합니다.)

예시 화면

이렇게 라이브러리를 이용하여 Skeleton UI를 생성할 경우,

 

위와 같이 예쁘게 로딩되는 듯한 애니메이션도 자동으로 추가되는 것을 알 수 있습니다.

배경색과 그라데이션, 로딩되는 듯한 효과 색깔 등 다양한 색깔을 커스텀할 수 있으니 이 부분도 참고하시길 바랍니다.

---

😊  마무리

지금까지 Skeleton UI에 대해서 간단하게 소개하고, react-loading-skeleton 라이브러리 사용법에 대해서 정리해보았습니다.

시작 부분에 얘기했듯이 Skeleton UI 기법은 사용자 경험을 크게 향상시킬 수 있고, 요즘은 많은 사이트에서 사용되니 한번씩 사용해보시고 정리해보시길 바랍니다.

무엇보다 적은 노력으로 큰 변화를 보여줄 수 있는 부분 중 하나이니 가성비도(?) 좋은 것 같습니다.

 

그럼 지금까지 읽어주셔서 감사드리고, 다음에는 더 흥미롭고 유익한 글로 돌아오도록 하겠습니다!

 

💬 함께 공부하고 싶은 내용이 있다면 댓글이나 피드백으로 알려주세요!

[TRAIVEL] 개인 맞춤형 여행 일정 생성 플랫폼 TRAIVEL

[TRAIVEL] 개인 맞춤형 여행 일정 생성 플랫폼 TRAIVEL

추천 글 읽으러 가기!

 

https://discord.gg/8Hh8WgM4zp

KYT CODING COMMUNITY Discord 서버에 가입하세요!

KYT CODING COMMUNITY 가입하기!