백엔드 API의 응답이 느려 사용성에 악영향이 발생하는 상황에서 어떻게 대응하실 건가요?
분야: 프론트엔드
개인의 경험과 생각을 기반으로 대답해야 하는 질문입니다. 아래 답변은 참고용으로만 읽어주세요. 🙂
먼저, 가장 중요한 것은 지연이 실제로 발생하고 있다는 객관적인 수치를 확보한 뒤, 이를 기반으로 백엔드 개발자와 커뮤니케이션하는 것입니다. 예를 들어, DevTools의 Network 탭에서 API 응답 시간 데이터를 수집하거나, Sentry 또는 Datadog과 같은 모니터링 도구를 통해 성능 데이터를 정리하여 공유할 수 있습니다. 이렇게 수치 기반으로 소통하여 단순히 “느리다”는 피드백이 아니라 “특정 API가 평균 3초 이상 소요된다”는 식의 구체적인 요청을 전달하여 백엔드 API의 성능 개선이 필요하다는 점을 설득할 것입니다.
하지만 현실적으로 백엔드 API의 성능이 단기간에 개선되기 어려운 상황도 존재합니다. 이럴 경우, 프론트엔드 단에서 사용성을 유지할 수 있는 다양한 전략을 적용할 것입니다.
가장 기본적인 대응은 로딩 상태를 사용자에게 명확하게 전달하는 것입니다. 예를 들어, 로딩 스피너나 Skeleton UI를 사용하여 시스템이 응답 중임을 사용자에게 알려줌으로써 ‘멈춘 것 같다’는 인상을 방지하고 체감 대기 시간을 줄일 것입니다.
또한, prefetch 전략을 고려해볼 것입니다. 사용자가 특정 페이지나 기능을 요청하기 전에 필요한 데이터를 미리 받아놓아 응답 지연 시간을 최대한 줄이기 위해 노력할 것입니다. 예를 들어, 사용자가 마우스를 올렸을 때 해당 페이지 데이터를 백그라운드에서 가져오거나, 이전 페이지에서 다음 페이지에 필요한 데이터를 미리 요청해두는 방식으로 prefetch를 수행할 수 있습니다.
이와 함께, 이미 받아온 API 응답을 캐싱하여 재사용하는 전략도 고려할 수 있습니다. 예를 들어, React Query나 SWR과 같은 라이브러리를 사용하면 API 응답을 캐시하여 재사용할 수 있습니다. 이를 통해 동일한 요청을 수 초 내에 다시 수행할 경우에 서버에 재요청하지 않고 캐시된 데이터를 빠르게 제공할 수 있습니다.