최근 진행 중인 프로젝트와 블로그를 보면서 데이터 로딩 상태를 어떤 방법으로 처리해야 좋을지 고민을 했습니다.
버튼 응답을 기다리는 로딩 상태 같은 경우에는 loading spinner로 처리했지만 포스트 목록을 불러오는 상황에서는 spinner로 처리하기에는 어색함이 많았고 직접 이용하는 실서비스 사이트의 로딩 방식을 찾아보다가 대중적으로 많이 사용하는 스켈레톤 스크린이라는 로딩 방식을 알게 되었습니다.

<br/><br/>

### <span style="color: #7360BD">스켈레톤 스크린 (Skeleton Screen) 이란?</span>

**스켈레톤 스크린**은 이름에서 유추할 수 있듯이 화면의 뼈대와 같은 느낌을 주는 UI / UX 기법으로 데이터를 불러오는 중일 때 해당 데이터가 화면에 어떻게 나타날지 미리 알 수 있게 해주는 역할을 합니다.

![](https://imagedelivery.net/R2WiK4wfRK3oBXTwjgzQfA/99c1a3b3-ba88-487d-fec3-49843abb6500/public)

스켈레톤 스크린은 실제 서비스에서 정말 많이 쓰이는 기법입니다. 위의 이미지는 youtube 메인화면의 스켈레톤 스크린으로 데이터를 불러오는 중이지만 사용자 입장에서 어떤 위치에 데이터가 나타날지 예측 가능하다는 장점이 있습니다. 또한 데이터를 불러오기 전과 불러온 후의 레이아웃이 동일하여 레이아웃이 망가지지 않는다는 장점도 있습니다.

<br>
***
<br>
### <span style="color:#7360BD">😋 블로그에 적용해보기</span>

스켈레톤 UI 컴포넌트들을 직접 만들 수도 있겠지만 프로젝트가 커질 수 록 작업량이 늘어나기 때문에 스켈레톤 UI 컴포넌트를 쉽게 만들 수 있는 라이브러리를 사용하기로 했습니다.
<br/>
스켈레톤 스크린 관련 라이브러리는 많이 있었는데 그중에 내가 사용하기로 정한 라이브러리는 '**[react-loading-skeleton](https://www.npmjs.com/package/react-loading-skeleton)**' 입니다! 사용법도 간단하고 기존 프로젝트에 사용하기도 편해보여서 선정했습니다.
<br/>
<span style="color: #7360BD">[ 설치 ]</span>
```
npm install react-loading-skeleton
```

<br>
<span style="color: #7360BD">[ 사용 ]</span>

먼저 기존의 포스트 목록을 보여주기 위해 사용한 postItem 컴포넌트를 복사해서 postItemSkeleton이라는 컴포넌트를 만든 후에 사용중이던 css스타일은 그대로 유지한 채 html 태그를 Skeleton으로 변경 했습니다. 새로 스타일을 작성할 필요가 없어 정말 편리하고 빠르게 작업했습니다.
<br/>
> import
```ts
import Skeleton from 'react-loading-skeleton'
import 'react-loading-skeleton/dist/skeleton.css'
```
<br/>
> postItem.tsx (데이터가 필요한 기존의 포스트)
```html
<div className={styles.postItem}>
  <div className={styles.postImageWrap}>
    <img
      className={styles.postImage}
      src={data.imageURL}
    />
  </div>
  <div className={styles.postTitle}>
    {data.title}
  </div>
  <div className={styles.postInfo}>
    <div className={styles.postCommentWrap}>
      <div>{data.commentCount}</div>
    </div>
    <div>{data.registTime}</div>
  </div>
</div>
```
<br/>
> postItemSkeleton.tsx (데이터 로딩중에 보여줄 포스트 Skeleton UI)
```html
<div className={styles.postItem}>
  <Skeleton className={styles.postImageWrap} />
  <Skeleton className={styles.postTitle} />
  <div className={styles.postInfo}>
    <Skeleton width={"50px"} />
    <Skeleton width={"100px"} />
  </div>
</div>
```
<br/>

> 결과화면

![](https://imagedelivery.net/R2WiK4wfRK3oBXTwjgzQfA/cd898ddf-6dee-47f2-f209-6283010e9d00/public)


데이터 로딩 시간을 늘려 테스트를 해본 결과 자연스럽게 잘 동작합니다.
<br>
***
<br>
### <span style="color:#7360BD">🤔 그래서 만족스러운 결과가 나왔는지..?</span>
스켈레톤 스크린이 얼마나 UI/UX적인 면에서 좋은지 알 수 있었습니다. 하지만 블로그에 적용하기에는 만족스럽지는 못했습니다.
데이터를 불러오는데 오랜 시간이 걸리는 서비스에게는 정말 유용하겠지만 이용자도 적고 불러올 데이터도 많지 않은 이 블로그에 적용하기에는 스켈레톤 스크린을 보여주는 시간이 너무 짧아 큰 효과가 없어 보이기 때문입니다. 
<br/>
블로그의 포스트 목록에는 SSG(static site generator)를 사용하는 것이 가장 효율적일 것 같다는 생각이 들었습니다. SSG를 사용하면 로딩 상태 자체를 보여줄 필요가 없어지고 개인 블로그 특성상 포스트가 자주 변동될 일이 없기 때문에 유동성을 고려하지 않아도 돼서 더욱 적합해 보입니다.

최근 진행 중인 프로젝트와 블로그를 보면서 데이터 로딩 상태를 어떤 방법으로 처리해야 좋을지 고민을 했습니다.
버튼 응답을 기다리는 로딩 상태 같은 경우에는 loading spinner로 처리했지만 포스트 목록을 불러오는 상황에서는 spinner로 처리하기에는 어색함이

React에서 스켈레톤 스크린(Skeleton Screen) 적용해보기