이노원

대시보드 시계열 데이터에 대해서 데이터가 누락되거나 잘못 제공되는 이슈에 대해서 대시보드 사용자가 컴퓨터 리소스 상태를 정확히 확인할 수 있도록 개선했습니다. 지표 이름과 라벨을 실제 응답에 맞추고 비율 계산을 바로잡았으며, 서로 다른 데이터가 합쳐지는 문제의 원인을 찾아서 데이터 식별 기준을 업데이트했습니다.

마지막 요청 시각 이후의 값만 가져오도록 조회 방식을 바꿔 10분 동안의 전송량을 96.5 MB에서 41 KB로 줄였습니다. 배포된 대시보드의 표시값과 실제 응답을 대조해 정확성을 확인했습니다.

사용자가 5~10분 걸리는 문서 생성의 진행 단계와 경과 시간을 지속적으로 확인할 수 있도록 프론트엔드를 설계하고, 페이지 이동이나 취소 전에 사용자가 한번 더 확인하도록 안내 UI를 구성했습니다.

SSE 이벤트 뒤 서버 상태를 다시 확인하도록 해 이벤트 순서가 바뀌거나 연결 오류가 발생해도 화면이 실제 처리 상태를 기준으로 갱신되게 했습니다. 상태 API 요청은 작업당 10회 이하로 유지해 3초마다 조회할 때 예상되는 100~200회보다 요청을 줄였습니다. 배포 후 문서의 생성 및 취소 상태가 화면의 진행 상태와 일치하는지 확인했습니다.

API 응답을 처리하는 동안 3~4초 멈추던 화면을 다시 조작할 수 있도록 개선했습니다. API 호출과 변환을 SharedWorker로 분리한 공통 방식을 실행 이력과 상세 화면에 적용하고, 실제 배포된 서비스 페이지에서 해당 이슈의 해결 여부를 확인했습니다.

새로고침 뒤의 과거 값과 새로 들어오는 값을 같은 시간 기준으로 합쳐 차트가 끊기거나 중복되지 않도록 했습니다. 나뉘어 도착한 JSON도 다음 청크와 합쳐 처리해 실시간 표시가 이어지도록 했습니다.

로그인 사용자의 주요 절차를 70개 이상의 E2E 시나리오로 반복 검증할 수 있게 해 배포 전에 주요 동작과 인증 문제를 확인할 수 있도록 했습니다. 이 과정에서 브라우저에 남은 인증 정보와 만료된 서버 세션이 일치하지 않는 문제를 재현했습니다.

로그인이 필요한 페이지에 접속하기 전과 화면 사용 중에 발생한 인증 실패를 같은 방식으로 복구하도록 해 사용자에게 일관된 동작을 제공했습니다. 원인 분석부터 공통 복구 방식의 QA 배포까지 맡았습니다.

사용자가 특정 기능을 요청할 때 서버 응답을 기다리지 않고 요청 결과를 웹 페이지에 바로 보여주도록 했습니다. 화면에 보이는 여러 정보가 서버와 어긋나는 문제에 대응하고, 중복 요청을 제거하여 요청 수를 절감했습니다.

페이지가 사용자에게 보이기까지 걸리는 시간을 단축했습니다. 다른 프론트엔드 프로젝트에서도 같은 방법으로 개선할 수 있도록 적용 순서를 문서로 남겼습니다.

간헐적인 WebSocket 연결 중단 원인을 Chrome DevTools로 찾아 수정해 실시간 정보 갱신이 멈추는 문제를 해결했습니다.