로딩(Loading) 화면 구현하기

로딩 화면은 사용자가 웹페이지를 로딩하는 동안 피드백을 제공하여 페이지가 제대로 작동하고 있다는 신호를 줄 수 있어요.

빈 화면을 보여주면 사용자가 불안해할 수 있잖아요? 그래서 로딩 화면이 꼭 필요해요.

이제 왜 필요한지, 어떻게 구현할 수 있는지 알아볼게요.

1) 로딩페이지 구현 이유

로딩 화면이 있으면 사용자가 페이지가 제대로 작동하고 있다는 걸 알 수 있어요.

기다리는 동안 빈 화면이 아니라 로딩 중이라는 표시를 보면, 페이지가 멈춘 게 아니라는 걸 안심할 수 있죠.

로딩 화면이 주는 이점은 다음과 같아요.

먼저, 로딩 화면에 사용할 GIF 이미지를 준비해야 해요.

구글에서 무료로 제공되는 로딩 GIF를 찾아 다운로드하고, 저작권 문제가 없는지 확인하세요.

그런 다음, 이 이미지를 프로젝트의 src/assets 폴더에 저장하면 됩니다.

로딩상태가 true가 되면 로딩 GIF가 화면에 보이게 돼요. 이제 스타일을 추가해볼게요.

이제 로딩 화면이 잘 구현되었는지 확인해볼게요.

이렇게 하면 로딩 화면이 잘 구현된 거예요

이제 비동기 처리 중에는 로딩 중이라는 표시가 나타나고, 이 동안 사용자는 다른 액션을 할 수 없게 됩니다.

로딩페이지는 선택이 아닌 필수이므로, 다들 구현하시면서 질문이 있거나 도움이 필요하시면 언제든지 댓글을 남겨주세요.

읽어주셔서 감사합니다! 😊