이노원

대시보드에서 시간에 따른 측정값이 누락되거나 잘못 표시되는 문제를 해결해 사용자가 서버 상태를 정확히 확인할 수 있도록 했습니다. 지표 이름과 라벨을 실제 응답에 맞추고 비율 계산을 바로잡았으며, 측정값이 잘못 합쳐지는 원인을 찾아 식별 기준을 수정했습니다.

마지막 요청 시각 이후의 값만 가져오도록 조회 방식을 바꿔 10분 동안의 전송량을 96.5 MB에서 41 KB로 줄였습니다. 브라우저에서 Prometheus를 직접 호출하지 않도록 Next.js API를 설계하고 구현했습니다. 배포된 대시보드의 표시값과 실제 응답을 대조해 정확성을 확인했습니다.

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

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

API 응답 크기가 최대 330 MB인 상황에서 최대 프레임 갱신 시간 간격을 1,316.6 ms에서 16.8 ms로 줄였습니다. API 요청, JSON 분석과 표시값 변환을 Web Worker로 분리하는 모듈을 설계하고 여러 화면에 적용해 응답 처리 중에도 화면을 조작할 수 있도록 개선했습니다.

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

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

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

단독 실행하던 프론트엔드를 다른 앱에서도 사용할 수 있도록 Vite 라이브러리 빌드를 구성했습니다. 사용하는 앱에서도 UI와 동작을 일관되게 제공하도록 타입 선언, CSS와 Provider 연결을 정리했습니다.

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

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

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