✏️ 사용자 경험에 맞춘 skelecton 라이브러리

 

 

 

 

 

 

IceCraft - skeleton라이브러리 추가하기

 

이전 포스팅에서 프로젝트에 스켈레톤 라이브러리를 활용하여 구현해보았다.

좀더 나아가서 스켈레톤이 뭐고, 어떻게 활용해야하는지 작성해보자🔥

 

 

 

---

 

 

스켈레톤(skeleton)이 뭐예요?

 

비동기로 데이터 패칭 후에 로딩 중 실제 데이터가 렌더링 될 화면의 윤곽을 보여주는 애니메이션 UI이다.

즉, 웹 페이지에서 데이터가 로드되기전에 사용자가 기다리는 시간을 덜 지루하게 볼 수 있도록 미리 보게 되는 UI라고 생각하면 된다. 

ex) 유튜브 홈페이지

 

 

 

---

 

꼭 스켈레톤을 써야할까요?

 

사용자 경험을 향상시키기 위해서 비동기로 데이터 패칭할 상황에서 스켈레톤 UI를 많이 사용하고 있다.

하지만 스켈레톤을 써야하는게 과연 도움이 될까?

 

 

엘레베이터 거울 효과 예시를 들어보자!

1853년 미국에서 고층 빌딩들이 우후죽순 생겨났고,
엘레베이터 세계기업인 오티스는 최초로 안전 장치가 부착된 엘레베이터를 납품하게 됐다.

하지만 그 당시의 기술력으로는 엘레베이터의 속도는 빠르지 않았고,
너무 느리다는 불만이 치솟았지만 당시 기술력으로는 엘레베이터를 빠르게 할 수 없었다.이 문제를 해결하기 위해
엘레베이터에 `거울을 설치해보자`는 아이디어가 등장했다.

엘레베이터에서 거울을 보며 옷단장을 한다면 엘레베이터 속도에 대한 체감이 덜해질 것이라고 생각했기 때문이다.

이 아이디어는 성공적이었고, 이 때부터 엘레베이터에 거울을 설치하는 것은 공식화가 되었다.
여기서 엘레베이터 거울은 Skeleton UI와 같다.

실제 조사에 따르면 Skeleton UI를 설정한 웹 사이트의 사용자 이탈률이 현저히 적다고 조사되었다.

`엘레베이터 거울`은 `Skeleton UI`이고
`엘레베이터 속도`는 `API 지연 속도` 이다.

 

 

 

 

 

---

 

 

Skeleton UX 연구 결과

이벤트가 발생한 즉시 피드백을 제공.
1초 이상 걸리는 작업에는 스켈레톤 UI를 제공.
움직이지 않는 스켈레톤 UI는 사용하지 말기.
스켈레톤 UI에 다시 클릭하지마세요 문구 → 사용하지 마세요.

 

 

1) 이벤트가 발생한 즉시 피드백을 제공하세요.
예로 인스타에 사진 업로드 버튼을 눌렀을 경우 아무 반응이 없다면 사용자들은 제대로 눌려지지 않았다고 생각하여 여러번 클릭할 것입니다. 따라서 마우스 클릭, 키보드 다운 이벤트 발생 즉시 loading 처리 및 스켈레톤 처리를 진행하라는 것을 의미합니다.

 

 

2) 1초 이상 걸리는 작업에는 스켈레톤 UI를 적용해주세요. 적용 방법은 두가지의 방식이 있습니다.
예로 웹사이트를 방문할 때 그 웹사이트에 지연이 오래된다면 사용자들은 그 웹사이트에 대한 호감이 떨어지고 이탈하게 됩니다. 

이러한 이슈를 분산 시키기 위해 spinner 또는 Skeleton ui를 설정하는 방법이 두 가지 있습니다.

 

10초 이상인 경우는 완료율이 있는 로딩바를 설정합니다. 현재 진행 상황을 예상 단위 및 단계로 표시합니다. 

일반적으로 10초 이상되는 긴 지연 시간일 경우 사용합니다. 이로써 사용자 웹사이트 이탈률을 감소시킵니다.

마지막으로 지연시간이 `1초 미만`일 경우 Skeleton UI를 설정하게 된다면 오히려 깜빡이는 UI가 UX를 해치게 되기 때문에 사용하지 않습니다.

 

 

3) 정적인 Skeleton을 사용하지 마세요.
움직이지 않는 스켈레톤을 사용하는 경우 피드백이 없는 것보다 낫겠지만 어떤 일이 일어나고 있는지 사용자가 정확히 알 수 없기 때문에 사용하는 것을 지양합니다.

 

 

4) 다시 클릭하지마세요 라는 경고 문구를 사용하지 마세요.
최악의 Skeleton UI는 `다시 클릭하면 추가 금액이 소비됩니다.` 와 같은 사용자를 위협하는 문구가 들어 있는 사이트입니다. 친화적인 디자인은 사용자를 불안하게 하지 않습니다.

 

 

---

 

✨ 스켈레톤 라이브러리를 활용하여 적용해보자

 

 

 

라이브러리 Docs

react-loading-skeleton

 

 

 

 

 

라이브러리 설치

yarn add react-loading-skeleton
npm install react-loading-skeleton

 

 

 

import 로 불러오기

import Skeleton from 'react-loading-skeleton'
import 'react-loading-skeleton/dist/skeleton.css'

 

 

 

기존 스켈레톤 색상도 Theme로 불러오면 색상 변경 가능하다.

import Skeleton, { SkeletonTheme } from 'react-loading-skeleton';

return (
  <SkeletonTheme baseColor="#202020" highlightColor="#444">
    <p>
      <Skeleton count={3} />
    </p>
  </SkeletonTheme>
);

 

 

 

 

 

기존 뼈대

   <section className={S.visualSection}>
        <MainVisual gameStartHandler={gameStartHandler} />
      </section>

 

 

 

 

 

skeleton으로 변경하기

 <section className={`${S.visualSection} ${S.loadingWrapper}`}>
          <p className={S.loadingPager}>
            <Skeleton width={75} height={30} />
          </p>
          <div className={S.visualTitleLoading}>
            <Skeleton width={250} height={70} />
            <div className={S.loadingButton}>
              <Skeleton width={135} height={50} />
              <Skeleton width={135} height={50} />
            </div>
          </div>
        </section>

 

 

 

 

---

 

 

결론

적용한 UI를 확인해보면 UX가 확실하게 개선이 됐다는 것을 느낄 수 있다.

상황에 따라 그리고 각각의 플랫폼 평균 지연시간에 따라 Skeleton UI를 지정해주자.

 

 

 

 

 

 

 

참고문서

Progress Indicators Make a Slow System Less Insufferable

 

무조건 스켈레톤 화면을 보여주는게 사용자 경험에 도움이 될까요? | 카카오페이 기술 블로그