LINK

아마 이런 경우 겪어보셨을 겁니다. 웹사이트나 앱에 데이터가 로드되기 전에 회색 사각형이나 바로 먼저 화면이 나타나고, 그 뒤에 로딩이 끝나면 실제 데이터가 나타나는 거죠.

웹서버 성능이나 네트워크 라우팅이나 그때그때의 트래픽, 심지어 사용자 쪽 성능이나 속도 문제로 웹사이트나 앱의 다음 페이지 표시가 느려지는 경우가 있습니다. 별다른 조치를 안하면, 사람들은 버튼을 누르고 한동안 멈춘 화면을 보다가, 데이터가 다 불러와지면 그제서야 제대로 된 화면을 볼 수 있게 되죠.

그런데 요즘 사람들은 빨리빨리를 너무 좋아하는 나머지 로딩이 0.5초만 지연되어도 굉장히 많은 비율로 해당 앱이나 웹에서 이탈해 버립니다. 그래서 눈속임으로 페이지가 나타나는 것처럼 보여주는 게 스켈레톤 스크린입니다.

쉽게 말해서 실제 웹사이트의 대략적인 레이아웃을 회색으로 표시해 주기만 하면 됩니다. 이 회색 레이아웃 배열들은 거의 용량을 차지하지 않기 때문에 미리 로드해뒀다가 거의 즉시 표시해줄 수가 있습니다.

신기하게도 이 스켈레톤 스크린을 적용하면 사람들의 이탈율이 확 줄어듭니다. 화면이 멈추면 나가는 사람들이 그렇게 많은데 말이죠.

꼼수 중의 꼼수인데, 실제로 엄청난 도움이 되는 꿀팁 중 하나입니다.

웹 개발하시는 분들은, 개발 환경에서는 빠르게 로드되는 페이지도 실제 클라이언트 환경에서는 얼마나 느릴지 알 수 없으니 각 페이지마다 적용해 보시길 권장 드립니다. ㅎ