에러창의 공포를 지우다: SWR 로딩 UX 디자인
빨간색 에러 팝업이 부르는 35% 이탈률의 충격
웹 서비스 개발자에게 에러(Error)는 피할 수 없는 숙명입니다. 아무리 견고하게 설계된 시스템이라 할지라도, 외부 네트워크의 불안정성, 의존하는 서드파티 서버의 일시적 지연, 예측 불가능한 데이터 불일치 등 다양한 요인으로 인해 에러는 언제든 발생할 수 있습니다. 이러한 기술적 문제들은 개발팀에게는 흔하고 예측 가능한 상황으로 인식될 수 있습니다. 그러나 화면에 붉고 노란 경고창, 혹은 알 수 없는 에러 코드가 담긴 팝업을 마주하는 일반 사용자에게 에러 메시지는 단순히 시스템의 일시적 문제를 넘어 ’서비스가 고장 났다’는 강렬한 공포감과 함께 불쾌감을 안겨줍니다. 이는 곧 서비스에 대한 불신으로 이어져 사용자의 이탈을 가속화하는 주된 원인이 됩니다.
루멘 인사이트 시스템은 사용자에게 실시간 트렌드 분석 데이터를 제공하며 데이터의 신뢰성과 사용자 경험을 최우선 가치로 삼고 있습니다. 따라서 에러가 사용자에게 미치는 부정적인 영향을 최소화하는 것은 저희 비즈니스의 핵심 과제입니다. 오늘은 프론트엔드 데이터 패칭을 위해 활용하는 SWR(Stale-While-Revalidate) 라이브러리의 백그라운드 재시도(Retry) 과정에서 노출되던 위협적인 에러창을 어떻게 사용자 친화적인 경험으로 부드럽게 감싸 안았는지, 그 과정과 통찰을 공유하고자 합니다. 이는 단순히 기술적인 문제를 해결하는 것을 넘어, 사용자의 심리를 이해하고 서비스에 대한 신뢰를 구축하는 중요한 여정이었습니다.
백그라운드 재시도와 사용자 심리의 괴리
루멘 인사이트 대시보드는 실시간 데이터를 기반으로 운영되는 서비스의 특성상, 데이터 패칭 실패는 필연적으로 발생합니다. 초기에는 SWR 라이브러리로 데이터 로딩에 실패했을 경우, 프론트엔드의 전역 에러 바운더리(Error Boundary)가 작동하여 사용자 화면 정중앙에 에러 팝업을 노출하는 방식으로 처리했습니다. 그러나 저희는 이 접근 방식이 사용자 경험에 치명적인 악영향을 미친다는 사실을 데이터로 확인했습니다.
저희는 사용자 행동 분석 툴과 내부 로그 시스템으로 에러 발생 시의 사용자 이탈률 및 세션 지속 시간을 정밀하게 추적했습니다. 특히, SWR의 백그라운드 재시도 과정에서 발생하는 일시적인 네트워크 오류나 외부 API 응답 지연이 에러 팝업으로 표출되었을 때의 사용자 반응에 주목했습니다. 분석 결과는 다음과 같았습니다.
| 에러 유형 | 발생 빈도 (1,000회당) | 팝업 노출 시 이탈률 | 팝업 노출 후 세션 시간 |
|---|---|---|---|
| SWR 일시 오류 (재시도 성공) | 5회 | 35% | 1분 15초 |
| SWR 치명 오류 (재시도 실패) | 1회 | 60% | 30초 |
| 외부 API 응답 지연 (타임아웃) | 2회 | 40% | 1분 00초 |
| 사용자 네트워크 단절 | 1회 | 80% | 15초 |
위 표에서 볼 수 있듯이, SWR의 백그라운드 재시도로 궁극적으로는 데이터 패칭에 성공하는 ‘일시적인’ 오류임에도 불구하고, 에러 팝업이 노출되는 순간 사용자의 평균 이탈률은 35%에 달했습니다. 이는 다른 유형의 에러와 비교해도 매우 높은 수치이며, 사용자가 에러 팝업을 마주한 후 서비스에 머무는 평균 세션 시간 또한 현저히 짧아지는 경향을 보였습니다. 즉, SWR이 내부적으로 오류를 복구하는 동안, 사용자에게는 불필요하고 위협적인 ‘시스템 고장’ 메시지가 전달되어 서비스에 대한 신뢰도를 급격히 떨어뜨리고 있었던 것입니다. 이 데이터는 단순히 기술적 복구를 넘어 사용자 심리를 고려한 UX적 접근이 시급함을 명확히 시사했습니다.
에러 상태를 ’긍정적 대기’로 전환하는 SWR 설계
저희는 데이터 분석으로 사용자에게 노출되는 에러 메시지가 서비스 이탈의 주요 원인임을 확인했습니다. 특히 SWR의 백그라운드 재시도 과정에서 발생하는 일시적 에러는 기술적으로는 복구 가능한 상태임에도 불구하고, 사용자에게는 시스템이 고장 난 것처럼 보이게 만드는 결정적인 요인이었습니다. 이러한 분석을 바탕으로 저희는 다음과 같은 전략과 가설을 수립했습니다.
전략: SWR의 재시도 과정 중 발생하는 에러 상태를 프론트엔드 에러 바운더리가 직접적으로 인지하고 에러 팝업을 띄우는 것을 차단하고, 대신 해당 상태를 ‘긍정적 대기’ 또는 ’지연된 로딩’으로 치환하여 사용자에게 전달합니다.
가설: 기술적으로는 에러 상태이지만, 이를 사용자 인터페이스(UI) 단에서 ’시스템이 더 열심히 작업 중이다’라는 메시지로 전환하면, 사용자의 불안감을 해소하고 서비스의 체감 안정성을 향상시킬 수 있습니다. 결과적으로 이는 사용자 이탈률 감소와 세션 시간 증가로 이어질 것입니다.
이 가설을 검증하기 위해 저희는 구체적인 실행 방안을 설계했습니다.
- SWR 상태 인터셉트: SWR 훅 내에서 데이터 패칭 실패 시 발생하는
error상태와 함께isValidating(재검증 또는 재시도 중) 상태를 함께 감지합니다. - 에러 팝업 제거:
error상태이면서 동시에isValidating상태일 경우, 기존의 전역 에러 바운더리가 작동하여 붉은색 경고 팝업을 노출하는 것을 막습니다. - ‘지연된 로딩’ 상태 전환: 대신, 해당 영역에 부드럽게 움직이는 로딩 스피너(Spinner)를 배치하고, 다음의 문구를 함께 노출합니다.
“AI가 수만 건의 데이터를 심층 분석하고 있습니다. 평소보다 시간이 조금 더 소요될 수 있습니다.” - 메시지 전략: 이 메시지는 단순히 ’로딩 중’이라고 알리는 것을 넘어, 다음과 같은 심리적 효과를 목표로 했습니다.
- 노력 강조: ’AI가 수만 건의 데이터를 심층 분석하고 있다’는 표현으로 시스템이 사용자에게 더 나은 결과를 제공하기 위해 적극적으로 노력하고 있음을 암시합니다.
- 합리적 지연: ’평소보다 시간이 조금 더 소요될 수 있다’는 문구로 지연 상황을 합리화하고, 사용자에게 인내심을 요청하는 동시에 서비스가 여전히 정상적으로 작동하고 있음을 전달합니다.
- 전문성 부여: ’AI’와 ’심층 분석’이라는 단어로 서비스의 전문성을 강조하고, 단순 오류가 아닌 복잡한 작업으로 인한 지연임을 인지시킵니다.
저희는 이 변경 사항을 특정 사용자 그룹에 우선 적용하는 A/B 테스트 방식 대신, 초기에는 내부 테스터 및 개발 환경에서 충분히 검증한 후 전체 서비스에 배포하는 점진적 배포(Gradual Rollout) 방식을 선택했습니다. 이는 에러 핸들링이라는 민감한 영역에서 발생할 수 있는 잠재적 위험을 최소화하고, 모든 사용자가 일관된 경험을 할 수 있도록 하기 위함이었습니다.
이탈률 10% 미만 감소와 체감 안정성 확보
전략 실행 후, 저희는 가설이 유효했음을 명확히 확인할 수 있었습니다. 이전에 SWR 재시도 과정에서 발생하던 에러 팝업을 제거하고 ‘지연된 로딩’ 메시지로 대체한 결과, 사용자 경험 지표에서 놀라운 개선이 관찰되었습니다.
가장 두드러진 변화는 사용자 불만 사항의 급격한 감소였습니다. 이전에는 일시적인 네트워크 문제나 외부 API 지연 시 ‘페이지가 망가졌다’, ’데이터가 로드되지 않는다’는 등의 사용자 문의가 빈번했지만 ‘지연된 로딩’ 메시지 도입 후 이러한 유형의 문의는 거의 사라졌습니다. 내부 모니터링 시스템으로 확인한 결과, 에러 팝업 노출 시 35%에 달했던 즉각적인 이탈률은 ‘지연된 로딩’ 상태에서 10% 미만으로 감소했습니다. 이는 사용자가 에러 상황을 기술적 실패가 아닌 ’대기 시간’으로 인식하기 시작했음을 의미합니다.
서비스 체감 안정성이 비약적으로 상승했습니다. 로직이나 데이터 응답 속도는 단 1초도 빨라지지 않았음에도 불구하고, 사용자들은 서비스가 훨씬 안정적이고 신뢰할 수 있다고 인식하기 시작했습니다. 이는 사용자 피드백이나 간접적인 설문 조사에서도 확인되었으며, 서비스에 대한 긍정적인 인식이 강화되는 결과로 이어졌습니다. 저희는 사용자 유지율(Retention Rate)과 평균 세션 지속 시간에서도 긍정적인 변화를 관찰했습니다.
물론, 이러한 접근 방식에 한계점과 예상치 못했던 변수도 존재했습니다.
‘지연된 로딩’ 메시지는 실제 오류가 해결되는 짧은 시간 동안 효과적입니다. 만약 백그라운드 재시도가 여러 번 실패하거나, 근본적인 서버 문제가 발생하여 데이터 로딩이 장시간 지연될 경우, 사용자는 여전히 서비스가 멈췄다고 인지하고 불만을 표출할 수 있습니다. 따라서 ‘지연된 로딩’ 상태의 최대 지속 시간을 정의하고, 일정 시간이 지나면 실제 오류 메시지로 전환하는 추가적인 로직이 필요했습니다.
’AI가 분석 중’이라는 메시지가 남용될 경우, 사용자에게 식상함이나 오히려 불신을 줄 수 있다는 점이었습니다. 따라서 이 메시지는 신중하게, 그리고 적절한 상황에서만 사용해야 함을 깨달았습니다. 저희는 이를 SWR의 특정 오류 유형(네트워크, 타임아웃 등)에만 제한적으로 적용하는 방향으로 개선했습니다.
개발팀 내에서도 에러를 ‘감추는’ 행위에 대한 초기 저항이 있었습니다. 그러나 데이터 분석 결과와 사용자 경험 개선 효과를 공유하며 기술적 완벽성만큼이나 사용자 인식이 중요함을 이해시키는 과정이 필요했습니다.
결과적으로 이 리팩토링은 단순히 기술적인 코드를 수정하는 것을 넘어, 사용자의 심리를 깊이 이해하고 불안감을 해소하는 UX 설계의 중요성을 일깨워주는 소중한 경험이었습니다.
에러를 감싸 안는 감성적 UX의 가치
Lumen Insights가 경험한 이번 에러 핸들링 리팩토링은 기술적 완벽성 추구와 사용자 경험 사이의 균형점을 찾는 중요한 과정이었습니다. SWR의 강력한 백그라운드 재시도 기능을 활용하면서도, 그 과정에서 발생하던 일시적인 에러 메시지를 ’지연된 로딩’으로 전환한 것은 사용자 심리를 고려한 UX 설계가 얼마나 강력한 효과를 가져올 수 있는지를 명확히 보여주었습니다.
저희는 이번 성공적인 경험을 바탕으로 향후 Lumen Insights의 다른 서비스 영역에도 이와 같은 ‘감성적 에러 핸들링’ 철학을 확장 적용할 계획입니다. 예를 들어, 데이터 처리 지연이 예상될 경우, 단순한 로딩 스피너 대신 “데이터 분석 파이프라인 최적화 중”, “실시간 트렌드 그래프 재구성 중”과 같은 구체적이고 긍정적인 메시지를 제공하여 사용자의 대기 시간을 더욱 가치 있게 만들고자 합니다. 또한, 외부 서비스 의존성이 높은 기능의 경우, 선제적으로 서비스 상태를 예측하여 사용자에게 잠재적 지연 가능성을 미리 알리고 대안을 제시하는 등, 더욱 정교한 예측 기반 UX 설계를 도입할 예정입니다.
이번 리팩토링으로 얻은 핵심 인사이트는 다음과 같습니다.
진정한 사용자 경험(UX) 설계는 단순히 코드를 수정하는 것을 넘어, 사용자의 심리를 깊이 이해하고 불안감을 해소하며 서비스에 대한 신뢰를 구축하는 과정입니다. 일시적인 기술적 실패를 사용자를 위한 ’노력’으로 재해석하는 것이 핵심입니다. 이는 기술적인 완성도를 넘어 사용자의 인지적, 감성적 경험을 관리함으로써 서비스의 본질적인 가치를 높이는 길입니다.
저희는 앞으로도 Lumen Insights가 단순한 데이터 분석 도구를 넘어, 사용자에게 최고의 신뢰와 만족감을 주는 서비스가 될 수 있도록 기술과 UX의 접점에서 끊임없이 혁신할 것입니다.
참고 자료:
