로딩 상태 명확히 표시
약 75초
비동기 데이터 로딩 중 스켈레톤 UI로 사용자 대기 경험을 개선한 경험
학부 캡스톤 프로젝트에서 React로 소규모 SPA를 만들었습니다. 처음에는 데이터 로딩 중에 빈 화면이 잠깐 보이는 방식으로 구현했는데, 사용자 테스트에서 팀원들이 앱이 멈춘 줄 알았다고 피드백을 줬습니다. 그래서 로딩 스피너를 추가했더니 인지는 됐지만 레이아웃이 로딩 후 갑자기 바뀌는 느낌이 여전히 어색하다는 피드백이 나왔습니다. 마지막에 간단한 스켈레톤 카드로 바꿨더니 훨씬 자연스럽다는 반응이 왔습니다. 로딩 상태를 어떻게 표현하느냐가 UX에 생각보다 큰 영향을 준다는 걸 그때 처음 실감했습니다.
이 결의 특징
로딩 중 빈 화면→스피너→스켈레톤 카드로 단계적으로 바꾸며 매번 사용자 테스트 피드백을 반영한 과정이 또렷합니다. '앱이 멈춘 줄 알았다'는 반응에서 출발해 자연스럽다는 반응으로 옮겨간 대목이, 로딩 표현이 UX에 주는 영향을 실험으로 체감한 결로 읽히게 합니다.
이 결이 통하는 자리
왜 스피너로는 부족했고 스켈레톤이 나았는지가 피드백과 함께 살아 있을 때 통합합니다. 신입다운 작은 규모지만 사용자 반응으로 개선을 검증한 흐름이 또렷한 자리에서 면접관의 꼬리질문이 줄어드는 결이 보입니다.