요약

• 문제
  • 모달이 열릴 때 warning 이미지가 늦게 로딩되어, 사용자에게 시각적 혼란과 불완전한 경험을 줍니다.
  • 뒤늦게 로딩되는 이미지 없이, 모달이 온전한 상태로 열리도록 개선해야 합니다.
• 접근
  • warning 이미지는 항상 동일하며 용량이 작기 때문에,
  • 프리로드 후 로드 완료 시점에 모달을 표시해도 UX 부담이 크지 않다고 판단했습니다.
• 해결
  • 프리로드하는 동안 배경 오버레이와 로딩 스피너를 먼저 보여주고,
  • 로드가 끝나면 캐시된 이미지를 활용해 완전한 모달을 즉시 렌더링 합니다.
• 결과
  • 모달이 항상 온전한 상태로 열립니다.
  • 이미지 누락이나 지연 없이 안정적이고 매끄러운 사용자 경험을 제공합니다.

문제 상황

네트워크 저성능 환경(3G)에서

• 모달이 열릴 때, 모달 내 warning 이미지가 뒤늦게 렌더링됨
• 사용자가 모달을 빠르게 닫는 경우, 이미지가 늦게 나타나는 순간과 모달이 닫히는 순간이 겹칩니다.
• 결과적으로 사용자는 "뭔가 놓친 게 있나?" 하는 찜찜한 경험을 겪을 수 있습니다.

→ 목표: 모달이 열렸을 때, 모달 내용물이 시간차를 두고 로딩되지 않도록 UX 개선하기

해결 방법: preload 적용

Warning 이미지를 프리로드한 후, 100% 로드가 완료되면 모달을 열도록 합니다.

프리로드 적용 이전에 리소스의 크기와 네트워크 특성을 먼저 확인했습니다.

리소스 분석

• 파일 크기: 약 3KB
• 네트워크 탭에서 확인된 실제 전송 용량: 약 1.5KB