실시간 녹화

BugShot의 실시간 녹화는 캡처 진입 화면의 녹화 버튼 하나로 시작합니다. 이 버튼이 지금 보고 있는 탭만 담을지, 화면 전체나 다른 창까지 담을지는 설정에서 미리 골라 두는데, 언제든 다시 바꿀 수 있으니 부담 갖지 않으셔도 됩니다.

녹화 모드 고르기

녹화 버튼과 모드 설정

디버그 탭의 녹화 버튼은 설정에서 고른 모드(탭 녹화 / 화면 녹화)대로 동작합니다. 모드는 설정 > 이슈 설정 > 녹화 설정 > 녹화 모드에서 고릅니다. 고른 모드는 녹화 버튼의 아이콘과 라벨에 바로 반영됩니다.

탭 녹화

탭 녹화로 두면 지금 보고 있는 탭의 화면이 녹화 버튼 한 번에 바로 녹화됩니다. 공유 선택 창 없이 빠르게 시작돼요.

다만 사이드패널을 연 페이지에서 다른 사이트로 이동한 뒤 탭 녹화를 누르면, 브라우저 권한 정책상 그 탭을 곧바로 녹화할 수 없어 자동으로 화면 공유 선택 창으로 넘어갑니다. 이때는 목록에서 지금 보고 있는 탭을 골라 주시면 돼요.

화면 녹화

화면 공유 선택

탭 바깥 — 다른 앱 창, 전체 화면, 새 창으로 뜨는 결제·로그인 화면 — 까지 보여줘야 한다면 화면 녹화로 둡니다. 녹화 버튼을 누르면 브라우저가 "무엇을 공유할까요?" 하고 묻는 선택 창을 띄우는데, 거기서 전체 화면 · 특정 창 · 탭 중 하나를 골라 공유를 누르면 녹화가 시작됩니다.

화면 녹화는 브라우저가 직접 권한을 확인하는 방식이라 선택 창을 한 번 거칩니다. 참고해 주세요.

녹화 중

녹화 중 타이머

녹화 중에는 경과 시간과 최대 시간이 타이머로 표시됩니다. 버그를 재현하는 동작을 평소처럼 보여주시면 됩니다.

녹화 완료 — 녹화를 멈추고 영상으로 마무리합니다.
취소 — 녹화를 버리고 처음으로 돌아갑니다.

화면 녹화라면 브라우저 위쪽의 공유 중지 막대를 눌러도 녹화가 마무리됩니다. 영상은 최대 길이 제한이 있어서, 그 시간에 닿으면 알아서 멈추니 시간을 재며 조마조마하지 않으셔도 됩니다.

화면에 그리기

녹화 중 펜으로 화면에 강조 표시

"여기 이 버튼이요", "이 영역이 깨져요" — 말로만 설명하기엔 애매한 부분, 녹화 화면 위에 직접 그려서 짚어 드릴 수 있습니다. 녹화가 시작되면 녹화 컨트롤 아래에 그리기 도구 모음이 나타납니다 — 색상, 펜·형광펜, 굵기를 고를 수 있어서 스크린샷 주석 편집기와 똑같은 느낌으로 그려집니다.

펜 또는 형광펜을 누르면 그리기가 켜지고, 마우스 커서가 십자 모양으로 바뀝니다. 이 상태에서 페이지를 누른 채 끌면 지나간 자리에 선이 그려집니다. 형광펜은 반투명하고 굵어서, 마커로 칠하듯 넓은 영역을 강조할 때 좋습니다.
색상은 빨강·노랑·초록·파랑·검정 다섯 가지, 굵기는 얇게·보통·굵게 중에서 고르시면 됩니다. 어렵지 않습니다.
그린 선은 그린 순서대로, 시작한 쪽부터 몇 초에 걸쳐 스르륵 사라지므로 따로 지울 필요가 없습니다. 강조하고 싶을 때마다 그때그때 그으시면 됩니다.
그리는 동안 페이지 클릭은 잠시 막히지만 스크롤은 그대로 됩니다. 다 그리셨으면 켜 두었던 펜/형광펜 버튼을 다시 누르거나 페이지에서 Esc 키를 눌러 그리기를 끄면, 페이지를 평소처럼 다룰 수 있습니다.

그린 선은 녹화 영상에 그대로 담겨서, 나중에 영상을 보는 팀원도 어디를 봐야 할지 한눈에 알 수 있습니다.

화면 녹화로 다른 창이나 모니터를 공유하고 있다면, 그리기는 BugShot을 연 탭 위에만 나타나므로 그 영상에는 담기지 않을 수 있습니다. 탭 위에 그린 내용을 남기고 싶으시면 그 탭을 공유해 주세요.

처리·산출

멈추면 영상이 MP4로 처리되고 썸네일이 만들어집니다. 처리가 끝나면 곧바로 자르기 화면이 떠서, 이슈 초안으로 넘어가기 전에 필요한 구간만 남길 수 있습니다.

구간 자르기

녹화 구간 자르기 화면

녹화를 멈추면 이슈 초안으로 바로 가지 않고 자르기 화면이 먼저 뜹니다. 버그가 난 건 보통 전체 녹화 중 잠깐이죠. 앞뒤의 필요 없는 부분을 잘라내면 리포트를 받는 팀원이 어디를 봐야 할지 헤매지 않습니다. 영상만 짧아지는 게 아니라 함께 첨부되는 로그도 같은 구간으로 좁혀집니다.

자르기 화면 위쪽에는 영상·콘솔·네트워크·액션 탭이 있습니다. 영상 탭에서는 가운데에 영상이 재생되고, 로그 탭으로 옮기면 같은 자리에 그 종류의 캡처된 로그가 펼쳐집니다(각 탭에는 잡힌 개수가 숫자로 붙어 있어요). 어느 탭에 있든 아래쪽 타임라인 손잡이와 되돌리기·확정 같은 버튼은 그대로 보이니, 로그를 보면서도 바로 자를 수 있습니다.

구간 고르기 — 타임라인 양쪽 끝의 시작 지점·끝 지점 손잡이를 끌어 남길 구간을 정합니다. 손잡이를 움직이면 아래 버튼 줄 가운데에 선택한 길이("8s / 42s")가 표시됩니다.
재생·일시정지 — 영상 탭에서 영상을 직접 돌려 보며 버그 지점을 찾습니다(로그 탭으로 넘어가면 재생은 잠시 멈춥니다). 타임라인에는 콘솔·네트워크에서 오류가 난 지점과 페이지가 바뀐 지점이 표시돼, 어디를 남길지 가늠하는 데 도움이 됩니다. 이 표시를 누르면 해당 로그 탭으로 바로 넘어갑니다.
잘릴 로그 미리 보기 — 손잡이를 움직이면, 잘려 나갈 로그가 로그 탭에서 흐릿하게 표시됩니다. 확정하기 전에 "이 로그가 빠지는구나"를 눈으로 확인할 수 있어요.
되돌리기·다시 실행 — 손잡이를 잘못 옮겼어도 걱정 마세요. 되돌리거나 다시 실행할 수 있습니다.

다 골랐으면 확정을 누르세요. 선택한 구간만 남도록 영상이 다시 만들어지고, 콘솔·네트워크·액션 로그도 그 구간에 맞춰 좁혀집니다(흐릿하게 표시됐던 로그가 그대로 빠집니다).

영상을 다시 만드는 동안에는 "영상을 자르는 중" 화면이 진행률과 함께 뜹니다. 이 화면은 작업이 끝날 때까지 닫히지 않으니 그대로 두고 잠깐만 기다려 주세요. 패널을 닫거나 다른 탭으로 넘어가면 작업이 잠시 멈췄다가, 돌아왔을 때 이어서 진행됩니다.

자를 게 없다면 손잡이를 건드리지 말고 그대로 확정을 누르시면 됩니다. 이때는 영상을 다시 만들지 않고 곧바로 이슈 초안으로 넘어가니 기다릴 일이 없습니다.

이 녹화를 아예 버리려면 녹화 폐기를 누르세요. "녹화를 폐기할까요?" 확인을 거치면 방금 찍은 영상과 함께 수집된 로그가 모두 삭제되고 처음 화면으로 돌아갑니다.

혹시 영상을 다시 만드는 데 실패하더라도 걱정하지 않으셔도 됩니다 — 그럴 땐 자르지 않은 원본 영상이 그대로 첨부된 채로 이슈 초안으로 넘어갑니다. 녹화가 사라지는 일은 없습니다.

이어지는 이슈 작성은 이슈 작성에서 안내해 드립니다.