웹앱 사용자 경험을 개선하는 기술 한 스푼
프론트엔드
웹앱 사용자 경험을 개선하는 기술 한 스푼
두줄요약
웹앱의 로딩 경험을 개선하기 위해 스피너, 스켈레톤, 전환 애니메이션, Tanstack-Query를 도입한 사례를 소개했습니다. 화면 특성과 지연 시간에 따라 로딩 방식을 나누고 공통 컴포넌트로 구현 비용을 줄인 점이 핵심입니다.
핵심 내용
- 웹앱 UX 개선을 위해 로딩 스피너 대신 스켈레톤, 페이드 전환, Tanstack-Query를 도입한 경험 공유
- 스켈레톤은 콘텐츠 구조 예측과 FCP 체감 개선에 유리했지만, 모든 화면에 일괄 적용하면 레이아웃 시프트와 과한 전환이 생길 수 있음
- 스켈레톤 공통 컴포넌트와 레이아웃 컴포넌트로 구현 비용을 줄이고,
Transition과mode="out-in"으로 자연스러운 상태 전환을 적용 - Tanstack-Query와
keepPreviousData로 서버 상태 관리와 반복 로딩 문제를 완화
적용해볼 점
- 로딩 방식은 지연 시간과 화면 구조에 따라 스피너, 스켈레톤, 페이드 효과를 구분해 선택
- 반복 구현이 많은 스켈레톤은 공통 컴포넌트화로 생산성 확보
- 서버 상태 관리는 전용 라이브러리로 단순화하고 이전 데이터 유지 전략을 함께 검토