선택이 아닌 필수 로딩 화면
데이터 용량이 크거나 서버 응답이 느릴 때는 데이터를 불러오는 동안 사용자에게 로딩 화면을 보여주는 것이 좋습니다. 로딩 화면은 사용자가 대기하는 동안 불편함을 최소화하고, 어떤 작업이 진행 중인지 사용자에게 시각적으로 알려줍니다.
Velog 홈페이지에서의 예시
Velog 홈페이지를 비롯한 다른 웹 서비스에서도 Skeleton UI나 다른 로딩 화면을 적용하여 사용자 경험을 향상시키고 있습니다.
Loading 페이지 대신 Skeleton UI 사용
프로젝트에서는 처음에 로딩 화면을 프로젝트 로고로 설정했으나, 사용자 경험을 더 향상시키기 위해 Skeleton UI로 변경하게 되었습니다.
로고로 설정해서 경험한 문제점
저는 로고로 로딩 화면을 설정하면 문제점을 느꼈습니다. 먼저, <Outlet /> 와 함께 사용중인 컴포넌트는 모든 페이지에 항상 렌더링 되어 있습니다. 예를 들어 아래 이미지에서는 데이터 로딩과 상관없이 AD 요소가 가장 상단에 있는 것을 볼 수 있습니다. 그리고 데이터 호출이 끝났을 때 원래는 가장 하단에 있는 요소라서, 요소 배치가 위아래로 움직이는 것은 사용자에게 불편함을 줄 수 있다고 생각했습니다. 그래서 개인적으로는 요소의 위치가 움직이는 것보다는 Skeleton UI로 변경하는 것이 더 나은 사용자 경험을 제공할 수 있다고 생각했습니다.
근데 Skeleton UI는 뭐고 어떻게 만들까요?
처음에 Skeleton UI라고 들었을 때 또 라이브러리 설치하는 줄 알았는데 그냥 컴포넌트를 만들면 됩니다!
예를 들어 velog 홈페이지처럼 해당 화면에 렌더링이 되었을 때, 로딩 화면에서 어떻게 보여주고 싶은지 똑같은 width/height로 구현하면 됩니다. 간단하쥬? 여기서 animation를 추가하거나 다른 스타일링도 추가할 수 있습니다.
결과 : Skeleton UI 적용하고 요소 배치 문제 해결
SkeletonUI 적용하므으로 요소가 움직이는 문제를 해결할 수 있었습니다.
