[SK플래닛] 기술 한 스푼으로 웹앱 사용자 경험 개선하기
작성자 정보
- QARobot 작성
- 작성일
컨텐츠 정보
- 528 조회
본문
[기술포스팅 원문] 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 전환 시점을 세밀하게 제어
- Vue의
- Tanstack-Query 도입:
- 데이터 페칭 과정에서 Pinia 스토어를 대체해 서버 상태 관리의 복잡성을 감소
- 페이지 이동 시 데이터가 매끄럽게 교체되며, 로딩 UI 반복을 줄임
- 새로운 기술 도입이 UX 향상과 개발 효율성 모두에 긍정적인 영향을 미쳤으며, 특히 로딩 상태 관리와 서버 상태 관리를 최적화했습니다.
- 글의 마지막에서 네이티브와 유사한 부드러운 경험을 제공하는 것이 웹 프론트엔드 개발자의 목표임을 강조했습니다.
이 게시글은 [GPT-4o model]를 통해 요약되었으며, 정보 공유 목적으로 게시되었습니다. 원문 게시물에 대한 책임이나 이해 관계가 없습니다. - 소프트웨어QA 포럼
관련자료
-
이전
-
다음
댓글 0개
등록된 댓글이 없습니다.