웹앱 사용자 경험을 개선하는 기술 한 스푼

간단 소개

웹앱 사용자 경험 개선을 위해 스켈레톤 UI, Vue Transition, Tanstack Query를 도입하고 그 효과를 분석합니다.

AI Summary

스피너 개선 및 스켈레톤 UI 도입
- 기존 스피너 UI의 단점을 극복하고 사용자 경험(UX) 향상을 위해 스켈레톤 UI를 도입.
- 스켈레톤 UI는 페이지 레이아웃과 구조를 미리 보여주어 사용자가 콘텐츠를 더 빠르게 인지하도록 돕고, FCP(First Contentful Paint) 시간을 단축시키는 효과를 가져옴.
- 모든 스피너를 스켈레톤으로 일괄 교체하는 대신, 네트워크 지연 시간을 고려하여 짧은 지연이 예상되는 페이지에는 스피너나 fade 효과를 적용하여 레이아웃 시프트를 최소화.
조건부 렌더링과 Vue Transition 컴포넌트 활용
- Vue의 Transition 컴포넌트를 사용하여 조건부 렌더링 시 자연스러운 UI 전환 효과를 구현.
- 외부 라이브러리 없이도 enter-exit 애니메이션을 쉽게 부여하여 사용자 경험을 개선.
- mode 속성을 통해 UI 전환 시점을 제어하여 로딩 UI와 완료 UI가 동시에 DOM에 존재하는 문제를 해결.
Tanstack Query 도입 효과
- **Tanstack Query(TQ)**를 도입하여 데이터 페칭 로직을 간소화하고 사용자 경험을 향상.
- 페이지 이동 시 데이터 로딩 지연을 줄이고, Pinia 스토어 관리 부담을 덜어 개발 효율성을 높임.
- TQ 도입 후 페칭 상태 관리 로직이 간소화되었으며, UX 개선과 서버 상태 관리 난이도 감소 효과를 얻음.