우아한 디버깅 툴 2부: 좀 더 편하게 일하기 위한 개선들
프론트엔드
우아한 디버깅 툴 2부: 좀 더 편하게 일하기 위한 개선들
두줄요약
QA 재현과 기록, 티켓 전달을 자동화해 업무 흐름을 단방향으로 개선했습니다. rrweb 세션 리플레이와 어드민, Network Rewrite로 이슈 처리 효율을 높였습니다.
문제 상황
- QA 과정에서 이슈 재현과 영상 녹화, 데이터 전달이 반복되어 많은 리소스 소모
- 모바일 테스트 환경과 PC 티켓 작성 환경이 달라 링크와 재현 정보를 옮기는 흐름이 번거로움
- 기존 Proxy 도구는 설정 부담이 크고 API 실패나 응답 변경 테스트에 사용성이 떨어짐
해결 방법
- rrweb 기반 세션 리플레이로 DOM 스냅샷과 인터랙션 이벤트를 기록해 재현 영상 자동화
- 슬랙 DM, 구글 시트, 티켓 생성 기능을 연결해 이슈 정보와 링크를 자동 전달
- 어드민으로 사용자 정보와 티켓 템플릿을 관리하고, XMLHttpRequest와 fetch 오버라이드로 네트워크 응답을 조작하는 Network Rewrite 제공
성능/운영 포인트
- 변경 이벤트 중심 기록으로 예상보다 용량 부담이 낮음
- 웹소켓과 rrweb 최적화로 가볍게 운영 가능한 수준의 데이터량 확보
- 프로젝트별 템플릿과 사용자 식별 정보 관리로 티켓 생성과 DM 전달을 일원화