로딩 화면 만들기 (최근 유행하는 스켈레톤 스크린)

목차

• 스켈레톤 스크린(Skeleton Screen) 샘플 코드
• 로딩 화면 만들기 코드 설명
• 스켈레톤 로딩 샘플 페이지

로딩 화면을 만들어야 하는데... 그러고 보니 스켈레톤 스크린을 적용한 웹사이트들이 자주 보입니다. 스켈레톤 스크린에 대해 알아보고 실제로 구현해 보겠습니다.

스켈레톤(뼈대) 스크린(Skeleton Screen)이라는 용어를 모르시더라도 아래 동영상과 같은 로딩 중 화면을 한 번은 본 적이 있을 겁니다.

스켈레톤 로딩 화면 예↓↓↓

예를 들어 웹 페이지에서 콘텐츠를 읽어 들이고 있을 때, 아무것도 표시되지 않은 상태가 지속된다면 사용자 입장에서는 불안한 마음이 생기기 마련입니다.

그래서 일반적으로는 스피너 또는 프로그레스바를 표시해서 사용자에게 '로딩 중입니다. 잠시만 기다려 주세요.'라는 메시지를 전달합니다.

반면 스켈레톤 스크린은 이미지를 로딩하거나 JavaScript가 실행 중일 때, 레이아웃의 구조, 기본 뼈대를 사전에 보여 줌으로써 스피너나 프로그레스바와는 다른 차원에서 사용자 입장에서 앞으로 어떤 구조의 콘텐츠가 나타날지 예상할 수 있기 때문에 안심하고 로딩 시간이 길어져도 심리적으로 짧게 느껴집니다.

스켈레톤 스크린은 아마도 YouTube, Netflix, Slack 등에서 보셨을 겁니다. 뭔가 만들기 어려워 보이지만 샘플 코드를 작성해 보았습니다. 참고하시고 도움이 되었으면 좋겠습니다🙂

스켈레톤 스크린(Skeleton Screen) 샘플 코드

로딩 화면 만들기 코드 설명

위의 샘플 코드에 대한 설명입니다.

JavaScript

에서 window.onload 이벤트에 등록한 함수는 window 오브젝트의 로딩이 완료된 타이밍에, 다시 말해 해당 페이지내의 이미지를 포함해서 모든 요소들이 읽어 들여진 직후에 실행되는데, 이 타이밍에 스켈레톤의 부모 요소(<div class="loading">)에 loading-hidden 클래스를 추가해서 초기에 보여지는 스켈레톤 스크린을 페이지 로딩 완료 후에는 없애는 로직입니다.

그리고 페이지 로딩 속도가 빠르면 스켈레톤 스크린을 실감할 수 없기에 지금은 테스트 코드가 유효화(174행)되어 있고 반면 실제 코드가 주석 처리(176행)되어 있다는 점, 알아 두세요.

이 글에서 소개하고 있는 것은 기본적인 샘플 코드입니다. 이대로 사용할 수도 있겠지만 백엔드 서버와 데이터를 주고 받는 처리가 있다면 그 처리가 끝날 때, 스켈레톤 스크린을 숨기면 됩니다.

종래의 스피너, 프로그레스바보다 스켈레톤 스크린이 반드시 낫다라는 것은 아닙니다. 각각 적절한 상황에 맞춰서 사용하면 좋겠다고 생각합니다.

스켈레톤 로딩 샘플 페이지

샘플 페이지 보기