UPTN Station, 로딩 스피너 대신 스켈레톤 UI 적용해 FCP 204ms로 단축

로딩 경험 개선: 스피너에서 스켈레톤으로

SK플래닛 블록체인 플랫폼 UPTN Station은 기존에 사용하던 로딩 스피너가 사용자의 탐색 경험을 방해한다고 판단, 스켈레톤 UI를 도입했다. 스켈레톤은 페이지 레이아웃과 구조를 미리 보여줌으로써 사용자가 콘텐츠를 더 빠르게 접한다는 인식을 제공한다.

• FCP 성능 향상: PerformanceObserver로 측정한 결과, 스피너 적용 시 699.6ms였던 First Contentful Paint(FCP)가 스켈레톤 적용 시 204.7ms로 대폭 단축되었다.
• 전략적 분기 적용: 모든 페이지에 스켈레톤을 무조건 적용하지 않고 네트워크 지연 시간을 분석했다. 짧은 지연이 예상되는 페이지는 레이아웃 시프트(Layout Shift) 방지를 위해 스피너를 유지하거나 페이드 인 효과를 사용하며, 긴 지연이 예상되는 페이지에만 스켈레톤을 적용한다.

구현 효율화 및 상태 관리 최적화

개발 생산성과 유지보수성을 높이기 위해 컴포넌트 구조와 데이터 관리 방식을 개선했다.

• 컴포넌트 재사용: 직접 마크업을 작성하던 방식에서 벗어나 <Skeleton>, <Row>, <Column> 등 공통 컴포넌트를 조합해 페이지당 스켈레톤 구현 시간을 5~10분으로 단축했다.
• Vue Transition 활용: Vue의 <Transition> 컴포넌트와 mode="out-in" 속성을 활용해 로딩 UI와 완료 UI 간의 자연스러운 전환을 구현하고, DOM 유지 타이밍을 제어했다.
• Tanstack-Query 도입: 서버 상태 관리를 위해 **Tanstack-Query(TQ)**를 도입했다. useQuery 훅과 placeholderData: keepPreviousData 옵션을 사용해 페이지 이동 시 데이터 갱신 과정에서의 깜빡임을 제거하고, 약 3만 명 규모의 서비스에서 페칭 상태 관리 로직을 단순화했다.