[UX] 동적 width의 image가 로드되기 전과 후 레이아웃 다른 문제 해결 - 스켈레톤

문제 상황: 동적으로 width가 달라지는 상황에서 height를 고정해줄 수 없다.

로드 전 사진: image가 로드되기 전에는 height가 비어있다.

로드 후 사진: 로드 된 image 만큼 height가 채워진다.

---

해결방법: img를 감싸는 박스에 img 비율만큼의 높이를 미리 지정한다.

      <div className="thumbnail-ratio">
        <img src={video.thumbnailsUrl} alt="" />
      </div>

박스의 높이를 padding-top 을 이용해 만들어 주고,

img를 absolute로 크기를 미리 갖도록 한다.

      .thumbnail-ratio {
        position: relative;
        width: 100%;
        padding-top: 56.25%; /* 16:9 비율의 경우 */
        img {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
        }
      }

---

이는 레이지 로드를 적용하거나 빠른 이용자 경험을 위한 스켈레톤 방식이라고 보면 된다.

 

실제 데이터가 들어갈 골조를 모두 구현한 뒤에 먼저 렌더링 하고,

img와 같이 비동기 처리되는 데이터는 이 골조에 끼워넣는 방식이다.

유튜브에서 매일마다 보는 그 로딩 화면이다.

 

그런데 유튜브는 끼워넣기 방식이 아니라,

 

이 스켈레톤 레이아웃 자체를 하나의 컴포넌트로 가지고, 비동기 처리가 끝나면 

이 스켈레톤 레이아웃을 치우고, 보여주고 싶은 데이터를 포함한 새로운 컴포넌트를 보여주는 듯하다.

(잘 살펴보면 다르다)

 

레이지 로드를 적용하지 않으면 이와 같은 방식이 될 것이고,

 

레이지 로드를 적용한다면 스켈레톤에 비동기로 불러온 img 데이터를 로드시키는 방식이 될 것이다.