캡처 방식

버그를 이미지로 담는 방법은 두 가지입니다. 화면에서 담을 부분을 직접 고르는 스크린샷과, 요소 하나를 클릭하면 그 요소만 잘라 주는 요소 캡처입니다. 어느 쪽이든 이후 흐름(주석 → 이슈 작성)은 똑같으니 편한 쪽으로 시작하시면 됩니다.

스크린샷

영역 드래그 선택

디버그 탭에서 스크린샷을 누르면 페이지에 십자선이 뜨고, 사이드패널 아래쪽에 캡처 방식 버튼 세 개가 나타납니다. 마우스를 올리면 각 버튼의 이름이 뜨니 눌러 보기 전에 확인하셔도 됩니다.

영역 캡처 — 처음 켜져 있는 방식입니다. 캡처할 부분을 마우스로 드래그해 선택합니다. 버그가 보이는 부분만 쏙 잘라낼 수 있어서, 받는 분이 어디를 봐야 할지 바로 알 수 있습니다.
화면 캡처 — 드래그 없이 지금 보이는 화면을 통째로 담습니다. 가장자리를 정확히 맞추려 애쓸 필요가 없습니다.
페이지 캡처 — 화면 밖으로 넘어간 아래쪽까지, 페이지를 스크롤하며 전부 이어 붙여 한 장으로 만듭니다.

페이지 캡처는 이렇게 동작합니다

페이지 캡처 진행 상태

페이지 캡처를 누르면 BugShot이 페이지를 조금씩 내리며 여러 번 찍어 한 장으로 이어 붙입니다. 그동안 사이드패널에는 진행률이 표시되고, 페이지 길이에 따라 몇 초 정도 걸릴 수 있습니다. 마음이 바뀌면 취소를 누르면 되고, 페이지는 원래 보던 위치로 되돌아가니 걱정하지 않으셔도 됩니다.

몇 가지만 알아 두시면 좋습니다.

고정된 헤더와 메뉴는 처음 나타난 곳에 한 번만 담기고 아래쪽에서는 숨겨집니다. 스크롤을 따라 붙는 메뉴도 이미 전부 담긴 뒤에만 숨기므로, 아직 보지 못한 내용이 빠질 걱정은 없습니다.
세로 방향만 이어 붙입니다. 가로로 넘치는 부분은 보이는 폭까지만 담깁니다.
무한 스크롤처럼 끝없이 길어지는 페이지는 일정 길이까지만 담고, "일부만 캡처했다"는 안내가 뜹니다.

캡처가 도는 동안에는 페이지의 클릭과 스크롤(마우스 휠)이 잠시 막힙니다. 페이지가 움직이면 이어 붙인 이미지가 어긋날 수 있어서예요. 캡처가 끝나면 바로 원래대로 돌아옵니다.

요소 캡처

요소 캡처 선택

디버그 탭에서 요소 캡처를 누르면 페이지 위에 십자선이 뜹니다. 캡처하고 싶은 요소에 마우스를 올리면 강조되고, 클릭하면 그 요소 영역만 깔끔하게 잘라 스크린샷으로 담아 줍니다. 버튼·카드처럼 경계가 또렷한 요소는 직접 드래그하는 것보다 빠르고 정확합니다.

요소 캡처는 스타일을 바꾸지 않습니다. 요소를 골라 before/after로 스타일을 비교하려면 요소 선택 & 스타일링을 이용하세요.

덤으로, 캡처한 요소의 DOM selector가 이슈의 재현 환경에 DOM 줄로 함께 기록됩니다. 받는 분이 화면 속 어떤 요소였는지 바로 알 수 있어요.

산출

영역 캡처·화면 캡처·요소 캡처는 지금 보이는 화면 그대로(뷰포트 기준), 페이지 캡처는 스크롤을 포함한 페이지 전체가 한 장의 이미지로 만들어집니다. 캡처가 끝나면 자연스럽게 주석 단계로 넘어갑니다.

주석을 그리는 방법은 어노테이션에서 이어집니다.