UPTN Station UX 개선 사례

이 게시물은 SK플래닛의 UPTN Station 웹앱에서 프론트엔드 개발자가 사용자 경험을 향상시키기 위해 도입한 여러 기술적 개선 사례를 다룹니다.

로딩 UI 개선

• 기존의 로딩 스피너 대신 스켈레톤 UI를 적용하여 사용자가 콘텐츠 레이아웃을 미리 인지하도록 함
• 스켈레톤 UI 적용 시 FCP(First Contentful Paint) 시간이 크게 단축됨을 수치로 증명
• 네트워크 지연에 따라 스피너, 페이드 효과 등 다양한 로딩 UI를 적절히 선택해 레이아웃 시프트 문제를 완화

개발 생산성 향상

• 공통 스켈레톤 컴포넌트와 레이아웃 제어용 컴포넌트를 만들어 페이지별 구현 시간을 최소화
• Vue의 컴포넌트로 조건부 렌더링 시 자연스러운 페이드 애니메이션을 적용
• Tanstack-Query 도입으로 데이터 페칭과 서버 상태 관리의 복잡도를 낮추고 UX 개선에 기여

고려사항 및 향후 과제

• 스켈레톤 UI의 부작용인 레이아웃 시프트와 불필요한 마크업 작성 문제를 해결
• Tanstack-Query 사용 시 에러 핸들링 로직 복잡성에 대한 고민 지속