우아한 디버깅 툴: QA 이슈 해결에 필요한 데이터를 쉽게 주고, 받자 #우아콘2025 #우아한형제들

우아한테크·우아콘 2025 2025·7개월 전·

#qa-automation#debugging-tools#chrome-devtools-protocol#session-replay#web-sockets#frontend-observability

AI 요약

모바일 웹 QA에서 재현·녹화·proxy 연결·티켓 입력·추가 정보 요청으로 반복되던 작업을, 과거 이슈 시점의 개발자 도구를 원격 조회하는 기록방과 Jira 자동화로 단방향 흐름으로 바꾼 사례다. Web SDK가 화면 상태를 수집해 DevTools로 재구성하는 구조와 실측 효과를 짚는다.

핵심 포인트

배민 앱 웹 화면에서 버튼을 누르면 URL·앱 버전·device·회원 정보와 당시 DOM·console·network·session replay를 담은 기록방이 생기고 Slack으로 링크가 전달돼, 다른 사용자 기기의 과거 이슈 시점 개발자 도구를 직접 여는 경험 제공
기록방에서 담당자·component·epic을 고르면 Jira ticket을 자동 생성하고, API query·body·status·response를 바꾸는 network rewrite로 오류 처리나 심야 예약 배달처럼 재현하기 어려운 조건을 즉시 강제
기존엔 동일 device·앱 버전 준비, inspector·proxy 연결, 재현 후 영상·network를 PC로 옮겨 첨부해야 했고 미리 다 모으면 낭비·선별하면 회원 번호 같은 정보 누락, 댓글 요청·대기마다 context switching 반복
SDK가 script 한 줄로 MutationObserver·console/fetch override·rrweb으로 수집해 CDP event로 mapping, WebSocket·DB·S3를 거쳐 DevTools Frontend가 record id로 재구성하며 이슈 등록 시간 약 50~60% 감소, 기록방 약 4,000개·ticket 약 400개 생성으로 검증

왜 읽나모바일 웹 QA의 재현·정보 왕복 낭비에 시달리는 팀에게, 자동 수집 SDK와 원격 DevTools 재구성으로 단방향 프로세스를 만든 아키텍처와 도입 효과를 담은 레퍼런스.

챕터별 상세

011:52 – 5:47

과거 이슈와 연결된 원격 개발자 도구

배민 앱의 웹 화면에서 버튼을 누르면 URL·앱 버전·device·회원 정보와 당시 DOM, console, network, 화면 상태를 기록한 방이 생기고 Slack으로 링크가 전달된다. 단순 screenshot이 아니라 전체 화면을 재구성하고 이전 페이지 기록과 session replay까지 거슬러 볼 수 있어, 다른 사용자의 기기에서 과거 이슈 시점의 개발자 도구를 직접 여는 경험을 제공한다.

기록방에서 project 담당자·component·epic을 고르면 사용자 정보와 기록방 링크가 채워진 Jira ticket을 자동 생성해, QA 담당자는 발견 내용과 기대 결과만 보충하면 된다. 또 API query·body·status code·response를 원하는 값으로 바꾸는 network rewrite로 오류 처리나 심야 예약 배달처럼 서버·admin 조작만으로 재현하기 어려운 조건을 즉시 강제할 수 있다.

모바일 웹 이슈를 조사하려면 동일 device·앱 버전을 준비하고 Chrome·Safari inspector나 proxy를 연결한 뒤, 문제를 다시 재현해 영상·network·화면 정보를 PC로 옮겨 ticket에 첨부해야 했다. 모든 데이터를 미리 수집하면 낭비이고 선별하면 회원 번호 같은 결정적 정보가 빠질 수 있으며, 개발자와 QA가 댓글로 정보를 요청하고 기다릴 때마다 context switching과 재현 비용이 반복됐다.

SDK가 테스트 중 데이터를 계속 수집하므로 이슈 발견 뒤 처음으로 되돌아가 재현할 필요 없이 기록방을 즉시 공유하고, 개발자는 필요한 정보를 그 안에서 스스로 조회할 수 있게 됐다. 실제 사용자들은 이슈 등록 시간이 약 50~60% 줄고 첨부 오류도 감소했다고 답했으며, 발표 준비 시점에 주문 서비스실에서 기록방 약 4,000개와 ticket 약 400개가 생성돼 실용성을 검증했다.

HTML에 script 한 줄로 넣는 SDK가 MutationObserver, console·fetch override, error listener와 rrweb으로 DOM·network·log·session replay를 수집하고 Chrome DevTools Protocol event로 mapping한다. 현재 페이지 데이터는 기록방 생성 전까지 browser memory에 두었다가 WebSocket으로 DB에 저장하고, 이전 페이지 데이터는 server memory를 거쳐 S3에 보존하며, DevTools Frontend가 record id로 서버와 연결해 domain을 활성화하고 목록·상세 데이터를 요청해 당시 개발자 도구를 재구성한다.