문제 상황 🤷‍♂️

웹 사이트를 개발하다보면 서버와의 통신으로 데이터를 받아오고, 받아온 데이터를 통해 View를 구성해야 하는 일이 자주 발생합니다.

데이터를 받아오는 도중엔 컴포넌트의 내부 컨텐츠를 채워줄 수 없기 때문에 비어있는 상태로 렌더링 되게 됩니다.

유저 입장에서는 웹 사이트가 불러와지고 있는 것인지, 해당 공간에는 어떤 내용이 보여질지 알 수 없기 때문에 해당 현상은 사용자 경험 측면에서 좋지 않습니다.

현재 진행중인 프로젝트에서 같은 문제가 발생했습니다. 아래 이미지는 문제 개선 전의 화면입니다.

before refactoring

loading이라는 문자를 출력해주긴 했지만 어떤 것이 loading 되고 있는지, 어떤 컨텐츠가 보여지게 될 것인지 전혀 예측할 수 없습니다.

검색을 해봤더니 이런 경우 스켈레톤 컴포넌트를 활용해 UX를 향상시킨다는 것을 알게되었습니다.

따라서 스켈레톤 컴포넌트에 대해 알아보고 프로젝트에 적용시키기로 결정했습니다.

스켈레톤 컴포넌트란? 🙄

스켈레톤 컴포넌트는 데이터를 가져오는 동안 유저에게 보여지기 위한 컴포넌트라고 생각하시면 됩니다.

보여지게 될 컴포넌트의 실루엣이 될 수도 있고 무언가가 진행되고 있다는 것을 보여주는 이미지가 될 수도 있습니다. 또한 기다리는 시간을 지루하지 않게 해줄 수 있는 컨텐츠가 될 수도 있습니다.

저는 페이지가 불러와지는 동안 유저가 페이지를 이탈하지 않게 도와주는 컴포넌트라고 이해했습니다.

스켈레톤 컴포넌트 제작해보기 🔨

여러가지 형태로 스켈레톤 컴포넌트가 제작될 수 있습니다.

저는 위에서 보여드린 컴포넌트와 같은 형태를 가진 Box 내부에 로딩중임을 보여주는 애니메이션과 글자를 보여주기로 했습니다.

결과는 아래와 같습니다.

after refactoring

여담으로 아래쪽에 매번 다른 문구를 넣어줌으로써 사용자들이 기다리는 시간도 즐겁게 보내길 바라는 제 마음을 반영해보았습니다 😁

결론 😊

굉장히 간단한 작업이 하나 추가 된 것 뿐이지만 사용자 입장에서 바라보면 아무것도 없다가 갑자기 무언가가 등장하는 화면보다 훨씬 친절한 화면이 완성되었습니다.

강의 목록 외에도 스켈레톤 컴포넌트가 들어가면 좋을 것 같은 부분에 대해 고민하고 코드에 적용시킬 예정입니다.

참고자료