스켈레톤(Skeleton) UI

Overview

이번, 프로젝트에서는 다량의 데이터와 사진을 요청받아와 렌더링해야했다. 데이터가 많으면 100개도 될 수 있었고 사진도 받아와야 했고 data가 담고 있는 정보의 양도 꽤 되었다. 구현을 열심히 해서 데이터를 불러와 컴포넌트들을 렌더링 하는 것은 무사히 했지만 데이터 요청이 진행되는 도중 렌더링 되는 부분이 비어보였고 이게 사용자 입장에서 좋지 않을 거라는 생각이 들었다.

이때, 내가 사용자로 어떠한 페이지의 로딩을 기다릴때 대부분의 페이지나 앱에서는 loding 스피너 같은 걸 제공해 주었다는 게 생각이 났다! 그를 통해 나는 로딩이 되고 있다는 걸 알고 있고 기다리는 지루한 시간을 제공되는 시각적인 이미지를 통해 어느정도 해소하고 있었던 것이다. 만약에 그러한 loading 스피너가 존재하지 않았다면 나는 로딩되는지도 몰랐고 (아마 조금만 길어도 새로고침을 계속 했을 것 같다) 생각보다 큰 지루함을 느꼈을 것 같다. (특히 느리고 안정적인 애니메이션이 로딩 시간을 짧게 느끼게 해준다고 한다)

그런데 점점 검색하다보니 단순히 loading 스피너를 제공하는 방법도 있지만 스켈레톤 UI를 사용할 수도 있다는 걸 알게되어서 이번 프로젝트에 적용하게 되었다.

저 중간에 하얀색이 잠깐 비치는게 마음에 안들었다. 지금은 데이터를 적게 받고 있으니까 괜찮지만 무수히 많은 데이터를 받게된다면 하얀색이 길어질 거 아닌가?

스켈레톤 UI 적용해보기

그러면 일단 스켈레톤 UI를 만들어야 한다. 어떻게 만드는 게 좋을까?

스켈레톤 UI는 최대한 기존 컴포넌트와 비슷하게 만들어주는 것이 좋다고 한다. 그렇다면 두가지 방법이 있지 않을까?

• props 전달을 통해 스타일링을 바꾸어 주던지
• div 태그들로 적절히 채워진 스켈레톤 컴포넌트 자체를 만들 수도 있을 것 같다.

그런데 스타일 컴포넌트의 상속이나 기능들을 제대로 사용하지 못했던 탓인지 이번에 적용한 컴포넌트의 스타일 컴포넌트가 너무 많았다. 텍스트들도 문제였다. 짧은 텍스트들 같은 경우에는 span 태그를 사용해주었는데 스켈레톤 UI처럼 만들고자 한다면 그 텍스트가 들어가는 길이만큼 배경색을 입혀주어야 했다. 물론 임의의 텍스트를 넣어두고 배경색과 폰트색을 같게 해주어도 되었지만 스켈레톤 UI를 최대한 단순히 만들고 싶었다.

기존 컴포넌트와 비슷하게 만들어보기

const Card = ({ img, price, name }) => {
  return (
    <CardContainer>
      <CardImage src={img} />
      <CardTexts price={price} name={name} />
      <HeartIcon />
    </CardContainer>
  );
};

저 빈공간으로 나오는 부분들은 이 Card 컴포넌트를 받아온 데이터로 렌더링해 만드는 부분이다. 그러면 이 Card 컴포넌트와 비슷하게 만들어주면 될 것 같다.
그리고 사실 이 Card 컴포넌트의 Text안에는 더 무수한 컴포넌트들이 존재하고 있다.

const SkeletonCard = () => (
  <CardContainer>
    <CardImage />
    <Container width="400px" height="200px">
      <CardInfoUpside>
        <CardText />
        <HashTags />
        <CardText />
        <CardText />
      </CardInfoUpside>
      <CardInfoDownSide>
        <CardText />
        <TotalAmount />
      </CardInfoDownSide>
    </Container>
  </CardContainer>
);
// 이게 다 조금씩 달라서 다르게 만든 styledComponent
// 급하게 만들고 이름은 아직 신경안썼지만 나중에 바꿔주려고 한다!

그래서 이렇게 만들어서 적용했다. 그런데 조금조금씩만 다른 컨테이너들을 진짜 조금만 다른데 새로 만들어야 했다. styled componet의 상속을 사용해서 조금더 줄여봐도 좋을 것 같다는 생각이 들었다.
그리고, useFecth를 만들어 사용중이었으므로 로딩중인 상태에서는 스켈레톤 UI가 출력하도록 변경했다.

그럴듯해 졌다. 그런데 기존에 사용되던 홈페이지들에 비해 조금 정적으로 보인다. 애니메이션 적용을 따로 안해놔서 그런 것 같다는 생각이 들었다. 그리고 아직 부족한 부분이 있다. 왼쪽단의 카드 컴포넌트들은 스크롤이 가능하고 이러한 스크롤을 통해 lazyload를 구현해볼 수도 있을 것 같다.

reference

https://ui.toast.com/weekly-pick/ko_20201110

todo

• 애니메이션 적용하기
• lazyload 적용하기