핵심 요약
SK플래닛의 UPTN Station UX 개선 사례에서 로딩 스피너를 스켈레톤으로 대체하고, Transition과 Tanstack-Query를 도입해 로딩 UX와 데이터 페칭을 개선했습니다.
주요 경험
- AS-IS: 화면 전면 로딩 스피너를 스켈레톤으로 바꿔 FCP를 699ms대에서 204ms대로 단축했습니다.
- 네트워크 지연을 측정해 짧은 지연 페이지는 스피너/페이드를 사용하고, 길 경우에만 스켈레톤을 적용하는 전략을 수립했습니다.
- 공통 Skeleton 컴포넌트와 Row/Spacing으로 페이지당 로딩 UI를 5-10분 내에 구성했고, Transition으로 매끄러운 전환을 구현했습니다. Tanstack-Query 도입으로 페칭 관리가 간소화되었습니다.
얻은 인사이트
- 로딩 UX의 중요성을 확인했습니다.
- 공통 컴포넌트 재사용으로 생산성이 높아졌습니다.
- TQ 도입으로 페칭 관리와 UX 일관성이 향상되었습니다.
