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

핵심 내용

• 웹앱 UX 개선을 위해 로딩 스피너 대신 스켈레톤, 페이드 전환, Tanstack-Query를 도입한 경험 공유
• 스켈레톤은 콘텐츠 구조 예측과 FCP 체감 개선에 유리했지만, 모든 화면에 일괄 적용하면 레이아웃 시프트와 과한 전환이 생길 수 있음
• 스켈레톤 공통 컴포넌트와 레이아웃 컴포넌트로 구현 비용을 줄이고, Transition과 mode="out-in"으로 자연스러운 상태 전환을 적용
• Tanstack-Query와 keepPreviousData로 서버 상태 관리와 반복 로딩 문제를 완화

적용해볼 점

• 로딩 방식은 지연 시간과 화면 구조에 따라 스피너, 스켈레톤, 페이드 효과를 구분해 선택
• 반복 구현이 많은 스켈레톤은 공통 컴포넌트화로 생산성 확보
• 서버 상태 관리는 전용 라이브러리로 단순화하고 이전 데이터 유지 전략을 함께 검토