스켈레톤 스크린(Skeleton Screen) 적용

시작하며

지난 번 프로젝트 때 포스트 목록을 불러올 때 로딩 상태를 스피너로 구현 했었다.
하지만!!!
뭔가 어색한 느낌이 들었다.
그래서 이번에는 대중적으로 많이 사용하는 스켈레톤 스크린이라는 로딩 방식을 사용해보고자 한다!

스켈레톤 스크린 (Skeleton Screen)

스켈레톤 스크린은 이름에서 유추할 수 있듯이 화면의 뼈대와 같은 느낌을 주는 UI / UX 기법으로 데이터를 불러오는 중일 때 해당 데이터가 화면에 어떻게 나타날지 미리 알 수 있게 해주는 역할을 한다.

예) youtube 메인화면

스켈레톤 UI 라이브러리를 사용할까 했지만 한번 직접 만들어 보고 싶어서 이번엔 직접 만들어 보았다!

적용하기

현재 내가 만든 블로그는 아래와 같다.

적용한 모습을 보자

setTimeout을 통해 데이터 로딩 시간을 늘려 테스트를 해보니 위와 같았다.

마치며

UI/UX적인 면에서 스켈레톤 스크린의 장점을 알 수 있었다.

하지만 블로그에 적용하기에 적절하지 않다고 생각했다.

데이터를 불러오는데 오랜 시간이 걸리는 서비스에는 유용하겠지만
이용자도 적고 불러올 데이터도 많지 않은 블로그에 적용하기에는 스켈레톤 스크린을 보여주는 시간이 너무 짧아 큰 효과가 없어 보였기 때문이다.

블로그의 포스트 목록에는 렌더링 방식으로 SSG(static site generator)를 사용하는 것이 가장 효율적일 것 같았다.
SSG를 사용하면 로딩 상태 자체를 보여줄 필요가 없어지고 개인 블로그 특성상 포스트가 자주 변동될 일이 없는 정적 페이지이기 때문이다!