*잠깐, 이 글을 소개해드리는 위시켓은 2019년 시밀러웹 방문자 수 기준, 국내 1위 IT아웃소싱 플랫폼입니다.

현재 9만 이상의 개발업체, 개발 프리랜서들이 활동하고 있으며, 무료로 프로젝트 등록이 가능합니다. 프로젝트 등록 한 번으로 여러 개발업체의 견적, 포트폴리오 예상기간을 한 번에 비교해보세요😆

    40라인으로 완성하는 스켈레톤 이미지 쉬머 효과

사이트 좌측 영역에 표시되는 레이지 로딩 이미지

  최근 제가 만든 앱의 사이드바에 멋진 레이지 이미지 로딩 효과를 적용 해봤습니다. 사이드 메뉴의 이미지는 최초 로드 시 쉬머(Shimmer)[1]/스켈레톤(Skeleton)[2] 효과가 적용되고, 이미지 크기에 맞춰 높이가 변하며, 페이드인 효과를 통해 최종적으로 그 모습을 드러냅니다. (아래 애니메이션을 참고해 주세요)
지금부터 어떻게 이러한 효과를 적용했는지 설명하고, 여러분의 프로젝트에서 그대로 사용할 수 있도록 제가 만든 리액트(React) [3]컴포넌트를 공유하고자 합니다.

레이지 로딩 스켈레톤 이미지

💡 참고: 본문에서 설명하는 효과는 예제 ‘레이지 로딩 이미지’보다 앱에서 직접 봤을 때 더 효과적으로 보입니다. 보고 있는 본문의 높이가 변경될 때 레이아웃 변경(Layout Shift)이 발생할 수 있기 때문입니다. 앱에 대해 궁금하시다면 제가 만든 뉴스레터 디자인 도구인 Letter를 찾아보세요.

자세히 들여다보기

리액트에는 ‘레이지 로딩 이미지’를 만들 수 있는 유용한 라이브러리가 많이 있지만, 제가 만든 앱은 ‘레이지 로딩 이미지’를 세로로 쌓아서 보여주되 동적으로 높이를 바꿀 수 있는 방법이 필요했습니다.

레이지 로딩 스켈레톤 이미지

위 애니메이션과 같이, 각 ‘레이지 로딩 이미지’는 미리 정의된 최소 높이에서 시작하여 실제 이미지 크기에 따라 커지거나 줄어듭니다.
좀 더 고민했다면 ‘레이지 로딩 이미지’가 로드되기 전에 높이를 미리 계산할 수 있었을 것 같습니다. (방법을 아시는 분은 알려주세요!).

쉬머 효과 및 프레이머 모션(Framer Motion) 추가하기

위에서 설명한 ‘레이지 로딩 기능’을 리액트 컴포넌트로 작성하여 CodeSandBox에 올려두었습니다. 새로 고침 버튼(CodeSandBox 페이지 왼쪽 하단)을 누를 때마다 Unsplash에서 다른 이미지가 불러오도록 만들었기 때문에 다양한 크기의 이미지에 대해 어떻게 동작하는지 확인할 수 있습니다.

CodeSandbox 예제

https://bx1je.csb.app/

40 라인으로 완성하기

위 예제를 구현하기 위해 사용한 코드는 40 라인에 불과합니다. 코드의 대부분은 div 요소로 둘러싸인 리액트 JSX 마크업 이미지 태그로 이루어져 있습니다. 31 라인을 보면 image 태그의 onLoad 속성을 통해 필요한 기능을 호출하고 있습니다.

브라우저가 이미지를 로드하면 컴포넌트의 상태와 이미지의 CSS 클래스를 변경하는 imageLoaded 함수가 호출됩니다.

· CSS 쉬머 효과: 17 라인을 보면 CSS 클래스인 ‘pulse’ 및 ‘loadable’이 적용된 것을 볼 수 있습니다. 이미지가 로드될 때 pulse 클래스가 추가되며, 이를 통해 CSS 파일에 정의된 쉬머 효과가 동작합니다.

· 프레이머 모션 애니메이션: 20~30 라인에서는 motion. 태그 데코레이터를 사용해 추가함으로써 이미지 태그가 프레이머 모션 태그로 변환되는 것을 확인할 수 있습니다. 이어지는 코드는 이미지가 로드된 후 동작할 애니메이션을 정의합니다. 프레이머 모션에 대한 자세한 내용은 이곳을 참고해 주세요.

여기까지가 효과를 적용하기 위해 필요한 전부입니다. 예제에서와 같이 onLoad 이벤트를 통해 모든 것이 이루어집니다.

프레이머 모션에 대해

사실 제가 개발한 앱에서도 프레이머 모션을 통해 사이드바를 구현했고 그 사용법이 매우 직관적이라는 것을 알고 있었기 때문에 위에 소개한 예제에서도 이미지 높이 조절 애니메이션을 동일하게 적용했습니다. 본문의 첫 번째 애니메이션 이미지를 보면 사이드바가 열리고 이미지가 바운스되는 것이 보이는데, 이는 모두 프레이머 모션 효과가 적용된 것입니다.

제가 그랬듯이 여러분도 CodeSandbox에서 다른 사람들의 창작물을 찾아보며 사용법을 익힐 수 있을 것입니다. 움직이는 사각형을 만들어 보는 것만으로도 좋은 출발점이 될 수 있습니다.

여러분은 레이지 로딩 이미지 효과를 위해 어떤 라이브러리를 사용하고 있나요? 소개해 드린 프레이머 모션 라이브러리가 마음에 드신다면 지금 바로 시작해보세요.

[1] 이미지가 아른거리듯 천천히 반짝이는 효과.
[2] 화면에 컨텐츠를 불러오는 동안 해당 요소가 표시되는 위치에 실루엣처럼 표시되는 화면 요소.
[3] 사용자 인터페이스 개발을 위해 페이스북에서 만들고 공개한 오픈소스 자바스크립트 라이브러리.
출처: https://blog.prototypr.io/creating-lazy-load-shimmer-effects-for-images-with-framer-motion-f8d337a29db1?source=collection_home———3—————————-

국내 1위 IT아웃소싱 플랫폼,

위시켓이 궁금하신가요?