로딩 스피너는 이제 그만! UPTN Station UX 개선 사례

1년 전에는 화면을 가리는 스피너 때문에 사용자가 다음 화면의 구조를 미리 알기 어렵고, 페이지를 이동할 때마다 반복적인 대기와 로딩을 겪는 문제가 있었다.

페이지 구조를 미리 보여주는 스켈레톤 UI, 짧은 지연에 적합한 페이드 효과, Vue의 Transition 컴포넌트, 서버 데이터를 재사용하는 TanStack Query를 상황에 맞게 적용해 화면 전환과 데이터 로딩을 자연스럽게 개선했다.

스켈레톤을 무조건 적용하면 화면이 흔들리거나 오히려 갑작스러워질 수 있으므로 지연 시간과 화면 특성에 따라 방식을 선택해야 하며, 공통 컴포넌트와 TanStack Query를 활용하면 개발 시간과 상태 관리 부담도 줄일 수 있다.