로딩 스피너는 이제 그만! UPTN Station, UX를 혁신하다!

로딩 스피너 대신 스켈레톤 UI를 도입하여 사용자 경험을 개선함

Vue.js의 컴포넌트를 활용, 조건부 렌더링 애니메이션을 구현함

Tanstack-Query 도입으로 데이터 페칭 및 서버 상태 관리 효율성을 높임

스켈레톤 UI, 왜 도입했을까?

기존 로딩 스피너는 사용자에게 로딩 중임을 알리는 역할만 수행했다. 스켈레톤 UI는 페이지 레이아웃을 미리 보여주어 사용자가 정보를 미리 예측하도록 돕는다. 따라서 FCP(First Contentful Paint)를 개선하여 사용자 경험을 향상시켰다.

Vue.js 컴포넌트 활용법

Vue.js의 컴포넌트를 사용하면 조건부 렌더링 시 애니메이션 효과를 쉽게 구현할 수 있다. React-Transition-Group과 유사한 기능을 제공하며, enter/leave 트랜지션을 통해 부드러운 UI 전환을 지원한다. 결과적으로 외부 라이브러리 없이 UI 전환을 구현할 수 있다.

Tanstack-Query 도입 효과

Tanstack-Query(TQ)를 도입하여 데이터 페칭 및 서버 상태 관리를 간소화했다. isLoading 상태 관리 로직을 줄이고, placeholderData 옵션을 통해 페이지 이동 시 데이터 갱신을 부드럽게 처리한다. 따라서 UX 개선과 개발 생산성 향상을 동시에 달성했다.