[Skeleton UI] 유저는 빈 화면을 싫어한다.

 

다양한 어플리케이션에 적용된 Skeleton UI

기술 사용의 필요성

일반적으로 유저는 300ms 가 넘는 시간을 기다리는것을 싫어한다. 이 300ms 이상 시간이 흐르는동안 빈 화면이 표시된다면 유저는 웹페이지에 무언가 문제가있다는 생각을 하게되고, 시간이 더 지체된다면 유저는 새로고침을 하거나, 페이지를 이탈하게 된다.

 

기다림으로 인해 발생하는 UX를 개선하는데에 중요한 것은 궁극적으로 기다리는 시간을 줄이는 것에 있다. 하지만 개발자의 노력으로 줄이는 시간에는 한계가 있다. 개발자가 노력해서 테스트환경에서 시간을 로딩시간을 줄였다고 하더라도 유저의 네트워크 환경자체가 느리다면 기다리는 시간을 일정시간 이하로 줄일 수 없게 된다.

 

혹시 UX관련 엘레베이터 일화를 들어봤는가?

한 건물 관리실에 엘레베이터를 기다리는 시간이 너무 길다는 민원이 쏟아졌다. 해당 건물의 엘리베이터를 설계한 회사에서 알고리즘을 계산하고, 속도를 높여보아도 사람들이 몰리는 시간에 기다리는 시간을 줄이는 것은 불가능했다.

이에 기지를 발휘해 엘리베이터 앞에 거울을 설치해 엘레베이터 이용객으로 하여금 기다림 자체를 잊게 만들었다.

 

스켈레톤 UI는 어떻게보면 위의 엘레베이터 사례와 유사한 해결방식이다.

---

해결방안

서버로 부터 정보를 받아 와서 웹브라우저에 표시하기 까지 일정 시간이 걸리는데 이를 해결하기위해 스켈레톤 컴포넌트 (Skeleton component)를 이용한다. 스켈레톤 컴포넌트란, 화면에 표시될 정보가 서버로부터 불러와져 표시가 완료될 때 까지 화면에 대신 표시해 줄 내용이다. 흔히 로딩창이라고 아는 Progress indicator의 일종인데

 

오로펫 웹사이트에서는 스켈레톤 UI를 적용하여 UX를 개선하기 위해 노력하였다.

이미지, 글 내용이 불러와 지는 동안 표시되는 스켈레톤 컴포넌트

이렇게 컨텐츠가 표시될 내용을 대체해주는 것 만으로도 유저에게 기다린다는 느낌을 줄여줄 수 있다.

 

 

스켈레톤 컴포넌트 적용법

 

1. 먼저 표시될 스켈레톤 컴포넌트를 제작한다. 본 프로젝트에서는 Styled components를 이용해 제작했다.

export const SocialSkeleton = () => {
  <SkeletonWrap>
    <SkeletonImg className="smallimg" />
    <div className="chatting_title">
      <SkeletonText className="large" />
      <SkeletonText />
    </div>
  </SkeletonWrap>;
};

const SkeletonText = styled.div`
  width: 30%;
  height: 24px;
  margin: 5px 0;
  background-color: var(--background-gray);
  &.large {
    width: 50%;
  }
  &.circle {
    width: 36px;
    height: 36px;
    border-radius: 100%;
    margin-right: 10px;
  }
`;
const SkeletonWrap = styled.div`
  width: 100%;
  max-width: 470px;
  min-width: 330px;
  height: 100px;
`;

2. 조건부 랜더링을 이용하여 로딩중일 경우 스켈레톤 ui를 렌더한다.

const Story = () => {
// api를 불러오는 중인 상태를 useState를 이용해 만든다
	const [isLoading, setIsLoading] = useState(true);
    
// 처음 페이지를 로드할때 해당 api를 불러오도록한다.
    useEffect(() => {
    
// 로딩 중으로 state를 바꿈
    setIsLoading(true);
    try {
      axios.get("/story").then((response) => {
        setStory(response.data.results);
        
 // api를 불러오는데 성공한다면 로딩이 완료됨으로 state를 바꿈
        setIsLoading(false);
      });
    } catch (err) {
      setIsLoading("err");
    },[])
    
 // 로딩중이라면 스켈레톤 UI를 랜더하고
    if (isLoading) {
    return (
      <>
        <section className="storyWrapper">
          <StorySkeleton />
        </section>
      </>
    );
  // 로딩이 끝났다면 원래 컴포넌트를 랜더
    else return "..."
  }

---

주의할 점

1) 너무 짧은 로딩시간에서는 사용을 하지 않는다.

그렇다고 스켈레톤 컴포넌트가 만능은 아니다. 만약 api를 이용해 컨텐츠를 불러오는데 평균적으로 걸리는 시간이 300ms 보다 짧다면 적용하는것을 고려해 보야아한다. 랜더링 시간이 300ms 보다 짧다면 찰나의 순간에 스켈레톤 UI가 랜더링되었다가 이후 본래의 컨텐츠가 랜더링 되게된다. 이는 불필요하게 화면이 깜빡이는 느낌을 주어 UX에 악영향을 줄 수 있다.

 

-> 이를 해결하고자한다면 일정시간 (약 200ms) 동안은 스켈레톤 컴포넌트를 표시하지않고 빈 화면을 보여주고 200ms이상으로 딜레이가 될 때 표시를 해 줄 수 있다.

 

 

2) 스켈레톤 컴포넌트 자체 애니메이션을 적용한다.

원본 이미지  reactjsexample

스켈레톤 컴포넌트를 사용하는 이유는 유저에게 "오류가 아닌 페이지를 불러오는 중이니 기다려주세요" 라는 메세지를 전달함으로써 유저가 웹사이트에서 일어나는 일을 알 수 있게 해주는데 있다.

 

스켈레톤 컴포넌트 역시 빈 화면과 마찬가지로 화면에 표시되어있는 시간이 길어질 수록 유저로 하여금 사이트가 표시되지 않는다는 부정적 인식을 심어줄 수 있다. 이러한 불편을 줄여주기위해 스켈레톤 컴포넌트는 움직이는 애니메이션을 주어 화면을 불러오고 있다는 것을 암시적으로 알려주어야한다.

조심해야 하는게 지나치게 빠른 애니메이션 보다는 느리고 안정적인 애니메이션이 유저로 하여금 체감 로딩시간을 단축시킬 수 있다.