Loading, Error 컴포넌트 생성하기 - 1. Skeleton Loading

 

정말 오랜만에 블로깅을 한다. :)

오늘은 회사에서 로딩, 에러 컴포넌트 티켓을 담당하면서 처음에 생각한 것보다 굉장히 다양한 방법과 내용들이 포함되어 있는 것 같아 좀 더 공부할 겸 글로 남겨본다.

 

위의 영상과 같이 웹 사이트내에서 로딩이 이루어지는 장면을 본 적 있을 것이다.

 

지난 주 나에게 맡겨진 task 중 하나가 바로 사용자에게 "로딩, 에러"를 안내함으로 사용자 경험이 지루하거나 답답하지 않도록 하는 것이 었다. 잠시 디자이너의 부재로 인해, 디자인과 기획까지 구상해야했다.

 

"그래? 그냥, 데이터 로딩이 이루어질 동안 로딩 컴포넌트 보여주면 되겠지!" 이게 처음 나의 단순한 생각이었다.

 

그러나 로딩 화면을 보여주는데에는 다양한 디자인과 더불어 다양한 방식도 있었다. 

 

먼저, 로딩 화면을 구현하면서 구글링을 통해 처음 접한 개념이 바로 "Skeleton Loaing"방식이었다.

오늘은 먼저 이 skeleton loading에 대해 알아보자.

---

Skeleton loading screen for the usual blog post

Skeleton Loading

Skeleton Screen은 어플리케이션의 본질적인 wireframe 이다. 이 wireframe은 어플리케이션이 최종적으로 로드될때까지 대신 구조를 잡아주는 역할을 한다. (위의 이미지와 같이 말이다)

 

이 것은 사용자들이 화면에 어떤 일이 일어나고 있는지 알게 해준다. 그래서 사용자는 어플리케이션이 부팅되고 있고, 컨텐츠가 로딩되고 있다는 것을 이해하게 된다.

 

skeleton은 "뼈대, 골격" 라는 의미라는 것은 모두 알 것이다. 말 그대로, 어플리케이션의 뼈대와 골격을 미리 보여주는 로딩 방식이다.

스켈레톤 화면은 페이지 레이아웃을 모방한 사용자 인터페이스 버전이다.

 

왜 Skeleton Loading Screen을 이용하는가?

빈 페이지를 표시하는 대신에 컨텐츠 뼈대를 표시하면 사용자는 어플리케이션의 응답 속도가 더 빠르다는 느낌을 받을 수 있다.

그래서 뺑글뺑글 돌아가는 로딩 스피너를 보여주는 대신에, 우리는 사용자가 어플리케이션을 시작하고 탐색할 때 진행 중인 상황을 확인할 수 있는 스켈레톤 화면을 표시하곤 한다.

 

---

사용방법

나는 css로 해당 부분의 골격만 로딩 구간에서 보여주는 방식으로 구현했었다.

그런게 검색해보니 react-loading-skeleton이라는 라이브러리가 있다는 것을 지금 글을 적으며 발견하였다ㅎㅎ

 

import React from "react";
import Skeleton from "react-loading-skeleton";

export default function BlogPost({ title, body, subTitle }) {
  return (
    <div>
      <h1>{title || <Skeleton />}</h1>
      <h3>{subTitle || <Skeleton />}</h3>

      <p>{body || <Skeleton count={6} />}</p>

      <button>
        {body ? "Read more" : <Skeleton height={25} width={100} />}
      </button>
    </div>
  );
}

 

자세한 사용방법은 아래 참조 글을 이용해 볼 수 있다. 

 

다음에는 이 라이브러리를 이용하거나, 좀더 애니메이션을 더 추가한 skeleton방식으로 구현해보고 싶다 ;) 

 

참조 : https://betterprogramming.pub/the-what-why-and-how-of-using-a-skeleton-loading-screen-e68809d7f702 (번역함)