[번역] 웹으로 구현하는 로딩 쉼머(The Loading Shimmer!)

최근 프로젝트를 하면서 페이스북, 인스타그램 등 여러 트렌디한 서비스들이 쉼머라는 새로운 로딩 애니메이션을 도입하고 있다는 걸 알게 되었습니다. 관련해 UX 및 개발 자료를 찾으면서 쉼머에 관련된 한국어로 된 콘텐츠가 많이 없는 것 같아서 괜찮게 본 글을 번역해봤습니다. 의역이 포함되어 있고 원작자의 허가를 받고 번역했습니다. 원본 링크는 https://dev.to/dhilipkmr/the-loading-shimmer-29dc 입니다.

Loading Shimmer를 접했을 때, 전 그게 웹 개발에 새롭게 도입된 끝내주는 기술이라고 생각했습니다. 하지만 Loading Shimmer는 이미 인터넷에서 많이 알려져 있었습니다.

 

느린 네트워크 접속 환경 때문에 DOM 로드에 시간이 걸릴 때면, 우리는 로딩 아이콘이나 gif 애니메이션을 통해 현재 로딩 중이라는 것을 나타내곤 했습니다.

 

좀 구식이지만 흔히 알고 있는 방식은 이런거죠.

이 gif는 사용자에게 현재 콘텐츠가 로드되고 있음을 잘 알게 합니다.

그러나 사용자 경험에 있어 이게 최선일까요? 좀 더 나은 방법은 없을까요?

우리를 구원해 줄 Skeleton Screens(뼈대 화면)

우리는 로딩 아이콘을 보여주는 대신에 우리는 전체 콘텐츠가 로딩되었을 때 그것이 어디서 어떻게 보여질지에 대한 샘플 레이아웃을 보여줄 수 있습니다.

 

이런 것은 우리는 Facebook에서도 쉽게 찾을 수 있죠.

 

이런걸 바로 "Loading Shimmer" 라고 합니다!

 

위의 레이아웃은 프로필 사진과 설명, 캡션 등으로 구분된 섹션으로 구성되어 있습니다. 콘텐츠가 로딩되는 동안 이런 류의 템플릿을 보여줄 수 있습니다.

우리의 앱에 어떻게 적용할 수 있을지 알아보자

우리는 그저 CSS와 HTML 만으로 이걸 해낼 수 있습니다.

 

전체 코드는 codepen에 올려놨습니다.

 

이런 걸 만들어 봅시다.

HTML, CSS로 만든 결과물

보일러 플레이트

(역주 - 보일러 플레이트는 재사용을 위해 짜놓는 코드를 말합니다.)

이 코드는 프로필 사진과 몇몇 댓글을 포함하는 레이아웃입니다.

  <div class="card br">
     <div class="wrapper">
        <div class="profilePic animate"></div>
        <div class="comment br animate w80"></div>
        <div class="comment br animate"></div>
        <div class="comment br animate"></div>
     </div>
  <div>

  .br {
    border-radius: 8px;  
  }
  .w80 {
     width: 80%;
  }
  .card {
    border: 2px solid #fff;
    box-shadow:0px 0px 10px 0 #a9a9a9;
    padding: 30px 40px;
    width: 80%;
    margin: 50px auto;
  }
  .profilePic {
    height: 65px;
    width: 65px;
    border-radius: 50%;
  }
  .comment {
    height: 10px;
    background: #777;
    margin-top: 20px;
  }

.card 클래스는 카드를 백그라운드처럼 보이게 합니다.

애니메이션 확장하기:

.wrapper {
  width: 0px;
  animation: fullView 0.5s forwards linear;
}

@keyframes fullView {
  100% {
    width: 100%;
  }
}

.wrapper는 shimmer가 보여지는 동안 width가 0에서 100%로 확장하는 애니메이션을 구현합니다.

The Shimmer(쉼머)

.animate {
   animation : shimmer 2s infinite linear;
   background: linear-gradient(to right, #eff1f3 4%, #e2e2e2 25%, #eff1f3 36%);
   background-size: 1000px 100%;
}

.animate 클래스에서 shimmer라는 이름의 커스텀 애니메이션을 만들고, 애니메이션이 2초동안 지속되고 무한반복되게 합니다.

(역주 - animation-name을 shimmer, animation-duration을 2s, animation-timing-function: linear, animation-iteration-count을 infinite로 설정하면 됩니다.)

• background는 linear-gradient 으로 설정합니다. 시작 부분과 끝 부분의 나머지 색상과 합쳐지는 그라디언트를 사용합니다.
  (We need to use a gradient as it merges with the rest of the colour in its front and back.)
• linear-gradien의 속성은 왼쪽에서 오른쪽으로(to right), 0~4%는 #eff1f3(배경색), 25% 지점엔 #e2e2e2 를, 36%~100%는 #eff1f3(배경색)이 되도록 작성합니다.
• background-size로 배경의 width와 height를 맞출 수 있습니다.

@keyframes shimmer {
  0% { 
      background-position: -1000px 0;
  }
  100% {
      background-position: 1000px 0;
  }
}

• 커스텀 shimmer 에서 애니메이션의 시작과 끝이 어떻게 보여야 하는지 정의합니다.
• background의 위치는 -1000px에서 1000px로 이동합니다.
• infinite를 통해 매 2초마다 애니메이션이 실행될 수 있도록 합니다.

follow 버튼을 누르는 것 잊지 않으셨쥬😜

 

전체 코드는 codepen에 공개되어 있습니다.

 

끄읕~😁