기술 한 스푼으로 웹앱 사용자 경험 개선하기

이 게시물은 SK플래닛의 UPTN Station 블록체인 플랫폼에서 웹앱 사용자 경험을 개선하기 위한 프론트엔드 기술 적용 사례를 소개합니다.

주요 개선 내용

• 로딩 스피너 대신 스켈레톤 UI 도입으로 초기 콘텐츠 노출 시간(FCP) 단축
• 스켈레톤 UI 단점 보완을 위해 네트워크 지연에 따라 페이드 효과 등 다양한 로딩 UI 선택 적용
• Vue의 컴포넌트를 활용해 조건부 렌더링 UI 전환을 부드럽게 처리
• Tanstack-Query 도입으로 데이터 페칭 및 서버 상태 관리를 간소화하여 UX 및 개발 생산성 향상

결과 및 시사점

새로운 UI 기술과 상태 관리 도구 도입을 통해 네이티브 앱에 견줄만한 부드러운 웹앱 경험을 목표로 하며, 개발 기간 내 효율적인 구현 방법도 함께 공유합니다.