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

간단 소개

UPTN Station의 UX 개선 사례를 통해 로딩 스피너 개선, 스켈레톤 UI, Transition 컴포넌트, Tanstack-Query 도입 효과를 분석합니다.

AI Summary

UPTN Station UX 개선: 로딩 스피너 탈피
- 로딩 스피너의 단점: 사용자 탐색 방해, 고전적인 웹 경험 연상.
- 스켈레톤 UI 도입: 페이지 구조 미리 보여주어 사용자 예측 가능성 향상, FCP 감소 효과.
- 스켈레톤 적용 시 레이아웃 시프트 문제 발생 가능성, 짧은 지연 페이지에선 페이드 효과 적용.
효율적인 스켈레톤 UI 구현 및 Transition 컴포넌트 활용
- 스켈레톤 컴포넌트 재사용 및 레이아웃 컴포넌트 활용으로 개발 시간 단축.
- Vue의 <Transition> 컴포넌트를 이용해 조건부 렌더링 시 자연스러운 전환 효과 구현.
- mode 속성으로 UI 전환 시점 제어 가능.
Tanstack-Query 도입 효과
- TQ 도입 전: 페이지 이동 시 데이터 로딩 반복, Pinia 스토어 관리 부담.
- TQ 도입 후: 페칭 상태 관리 용이, 사용자 경험 향상, 서버 상태 관리 부담 감소.
- 에러 핸들링 개선 과제 존재.