스켈레톤 UI 만들기

이미지 출처는 나무위키 스컬그레이몬

대체 UI란

특정 작업이 완료되길 기다리고 있을 때 프로그레스 바, 로딩 스피너, 스켈레톤 같은 UI 를 대신 보여줌으로써 작업이 아직 진행중임을 강조해 사용자의 이탈을 막을 수 있다.

단, 시간이 오래 걸리는 작업일 경우는 프로그레스 바를 이용해 진행률을 보여주는 것이 더 좋다.

스켈레톤 UI 의 핵심은 최대한 실제 컨텐츠와 비슷하게 만들어,
컨텐츠가 이런식으로 채워질 것이구나 라는 것을 사용자에게 인지시켜줌으로써,
더 좋은 사용자 경험을 이끌어낼 수 있다.

스켈레톤 컴포넌트 구조분석

이 이미지는 현재 제작중인 블로그에 만들어 사용할 글 목록을 보여주는 컴포넌트이다.

상단은 썸네일 이미지, 하단에는 위에서부터 글 제목, 글 내용, 그리고 아바타와 글쓴이 정보가 맨 마지막에 위치해 있다.

이를 HTML과 CSS 로 마크업하겠다.

HTML, CSS 마크업

<div class="post-container">
        <div class="post-thumbnail-wrapper">
            <div class="post-thumbnail"></div>
        </div>
        <div class="post-article-wrapper">
            <div class="post-article-item title"></div>
            <div class="post-article-item summary"></div>
            <div class="post-article-item author"></div>
        </div>
    </div>

:root {
  --container-bg-color: #eeeeee;
  --item-bg-color: #d6d6d6;
}
.post-container {
    box-sizing: border-box;
    width: 300px;
    height: 400px;
    background-color: var(--container-bg-color);
    border-radius: 0.5rem;
}

.post-thumbnail-wrapper,
.post-article-wrapper {
    box-sizing: border-box;
    height: 50%;
    padding: 1rem;
}

.post-thumbnail {
    border-radius: 0.5rem;
    background-color: var(--item-bg-color);
    width: 100%;
    height: 100%;

}

.post-article-wrapper {
    display: flex;
    flex-flow: column nowrap;
    gap: 1rem;
}

.post-article-item {
    box-sizing: border-box;
    background-color: var(--item-bg-color);
    border-radius: 0.5rem;
}

.title {
    flex-basis: 2rem;
}

.summary {
    flex-basis: calc(100% - 6rem);
}

.author {
    flex-basis: 2rem;
    width: 50%;
}

마크업을 끝내면 위 이미자와 같은 결과물이 나오게 된다.
지금 이상태도 나쁘지 않지만 가상선택자와 애니메이션을 이용해 조금 더 재밌는 UI를 만들 수 있다.

애니메이션 적용하기

.post_thumbnail {
  /* ...styles */
  ++ overflow: hidden;
  ++ position: relative;
}

.post-article-item {
  /* ...styles */  
  ++ overflow: hidden;
  ++ position: relative;
}

++ .post-thumbnail::after, 
++ .title::after, 
++ .summary::after, 
++ .author::after {
++    content: '';
++    position: absolute;
++    top: 0;
++    left: 0;
++    width: 300px;
++    height: 100%;
++    background: linear-gradient(90deg,var(--item-bg-color), var(--container-bg-color), var(--item-bg-color));
++    animation: 1s linear infinite skeleton-animation;
++ }

++ @keyframes skeleton-animation {
++    from {
++        transform: translateX(-100%);
++    }
++    to {
++        transform: translateX(100%);
++    }
++ }

우선 내부 아이템들의 position 속성을 relative, overflow 속성을 hidden 으로 변경해야한다. 이를 통해 애니메이션이 적용될 엘리먼트 위치를 설정하고, 반짝이는 시각효과가 보여질 범위를 제한하는 것이다.
그런 뒤 translateX 를 이용해 배경이 그라디언트 처리된 엘리먼트 위치를 왼쪽에서 오른쪽으로 움직여주면 완성이다.

완성

스켈레톤 컴포넌트가 완성되었다.