[기술포스팅 원문] https://devocean.sk.com/blog/techBoardDetail.do?ID=166984&boardType=techBlog

[기술포스팅 요약]

• SK플래닛의 블록체인 플랫폼 UPTN Station의 프론트엔드 개발을 담당하는 김OO님의 1년간의 UX 개선 여정을 소개합니다.
• 사용자 경험을 개선하기 위한 시도로 로딩 스피너, 스켈레톤 UI, 애니메이션 효과, Tanstack-Query 도입 사례를 다뤘습니다.
• 로딩 스피너 개선:
  • 초기 화면에서는 로딩 스피너를 사용했으나, 유저 경험을 가로막는다는 판단으로 스켈레톤 UI를 도입
  • 스켈레톤 UI는 페이지 레이아웃을 보여줘 유저가 더 빠르게 정보를 접하는 느낌을 제공합니다.
• 스켈레톤 UI 도입:
  • 레이아웃 시프트 문제 및 빠른 로딩 환경에서 스켈레톤의 비효율성을 발견
  • 페이지 특성에 따라 스피너와 페이드 효과를 병행하여 사용
  • 스켈레톤 구현 시간을 단축하기 위해 공통 컴포넌트를 개발
• 애니메이션 효과:
  • Vue의 <Transition> 컴포넌트를 활용해 조건부 렌더링 전환 효과를 부드럽게 적용
  • mode 속성을 활용해 UI 전환 시점을 세밀하게 제어
• Tanstack-Query 도입:
  • 데이터 페칭 과정에서 Pinia 스토어를 대체해 서버 상태 관리의 복잡성을 감소
  • 페이지 이동 시 데이터가 매끄럽게 교체되며, 로딩 UI 반복을 줄임
• 새로운 기술 도입이 UX 향상과 개발 효율성 모두에 긍정적인 영향을 미쳤으며, 특히 로딩 상태 관리와 서버 상태 관리를 최적화했습니다.
• 글의 마지막에서 네이티브와 유사한 부드러운 경험을 제공하는 것이 웹 프론트엔드 개발자의 목표임을 강조했습니다.

이 게시글은 [GPT-4o model]를 통해 요약되었으며, 정보 공유 목적으로 게시되었습니다. 원문 게시물에 대한 책임이나 이해 관계가 없습니다. - 소프트웨어QA 포럼