들어가며 - 계기

1. 회사에서는 노션에 QA리스트를 작성하여 공유한다. 기획자, 디자이너가 구현된 feature에 대해 QA를 할 때, 섹션별, 기능별로 분류, 그 안에 영상 캡쳐 + QA 설명을 짧게 작성해둔다. 큰 문제는 없었는데, 종종 이슈에 대해 불필요한 커뮤니케이션이 있을 때가 있었다.

   불필요한 커뮤니케이션 줄이기 + QA 작업자들이 좀 더 편하게 영상 + 설명을 전달할 수 있는 방법이 뭐가 있을까 생각했다.

2. 우아한형제들의 아티클 중 디버깅 툴을 구현한 글이 있었는데, 구현된 내용과는 다르지만 디버깅 툴을 저렇게도 만들 수 있구나 생각했다.
3. 또 다른 계기는, 잘 읽지 않았던 오픈카톡방에서, 오랜만에 읽는데 누군가 qa-recorder를 만들었다고 올렸는데 그게 또 계기가 됐다.

그래서 탭을 녹화하고, 문제 지점에 조준선으로 박스를 치고, 단일 HTML 파일 하나로 전달하는 크롬 익스텐션 Spotter를 구현했다.

• 2,3번 계기보다 훨~씬 라이트하게, 필요한 부분만 구현했다.

단순한 사용법

복잡하지 않다. 세 동작이면 끝난다.

1. 녹화 시작 — Spotter 아이콘을 누르면 현재 탭 녹화가 시작된다.
   1. 한 클립당 최대 1분이다. 짧고 명확한 QA 케이스 단위로 끊으라는 의도된 제한 + 너무 길어지면 리포트의 용량이 너무 커짐을 방지하기 위함이었다.
   
2. 문제 지점 표시 (Spot) — ⌘/Ctrl + Shift + S 를 누르면 커서가 조준선으로 바뀐다. 이상한 부분을 드래그로 박스 치고, 메모를 적고, ⌘/Ctrl + Enter. 박스는 영상에 그대로 박히고, 그 순간의 스크린샷도 함께 잡힌다.
3. 정지 — 멈추면 단일 .html 파일 리포트 하나가 떨어진다. 받는 사람은 더블클릭 한 번으로 연다. zip도, 별도 뷰어도 필요 없다.

리포트

박스 치고 한 줄 적었을 뿐인데, 리포트에는 이렇게 다 들어간다.

• 탭 녹화 영상 - 표시한 박스가 영상에 그대로 새겨진다.
• Spot 스크린샷 + 메모 - “여기가 이래서 문제다”가 시점·이미지·텍스트로 함께 남는다.
• 인터랙션 타임라인 - 의미 있는 클릭, 페이지 이동(일반 + SPA)이 녹화 시간 기준으로 자동 기록된다.
• 자동 에러 캡처 - console.error, 잡히지 않은 예외, unhandled promise rejection, fetch/XHR 실패(4xx·5xx·네트워크 에러)가 타임라인에 빨강 마커로 자동 표시된다. 중복 에러는 × N 으로 합쳐진다. 이게 핵심이라고 생각한다. 비개발 직군이 콘솔을 열 줄 몰라도, 에러는 알아서 잡힌다.
• 환경 정보 스냅샷 - 브라우저, OS, 뷰포트, DPR, 언어, 타임존, User-Agent를 녹화 시작 시 한 번 수집한다. “제 환경에선 잘 되는데요?” 같은 핑퐁을 미리 끊어준다.
• 단일 파일 HTML 리포트 - 영상과 타임라인이 첨부 하나에 담긴다. 외부 의존성 없이 자체 완결이고, 오프라인에서도 그대로 열린다.
• 한국어 / English - 전체 UI를 번역해 두었다.

개인정보는?

Spotter는 어떤 데이터도 수집하거나, 외부로 전송하거나, 서버에 저장하지 않는다. 모든 처리가 사용자 기기 안에서만 일어난다. 분석 도구도, 텔레메트리도, 외부 스크립트도 없다. 만든 나조차 사용자가 무엇을 녹화하는지 알 수 없다. 사내 스테이징이든 운영 환경이든 외부 사이트든, 마음 편히 써도 된다.

한계 (아직 v1)

• Top frame만 추적한다. iframe 내부는 잡지 못한다.
• 한 번에 한 탭만 본다. 녹화 중 탭을 전환하면 그 부분은 캡처되지 않는다.
• chrome:// 페이지나 Chrome 웹스토어 위에서는 동작하지 않는다. (브라우저 정책상 어쩔 수 없다..)

당연하게도, 아직 v1이다. 직접 써보고 “이런 게 있으면 좋겠다”, “이게 불편하다” 싶은 점이 있으면 꼭 알려줬으면 좋겠다. 들어온 피드백을 바탕으로 계속 디벨롭할 생각이다. 결국 이 도구는 “QA를 주고받는 사람들”을 위한 거니까..!

마치며

만들고 나서 직접 써보니, 박스 하나 치고 메모 한 줄 적는 것만으로 개발자가 필요로 하는 정보가 다 모인다는 게 생각보다 만족스러웠다.

또 처음엔 단순하게 qa-record 처럼 직관적 이름으로 하고 디자인적인 컨셉 없이하다가, 어느정도 구체화되고 나서는 버그를 잡는다 → 총 → 타겟 → spot → spotter를 생각하고 그에 어울리는 디자인을 나름 고려하고 색상 설정하여 뽑아내는 것에도 재미를 느꼈다.

크롬 웹스토어에 등록하는 부분도 생각보다 쉬웠고, 특히 돈내고 쓰는 프로젝트가 아니다보니 훨씬 쉽게 등록할 수 있었던 것 같다.

당연하게도 내가 만든 게 정답은 아니다. 찾아보니 비슷하고, 더 좋은 확장 프로그램도 있더라(;;)

다만 “버그를 더 쉽게, 더 명확하게 전달한다”는 방향만큼은 계속 밀어보려 한다.

문의나 피드백, 기능 제안은 언제든 환영합니다. Spotter 같이 키워주세요~

설치: Spotter - 크롬 웹스토어

문의: tmdgns4321@gmail.com